/*
Theme Name: Eleweb Blocks
Theme URI: https://www.eleweb.no
Author: Elemental Web
Author URI: https://www.eleweb.no
Description: Custom block theme for eleweb.no. Replaces Elementor; compatible with Crocoblock / JetEngine.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.11.8
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eleweb-blocks
*/

/* Design tokens live in theme.json. Keep this file for the header and small global fixes only. */

/* Footer wave (design system: Motifs → The wave). The band above the curve takes the page's
   `footer_color_for_wave` (set in inc/jetengine-compat.php); the curve is the footer colour. */
.eleweb-wave {
	display: block;
	width: 100%;
	height: clamp(40px, 6.67vw, 96px);
	background: var(--eleweb-footer-wave, var(--wp--preset--color--white));
	fill: var(--wp--preset--color--blue-gradient-dark);
}

/* Header, main content and footer sit flush: sections bring their own spacing, and the
   default block gap between them would show as white strips. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------------------
   Typography details theme.json can't express (design system: Typography).
   --------------------------------------------------------------------------------------- */

/* Headings wrap into even lines; large ones sit slightly tighter. */
h1,
h2,
h3,
.wp-block-post-title {
	text-wrap: balance;
}

h1,
h2,
.wp-block-post-title:is(h1, h2) {
	letter-spacing: -0.01em;
}

h1 {
	line-height: 1.1;
}

/* Running text: no single word alone on the last line; Norwegian hyphenation for long
   compounds (needs lang="nb-NO", set in inc/setup.php). */
p,
li {
	text-wrap: pretty;
}

.wp-block-post-content p,
.wp-block-post-excerpt__excerpt,
.eleweb-section p {
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Every link gets a visible keyboard focus ring in its own colour. */
a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Footer links: calm by default, underlined on hover/focus. They sit in short lists, so
   they're recognisable as links without the underline. Padding gives a ≥24px tap target. */
.eleweb-footer a {
	display: inline-block;
	padding-block: 4px;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------------------
   Header and navigation (desktop, tablet, phone)
   --------------------------------------------------------------------------------------- */

/* Menu links: 44px tall tap targets. */
header .wp-block-navigation-item__content {
	padding-block: 12px;
}

/* Hamburger and close buttons: 44×44 tap area around the 24px icon. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	box-sizing: content-box;
	padding: 10px;
}

/* Phone: logo, "Ta kontakt" and the menu button on one row (the button group comes
   first in the markup, so it's moved after the CTA here). */
@media (max-width: 599px) {
	header .wp-block-group.alignwide {
		flex-wrap: nowrap;
	}

	header .eleweb-logo img {
		width: 140px !important;
	}

	header .wp-block-group.alignwide > .wp-block-group {
		flex-wrap: nowrap;
		gap: 4px;
	}

	header .wp-block-group.alignwide > .wp-block-group > .wp-block-buttons {
		order: -1;
	}

	header .wp-block-buttons .wp-block-button__link {
		padding: 10px 14px;
		white-space: nowrap;
	}
}

/* Small phones (320–360px): a smaller logo keeps the row from overflowing. */
@media (max-width: 360px) {
	header .eleweb-logo img {
		width: 116px !important;
	}
}

/* Open mobile menu: full screen, dark, large left-aligned links. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--blue-gradient-dark) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #ffffff1f;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 16px;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--peach) !important;
}

.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white);
}

/* "Kontakt" only inside the open mobile menu (on desktop the "Ta kontakt" button is next to
   the menu; on phones the open menu covers that button). */
.wp-block-navigation__responsive-container:not(.is-menu-open) .eleweb-nav-mobile-only {
	display: none;
}

/* Services grid: 4 columns, 2 on tablets, 1 on phones (never 3 + 1 alone). */
.wp-block-post-template.eleweb-services-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
	.wp-block-post-template.eleweb-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.wp-block-post-template.eleweb-services-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* "Andre tjenester" on a service page shows the other three: one row of three, one column
   on phones. */
.wp-block-post-template.eleweb-services-grid.eleweb-services-grid--others {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 600px) {
	.wp-block-post-template.eleweb-services-grid.eleweb-services-grid--others {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Cards in a row are equally tall; "Les mer" sits at the bottom of each so the links line up. */
.eleweb-services-grid > li > .is-style-card {
	height: 100%;
}

.eleweb-services-grid .wp-block-read-more {
	margin-top: auto;
}

/* Process thread (design system: Patterns → Process thread). Steps along one line on a dark
   section, each with two lanes: what people do (peach) and what AI does (light blue). The
   line runs from peach into light blue. Where the browser supports scroll-driven animation,
   the line draws itself as you scroll and each step lights up as it comes into view;
   otherwise (and with reduced motion) everything is simply shown.

   Markup: .eleweb-thread > .eleweb-thread__step > .eleweb-thread__num, h3,
   .eleweb-thread__lane.is-people, .eleweb-thread__lane.is-ai (each lane: a label p, then text). */
.eleweb-thread {
	--eleweb-thread-node: 48px;
	--eleweb-thread-people: var(--wp--preset--color--peach);
	--eleweb-thread-ai: var(--wp--preset--color--light-blue);
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

/* The line: a faint track, and the coloured line on top that draws itself. */
.eleweb-thread::before,
.eleweb-thread::after {
	content: "";
	position: absolute;
	top: calc(var(--eleweb-thread-node) / 2);
	bottom: calc(var(--eleweb-thread-node) / 2);
	left: calc(var(--eleweb-thread-node) / 2 - 1px);
	width: 2px;
	border-radius: 1px;
}

.eleweb-thread::before {
	background: color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
}

.eleweb-thread::after {
	background: linear-gradient(to bottom, var(--eleweb-thread-people), var(--eleweb-thread-ai));
	box-shadow: 0 0 12px color-mix(in srgb, var(--eleweb-thread-ai) 55%, transparent);
	transform-origin: top;
}

.wp-block-group.eleweb-thread__step {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: var(--eleweb-thread-node) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"num title title"
		". people ai";
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	align-items: start;
}

.eleweb-thread__step > * {
	margin: 0;
}

/* Step number in a node on the line. */
.eleweb-thread .eleweb-thread__num {
	grid-area: num;
	display: grid;
	place-items: center;
	width: var(--eleweb-thread-node);
	height: var(--eleweb-thread-node);
	border: 2px solid var(--eleweb-thread-people);
	border-radius: 50%;
	background: var(--wp--preset--color--blue-gradient-dark);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 0 0 6px var(--wp--preset--color--blue-gradient-dark), 0 0 20px color-mix(in srgb, var(--eleweb-thread-people) 45%, transparent);
}

.eleweb-thread__step:last-child .eleweb-thread__num {
	border-color: var(--eleweb-thread-ai);
	box-shadow: 0 0 0 6px var(--wp--preset--color--blue-gradient-dark), 0 0 20px color-mix(in srgb, var(--eleweb-thread-ai) 45%, transparent);
}

.eleweb-thread__step h3 {
	grid-area: title;
	align-self: center;
	margin: 0;
}

.eleweb-thread__step h3 a {
	color: inherit;
	text-decoration: none;
}

.eleweb-thread__step h3 a:hover,
.eleweb-thread__step h3 a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.eleweb-thread__lane.is-people {
	grid-area: people;
}

.eleweb-thread__lane.is-ai {
	grid-area: ai;
}

.wp-block-group.eleweb-thread__lane {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 2px solid var(--eleweb-thread-people);
	box-sizing: border-box;
}

.wp-block-group.eleweb-thread__lane.is-ai {
	border: 1px solid color-mix(in srgb, var(--eleweb-thread-ai) 30%, transparent);
	border-left: 2px solid var(--eleweb-thread-ai);
	border-radius: 0 10px 10px 0;
	background: color-mix(in srgb, var(--eleweb-thread-ai) 7%, transparent);
}

.eleweb-thread__lane > * {
	margin: 0;
}

.eleweb-thread__lane .eleweb-thread__label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	color: var(--eleweb-thread-people);
}

.eleweb-thread__lane.is-ai .eleweb-thread__label {
	color: var(--eleweb-thread-ai);
	text-shadow: 0 0 12px color-mix(in srgb, var(--eleweb-thread-ai) 60%, transparent);
}

/* Phones and narrow tablets: the lanes stack under the step title. */
@media (max-width: 781px) {
	.eleweb-thread {
		--eleweb-thread-node: 40px;
		gap: var(--wp--preset--spacing--40);
	}

	.wp-block-group.eleweb-thread__lane {
		padding: 12px var(--wp--preset--spacing--30);
	}

	.wp-block-group.eleweb-thread__step {
		grid-template-columns: var(--eleweb-thread-node) minmax(0, 1fr);
		grid-template-areas:
			"num title"
			". people"
			". ai";
		column-gap: var(--wp--preset--spacing--30);
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.eleweb-thread::after {
			animation: eleweb-thread-draw linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 75%;
		}

		.wp-block-group.eleweb-thread__step {
			animation: eleweb-thread-step linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 70%;
		}
	}
}

@keyframes eleweb-thread-draw {
	from {
		transform: scaleY(0);
	}
}

@keyframes eleweb-thread-step {
	from {
		opacity: 0.15;
		transform: translateY(24px);
	}
}

/* Hero intro text: readable line length when the hero columns stack. */
.eleweb-hero__inner .wp-block-column > p {
	max-width: 36em;
}

.eleweb-footer a:hover,
.eleweb-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------------------
   Layout system (design system: Layout and spacing → Section rhythm).
   Templates and patterns use these classes instead of per-block padding, so every page
   has the same rhythm. `.wp-block-group.` raises specificity above WordPress's generic
   layout rules (e.g. has-global-padding). Spacing values are the theme.json presets.
   --------------------------------------------------------------------------------------- */

/* Full-width content section: 96px top/bottom (fluid down to 56px), gutter at the sides.
   Content width comes from the block's own constrained layout (usually 1200px). */
.wp-block-group.eleweb-section {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--30);
}

/* Two white sections in a row read as one: the second doesn't add its own top spacing. */
.wp-block-group.eleweb-section:not([class*="is-style-section"]) + .wp-block-group.eleweb-section:not([class*="is-style-section"]) {
	padding-top: 0;
}

/* Dark hero at the top of a page: same top spacing everywhere; the wave closes it. */
.wp-block-group.eleweb-hero {
	padding: var(--wp--preset--spacing--70) 0 0;
}

.wp-block-group.eleweb-hero__inner {
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
}

/* The section right after a hero starts closer: the wave already adds space. */
.wp-block-group.eleweb-hero + .wp-block-group.eleweb-section {
	padding-top: var(--wp--preset--spacing--60);
}

/* Plain pages (page.html, 404, search, archives). */
.wp-block-group.eleweb-page {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--30) var(--wp--preset--spacing--80);
}

/* Footer: brand column plus three equal columns over the full content width;
   2 columns on tablets, 1 on phones. */
.wp-block-group.eleweb-footer {
	padding: 0 0 var(--wp--preset--spacing--50);
}

.wp-block-group.eleweb-footer__inner {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30) 0;
}

/* The group's flow layout adds a top margin to every child after the first; in a grid that
   pushed columns 2–4 down. */
.eleweb-footer .eleweb-footer-grid > * {
	margin-block: 0;
}

.eleweb-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

/* Brand column: the tagline wraps to the logo's width instead of running far past it. */
/* The paragraph doesn't count towards the column's width (width: 0), so the logo sets it;
   min-width then stretches it to that width. */
.eleweb-footer__brand {
	width: fit-content;
}

.eleweb-footer__brand p {
	width: 0;
	min-width: 100%;
	text-wrap: balance;
}

@media (max-width: 900px) {
	.eleweb-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: the brand on its own row, the link columns two by two. */
@media (max-width: 480px) {
	.eleweb-footer-grid > .eleweb-footer__brand {
		grid-column: 1 / -1;
	}
}

/* When a page ends with a light-grey section (e.g. the contact pattern), the band above the
   footer wave takes that colour too, unless the page sets its own `footer_color_for_wave`. */
main:has(> .is-style-section-muted:last-child, > .wp-block-post-content > .is-style-section-muted:last-child) ~ footer .eleweb-wave {
	background: var(--eleweb-footer-wave, var(--wp--preset--color--light-grey-background));
}

/* Same for a page that ends with a dark section. */
main:has(> .is-style-section-dark:last-child, > .wp-block-post-content > .is-style-section-dark:last-child) ~ footer .eleweb-wave {
	background: var(--eleweb-footer-wave, var(--wp--preset--color--blue-gradient-light));
}

/* Wave at the bottom of a dark section, curving into the light content below. */
.eleweb-wave--to-light {
	background: transparent;
	fill: var(--wp--preset--color--white);
}

/* Screenshot shown in a browser window. */
.eleweb-browser img {
	display: block;
	width: 100%;
	height: auto;
	border-top: 24px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	box-shadow: 0 24px 60px -20px #000000b3;
}

/* Portfolio page: the full-page capture scrolls inside a browser window of fixed height.
   The bar is the top border; its dots are a background that stays put while the content
   scrolls (background-attachment: scroll paints relative to the frame, not its content). */
.eleweb-browser--scroll {
	max-height: min(75vh, 760px);
	overflow-y: auto;
	border-top: 24px solid transparent;
	border-radius: 10px;
	--eleweb-dot: radial-gradient(circle, var(--wp--preset--color--paragraph-light) 3px, transparent 3.5px);
	background:
		var(--eleweb-dot) 8px 0 / 12px 24px no-repeat border-box,
		var(--eleweb-dot) 20px 0 / 12px 24px no-repeat border-box,
		var(--eleweb-dot) 32px 0 / 12px 24px no-repeat border-box,
		var(--wp--preset--color--primary);
	background-clip: border-box;
	box-shadow: 0 24px 60px -20px #000000b3;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--text) var(--wp--preset--color--primary);
}

.eleweb-browser--scroll img {
	border-top: 0;
	border-radius: 0;
	box-shadow: none;
}

.eleweb-browser--scroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.eleweb-browser--scroll {
		max-height: 60vh;
	}
}

/* Long full-page captures: show the top of the page only. */
.eleweb-browser--crop img {
	aspect-ratio: 16 / 11;
	object-fit: cover;
	object-position: top;
}

/* Portfolio card (design system: Effects → Scrolling screenshot). The project's full-page
   capture sits in a browser frame; on hover it scrolls from the top of the client's page to
   the bottom, and the card lifts. The whole card is one link (the project title's link is
   stretched over it). */
.eleweb-project {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.eleweb-project:hover,
.eleweb-project:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -24px #03011873;
}

.eleweb-project:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.eleweb-shot {
	position: relative;
	flex-shrink: 0;
	margin: 0;
	padding-top: 22px;
	background: var(--wp--preset--color--primary);
	aspect-ratio: 16 / 11;
	overflow: hidden;
}

/* Browser window dots. */
.eleweb-shot::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 12px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--paragraph-light);
	box-shadow: 10px 0 var(--wp--preset--color--paragraph-light), 20px 0 var(--wp--preset--color--paragraph-light);
}

.eleweb-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: object-position 6s ease-in-out;
}

.eleweb-project:hover .eleweb-shot img,
.eleweb-project:focus-within .eleweb-shot img {
	object-position: bottom;
	transition-duration: 8s;
}

.eleweb-project .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.eleweb-project:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent-deep);
}

.eleweb-project .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.eleweb-project .wp-block-post-title a:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.eleweb-project,
	.eleweb-shot img {
		transition: none;
	}

	.eleweb-project:hover,
	.eleweb-project:focus-within {
		transform: none;
	}

	.eleweb-project:hover .eleweb-shot img,
	.eleweb-project:focus-within .eleweb-shot img {
		object-position: top;
	}
}

/* "Andre prosjekter" on project pages: the project cards in one row that scrolls sideways
   with scroll snap (swipe on touch screens; the carousel controls under the row come from
   assets/js/carousel.js). Three cards on desktop, two on tablets and one on phones, each time
   with part of the next card showing so it's clear the row continues. */
.eleweb-carousel-head > * {
	margin-block: 0;
}

.wp-block-post-template.eleweb-project-track {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	/* Room for the cards' hover lift and shadow inside the scroll area. */
	margin: calc(-1 * var(--wp--preset--spacing--40)) 0 0;
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.eleweb-project-track::-webkit-scrollbar {
	display: none;
}

.eleweb-project-track > li {
	flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--40)) / 3.15);
	margin: 0;
	scroll-snap-align: start;
}

@media (max-width: 900px) {
	.eleweb-project-track > li {
		flex-basis: calc((100% - var(--wp--preset--spacing--40)) / 2.2);
	}
}

@media (max-width: 600px) {
	.eleweb-project-track > li {
		flex-basis: 82%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.eleweb-project-track {
		scroll-behavior: smooth;
	}
}

/* JetFormBuilder forms, styled with the theme tokens. Field borders use `text` (#7a7a7a,
   4.29:1 on white) so inputs meet the 3:1 non-text contrast minimum. */
form.jet-form-builder {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* One field per row: label above the input, both as wide as the form column. */
form.jet-form-builder .jet-form-builder-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}

form.jet-form-builder .jet-form-builder__label,
form.jet-form-builder .jet-form-builder__field-wrap {
	flex: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Checkbox with its text on one line. */
form.jet-form-builder .checkradio-wrap,
form.jet-form-builder .jet-form-builder__field-wrap label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.jet-form-builder .jet-form-builder__label-text {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--black);
}

.jet-form-builder .jet-form-builder__required {
	color: var(--wp--preset--color--accent);
}

.jet-form-builder input[type="text"],
.jet-form-builder input[type="email"],
.jet-form-builder input[type="tel"],
.jet-form-builder textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid var(--wp--preset--color--text);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.jet-form-builder textarea {
	min-height: 140px;
	resize: vertical;
}

.jet-form-builder input:focus-visible,
.jet-form-builder textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

.jet-form-builder input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--wp--preset--color--accent);
}

/* JetFormBuilder draws its own checkbox (span::before); keep it level with the first line
   of a long consent text instead of centred against all of it. */
.jet-form-builder .for-checkbox > span {
	align-items: flex-start;
}

.jet-form-builder .for-checkbox > span::before {
	flex: none;
	margin-top: 0.2em;
}

.jet-form-builder .jet-form-builder__field-label {
	font-size: var(--wp--preset--font-size--caption);
}

/* Submit = the lit button. */
.jet-form-builder .jet-form-builder__action-button {
	padding: 14px 24px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-deep));
	box-shadow: var(--wp--preset--shadow--shadow-button);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}

.jet-form-builder .jet-form-builder__action-button:hover {
	box-shadow: var(--wp--preset--shadow--shadow-button-hover);
	transform: translateY(-1px);
}

.jet-form-builder .jet-form-builder__action-button:active {
	background: var(--wp--preset--color--accent-deep);
	box-shadow: var(--wp--preset--shadow--shadow-button-pressed);
	transform: none;
}

.jet-form-builder .jet-form-builder__action-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.jet-form-builder-messages-wrap > div {
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--wp--preset--color--light-grey-background);
	color: var(--wp--preset--color--black);
}

@media (prefers-reduced-motion: reduce) {
	.jet-form-builder .jet-form-builder__action-button {
		transition: none;
	}

	.jet-form-builder .jet-form-builder__action-button:hover {
		transform: none;
	}
}

/* Photo credit under a portfolio screenshot; hidden when the field is empty. */
.eleweb-photo-credit::before {
	content: "Foto: ";
}

.eleweb-photo-credit:empty {
	display: none;
}

/* Client quote (portfolio field group "Kundesitat"): the quote in Norwegian quotation marks
   (the opening mark hangs in the margin, both in the accent colour), then a portrait, name,
   role and, on the front page, a link to the project. Long quotes (`is-long`, set in PHP)
   get smaller type so they stay a comfortable read. */
.wp-block-group.eleweb-testimonial {
	max-width: 44rem;
	gap: var(--wp--preset--spacing--50);
}

.wp-block-quote.eleweb-testimonial__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.eleweb-testimonial__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--black);
	text-indent: -0.55em;
	text-wrap: pretty;
	hyphens: manual;
}

.eleweb-testimonial.is-long .eleweb-testimonial__quote p {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	letter-spacing: 0;
	text-indent: -0.5em;
}

/* Phones: no hanging quotation mark, it would touch the screen edge. */
@media (max-width: 600px) {
	.eleweb-testimonial .eleweb-testimonial__quote p {
		text-indent: 0;
	}
}

.eleweb-testimonial__quote p::before,
.eleweb-testimonial__quote p::after {
	color: var(--wp--preset--color--accent);
}

.eleweb-testimonial__quote p::before {
	content: "«";
}

.eleweb-testimonial__quote p::after {
	content: "»";
}

.eleweb-testimonial__photo {
	flex: none;
	margin: 0;
}

.eleweb-testimonial__photo img {
	border-radius: 50%;
}

.eleweb-testimonial .eleweb-testimonial__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--black);
}

.eleweb-testimonial .eleweb-testimonial__role,
.eleweb-testimonial .eleweb-testimonial__project {
	margin: 0;
	line-height: 1.4;
}

.eleweb-testimonial .eleweb-testimonial__role {
	color: var(--wp--preset--color--paragraph-dark);
}

.eleweb-testimonial__project a {
	font-weight: 500;
	text-decoration: none;
}

.eleweb-testimonial__project a:hover,
.eleweb-testimonial__project a:focus-visible {
	text-decoration: underline;
}

/* Project page: a hairline and space set the quote apart from the screenshot above. */
.single-portfolio .eleweb-testimonial {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--primary);
}

/* Front page: without JavaScript every quote is listed. With it (is-carousel, see
   assets/js/quote-carousel.js) the quotes share one grid cell, so the section is as tall as
   the longest quote and nothing jumps when they change; shorter quotes sit centred in it. */
.eleweb-quote-query .wp-block-post-template {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.eleweb-quote-section.is-carousel .wp-block-post-template > li {
	grid-area: 1 / 1;
	align-self: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.eleweb-quote-section.is-carousel .wp-block-post-template > li.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* Words settle into place one after another, then the attribution follows. */
.eleweb-word {
	display: inline-block;
	text-indent: 0;
}

.is-carousel li.is-active .eleweb-word {
	animation: eleweb-word-in 450ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(min(var(--i), 40) * 10ms);
}

.is-carousel li.is-active .eleweb-testimonial__by {
	animation: eleweb-fade-up 450ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--eleweb-quote-words, 0) * 10ms + 100ms);
}

@keyframes eleweb-word-in {
	from {
		opacity: 0;
		transform: translateY(0.4em);
		filter: blur(4px);
	}
}

@keyframes eleweb-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* Carousel controls (design system: Carousel), shared by the quotes and the project row:
   previous, dots, next, pause. The active dot stretches into a progress bar that fills for
   the item's time (`--eleweb-carousel-time`); when it's full, the next item shows. The bar
   pauses on hover, on keyboard focus, off-screen (`is-offscreen`) and with the pause button
   (`is-paused`). No autoplay with reduced motion (no `is-autoplay`). */
.eleweb-carousel__controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--50);
}

.eleweb-carousel__controls[hidden] {
	display: none;
}

.eleweb-quote-section .eleweb-carousel__controls {
	max-width: 44rem;
}

.eleweb-project-carousel .eleweb-carousel__controls {
	margin-block-start: 0;
}

.eleweb-carousel__btn {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease;
}

.eleweb-carousel__btn:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-deep);
}

.eleweb-carousel__btn:focus-visible,
.eleweb-carousel__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.eleweb-carousel__pause {
	margin-inline-start: auto;
}

.eleweb-carousel__dots {
	display: flex;
	align-items: center;
	min-width: 0;
}

.eleweb-carousel__dot {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width 300ms ease;
}

.eleweb-carousel__dot.is-active {
	width: 52px;
}

.eleweb-carousel__bar {
	display: block;
	width: 8px;
	height: 8px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--wp--preset--color--primary);
	transition: width 300ms ease;
}

.eleweb-carousel__dot.is-active .eleweb-carousel__bar {
	width: 40px;
}

.eleweb-carousel__bar::after {
	content: "";
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
}

.eleweb-carousel__dot.is-active .eleweb-carousel__bar::after {
	transform: scaleX(1);
}

[data-eleweb-carousel].is-autoplay .eleweb-carousel__dot.is-active .eleweb-carousel__bar::after {
	animation: eleweb-progress var(--eleweb-carousel-time, 6s) linear both;
}

[data-eleweb-carousel]:is(:hover, .is-paused, .is-offscreen, :has(:focus-visible)) .eleweb-carousel__bar::after {
	animation-play-state: paused;
}

@keyframes eleweb-progress {
	from {
		transform: scaleX(0);
	}
}

/* Phones: narrower dots, so a row of 13 projects still fits next to the buttons. The
   buttons are the full-size way to move; the dots are a shortcut. */
@media (max-width: 600px) {
	.eleweb-carousel__dot {
		width: 12px;
	}

	.eleweb-carousel__dot.is-active {
		width: 32px;
	}

	.eleweb-carousel__bar {
		width: 6px;
		height: 6px;
	}

	.eleweb-carousel__dot.is-active .eleweb-carousel__bar {
		width: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eleweb-quote-section.is-carousel .wp-block-post-template > li,
	.eleweb-carousel__dot,
	.eleweb-carousel__bar {
		transition: none;
	}

	.is-carousel li.is-active .eleweb-word,
	.is-carousel li.is-active .eleweb-testimonial__by {
		animation: none;
	}
}

/* Secondary (outline) buttons stay flat, so the lit button keeps its weight. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--accent);
	/* Same outer size as the lit button (14px 24px padding), minus the 1px border. */
	padding: 13px 23px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent-deep);
	transform: none;
}

.is-style-section-dark .wp-block-button.is-style-outline > .wp-block-button__link,
.is-style-section-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--white);
}

/* Intro text under a page title: readable line length. The block itself keeps the full
   content width (WordPress centres narrower blocks); only the paragraph inside is limited. */
.eleweb-lead > p,
.eleweb-lead .wp-block-post-excerpt__excerpt {
	max-width: 40em;
	margin-inline: 0;
}

/* Small uppercase label above headings and footer columns. */
.eleweb-eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eleweb-logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Lit button motion (design system: Effects → Lit button). theme.json can't express transitions or transforms. */
.wp-element-button,
.wp-block-button__link {
	transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}