/*
 * Diversity Tools — layout/section styles that theme.json can't express.
 * Kept intentionally small: tokens and block styling belong in theme.json and
 * per-block style.scss. This file is for cross-cutting chrome (sticky navbar,
 * footer card, alliance logo sizing).
 */

.dvt-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	/* Contains the two-row separator's 100vw bleed (see .dvt-nav__menu::before).
	   Where scrollbars are classic (Windows/Linux) 100vw exceeds the client
	   width, so the rule would stick out and add a horizontal scrollbar. It has
	   to sit on THIS element, which is full-bleed — on the constrained row it
	   would clip the rule back to the content width. `clip`, not `hidden`, so
	   this never becomes a scroll container; verified not to clip the Navigation
	   block's position:fixed mobile overlay. */
	overflow-x: clip;
	/* No backdrop-filter here: it creates a containing block that traps the
	   Navigation block's position:fixed mobile overlay inside the header. */
}

/* Header layout, switched by the body class the plugin sets from
   brand.header_layout (config), so the same theme serves both. */
.dvt-nav__aux {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* One-row (default): brand left, everything after pushed right, inline.
   The extra .dvt-nav scope beats WP's `.is-layout-flex > * { margin: 0 }`. */
.dvt-nav .dvt-nav__menu {
	margin-left: auto;
}

/* Two-row (D4R/Cacao): logos + switcher on row 1, the full menu on row 2.
   Brand keeps the default order (0) so it stays first on row 1. */
.dvt-header-two-row .dvt-nav__aux {
	order: 2;
	margin-left: auto;
}

/* The row's 32px block gap is meant as the HORIZONTAL gap between brand,
   switcher and menu. Once the menu wraps to its own line that same value became
   a row gap and stacked on top of the menu's spacing, leaving a 73px void
   between the logos and the separator. The band's own padding is the only
   spacing here. */
.dvt-header-two-row .dvt-nav__row {
	row-gap: 12px;
}

.dvt-header-two-row .dvt-nav__menu {
	position: relative;
	order: 3;
	flex-basis: 100%;
	margin-left: 0;
	margin-top: 0;
	/* Symmetric, so the menu reads as centred in the band between its own rule
	   and the header's bottom border (it used to be 15px above / 4px below,
	   which made it hug the bottom edge). */
	padding-block: 11px;
}

/* The separator is drawn on a pseudo-element stretched to the viewport, not as
   a border on the menu: the menu is a flex item of the constrained (alignwide)
   row, so its border stopped at the content width while the header's own
   bottom border runs full-bleed — two rules of different lengths, 2px apart.
   Same `calc(50% - 50vw)` bleed the theme uses for .alignfull. */
.dvt-header-two-row .dvt-nav__menu::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: calc(50% - 50vw);
	/* Same token as the header's own bottom border, so the two rules of the
	   header read as one system instead of two slightly different greys. */
	border-top: 1px solid var(--wp--preset--color--border);
	pointer-events: none;
}

/* Mobile: one compact row for every layout — brand left, switcher + co-brand,
   hamburger far right. The Navigation block collapses to its overlay at 600px. */
@media (max-width: 600px) {
	.dvt-nav__row {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.dvt-brand {
		order: 1;
	}

	.dvt-nav__aux {
		order: 2;
		margin-left: auto;
		gap: 8px;
	}

	.dvt-nav .dvt-nav__menu,
	.dvt-header-two-row .dvt-nav__menu {
		order: 3;
		flex: 0 0 auto;
		flex-basis: auto;
		margin: 0;
		/* Here the menu is just the hamburger, inline in the single row: the
		   two-row separator would draw a stray rule above it and the padding
		   would push the icon off-centre. */
		padding-block: 0;
	}

	.dvt-header-two-row .dvt-nav__menu::before {
		content: none;
	}

	.dvt-brand .wp-block-site-logo {
		width: 118px !important;
	}

	/* Higher specificity so it beats the desktop `.alliance-logo img` (140px). */
	.dvt-nav .alliance-logo img {
		width: 78px;
	}

	.dvt-lang__toggle {
		padding: 7px 10px;
	}
}

/* Brand block: logo + title/tagline sit tight together, title in the heading face. */
.dvt-brand .wp-block-site-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	line-height: 1.1;
}

.dvt-brand .wp-block-site-title a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.dvt-brand__tag {
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
}

/* Primary nav links: brand-colored, accent underline on hover. */
.dvt-nav__right .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}

.dvt-nav__right .wp-block-navigation a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 4px;
}

/* Language switcher — pill trigger + dropdown, rendered by diversity-engine's
   [dvt_language_switcher]. WPML owns the data; this is presentation only. */
.dvt-lang {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
}

.dvt-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--brand);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	line-height: 1;
}

.dvt-lang__toggle:hover {
	border-color: var(--wp--preset--color--brand);
}

.dvt-lang__code {
	letter-spacing: 0.04em;
}

.dvt-lang__chevron {
	transition: transform 0.15s ease;
}

.dvt-lang__toggle[aria-expanded="true"] .dvt-lang__chevron {
	transform: rotate(180deg);
}

.dvt-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(10, 56, 50, 0.14);
	z-index: 30;
	display: none;
}

.dvt-lang.is-open .dvt-lang__menu {
	display: block;
}

.dvt-lang__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--wp--preset--color--brand);
}

.dvt-lang__item:hover {
	background: var(--wp--preset--color--surface);
}

.dvt-lang__item.is-active {
	background: var(--wp--preset--color--surface);
}

.dvt-lang__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 26px;
	border-radius: 7px;
	background: #eef1f0;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.dvt-lang__item.is-active .dvt-lang__badge {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--brand-dark);
}

.dvt-lang__name {
	flex: 1;
	font-weight: 600;
}

.dvt-lang__check {
	flex: none;
	color: var(--wp--preset--color--brand);
}

/* Mobile overlay menu: breathing room around the items (they were flush to the
   edges), and the Alliance co-brand logo relocated into it (by nav-lang.js, in
   its white variant) sits below the links like in prod. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 4.5rem 2rem 2.5rem;
}

.wp-block-navigation__responsive-container-content .alliance-logo {
	display: block;
	margin-top: 2.5rem;
}

.dvt-nav .wp-block-navigation__responsive-container-content .alliance-logo img {
	width: 168px;
}

/* Alliance co-brand logo: keep the prod width (140px); the brand manual
   recommends 255px min, prod runs a bit smaller — don't go below prod. */
.alliance-logo img {
	display: block;
	width: 140px;
	height: auto;
}

/* Footer — per-site brand + link columns, matching the tool-page design.
   Technical labels use a monospace stack; links are cream. */
:root {
	--dvt-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

.dvt-footer__brand {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

.dvt-footer__brand a {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.dvt-footer__name {
	font-family: var(--dvt-mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.7rem;
	opacity: 0.6;
	margin: 6px 0 0;
}

.dvt-footer__desc {
	max-width: 40ch;
	opacity: 0.82;
	line-height: 1.6;
}

/* Column headings: muted uppercase mono. Explicit color so they don't inherit
   the brand-green heading color (invisible on the brand footer background). */
.dvt-footer__head {
	color: var(--wp--preset--color--surface);
	font-family: var(--dvt-mono);
	font-weight: 400;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.55;
	margin-bottom: 18px;
}

.dvt-footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dvt-footer__list a {
	color: inherit;
	text-decoration: none;
	opacity: 0.92;
}

.dvt-footer__list a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dvt-footer__sep {
	border-color: currentColor;
	opacity: 0.16;
}

.dvt-footer__bar p.dvt-footer__meta {
	margin: 0;
	font-family: var(--dvt-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	opacity: 0.55;
}

/* Responsive: trim the generous section/footer padding on phones (core column
   blocks already stack below 782px). !important beats the patterns' inline
   padding. */
@media (max-width: 600px) {
	.dvt-section {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	.dvt-footer {
		padding-top: 48px !important;
		padding-bottom: 28px !important;
	}

	.dvt-footer__bar {
		gap: 8px;
	}
}

/*
 * Dark mode.
 *
 * Only the neutrals and the brand are redefined. `accent` is the one colour
 * each site overrides in its style variation, so leaving it alone is what lets
 * a single dark palette serve all five — and `accent-soft`, which is a pale
 * tint built for a white ground, is re-derived from that same accent instead of
 * being restated per site.
 *
 * The brand inverts rather than darkens. It is used both as a background with
 * `surface` text on it and as text on a `surface` ground, so a light brand on a
 * dark surface keeps both readings the right way round; darkening it would have
 * broken the first.
 *
 * Applied from `data-dvt-theme` on <html>, set before first paint by the inline
 * script in the head — see dvt_theme_boot_script(). The media query carries the
 * "system" case, and is written so an explicit "light" always wins over it.
 */
/* color-scheme drives the parts of the page the theme does not paint: form
   controls, scrollbars, the canvas behind everything. */
:root {
	color-scheme: light;
}

:root[data-dvt-theme='dark'] {
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-dvt-theme='light']):not([data-dvt-theme='dark']) {
		color-scheme: dark;
	}
}

:root[data-dvt-theme='dark'] {
	--wp--preset--color--surface: #11181a;
	--wp--preset--color--paper: #1a2325;
	--wp--preset--color--ink: #e8edee;
	--wp--preset--color--ink-muted: #a3b0b2;
	--wp--preset--color--border: #2f3a3d;
	--wp--preset--color--brand: #7ecfc0;
	--wp--preset--color--brand-soft: #a8ded3;
	--wp--preset--color--brand-dark: #0a3832;
	--wp--preset--color--accent-soft: color-mix(
		in srgb,
		var(--wp--preset--color--accent) 20%,
		#11181a
	);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-dvt-theme='light']):not([data-dvt-theme='dark']) {
		--wp--preset--color--surface: #11181a;
		--wp--preset--color--paper: #1a2325;
		--wp--preset--color--ink: #e8edee;
		--wp--preset--color--ink-muted: #a3b0b2;
		--wp--preset--color--border: #2f3a3d;
		--wp--preset--color--brand: #7ecfc0;
		--wp--preset--color--brand-soft: #a8ded3;
		--wp--preset--color--brand-dark: #0a3832;
		--wp--preset--color--accent-soft: color-mix(
			in srgb,
			var(--wp--preset--color--accent) 20%,
			#11181a
		);
	}
}

/*
 * The control itself. One button cycling light → dark → system: three separate
 * buttons would have cost the width the language switcher already uses, and the
 * state is legible from the icon without them.
 */
.dvt-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

.dvt-theme-toggle:hover,
.dvt-theme-toggle:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
}

.dvt-theme-toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Only the icon for the current state is shown; the others stay in the DOM so
   switching needs no re-render and no second request. */
.dvt-theme-toggle__icon {
	display: none;
}

:root:not([data-dvt-theme='dark']):not([data-dvt-theme='light'])
	.dvt-theme-toggle__icon--system,
:root[data-dvt-theme='light'] .dvt-theme-toggle__icon--light,
:root[data-dvt-theme='dark'] .dvt-theme-toggle__icon--dark {
	display: block;
}

/*
 * Logo pairs.
 *
 * Both images ship in the markup and CSS shows the one that suits the ground,
 * so the correct logo is there at first paint rather than swapped in afterwards.
 * A site with no dark variant emits one image and none of this applies.
 *
 * Every selector here qualifies the class with `img`. Written as a bare class it
 * loses to `.alliance-logo img` above, which is one component more specific — so
 * the white Alliance logo stacked under the colour one, invisible on a white
 * ground and 98px tall, and the header grew by exactly that much. Qualified,
 * these match that specificity and win on order, being further down this file.
 */
img.dvt-logo--dark {
	display: none;
}

:root[data-dvt-theme='dark'] img.dvt-logo--light {
	display: none;
}

:root[data-dvt-theme='dark'] img.dvt-logo--dark {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-dvt-theme='light']):not([data-dvt-theme='dark'])
		img.dvt-logo--light {
		display: none;
	}

	:root:not([data-dvt-theme='light']):not([data-dvt-theme='dark'])
		img.dvt-logo--dark {
		display: block;
	}
}

/*
 * A site logo with no dark variant.
 *
 * Cacao's is a 140×118 PNG with no alpha channel: a white rectangle with the
 * mark printed on it, which on a dark header reads as a white rectangle.
 * Recolouring it is not an option — it is a brand asset, there is no vector
 * original, and a version invented here could be wrong in ways only its owners
 * would know.
 *
 * So it keeps its white, deliberately, as a plate: padding and a radius turn
 * the background it already has into something that looks chosen. The moment a
 * `logo-<slug>-dark.svg` is added the pair renders instead, `:only-child` stops
 * matching, and none of this applies.
 */
:root[data-dvt-theme='dark'] .wp-block-site-logo a > img:only-child,
:root[data-dvt-theme='dark'] .wp-block-site-logo > img:only-child {
	padding: 6px 10px;
	border-radius: 8px;
	background: #fff;
	box-sizing: content-box;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-dvt-theme='light']):not([data-dvt-theme='dark'])
		.wp-block-site-logo a > img:only-child,
	:root:not([data-dvt-theme='light']):not([data-dvt-theme='dark'])
		.wp-block-site-logo > img:only-child {
		padding: 6px 10px;
		border-radius: 8px;
		background: #fff;
		box-sizing: content-box;
	}
}