/* ==========================================================================
   Shared components: layout container, site header, buttons.
   Tokens live in style.css. No hex values here.
   ========================================================================== */

/* Container
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Site header
   ========================================================================== */

.site-header {
	--focus-color: var(--on-blue);
	position: relative;
	z-index: 10;
	color: var(--on-blue);
	background-color: var(--brand-blue);
}

/* On the homepage the header floats over the hero, so the blue band and
   pattern run behind the logo without a seam. Body is the positioning
   context so the header sits below the WordPress admin bar when logged in. */
.home {
	position: relative;
}

.home .site-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 10;
	background-color: transparent;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding-block: var(--logo-height);
}

.site-header__logo {
	display: block;
	flex-shrink: 0;
}

.site-header__logo img {
	width: auto;
	height: var(--logo-height);
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	color: var(--on-blue);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"],
.site-nav__list .current-menu-ancestor > a {
	color: var(--on-blue);
	text-decoration: underline;
	text-decoration-color: var(--accent-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* Menu toggle. Hidden until navigation.js adds .is-enhanced. */
.site-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-inline-end: calc(var(--space-3) * -1);
	padding: 0;
	color: var(--on-blue);
	background: none;
	border: 0;
}

/* Three bars, drawn with the span and its two pseudo-elements. */
.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: currentColor;
}

.site-nav__toggle-icon {
	position: relative;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-nav__toggle-icon::before {
	top: -7px;
}

.site-nav__toggle-icon::after {
	top: 7px;
}

/* Open: bars become a cross. No transition, per the motion rules. */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
	background-color: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Mobile, with JavaScript: collapsed behind the toggle, opens as a panel under the header. */
.site-nav.is-enhanced .site-nav__toggle {
	display: inline-flex;
}

.site-nav.is-enhanced .site-nav__list {
	display: none;
}

.site-nav.is-enhanced.is-open .site-nav__list {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: var(--space-3) var(--gutter) var(--space-6);
	background-color: var(--brand-blue-900);
}

.site-nav.is-enhanced.is-open .site-nav__list a {
	display: block;
	padding-block: var(--space-3);
	font-size: var(--text-lg);
}

@media (min-width: 64em) {
	.site-nav.is-enhanced .site-nav__toggle {
		display: none;
	}

	.site-nav.is-enhanced .site-nav__list,
	.site-nav.is-enhanced.is-open .site-nav__list {
		position: static;
		display: flex;
		flex-direction: row;
		gap: var(--space-2) var(--space-6);
		padding: 0;
		background-color: transparent;
	}
}

/* Light header: every page except the homepage (set in header.php).
   Blue logo, dark links, white background with a hairline underneath.
   ========================================================================== */

.site-header--light {
	--focus-color: var(--brand-blue);
	color: var(--ink);
	background-color: var(--surface);
	border-bottom: 1px solid var(--border-subtle);
}

.site-header--light .site-nav__list a {
	color: var(--ink);
}

/* Blue text carries the state; the yellow underline is the brand accent on top. */
.site-header--light .site-nav__list a:hover,
.site-header--light .site-nav__list a[aria-current="page"],
.site-header--light .site-nav__list .current-menu-ancestor > a {
	color: var(--brand-blue);
}

.site-header--light .site-nav__toggle {
	color: var(--ink);
}

/* Mobile panel: white, closed off by a hairline, instead of the dark blue panel. */
.site-header--light .site-nav.is-enhanced.is-open .site-nav__list {
	background-color: var(--surface);
	border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 64em) {
	.site-header--light .site-nav.is-enhanced.is-open .site-nav__list {
		background-color: transparent;
		border-bottom: 0;
	}
}

/* Eyebrow: small label above a section heading. Not a heading itself.
   ========================================================================== */

.eyebrow {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-blue);
}

/* Brand keyhole device: the keyhole mark, very large and at low opacity,
   cropped by the section edge. White on blue sections; add --light for the
   brand-blue version on light sections. Two or three per page at most, so it
   reads as a brand device rather than decoration.
   Usage: class="brand-keyhole brand-keyhole--left" (or --right), plus
   brand-keyhole--light on a light section.
   ========================================================================== */

.brand-keyhole {
	--keyhole-size: clamp(20rem, 48vw, 43.75rem); /* 320px on phones, up to 700px */

	position: relative;
	isolation: isolate;
	overflow: clip;
}

.brand-keyhole::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: var(--keyhole-size);
	aspect-ratio: 605 / 550;
	background: url("../images/digiholic-icon-keyhole-white.png") no-repeat center / contain;
	opacity: 0.08;
	pointer-events: none;
}

/* Light sections: the brand-blue mark at a lower opacity, the light-background
   equivalent of the white mark on blue. */
.brand-keyhole--light::before {
	background-image: url("../images/digiholic-icon-keyhole-blue.png");
	opacity: 0.06;
}

/* Bleeds off the left edge and the bottom. */
.brand-keyhole--left::before {
	bottom: calc(var(--keyhole-size) * -0.3);
	left: calc(var(--keyhole-size) * -0.28);
}

/* Bleeds off the right edge and the top. */
.brand-keyhole--right::before {
	top: calc(var(--keyhole-size) * -0.22);
	right: calc(var(--keyhole-size) * -0.3);
}

/* Stat: a large number with a small label, on blue sections.
   Printed by digiholic_stat() in inc/template-tags.php. Used by the results
   section and the AEO section; each section sets its own layout.
   ========================================================================== */

.stat {
	padding-top: var(--space-5);
	border-top: 1px solid var(--brand-blue-700);
}

/* Strong contrast: extrabold numerals at heading size, regular labels at body size. */
.stat__number {
	font-size: var(--text-4xl);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-tight);
	letter-spacing: -0.01em;
}

.stat__to {
	font-size: 0.5em;
	font-weight: var(--weight-semibold);
	letter-spacing: 0;
}

.stat__label {
	max-width: 22ch;
	margin-top: var(--space-3);
	line-height: var(--leading-snug);
}

/* Buttons
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	text-decoration: none;
	border: 0;
	border-radius: var(--radius-md);
}

/* Yellow with ink text: 12.8:1 contrast. */
.button--primary {
	color: var(--ink);
	background-color: var(--accent-yellow);
}

.button--primary:hover {
	color: var(--ink);
	background-color: var(--surface);
}