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