/*
 * 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 inline menu's gap, fluid: the block's 28px from 1257px up, down to
   ~15.5px at 901px, so cacao's eight items still fit one line just above the
   phone breakpoint (with 28px, "Alliance" wrapped to a second line at 901px
   and the header grew by 52px). Only the inline list: the overlay sets its
   own. A menu with longer labels (a translation) can still wrap; it then wraps
   cleanly under the first line, as before. */
.dvt-nav .dvt-nav__menu > .wp-block-navigation {
	gap: clamp(14px, calc(3.5vw - 16px), 28px);
}

/* 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;
}

/*
 * Phone header: one compact row for every layout — brand left, then the
 * language pill, the theme toggle and the hamburger at the right edge.
 *
 * The width is the theme's one phone breakpoint, 900px (NARROW_PX in
 * src/shared/breakpoint.js, DVT_NARROW_PX in functions.php); `npm run
 * check:header` fails if this `@media` says anything else. Core's Navigation
 * block only collapses at 600px ("overlayMenu": "mobile") or always, so the
 * two rules at the end of this block extend its collapsed state up to 900px:
 * the hamburger shown, the inline list hidden. Plain specificity above core's
 * own `@media (min-width: 600px)` rules (0,2,0 and 0,3,0), no !important.
 * Until 2026-09-30 this block said 600px and core said "inline from 600px", so
 * at exactly 600px both applied: a nowrap row with three of cacao's eight items
 * visible and the rest unreachable.
 *
 * Selectors carry an extra `.dvt-nav` scope where they set a margin or a gap:
 * WordPress's flex layout emits `.is-layout-flex > :is(*, div) { margin: 0 }`
 * (0,1,1), which a single class loses to. That is how the hamburger of the
 * one-row sites sat next to the wordmark with the right of the bar empty.
 */
@media (max-width: 900px) {
	.dvt-nav .dvt-nav__row {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.dvt-nav .dvt-nav__row > .dvt-brand {
		order: 1;
		min-width: 0;
	}

	/* The language pill and the theme toggle, pushed to the right edge. */
	.dvt-nav .dvt-nav__row > .dvt-nav__aux {
		order: 2;
		margin-left: auto;
		gap: 8px;
	}

	/* Then the hamburger, last. */
	.dvt-nav .dvt-nav__row > .dvt-nav__menu {
		order: 3;
		flex: 0 0 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;
	}

	/* Same step down the wordmark takes in the report at phone width: enough
	   to keep the acronym, the switcher and the hamburger on one row. Scoped
	   under .dvt-brand so it outranks the base `.dvt-wordmark__link` rule
	   further down this file (it used to be the same specificity and lost on
	   order, so the phone size never applied). */
	.dvt-brand .dvt-wordmark__link {
		font-size: 1.375rem;
	}

	/* Only while the logo is still in the bar (before nav-lang.js has moved it
	   into the overlay, or without it). */
	.dvt-nav .alliance-logo img {
		width: 78px;
	}

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

	/* The hamburger: a 44x44 target with core's 24px icon centred. The negative
	   margin puts the ICON's box, not the hit area, on the header's right edge,
	   so it lines up with the brand on the left; the extra 10px of hit area sit
	   in the header's side padding. */
	.dvt-nav .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		border-radius: 8px;
	}

	.dvt-nav .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* The theme's own focus ring on the hamburger: the site's brand on the
   header's surface (>= 3:1 on every site in both schemes, measured by
   `npm run check:contrast`), offset so it is never drawn over the icon, and
   inside the header's side padding so nothing clips it. */
.dvt-nav .wp-block-navigation__responsive-container-open:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* 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;
}

/* 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(--dvt-on-accent);
}

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

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

/*
 * The phone menu's overlay (core's Navigation block, open).
 *
 * Its ground is DARK IN BOTH colour schemes, with light text and the white
 * Alliance logo: `--dvt-menu-ground` / `--dvt-menu-ink`, defined with the
 * palettes below. It used to be the `brand` token, which the dark palette
 * inverts to a light mint — and the white logo on it read at 1.81:1 (#20).
 * The colours are set here and not with the block's overlayBackgroundColor /
 * overlayTextColor attributes: those print preset classes with !important,
 * which no rule here could override per scheme.
 *
 * Every rule is scoped under the same prefix,
 *   .dvt-nav .dvt-nav__menu .wp-block-navigation
 *   .wp-block-navigation__responsive-container.is-menu-open
 *   :not(.disable-default-overlay)
 * (0,6,0): above core's white-overlay fallback, `.wp-block-navigation
 * :not(.has-background) … .is-menu-open:not(.disable-default-overlay)`
 * (0,5,0), and every other core rule about the open overlay.
 *
 * Not inside the `@media`: if the window grows past the breakpoint while the
 * menu is open, nav-lang.js closes it, and until then it still looks right.
 */
.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	/* Core pads the overlay with clamp(1rem, var(--wp--style--root--padding-*),
	   20rem). theme.json sets the root top/bottom padding to a unitless "0",
	   which makes that clamp() invalid and voids the whole shorthand: the
	   overlay had no padding at all and the close button sat in the viewport's
	   corner. The root "0" is right for every page, so it stays; the overlay
	   gets its own padding instead — the header bar's side inset, so the items,
	   the logo and the header's brand share one left edge. */
	padding: 0 var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
	background-color: var(--dvt-menu-ground);
	color: var(--dvt-menu-ink);
	/* Core's fade-in also slides the overlay with a transform, and a transformed
	   ancestor would become the containing block of the position:fixed close
	   button below. Same fade, no transform. */
	animation-name: dvt-menu-fade;
}

@keyframes dvt-menu-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* The close button, exactly where the hamburger that opened the menu is.
   nav-lang.js measures the hamburger when the menu opens (and on resize and
   orientation change while it is open) and sets the custom properties on the
   overlay; the header's height differs per site (81-112px) and between colour
   schemes, so no fixed offset could do it. Without the script, the fallbacks
   put it top-right, inset like the hamburger. Its own ground, so items
   scrolling under it (a long menu on a short phone) never show through. */
.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: var(--dvt-menu-close-top, 18px);
	left: var(--dvt-menu-close-left, auto);
	right: var(--dvt-menu-close-right, calc(var(--wp--style--root--padding-right) - 10px));
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dvt-menu-close-size, 44px);
	height: var(--dvt-menu-close-size, 44px);
	border-radius: 8px;
	background-color: var(--dvt-menu-ground);
	color: var(--dvt-menu-ink);
}

/* The list starts below the close button, whatever the header's height. */
.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: calc(var(--dvt-menu-close-top, 18px) + var(--dvt-menu-close-size, 44px) + 16px);
	padding-bottom: 40px;
	gap: 0;
	align-items: stretch;
}

.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
}

.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item {
	width: 100%;
}

/* Items: left-aligned, 18px/600 (the hub uses 17px/600; one step up here for
   the heading-less menu), each row a 48px tap target with no gap between rows,
   so the rhythm is even whatever the number of items (1 to 8). */
.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 6px 0;
	box-sizing: border-box;
	color: var(--dvt-menu-ink);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

/* The page you are on. */
.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .current-menu-item > .wp-block-navigation-item__content,
.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* The theme's focus ring inside the overlay: the overlay's own light ink on its
   dark ground (>= 10:1), outside the element, and inside the overlay's side
   padding so nothing clips it. */
.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) a:focus-visible,
.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--dvt-menu-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

/* The Alliance co-brand logo, moved in by nav-lang.js below the breakpoint.
   Always the WHITE image here, in both schemes: the overlay is dark in both.
   (Outside the overlay the logo-pair rules further down pick by scheme.)

   Sized to sit with 18px text rather than dwarf it: 120px wide, 84px tall
   (it was 168x117).
   Its artwork does not fill its box: the arc's left leg starts 1.4% of the
   width in (3.6 of the viewBox's 258 units) and the pictograms start 15.3% of
   the height down (10.66% of the width, the box being 258x179.6) — measured
   from the rendered files, identical in the EN, ES and FR, colour and white
   variants (same viewBox, same geometry). The negative left margin puts the
   leg on the items' left edge; the top margin puts the ARTWORK's top 32px
   below the last item's 48px row, whatever the number of items. */
.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .alliance-logo {
	--dvt-menu-logo-w: 120px;
	display: block;
	align-self: flex-start;
	width: var(--dvt-menu-logo-w);
	margin: calc(32px - var(--dvt-menu-logo-w) * 0.1066) 0 0 calc(var(--dvt-menu-logo-w) * -0.014);
}

.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .alliance-logo img {
	width: var(--dvt-menu-logo-w);
}

.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .alliance-logo img.dvt-logo--light {
	display: none;
}

.dvt-nav .dvt-nav__menu .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .alliance-logo img.dvt-logo--dark {
	display: block;
}

/* 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.
 *
 * The neutrals are redefined here once, for every site. The three brand tokens
 * are redefined too, but not here: each site brings its own dark-scheme brand
 * in its style variation, under `settings.custom.dark` (`brand`, `brandSoft`,
 * `brandDark`), which WordPress prints on `:root` as
 * `--wp--custom--dark--brand`, `--wp--custom--dark--brand-soft` and
 * `--wp--custom--dark--brand-dark`. The blocks below only map those onto the
 * palette slugs; the fallbacks are the base theme.json's own dark values, for
 * a site whose `DIVERSITY_SITE` selects no variation. `accent` is the same in
 * both schemes, and `accent-soft`, a pale tint built for a white ground, is
 * re-derived from it 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. `brand-dark` stays dark: in the dark scheme it is the
 * site's light-scheme `brand`. `npm run check:contrast` measures all of it, per
 * site and per scheme.
 *
 * 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;
}

/*
 * The phone menu's overlay: dark in BOTH schemes (see the overlay rules above).
 *
 * Defined as roles over the semantic tokens, never as colours, so they follow
 * each site's palette: the ground is `brand-dark`, which is dark by definition
 * in both schemes (a darker shade of the site's brand in the light one, the
 * site's light-scheme `brand` in the dark one), and the ink is whichever token
 * is light in the scheme at hand — `surface` in the light palette, `ink` in the
 * dark one, where `surface` turns near-black. A per-site `brand` keeps working
 * as long as its `brand-dark` stays dark in both schemes, which
 * `npm run check:header` computes for the base palette and every style
 * variation (text >= 4.5:1, the white logo >= 3:1).
 *
 * Text on `accent` (core buttons, the contact form's submit, the active
 * language badge) is a role for the same reason. Every site's accent is a
 * bright colour in both schemes, so the text on it has to be dark in both:
 * `ink` in the light palette, `surface` (near-black) in the dark one, where
 * `ink` turns light. Neither `brand` nor `brand-dark` holds 4.5:1 on every
 * accent in both schemes; `npm run check:contrast` measures it.
 *
 * The brand as emphasised text on the page surface (a lead figure, a field
 * note) is the third role. The designs drew it in the darkest shade, so the
 * light palette gives it `brand-dark`; but `brand-dark` is a ground, dark in
 * both schemes, and as text on the dark scheme's near-black `surface` it fell
 * to ~1.9:1. The dark palette gives it `brand`, which inverts to a light tone
 * there. No `color:` names `brand-dark` directly; `npm run check:contrast`
 * holds the role to 4.5:1 on `surface` per site and per scheme.
 */
:root {
	--dvt-menu-ground: var(--wp--preset--color--brand-dark);
	--dvt-menu-ink: var(--wp--preset--color--surface);
	--dvt-on-accent: var(--wp--preset--color--ink);
	--dvt-brand-ink: var(--wp--preset--color--brand-dark);
}

: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: var(--wp--custom--dark--brand, #7ecfc0);
	--wp--preset--color--brand-soft: var(--wp--custom--dark--brand-soft, #a8ded3);
	--wp--preset--color--brand-dark: var(--wp--custom--dark--brand-dark, #0a3832);
	--dvt-menu-ink: var(--wp--preset--color--ink);
	--dvt-on-accent: var(--wp--preset--color--surface);
	--dvt-brand-ink: var(--wp--preset--color--brand);
	--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: var(--wp--custom--dark--brand, #7ecfc0);
		--wp--preset--color--brand-soft: var(--wp--custom--dark--brand-soft, #a8ded3);
		--wp--preset--color--brand-dark: var(--wp--custom--dark--brand-dark, #0a3832);
		--dvt-menu-ink: var(--wp--preset--color--ink);
		--dvt-on-accent: var(--wp--preset--color--surface);
		--dvt-brand-ink: var(--wp--preset--color--brand);
		--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;
}

/*
 * Text wordmark — what a site with no uploaded logo shows instead.
 *
 * Emitted by dvt_site_logo_wordmark() only when core's site-logo block renders
 * nothing, so on a site that has a logo none of this exists in the page. It has
 * to read as a mark rather than as a link in a sentence: the heading face, the
 * weight and the size do that, and nothing here underlines it at rest.
 *
 * Colour comes from the `brand` token, which the dark theme already redefines
 * (see the palette overrides above), so the wordmark follows the toggle without
 * a rule of its own. Hover is the accent underline the nav links use rather than
 * a colour change — `brand-dark` stays dark in the dark theme, where swapping to
 * it would put near-black text on a near-black header.
 */
.dvt-wordmark {
	display: flex;
	align-items: center;
}

.dvt-wordmark__link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	/* The acronym is the identity: breaking "CacaoDiversity" across two lines
	   in a header row would read as body copy that wrapped. */
	white-space: nowrap;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.dvt-wordmark__link:hover,
.dvt-wordmark__link:focus-visible {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 4px;
}

/*
 * 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.
 *
 * The plate is the logo's OWN box, never more: painted on the element that
 * holds the image (the link, or the block when there is none), whose box is
 * the image's (`line-height: 0` in core's CSS), and the image drawn a little
 * smaller inside it with a transform, which moves no layout. So the header is
 * exactly as tall in both schemes — the equality that keeps the hamburger and
 * the menu's close button aligned — and the plate stays inside the header
 * whatever the logo's aspect ratio (cacao's is 118x99.5 on a phone, D4R's
 * 118x30.4), in the one-row and the two-row layouts alike. Until 2026-09-30
 * it was padding cancelled by a negative margin, which kept the box but drew
 * the plate 6px beyond it on every side: on cacao, where the logo is as tall
 * as the header row, it ran off the top of the page and over the tool's
 * sticky tabs. 0.88 leaves about 6% of the logo's size as the plate's border
 * on each side (7x6px on cacao's phone logo).
 */
:root[data-dvt-theme='dark'] .wp-block-site-logo a:has(> img:only-child),
:root[data-dvt-theme='dark'] .wp-block-site-logo:has(> img:only-child) {
	border-radius: 8px;
	background: #fff;
}

: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 {
	transform: scale(0.88);
}

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

	: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 {
		transform: scale(0.88);
	}
}

/*
 * Logo grid (diversity-tools/logo-grid).
 *
 * The logos are uploaded by whoever maintains the site, at whatever size the
 * partner supplied — on D4R's partners page they range from a 143x126 PNG to a
 * 679x213 one. Left alone, a flex row sizes each by its intrinsic width and the
 * row reads as a ransom note. Capping the *height* instead normalises them
 * optically: a wide wordmark and a square crest end up with the same visual
 * weight, and `width: auto` keeps every aspect ratio intact.
 */
.dvt-logo-grid__row {
	gap: 32px 40px;
}

.dvt-logo-grid__logo {
	margin: 0;
}

.dvt-logo-grid__logo img {
	width: auto;
	height: auto;
	max-height: 84px;
	max-width: 220px;
	object-fit: contain;
}

@media (max-width: 781px) {
	.dvt-logo-grid__row {
		gap: 24px 28px;
	}

	.dvt-logo-grid__logo img {
		max-height: 64px;
		max-width: 150px;
	}
}

/*
 * The partners / sponsors filter above a page of logo grids
 * (assets/js/logo-filter.js builds it; without the script it does not exist
 * and every section shows).
 *
 * The row is a plain child of the page's constrained layout, so it takes the
 * content width by itself. Pills in the colours of the tool's Form | Map
 * switch — the same control, a group of pressed buttons — and 44px tall, the
 * tap target the rest of the theme holds to. A section's heading can be long
 * ("The CGIAR Research Program on Forests, Trees and Agroforestry (FTA)"), so
 * the row wraps and a pill may too.
 */
.dvt-logo-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block: 0 24px;
}

.dvt-logo-filter__button {
	box-sizing: border-box;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 22px;
	background: transparent;
	color: var(--wp--preset--color--ink-muted);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}

.dvt-logo-filter__button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
}

.dvt-logo-filter__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* `hidden` has to win over whatever display a group block's layout sets. */
.dvt-logo-grid[hidden] {
	display: none;
}

/*
 * Citations (diversity-tools/publications).
 *
 * A full reference is four or five lines of authors before the title appears,
 * so a flush-left paragraph gives no clue where one entry ends and the next
 * begins. The hanging indent does: only the first line starts at the margin.
 */
.dvt-citation {
	padding-left: 2em;
	text-indent: -2em;
}

.dvt-publications__links {
	overflow-wrap: anywhere;
}