/* =========================================================================================
   Utopia — theme.css
   Ergänzt theme.json um alles, was Design-Tokens allein nicht können: Motion-Klassen, Header-
   Sticky-Verhalten, Karten-Grids, Timeline, Tier-Table-Scroll-Snap, Donut-Legende, Sprachpille,
   Formular-Feinschliff. Reihenfolge folgt PATTERNS.md 1→20.
   ========================================================================================= */

/* -----------------------------------------------------------------------------------------
   0. Basis / Fokus / Reduced motion
   ----------------------------------------------------------------------------------------- */
:where(a) {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var( --wp--custom--shadow--focus );
	border-radius: var( --wp--custom--radius--sm );
}

.has-ink-background-color :focus-visible,
.has-bg-dark-background-color :focus-visible,
.site-footer :focus-visible {
	box-shadow: var( --wp--custom--shadow--focus-dark ) !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* Fließtext-Links: Farbe allein reicht bei brand nicht (nur ~3.4:1) — immer Underline-Reveal statt
   reiner text-decoration, sauberer bei Fraunces-Kursiv. */
.wp-block-post-content a:not(.wp-element-button),
.entry-content a:not(.wp-element-button) {
	background-image: linear-gradient( currentColor, currentColor );
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	text-decoration: none;
	transition: background-size 220ms ease-out;
}
@media ( hover: hover ) {
	.wp-block-post-content a:not(.wp-element-button):hover {
		background-size: 100% 1px;
	}
}

/* -----------------------------------------------------------------------------------------
   1. Motion system
   ----------------------------------------------------------------------------------------- */
.u-reveal,
.u-reveal-up {
	opacity: 0;
	transition: opacity 600ms cubic-bezier( 0.2, 0.7, 0.2, 1 ), transform 600ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
	transition-delay: var( --u-delay, 0ms );
}
.u-reveal {
	transform: translateY( 8px );
}
.u-reveal-up {
	transform: translateY( 24px );
	transition-duration: 700ms;
}
.u-reveal.is-visible,
.u-reveal-up.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.u-count {
	font-variant-numeric: tabular-nums;
}

.u-parallax-soft {
	will-change: transform;
}

.u-draw-lines {
	stroke-dasharray: 3000;
	stroke-dashoffset: 3000;
	animation: utopia-draw-lines 1600ms ease-out forwards;
}
@keyframes utopia-draw-lines {
	to {
		stroke-dashoffset: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.u-reveal,
	.u-reveal-up {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.u-draw-lines {
		animation: none !important;
		stroke-dashoffset: 0 !important;
	}
	.u-parallax-soft {
		transform: none !important;
	}
}

html.no-js .u-reveal,
html.no-js .u-reveal-up {
	opacity: 1;
	transform: none;
}

/* -----------------------------------------------------------------------------------------
   2. Header
   ----------------------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	transition: background-color 250ms ease-out, box-shadow 250ms ease-out, backdrop-filter 250ms ease-out;
}
.site-header.is-scrolled {
	background-color: rgba( 255, 255, 255, 0.86 );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	box-shadow: var( --wp--custom--shadow--sm );
}
.site-header__brand {
	align-items: center;
	gap: 10px;
}
.site-header__brand img {
	transition: width 250ms ease-out, height 250ms ease-out;
}
.site-header__title a {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	font-size: 1.25rem;
	color: var( --wp--preset--color--text );
	text-decoration: none;
	background-image: none !important;
}
.site-header__nav {
	flex: 1 1 auto;
}
.site-header__nav .wp-block-navigation-item > a,
.site-header__nav .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	padding: 10px 12px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var( --wp--preset--color--text );
	text-decoration: none;
	background-image: none;
}
.site-header__actions {
	gap: 16px;
	align-items: center;
}
.site-header__cta .wp-block-button__link {
	min-height: 44px;
	white-space: nowrap;
}

/* Mobil-Overlay: große Tap-Flächen, Sprache + CTA am unteren Rand */
@media ( max-width: 782px ) {
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		background: var( --wp--preset--color--bg );
	}
	.site-header__nav .wp-block-navigation-item > a {
		font-size: var( --wp--preset--font-size--heading-sm );
	}
	.site-header .site-header__actions {
		display: none;
	}
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__actions,
	.wp-block-navigation__responsive-container-content .site-header__actions {
		display: flex;
	}
}

/* Sprachumschalter-Pille */
.lang-switch {
	display: inline-flex;
	padding: 3px;
	border-radius: var( --wp--custom--radius--pill );
	background: var( --wp--preset--color--surface-alt );
	gap: 2px;
}
.lang-switch__pill,
.lang-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 32px;
	padding: 4px 12px;
	border-radius: var( --wp--custom--radius--pill );
	font-size: var( --wp--preset--font-size--body-sm );
	font-weight: 600;
	color: var( --wp--preset--color--muted );
	text-decoration: none;
	background-image: none;
}
.lang-switch__pill.is-active,
.lang-switch a.is-active,
.lang-switch a[aria-current="true"] {
	background: var( --wp--preset--color--brand );
	color: #fff;
}

/* -----------------------------------------------------------------------------------------
   3. Hero (utopia/hero)
   ----------------------------------------------------------------------------------------- */
.utopia-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.utopia-hero.is-height-full {
	min-height: 560px;
}
.utopia-hero.is-height-full .wp-block-cover__inner-container {
	min-height: inherit;
}
.utopia-hero.is-height-full {
	min-height: 82vh;
}
.utopia-hero.is-height-compact {
	min-height: 360px;
}
.utopia-hero.is-height-compact {
	min-height: 45vh;
}
@media ( max-width: 782px ) {
	.utopia-hero,
	.utopia-hero.is-height-full,
	.utopia-hero.is-height-compact {
		min-height: auto;
		padding-top: var( --wp--custom--spacing--section-compact );
		padding-bottom: var( --wp--custom--spacing--section-compact );
	}
}
.utopia-hero__lineart {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.22;
	color: var( --wp--preset--color--brand-dark );
	z-index: 0;
}
.utopia-hero.is-bg-light .utopia-hero__lineart {
	color: var( --wp--preset--color--brand );
	opacity: 0.14;
}
@media ( max-width: 782px ) {
	.utopia-hero__lineart {
		opacity: 0.12;
	}
}
.utopia-hero__content {
	position: relative;
	z-index: 1;
}
.utopia-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: var( --wp--custom--radius--pill );
	background: var( --wp--preset--color--brand-tint );
	color: var( --wp--preset--color--brand-hover );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.utopia-hero.is-bg-ink .utopia-hero__eyebrow {
	background: var( --wp--preset--color--ink-surface );
	color: var( --wp--preset--color--brand-dark );
}
.utopia-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: 10px;
	padding: 4px 12px;
	border-radius: var( --wp--custom--radius--pill );
	border: 1px solid var( --wp--preset--color--gold );
	color: var( --wp--preset--color--gold );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
}
.utopia-hero__title {
	margin-block: var( --wp--preset--spacing--sm ) var( --wp--preset--spacing--md );
}
.utopia-hero__title span {
	display: inline-block;
}
.utopia-hero__cta .wp-block-button.is-style-fill .wp-block-button__link {
	animation: utopia-cta-pop 200ms cubic-bezier( 0.2, 0.7, 0.2, 1 ) 480ms both;
}
@keyframes utopia-cta-pop {
	from {
		transform: scale( 0.97 );
	}
	to {
		transform: scale( 1 );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.utopia-hero__cta .wp-block-button.is-style-fill .wp-block-button__link {
		animation: none;
	}
}

/* Button style variant: ghost (secondary CTA on dark backgrounds) */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var( --wp--preset--color--text-dark );
	border: 1px solid var( --wp--preset--color--ink-border );
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var( --wp--preset--color--ink-surface );
}

/* -----------------------------------------------------------------------------------------
   4. section-intro — nothing extra, alignment handled by layout.contentSize
   ----------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------
   5. feature-grid / project-org-grid / team-grid — shared card system
   ----------------------------------------------------------------------------------------- */
.u-card,
.wp-block-group.is-style-card {
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--md );
	padding: var( --wp--preset--spacing--lg );
	height: 100%;
}
@media ( hover: hover ) {
	.u-card,
	.wp-block-group.is-style-card {
		transition: transform 200ms ease-out, box-shadow 200ms ease-out;
	}
	.u-card:hover,
	.wp-block-group.is-style-card:hover {
		transform: translateY( -4px );
		box-shadow: var( --wp--custom--shadow--md );
	}
}
.u-card__icon {
	width: 44px;
	height: 44px;
	color: var( --wp--preset--color--brand );
	margin-bottom: var( --wp--preset--spacing--sm );
}
.utopia-feature-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--md );
	align-items: stretch;
}
.utopia-feature-grid > * {
	flex: 1 1 280px;
}
.utopia-feature-grid.cols-5 > * {
	flex-basis: calc( 33.333% - var( --wp--preset--spacing--md ) );
}
@media ( max-width: 900px ) {
	.utopia-feature-grid.cols-5 > * {
		flex-basis: calc( 50% - var( --wp--preset--spacing--md ) );
	}
}
@media ( max-width: 600px ) {
	.utopia-feature-grid > * {
		flex-basis: 100%;
	}
	.utopia-feature-grid .u-card {
		display: flex;
		align-items: center;
		gap: var( --wp--preset--spacing--sm );
	}
	.utopia-feature-grid .u-card__icon {
		margin-bottom: 0;
		flex-shrink: 0;
	}
}

.utopia-org-grid,
.utopia-team-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--md );
}
.utopia-org-grid > * {
	flex: 1 1 280px;
}
.utopia-org-grid .u-card {
	/* Bewusst CSS-Grid statt flex-direction:row: mit flex wurden figure/h3/p/.wp-block-buttons als
	   VIER gleichrangige Row-Items behandelt, die sich die Kartenbreite teilen -- der Button-Block
	   bekam dabei oft nur ~55px und sein Text ("Zur Plattform ↗") brach dadurch über viele Zeilen,
	   was optisch wie vertikal gedrehter Text aussah (am 20.09. beim ersten Abnahme-Screenshot der
	   Startseite gefunden). Grid platziert das Bild in Spalte 1 über alle Zeilen, Überschrift/Text/
	   Button automatisch untereinander in Spalte 2. */
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: var( --wp--preset--spacing--sm );
}
.utopia-org-grid .u-card > figure {
	grid-column: 1;
	grid-row: 1 / -1;
}
.utopia-org-grid .u-card > h3,
.utopia-org-grid .u-card > p,
.utopia-org-grid .u-card > .wp-block-buttons {
	grid-column: 2;
}
.utopia-org-grid .u-card img {
	height: 64px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	filter: grayscale( 1 );
	transition: filter 200ms ease-out;
}
@media ( hover: hover ) {
	.utopia-org-grid .u-card:hover img,
	.utopia-org-grid .u-card:focus-within img {
		filter: grayscale( 0 );
	}
}
@media ( max-width: 600px ) {
	.utopia-org-grid .u-card img {
		filter: grayscale( 0 );
	}
}

.utopia-team-grid > * {
	flex: 1 1 200px;
	max-width: calc( 25% - var( --wp--preset--spacing--md ) * 3 / 4 );
	text-align: center;
}
.utopia-team-grid.is-advisors > * {
	max-width: calc( 33.333% - var( --wp--preset--spacing--md ) * 2 / 3 );
}
.utopia-team-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var( --wp--custom--radius--md );
	filter: grayscale( 1 );
	transition: filter 250ms ease-out;
}
.utopia-team-grid.is-advisors img {
	max-width: 80%;
	margin-inline: auto;
}
@media ( hover: hover ) {
	.utopia-team-grid a:hover img,
	.utopia-team-grid a:focus-visible img {
		filter: grayscale( 0 );
	}
}
@media ( max-width: 600px ) {
	.utopia-team-grid img {
		filter: grayscale( 0 );
	}
	.utopia-team-grid > * {
		max-width: calc( 50% - var( --wp--preset--spacing--md ) / 2 );
	}
	.utopia-team-grid.is-advisors > * {
		max-width: 100%;
	}
}

/* -----------------------------------------------------------------------------------------
   6. stats
   ----------------------------------------------------------------------------------------- */
.utopia-stats {
	max-width: var( --wp--custom--layout--band-size );
	margin-inline: auto;
}
.utopia-stats .wp-block-column {
	position: relative;
	text-align: center;
	padding-block: var( --wp--preset--spacing--sm );
}
.utopia-stats .wp-block-column:not( :first-child )::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: var( --wp--preset--color--ink-border );
}
.utopia-stats.is-light .wp-block-column:not( :first-child )::before {
	background: var( --wp--preset--color--border );
}
@media ( max-width: 600px ) {
	.utopia-stats .wp-block-columns {
		flex-wrap: wrap;
	}
	.utopia-stats .wp-block-column {
		flex-basis: 50% !important;
	}
	.utopia-stats .wp-block-column:not( :first-child )::before {
		inset-inline-start: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
}

/* -----------------------------------------------------------------------------------------
   7. quote-block
   ----------------------------------------------------------------------------------------- */
.u-quote {
	font-family: var( --wp--preset--font-family--display );
	font-style: italic;
	font-size: var( --wp--preset--font-size--display-lg );
	line-height: 1.3;
	text-align: center;
	position: relative;
}
.wp-block-group.is-style-quote-mark .u-quote::before {
	content: '\201C';
	color: var( --wp--preset--color--gold );
	font-style: normal;
	display: block;
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 0.25em;
}
.u-quote-attribution {
	display: block;
	text-align: center;
	margin-top: var( --wp--preset--spacing--sm );
	font-size: var( --wp--preset--font-size--caption );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
}

/* -----------------------------------------------------------------------------------------
   8. platform-preview
   ----------------------------------------------------------------------------------------- */
.utopia-device-frame {
	position: relative;
	border-radius: var( --wp--custom--radius--lg );
	background: var( --wp--preset--color--ink );
	padding: 10px 10px 0;
	box-shadow: var( --wp--custom--shadow--lg );
	overflow: hidden;
}
.utopia-device-frame__dots {
	display: flex;
	gap: 6px;
	padding: 6px 4px 10px;
}
.utopia-device-frame__dots span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var( --wp--preset--color--ink-border );
	display: inline-block;
}
.utopia-device-frame img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var( --wp--custom--radius--sm ) var( --wp--custom--radius--sm ) 0 0;
}
/* Mobil: Bild zuerst, Text darunter zentriert (siehe PATTERNS.md #7) -- Quellcode-Reihenfolge ist
   Text-Spalte zuerst (Desktop 40/60), column-reverse dreht das auf schmalen Screens um. */
@media ( max-width: 782px ) {
	.utopia-platform-preview .wp-block-columns {
		flex-direction: column-reverse;
	}
	.utopia-platform-preview .wp-block-column {
		text-align: center;
	}
	.utopia-platform-preview .wp-block-buttons {
		justify-content: center;
	}
}

/* -----------------------------------------------------------------------------------------
   9. timeline
   ----------------------------------------------------------------------------------------- */
.u-timeline {
	position: relative;
	padding-inline-start: 32px;
	max-width: var( --wp--preset--layout--content-size, 760px );
	margin-inline: auto;
}
.u-timeline::before {
	content: '';
	position: absolute;
	inset-inline-start: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var( --wp--preset--color--border );
}
.u-timeline::after {
	content: '';
	position: absolute;
	inset-inline-start: 5px;
	top: 6px;
	width: 2px;
	height: 0;
	background: var( --wp--preset--color--brand );
	transition: height 900ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}
.u-timeline.is-drawn::after {
	height: var( --u-timeline-progress, 0% );
}
.u-timeline-step {
	position: relative;
	padding-bottom: var( --wp--preset--spacing--lg );
	opacity: 0.7;
}
.u-timeline-step.is-done {
	opacity: 1;
}
.u-timeline-step::before {
	content: '';
	position: absolute;
	inset-inline-start: -32px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var( --wp--preset--color--surface );
	border: 2px solid var( --wp--preset--color--border );
}
.u-timeline-step.is-done::before {
	background: var( --wp--preset--color--brand );
	border-color: var( --wp--preset--color--brand );
}
.u-timeline-step:not( .is-done ) {
	border-inline-start: 2px dashed transparent;
}
.u-timeline-step__date {
	font-size: var( --wp--preset--font-size--caption );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
}

/* -----------------------------------------------------------------------------------------
   10. tier-table
   ----------------------------------------------------------------------------------------- */
.utopia-tier-table {
	display: flex;
	gap: var( --wp--preset--spacing--md );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: var( --wp--preset--spacing--sm );
	padding-inline: 4px;
	scrollbar-width: thin;
}
.utopia-tier-card {
	flex: 0 0 280px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}
.utopia-tier-card.is-highlight {
	border-color: var( --wp--preset--color--brand );
	box-shadow: var( --wp--custom--shadow--md );
	transform: translateY( -8px );
}
@media ( hover: hover ) {
	.utopia-tier-card:not( .is-highlight ):hover {
		transform: translateY( -4px );
	}
}
.utopia-tier-card__badge {
	align-self: flex-start;
	background: var( --wp--preset--color--brand );
	color: #fff;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var( --wp--custom--radius--pill );
	margin-bottom: var( --wp--preset--spacing--2-xs );
}
.utopia-tier-card__tokens {
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--body-sm );
	margin-bottom: var( --wp--preset--spacing--sm );
}
.utopia-tier-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.utopia-tier-card li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var( --wp--preset--font-size--body-sm );
}
.utopia-tier-card li svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}
.utopia-tier-card li.is-excluded {
	color: var( --wp--preset--color--muted );
	opacity: 0.6;
}
@media ( max-width: 600px ) {
	.utopia-tier-card {
		flex-basis: 240px;
	}
}

/* -----------------------------------------------------------------------------------------
   11. token-distribution (donut)
   ----------------------------------------------------------------------------------------- */
.u-donut-wrap {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--lg );
	flex-wrap: wrap;
}
.u-donut {
	/* Ohne diese Regel hat das <svg class="u-donut" viewBox="0 0 200 200"> (kein width-/height-
	   Attribut, nur viewBox) keinerlei intrinsische Größe -- Chromium/Firefox rendern es dann als
	   0x0px, unsichtbar (leerer Kreis statt Donut-Diagramm). Größe muss der viewBox entsprechen, sonst
	   verzerrt/verpixelt das Rendering. Gefunden 20.09. beim Token-Seiten-Screenshot: nur die
	   Legenden-Liste war sichtbar, kein Kreisdiagramm (Breite/Höhe beide 0 laut getBoundingClientRect). */
	width: 200px;
	height: 200px;
	flex-shrink: 0;
}
.u-donut svg circle.u-donut-seg {
	transition: stroke-dashoffset 600ms ease-out;
	transition-delay: var( --u-delay, 0ms );
}
.u-donut:not( .is-drawn ) circle.u-donut-seg {
	stroke-dashoffset: 251.2 !important; /* voller Umfang bei r=40 -> wird per inline style überschrieben, Fallback */
}
.u-donut-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.u-donut-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var( --wp--preset--font-size--body-sm );
}
.u-donut-legend .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.u-legal-note {
	font-size: var( --wp--preset--font-size--body-sm );
	color: var( --wp--preset--color--muted );
	border-top: 1px solid var( --wp--preset--color--border );
	padding-top: var( --wp--preset--spacing--sm );
	margin-top: var( --wp--preset--spacing--sm );
}
@media ( max-width: 782px ) {
	.u-donut-wrap {
		flex-direction: column;
		align-items: flex-start;
	}
	.u-donut {
		/* Selektor-Fix: die Klasse "u-donut" sitzt direkt auf dem <svg>, es gibt kein verschachteltes
		   "svg svg" -- ".u-donut svg" konnte hier nie greifen. */
		width: 220px;
		height: 220px;
	}
}

/* -----------------------------------------------------------------------------------------
   12. logo-wall
   ----------------------------------------------------------------------------------------- */
.utopia-logo-wall {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var( --wp--preset--spacing--xl );
}
.utopia-logo-wall img {
	height: 32px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	filter: grayscale( 1 ) opacity( 0.75 );
	transition: filter 200ms ease-out;
}
@media ( hover: hover ) {
	.utopia-logo-wall a:hover img,
	.utopia-logo-wall img:hover {
		filter: grayscale( 0 ) opacity( 1 );
	}
}
@media ( max-width: 600px ) {
	.utopia-logo-wall {
		gap: var( --wp--preset--spacing--md );
	}
}

/* -----------------------------------------------------------------------------------------
   13. faq
   ----------------------------------------------------------------------------------------- */
.utopia-faq details {
	padding-block: var( --wp--preset--spacing--sm );
}
.utopia-faq summary {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	font-size: var( --wp--preset--font-size--body-lg );
	list-style: none;
	min-height: 44px;
}
.utopia-faq summary::-webkit-details-marker {
	display: none;
}
.utopia-faq summary::after {
	content: '';
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 300ms ease-out;
}
.utopia-faq details[open] summary::after {
	transform: rotate( -135deg );
}
.utopia-faq .utopia-faq__answer {
	padding-top: var( --wp--preset--spacing--2-xs );
	color: var( --wp--preset--color--muted );
}

/* -----------------------------------------------------------------------------------------
   14. document-download
   ----------------------------------------------------------------------------------------- */
.utopia-doc-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--md );
}
.utopia-doc-card {
	flex: 1 1 220px;
	text-align: center;
}
.utopia-doc-card img {
	width: 100%;
	max-width: 200px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var( --wp--custom--radius--sm );
	border: 1px solid var( --wp--preset--color--border );
	margin-inline: auto;
	box-shadow: var( --wp--custom--shadow--sm );
}
.utopia-doc-card__note {
	font-size: var( --wp--preset--font-size--caption );
	color: var( --wp--preset--color--muted );
}

/* -----------------------------------------------------------------------------------------
   15. contact-form editor preview (frontend styling lives in the plugin's frontend.css)
   ----------------------------------------------------------------------------------------- */
.utopia-form-preview {
	border: 1px dashed var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--md );
	padding: var( --wp--preset--spacing--md );
}
.utopia-form-preview__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.utopia-form-preview__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-block: 8px;
}
.utopia-newsletter-preview {
	display: flex;
	gap: 8px;
	border: 1px dashed var( --wp--preset--color--border );
	padding: 12px;
	border-radius: var( --wp--custom--radius--sm );
}

/* -----------------------------------------------------------------------------------------
   16. app-download
   ----------------------------------------------------------------------------------------- */
.utopia-app-frame {
	max-width: 280px;
	margin-inline: auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var( --wp--custom--shadow--lg );
	animation: utopia-app-in 700ms cubic-bezier( 0.2, 0.7, 0.2, 1 ) both;
}
.utopia-app-frame img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 19.5;
	object-fit: cover;
}
@keyframes utopia-app-in {
	from {
		opacity: 0;
		transform: scale( 0.96 );
	}
	to {
		opacity: 1;
		transform: scale( 1 );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.utopia-app-frame {
		animation: none;
	}
}
.utopia-badge-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.utopia-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--sm );
	font-size: var( --wp--preset--font-size--body-sm );
	min-height: 44px;
}
.utopia-badge.is-disabled {
	opacity: 0.5;
}

/* -----------------------------------------------------------------------------------------
   17. cta-band
   ----------------------------------------------------------------------------------------- */
.utopia-cta-band {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}
.utopia-cta-band .wp-block-buttons {
	justify-content: center;
}
@media ( max-width: 600px ) {
	.utopia-cta-band .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.utopia-cta-band .wp-block-button {
		width: 100%;
	}
}

/* -----------------------------------------------------------------------------------------
   18. notice-band — never animated
   ----------------------------------------------------------------------------------------- */
.utopia-notice-band {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--sm );
	padding: var( --wp--preset--spacing--sm ) var( --wp--preset--spacing--md );
	border-radius: var( --wp--custom--radius--md );
	background: var( --wp--preset--color--brand-tint );
}
.utopia-notice-band.is-warning {
	background: #fdf1ef;
	border: 1px solid rgba( 179, 38, 30, 0.25 );
}
.utopia-notice-band__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	color: var( --wp--preset--color--brand-hover );
}
.utopia-notice-band.is-warning .utopia-notice-band__icon {
	color: var( --wp--preset--color--danger );
}
@media ( max-width: 600px ) {
	.utopia-notice-band {
		flex-direction: column;
		text-align: center;
	}
}

/* -----------------------------------------------------------------------------------------
   19. legal-copy — deliberately plain, no motion classes ever applied
   ----------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------
   20. Footer
   ----------------------------------------------------------------------------------------- */
.site-footer a {
	color: var( --wp--preset--color--text-dark );
}
.site-footer .utopia-form--newsletter input[type='email'] {
	background: var( --wp--preset--color--ink-surface );
	border-color: var( --wp--preset--color--ink-border );
	color: var( --wp--preset--color--text-dark );
}

/* -----------------------------------------------------------------------------------------
   21. List style variant: checklist
   ----------------------------------------------------------------------------------------- */
.wp-block-list.is-style-checklist {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-checklist li {
	position: relative;
	padding-left: 28px;
}
.wp-block-list.is-style-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --wp--preset--color--brand-tint );
	box-shadow: inset 0 0 0 1.5px var( --wp--preset--color--brand );
}