/**
 * Theme-wide styles that theme.json cannot express.
 * Every value comes from a theme.json token; raw colors are not allowed here.
 */

/*
 * Dark theme: `data-theme` is set on <html> by assets/js/theme-mode.js.
 * Each light preset is remapped to its dark counterpart in theme.json
 * settings.custom.dark, so blocks and utility classes switch automatically.
 */
:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--background: var(--wp--custom--dark--color--background);
	--wp--preset--color--surface: var(--wp--custom--dark--color--surface);
	--wp--preset--color--surface-alt: var(--wp--custom--dark--color--surface-alt);
	--wp--preset--color--text: var(--wp--custom--dark--color--text);
	--wp--preset--color--text-muted: var(--wp--custom--dark--color--text-muted);
	--wp--preset--color--primary: var(--wp--custom--dark--color--primary);
	--wp--preset--color--highlight: var(--wp--custom--dark--color--highlight);
	--wp--preset--color--accent: var(--wp--custom--dark--color--accent);
	--wp--preset--color--border: var(--wp--custom--dark--color--border);
	--wp--preset--color--inverse: var(--wp--custom--dark--color--inverse);
	--wp--preset--color--on-primary: var(--wp--custom--dark--color--on-primary);
	--wp--preset--gradient--primary: var(--wp--custom--dark--gradient--primary);
	--wp--preset--gradient--highlight-text: var(--wp--custom--dark--gradient--highlight-text);
	--wp--preset--shadow--card: var(--wp--custom--dark--shadow--card);
}

/*
 * Metric fallback for Manrope (D7, ADR 0016): local Arial scaled to Manrope's
 * width and vertical metrics, so text barely moves when the web font swaps in.
 * One face per weight family: 400 for body text, 700 for headings (500 and 600
 * map to the nearest of the two). Android has no Arial, so the stack continues.
 */
@font-face {
	font-family: "Manrope Fallback";
	font-weight: 400;
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
	size-adjust: 102.69%;
	ascent-override: 104.2%;
	descent-override: 29.21%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Manrope Fallback";
	font-weight: 700;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
	size-adjust: 100.58%;
	ascent-override: 106.39%;
	descent-override: 29.82%;
	line-gap-override: 0%;
}

/* DS-4: visible keyboard focus on every interactive element. */
:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--highlight);
	outline-offset: var(--wp--custom--focus--offset);
}

/* On the inverse band the highlight ring lacks contrast; on-primary keeps >= 3:1. */
.has-inverse-background-color :focus-visible {
	outline-color: var(--wp--preset--color--on-primary);
}

/*
 * MVP1 band glow, the same technique as the hero card: accent and primary
 * mixed with transparency over the inverse fill, brightest away from the text.
 */
.sapysync-mvp1 .has-inverse-background-color {
	background-image:
		radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent), transparent 60%),
		radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent), transparent 50%);
}

/*
 * MVP1 badge (ADR 0017): a white audio-lines icon in a circle with a
 * highlight-text gradient ring; it glows softly in the dark theme. From 600px
 * it sits left of the text, below that above the heading. Decorative only.
 */
.sapysync-mvp1__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	color: var(--wp--preset--color--on-primary);
	background:
		linear-gradient(var(--wp--preset--color--inverse), var(--wp--preset--color--inverse)) padding-box,
		var(--wp--preset--gradient--highlight-text) border-box;
	border: 2px solid transparent;
	border-radius: var(--wp--preset--border-radius--full);
}

.sapysync-mvp1__badge .sapysync-icon {
	width: 2.25rem;
	height: 2.25rem;
}

:root[data-theme="dark"] .sapysync-mvp1__badge {
	box-shadow: 0 0 var(--wp--preset--spacing--50) color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

@media (forced-colors: active) {

	.sapysync-mvp1__badge {
		background: none;
		border-color: currentcolor;
		box-shadow: none;
	}
}

@media (width >= 600px) {

	.sapysync-mvp1 .has-inverse-background-color {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.sapysync-mvp1 .has-inverse-background-color > * {
		grid-column: 2;
	}

	.sapysync-mvp1 .has-inverse-background-color > .sapysync-mvp1__badge {
		grid-row: 1 / span 3;
		grid-column: 1;
	}

	.sapysync-mvp1 .has-inverse-background-color > .sapysync-mvp1__badge + * {
		margin-block-start: 0;
	}
}

/*
 * Narrow viewports and 200% text (WCAG 1.4.4, 1.4.10): a word wider than its
 * column wraps instead of scrolling the page sideways. Shrink-to-fit
 * components size to their longest word, so they need `anywhere`; core search
 * moves its button below the field when both do not fit.
 */
body {
	overflow-wrap: break-word;
}

.sapysync-pipeline > li,
.sapysync-tag-list > li,
.sapysync-status {
	overflow-wrap: anywhere;
}

.wp-block-search__inside-wrapper {
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--20);
}

/* Wrap only when the field at its minimum width and the button do not fit. */
.wp-block-search__input {
	flex-basis: 0;
}

/*
 * Hero (patterns/hero.php, ADR 0009): text and illustration in a two-column
 * core grid that collapses to one column; the image is a rounded card and
 * never sits behind the text.
 */
.sapysync-hero__grid {
	align-items: center;
}

/* Hero calls to action: both ≈ 48px tall (§5), whatever their border. */
.sapysync-hero .wp-block-button__link {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding-block: 0;
}

/* Narrow screens: the calls to action stack at full, equal width (§4.1). */
@media (width < 600px) {

	.sapysync-hero .wp-block-buttons > .wp-block-button {
		width: 100%;
	}
}

/*
 * Highlighted words in a heading (the H1's "Humans & AI"): the highlight-text
 * gradient clipped to the text. Without background-clip: text, and in forced
 * colours, the words fall back to the solid highlight colour.
 */
.sapysync-highlight-text {
	color: var(--wp--preset--color--highlight);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {

	.sapysync-highlight-text {
		color: transparent;
		background: var(--wp--preset--gradient--highlight-text);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}

@media (forced-colors: active) {

	.sapysync-highlight-text {
		color: var(--wp--preset--color--highlight);
		background: none;
	}
}

/*
 * The scripted <picture> gets its variant from assets/js/hero-image.js before
 * first paint. Without JavaScript it stays empty and hidden; the <noscript>
 * copy shows the light variant instead.
 */
.sapysync-hero__picture:not([data-variant]) {
	display: none;
}

/*
 * Soft blue–lavender glow that blends the card into the page: theme tokens
 * mixed with transparency. box-shadow doesn't affect layout, so no overflow.
 */
.sapysync-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow:
		0 0 var(--wp--preset--spacing--50) color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent),
		0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--60) color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

/*
 * Voluntary provenance label for the hero illustration (ADR 0009 amendment):
 * plain text directly under the image, so it never covers the artwork and
 * reads the same in both themes and without JavaScript.
 */
.sapysync-hero__provenance {
	width: fit-content;
	margin: var(--wp--preset--spacing--20) 0 0 auto;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
	text-align: end;
}

/* Clear zone on the backdrop: a soft halo in the page colour keeps wave lines away from the AI label. */
.sapysync-backdrop .sapysync-hero__provenance {
	text-shadow:
		0 0 calc(var(--wp--preset--spacing--20) / 2) var(--wp--preset--color--background),
		0 0 calc(var(--wp--preset--spacing--20) / 2) var(--wp--preset--color--background),
		0 0 var(--wp--preset--spacing--20) var(--wp--preset--color--background),
		0 0 var(--wp--preset--spacing--30) var(--wp--preset--color--background),
		0 0 var(--wp--preset--spacing--40) var(--wp--preset--color--background);
}

/*
 * Decorative backdrop behind the hero and Beyond Transcripts (ADR 0018):
 * one layer for both sections (templates/front-page.html wraps them), so
 * nothing seams at the section edge. It is sized to the content container
 * (1.4 × min(viewport, wide size), centred), so the composition is the same
 * at every width and overflows the container by about 20% on each side.
 * Line waves are an SVG mask painted with a highlight → accent gradient; the
 * glow is a radial gradient by the illustration. Linear masks fade the layer
 * out on every side, so nothing ends in a straight cut. Content, the hero
 * card and the cards stay above it. Hidden in forced colours and in print.
 */
.sapysync-backdrop {
	--sapysync-wave-lines: 40%;
	--sapysync-wave-glow: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);

	/*
	 * Mask gradients: only the alpha channel matters, the colour is irrelevant.
	 * A colour token is used because Stylelint rejects raw colours (color-no-hex).
	 */
	--sapysync-wave-fade-x: linear-gradient(90deg, transparent, var(--wp--preset--color--text) 14%, var(--wp--preset--color--text) 86%, transparent);
	--sapysync-wave-fade-y: linear-gradient(transparent, var(--wp--preset--color--text) 14%, var(--wp--preset--color--text) 72%, transparent);
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}

:root[data-theme="dark"] .sapysync-backdrop {
	--sapysync-wave-lines: 60%;
	--sapysync-wave-glow: color-mix(in srgb, var(--wp--preset--color--primary) 34%, transparent);
}

.sapysync-backdrop::before,
.sapysync-backdrop::after {
	position: absolute;
	inset: 0 auto 0 50%;
	z-index: -1;
	width: calc(min(100%, var(--wp--style--global--wide-size)) * 1.4);
	pointer-events: none;
	content: "";
	transform: translateX(-50%);
}

.sapysync-backdrop::before {
	background:
		linear-gradient(
			90deg,
			color-mix(in srgb, var(--wp--preset--color--highlight) var(--sapysync-wave-lines), transparent),
			color-mix(in srgb, var(--wp--preset--color--accent) var(--sapysync-wave-lines), transparent)
		);
	mask-image: url(../images/waves.svg), var(--sapysync-wave-fade-x), var(--sapysync-wave-fade-y);
	mask-position: center top;
	mask-size: 100% auto, 100% 100%, 100% 100%;
	mask-repeat: no-repeat;
	mask-composite: intersect;
}

.sapysync-backdrop::after {
	z-index: -2;
	background: radial-gradient(closest-side at 70% 32%, var(--sapysync-wave-glow), transparent);
	mask-image: var(--sapysync-wave-fade-x), var(--sapysync-wave-fade-y);
	mask-composite: intersect;
}

/* Narrow screens: one sparser portrait ribbon at the screen width, faded at the sides. */
@media (width < 600px) {

	.sapysync-backdrop::before,
	.sapysync-backdrop::after {
		inset: 0;
		width: auto;
		transform: none;
	}

	.sapysync-backdrop {

		/* Mask gradient: alpha only, see the note on .sapysync-backdrop. */
		--sapysync-wave-fade-x: linear-gradient(90deg, transparent, var(--wp--preset--color--text) 20%, var(--wp--preset--color--text) 80%, transparent);
	}

	.sapysync-backdrop::before {
		mask-image: url(../images/waves-mobile.svg), var(--sapysync-wave-fade-x), var(--sapysync-wave-fade-y);
	}
}

@media (forced-colors: active), print {

	.sapysync-backdrop::before,
	.sapysync-backdrop::after {
		display: none;
	}
}

/* Clear zone: the hero's outline button is filled so no wave runs behind its label. */
:where(.sapysync-hero) .is-style-outline > .wp-block-button__link {
	background-color: var(--wp--preset--color--background);
}

/*
 * Stage pipelines (patterns/how-it-works.php, patterns/technology-overview.php):
 * an ordered list of stages. Fluid grid: all stages in a row when there is
 * room, stacked on narrow screens (DS-9).
 * The step number is decorative; the <ol> already conveys order.
 */
.sapysync-pipeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--wp--preset--spacing--30);
	padding: 0;
	margin-top: var(--wp--preset--spacing--40);
	list-style: none;
	counter-reset: sapysync-step;
}

.sapysync-pipeline > li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--md);
	box-shadow: var(--wp--preset--shadow--card);
	counter-increment: sapysync-step;
}

.sapysync-pipeline > li::before {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--highlight);
	content: counter(sapysync-step, decimal-leading-zero) / "";
}

/*
 * How It Works stages are open, not cards: number, bold name, status label.
 * A wider column gap leaves room for the arrows. The list is a size
 * container for the narrow-column layout below.
 */
.sapysync-how-it-works .sapysync-pipeline {
	container-type: inline-size;
	column-gap: var(--wp--preset--spacing--50);
}

:where(.sapysync-how-it-works) .sapysync-pipeline > li {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/*
 * Stage icon (ADR 0017): a 3.5rem tinted circle above the number, the icon
 * drawn by sapysync_icon(). In the dark theme the circle glows softly, from
 * tokens mixed with transparency as on the hero card and the MVP1 band.
 */
.sapysync-stage-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	order: -1;
	width: 3.5rem;
	height: 3.5rem;
	color: var(--wp--preset--color--highlight);
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--wp--preset--border-radius--full);
}

.sapysync-stage-icon .sapysync-icon {
	width: 1.75rem;
	height: 1.75rem;
}

:root[data-theme="dark"] .sapysync-stage-icon {
	box-shadow:
		0 0 var(--wp--preset--spacing--40) color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent),
		0 0 var(--wp--preset--spacing--20) color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}

@media (forced-colors: active) {

	.sapysync-stage-icon {
		border: 1px solid currentcolor;
		box-shadow: none;
	}
}

/*
 * Narrow single column (18rem up to the two-column width, 24rem): the icon
 * sits left of the number and name. Narrower, which includes 320px at 200%
 * text size, the icon stays above the number so names keep their width.
 */
@container (18rem <= width < 24rem) {

	:where(.sapysync-how-it-works) .sapysync-pipeline > li {
		display: grid;
		grid-template-columns: 3.5rem 1fr;
		column-gap: var(--wp--preset--spacing--30);
		justify-items: start;
	}

	:where(.sapysync-how-it-works) .sapysync-pipeline > li > .sapysync-stage-icon {
		grid-row: 1 / span 3;
		grid-column: 1;
	}

	:where(.sapysync-how-it-works) .sapysync-pipeline > li::before {
		grid-column: 2;
	}
}

/*
 * How It Works: a decorative arrow in the gap between stages, only while all
 * five stages share one row (5 × 11rem + 4 gaps + root padding). Stacked or
 * wrapped stages get no arrows (DS-9). Empty alt text keeps it from AT.
 */
@media (width >= 65rem) {

	:where(.sapysync-how-it-works) .sapysync-pipeline > li {
		position: relative;
	}

	/*
	 * Vertically centred on the stage icon's circle (3.5rem, so 1.75rem down).
	 * Horizontally halfway between this circle's right edge (3.5rem) and the
	 * next circle's left edge (the column width, 100%, plus the column gap).
	 * Manrope's latin subset has no "→", so the system font draws the arrow
	 * (ADR 0016). Its ink sits about 0.18em below its box centre, so it is
	 * lifted by that much to meet the circle's centre.
	 */
	:where(.sapysync-how-it-works) .sapysync-pipeline > li:not(:last-child)::after {
		position: absolute;
		top: 1.75rem;
		left: calc((3.5rem + 100% + var(--wp--preset--spacing--50)) / 2);
		font-size: var(--wp--preset--font-size--large);
		font-weight: 400;
		line-height: 1;
		color: var(--wp--preset--color--highlight);
		content: "→" / "";
		transform: translate(-50%, calc(-50% - 0.18em));
	}
}

/*
 * How It Works: until all five stages fit one row (65rem, where the arrows
 * appear), at most three columns, so the stages wrap 3 + 2 rather than 4 + 1.
 * Each column is at least a third of the row; narrow screens are unchanged.
 */
@media (width < 65rem) {

	:where(.sapysync-how-it-works) .sapysync-pipeline {
		grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 11rem), calc((100% - 2 * var(--wp--preset--spacing--50)) / 3)), 1fr));
	}
}

/*
 * Technology: while the four stages do not fit one row (4 × 11rem + 3 gaps +
 * root padding = 49rem), they form a 2 × 2 grid instead of 3 + 1. Each column
 * is at least half the row, so narrow screens still get a single column.
 */
@media (width < 49rem) {

	:where(.sapysync-technology) .sapysync-pipeline {
		grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 11rem), calc((100% - var(--wp--preset--spacing--30)) / 2)), 1fr));
	}
}

/* Compact tag list, e.g. the Beyond Transcripts signal dimensions. Wraps fluidly. */
.sapysync-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	list-style: none;
}

.sapysync-tag-list > li {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--full);
}

/* Beyond Transcripts: the text card and its signal tags side by side; tags centred, unstretched. */
.sapysync-gap__grid > .sapysync-tag-list {
	align-self: center;
	align-items: center;
	margin: 0;
}

/*
 * Capability status label (content-spec §8), e.g. "In development".
 * Used inline (span) or as its own block (paragraph); it never stretches.
 */
.sapysync-status {
	width: fit-content;
	padding: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--highlight);
	border: 1px solid currentcolor;
	border-radius: var(--wp--preset--border-radius--full);
}

/*
 * Icons from sapysync_icon() (ADR 0017): the gradient stops come from the
 * palette tokens (an SVG gradient cannot read the highlight-text CSS gradient).
 * In forced colours the lines take the system text colour.
 */
.sapysync-icon__stop-start {
	stop-color: var(--wp--preset--color--highlight);
}

.sapysync-icon__stop-end {
	stop-color: var(--wp--preset--color--accent);
}

@media (forced-colors: active) {

	.sapysync-icon {
		stroke: currentcolor;
	}
}

/* Visually hidden text that stays available to assistive technology. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Official logo (sapysync_the_logo()): both theme variants are in the markup;
 * exactly one is displayed, matching the resolved theme in `data-theme`.
 * Sized by width; `height: auto` preserves the aspect ratio.
 */
.sapysync-logo {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
}

.sapysync-logo img {
	width: var(--wp--custom--logo--header);
	height: auto;
}

.sapysync-logo--footer img {
	width: var(--wp--custom--logo--footer);
}

.sapysync-logo .sapysync-logo__img--dark,
:root[data-theme="dark"] .sapysync-logo .sapysync-logo__img--light {
	display: none;
}

:root[data-theme="dark"] .sapysync-logo .sapysync-logo__img--dark {
	display: block;
}

/* Header popups: language selector and theme menu (shell.js). */
.sapysync-popup {
	position: relative;
}

.sapysync-popup__toggle {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	padding: var(--wp--preset--spacing--20);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	background: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--sm);
}

/* Chevron: rotates when the popup is open. */
.sapysync-popup__toggle::after {
	width: 0.4em;
	height: 0.4em;
	content: "";
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: translateY(-25%) rotate(45deg);
}

.sapysync-popup__toggle[aria-expanded="true"]::after {
	transform: translateY(25%) rotate(-135deg);
}

.sapysync-popup__panel {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--20));
	right: 0;
	z-index: 100;
	min-width: max-content;
	padding: var(--wp--preset--spacing--20);
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
	list-style: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--md);
}

.sapysync-popup__list {
	padding: 0;
	margin: 0;
	list-style: none;
}

.sapysync-popup__item {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--preset--border-radius--sm);
}

.sapysync-popup__item[role="menuitemradio"] {
	cursor: pointer;
}

.sapysync-popup__item[role="menuitemradio"]:hover,
.sapysync-popup__item[role="menuitemradio"]:focus {
	background: var(--wp--preset--color--surface-alt);
}

/* The current mode is marked by a check, not by colour alone. */
.sapysync-popup__item[aria-checked="true"]::after {
	margin-left: auto;
	font-weight: 600;
	content: "✓" / "";
}

/* Mode glyph (CSS only): light = empty circle, auto = half, dark = filled. */
.sapysync-theme-glyph {
	flex: none;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	border: 2px solid currentcolor;
	border-radius: 50%;
}

[data-mode="auto"] > .sapysync-theme-glyph {
	background: linear-gradient(90deg, currentcolor 50%, transparent 50%);
}

[data-mode="dark"] > .sapysync-theme-glyph {
	background: currentcolor;
}

/* Header layout: when the bar wraps (tablet), the controls stay right-aligned. */
.sapysync-header__bar > .sapysync-header__controls {
	margin-left: auto;
}

/* Pitch is shown in the highlight colour (§5); core makes the link inherit it. */
.sapysync-nav-pitch {
	color: var(--wp--preset--color--highlight);
}

/*
 * Inline navigation sits centred between the logo and the controls (§5), with
 * a hairline divider before Pitch. The overlay menu (below 600px) has neither.
 */
@media (width >= 600px) {

	.sapysync-header__bar > .wp-block-navigation {
		--navigation-layout-justify: center;
		--navigation-layout-justification-setting: center;
		flex: 1;
	}

	.sapysync-nav-pitch {
		padding-inline-start: var(--wp--preset--spacing--40);
		border-inline-start: 1px solid var(--wp--preset--color--border);
	}
}

/*
 * My Account (DS-8): the header button is shown while the Navigation block is
 * inline; below core's 600px overlay breakpoint it moves into the mobile menu.
 * The menu copy is only displayed inside the open overlay.
 */
.wp-block-navigation__responsive-container:not(.is-menu-open) .sapysync-account--menu {
	display: none;
}

/* Compact header button (§5, ≈ 32px tall), level with the language and theme controls. */
.sapysync-account--header .wp-block-button__link {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25;
}

@media (width < 600px) {

	.sapysync-header .sapysync-account--header {
		display: none;
	}

	/*
	 * The menu button sits last, after the language and theme controls, as in
	 * the mobile reference. Only the visual order changes; the DOM order (and
	 * so the Tab order) stays logo, menu, controls.
	 */
	.sapysync-header__bar > .wp-block-navigation {
		order: 1;
	}

	/* The theme button shows only its mode glyph; the name stays accessible. */
	.sapysync-theme-menu__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/*
 * Founding Team page (patterns/team.php, ADR 0014): the members sit in a row
 * when there is room and stack on narrow screens (core grid, no media query).
 * All colours are theme tokens, so the page follows Auto/Light/Dark.
 */
.sapysync-team__member {
	text-align: center;
}

.sapysync-team__photo {
	width: 100%;
	margin: 0;
}

.sapysync-team__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--lg);
	transition: transform 0.3s;
}

.sapysync-team__identity > * {
	margin: 0;
}

/* Role at 500: with Manrope, 400 reads too thin at 14px in the accent colour (D7 follow-ups). */
.sapysync-team__title {
	font-weight: 500;
	color: var(--wp--preset--color--accent);
}

/* QR thumbnails keep a light backdrop in both themes, so they stay scannable. */
.sapysync-team__qr {
	flex-shrink: 0;
	margin: 0;
}

.sapysync-team__qr img {
	display: block;
	width: 3rem;
	height: 3rem;
	padding: 2px;
	background: var(--wp--preset--color--on-primary);
	border-radius: var(--wp--preset--border-radius--sm);
}

/* Check list: the tick is decoration only; the <ul> already conveys the list. */
.sapysync-check-list {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	padding: 0;
	text-align: start;
	list-style: none;
}

.sapysync-check-list > li {
	position: relative;
	padding-inline-start: 1.5em;
}

.sapysync-check-list > li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.sapysync-check-list > li::before {
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--text-muted);
	content: "✓" / "";
}

/* Team cards: lists span the card, so ticks share one left edge (design system §3). */
.sapysync-team__member .sapysync-check-list {
	width: 100%;
	margin-inline: 0;
}

/*
 * Hover and focus, as on the production site (ADR 0014 amendment):
 * - a photo lifts by 4px on hover (0.3s). Photos are not interactive; keyboard
 *   users get the same lift while focus is inside the card;
 * - the LinkedIn button switches to the highlight fill with background-coloured
 *   text on hover and on keyboard focus (0.3s ease-in-out). The global focus
 *   ring stays, and the QR "Enlarge" button gets the same ring.
 * Reduced motion: no transitions and no lift.
 */
.sapysync-team__photo img:hover,
.sapysync-team__member:focus-within .sapysync-team__photo img {
	transform: translateY(-4px);
}

.sapysync-team__links .wp-block-button__link {
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.sapysync-team__links .wp-block-button__link:hover,
.sapysync-team__links .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--highlight);
}

/* Core's lightbox trigger sets its own outline; keep the site-wide ring (DS-4). */
.sapysync-team__qr .lightbox-trigger:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--highlight);
	outline-offset: var(--wp--custom--focus--offset);
}

@media (prefers-reduced-motion: reduce) {

	.sapysync-team__photo img,
	.sapysync-team__links .wp-block-button__link {
		transition: none;
	}

	.sapysync-team__photo img:hover,
	.sapysync-team__member:focus-within .sapysync-team__photo img {
		transform: none;
	}
}