/**
 * Global Base Styles — Kds
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ── Smooth Scroll ──────────────────────────────────────────────────────────── */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body);
	font-weight: var(--blg-fw-body);
	line-height: var(--blg-lh-body);
	color: var(--blg-color-body);
	background-color: var(--blg-color-base);
	-webkit-font-smoothing: antialiased;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--blg-color-primary);
	transition: color var(--blg-transition-fast);
}

a:hover {
	color: var(--blg-color-secondary);
}

/* ── Announcement Bar (dormant — re-add a .kd-announcement-bar group to use) ── */

.kd-announcement-bar {
	background-color: var(--blg-color-banner-bg);
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--blg-color-base);
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: max(
		var(--blg-space-lg),
		calc((100% - 1216px) / 2)
	) !important;
	padding-right: max(
		var(--blg-space-lg),
		calc((100% - 1216px) / 2)
	) !important;
}

.kd-announcement-bar p {
	margin: 0;
	line-height: 1;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.wp-block-button__link,
.kd-btn {
	display: inline-block;
	font-family: var(--blg-font-heading);
	font-size: var(--blg-size-btn);
	font-weight: var(--blg-fw-heading);
	text-transform: uppercase;
	letter-spacing: 0.2px;
	border-radius: var(--blg-radius-pill);
	padding: 0.85em 1.75em;
	transition:
		background-color var(--blg-transition-base),
		color var(--blg-transition-base),
		border-color var(--blg-transition-base);
	cursor: pointer;
	text-decoration: none;
	border: 3px solid transparent;
	line-height: 1.2;
}

/* Primary button (fill) — purple → indigo hover */
.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
	.wp-block-button__link {
	background-color: var(--blg-btn-bg);
	color: var(--blg-btn-fg);
	border-color: var(--blg-btn-bg);
}

.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
	.wp-block-button__link:hover {
	background-color: var(--blg-btn-bg-hover);
	border-color: var(--blg-btn-bg-hover);
	color: var(--blg-btn-fg);
}

/* Secondary button (outline) — 3px purple, stays outlined → indigo on hover */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--blg-btn-outline);
	border-color: var(--blg-btn-outline);
	border-width: 3px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--blg-btn-outline-hover);
	border-color: var(--blg-btn-outline-hover);
}

/* Inverted outline button — white on purple bands (header donate, footer subscribe) */
.kd-btn-invert .wp-block-button__link,
.kd-btn-invert.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--blg-color-base);
	border-color: var(--blg-color-base);
	border-width: 3px;
}

.kd-btn-invert .wp-block-button__link:hover,
.kd-btn-invert.is-style-outline .wp-block-button__link:hover {
	background-color: var(--blg-color-base);
	color: var(--blg-color-primary);
	border-color: var(--blg-color-base);
}

/* Text link button */
.wp-block-button.is-style-text-link .wp-block-button__link {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	color: var(--blg-btn-link);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	font-size: 1.125rem;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--blg-btn-link);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
	background: none;
	color: var(--blg-btn-link-accent);
	text-decoration-color: var(--blg-btn-link-accent);
}

/* Buttons on the interior hero (dark) — invert to light; no per-section recolor */
.kd-hero-interior
	.wp-block-button:not(.is-style-outline)
	.wp-block-button__link {
	background-color: var(--blg-btn-fg);
	color: var(--blg-btn-bg);
	border-color: var(--blg-btn-fg);
}
.kd-hero-interior
	.wp-block-button:not(.is-style-outline)
	.wp-block-button__link:hover {
	background-color: color-mix(
		in srgb,
		var(--blg-btn-fg) 88%,
		var(--blg-btn-bg)
	);
	border-color: color-mix(in srgb, var(--blg-btn-fg) 88%, var(--blg-btn-bg));
	color: var(--blg-btn-bg);
}
.kd-hero-interior .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--blg-btn-fg);
	border-color: var(--blg-btn-fg);
}
.kd-hero-interior
	.wp-block-button.is-style-outline
	.wp-block-button__link:hover {
	background-color: var(--blg-btn-fg);
	color: var(--blg-btn-bg);
	border-color: var(--blg-btn-fg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SITE HEADER — two-tier nav (indigo top-strip + purple main bar, logo overlap)
   Built from Figma Navigation component (258:2625). Dropdown + mobile-menu
   styling is a designer TODO — structure here, restyle on delivery.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Sticky lives on the template-part WRAPPER, not .kd-site-header.
   The wrapper (header.wp-block-template-part) is the direct child of
   .wp-site-blocks (full page height), so sticky has room to travel. Stickying
   .kd-site-header itself fails — its parent (the wrapper) is only as tall as the
   header, so there's no travel range (the containing-block trap). Offset by the
   WP admin-bar height for logged-in users; resolves to 0 in production. The
   `header` type selector (plus :has) targets only this wrapper — never the
   footer's `footer.wp-block-template-part`. */
header.wp-block-template-part:has(.kd-site-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--blg-z-header);
}

.kd-site-header {
	position: relative;
	z-index: var(--blg-z-header);
	width: 100%;
}

/* No vertical gap between the two tiers (kill WP flow block-gap) */
.kd-site-header > * {
	margin-block: 0 !important;
}

/* Shared horizontal padding aligns both tiers to the content column (token) */
.kd-topbar,
.kd-mainbar {
	padding-left: var(--blg-edge-pad) !important;
	padding-right: var(--blg-edge-pad) !important;
}

/* Tier 1 — indigo secondary strip */
.kd-topbar {
	/* The top strip stays DARK while the main bar is white, so it needs the
	   inverse link colour. --blg-nav-link is scoped here rather than globally so
	   each band carries its own contrast-correct value. */
	--blg-nav-link: var(--blg-color-base);
	color: var(--blg-color-base);
	background-color: var(--blg-color-secondary);
	/* Smooth collapse when the header compacts on scroll — animate height/padding/
	   opacity instead of an abrupt display:none (which jumped the header ~46px and
	   caused the scroll glitch). max-height sits just above the strip's natural 46px. */
	overflow: hidden;
	max-height: 3rem;
	transition:
		max-height var(--blg-transition-base),
		padding-block var(--blg-transition-base),
		opacity var(--blg-transition-base),
		visibility 0s;
}

.kd-topbar .kd-topnav {
	min-height: 0;
}

/* Secondary menu (top strip) aligns to the right edge of the content column */
.kd-topbar .kd-navmount--secondary,
.kd-menu-wrap--secondary {
	display: flex;
	justify-content: flex-end;
}

/* Tier 2 — purple main bar */
.kd-mainbar {
	/* White nav bar. The starter's default header is a light bar under a dark
	   top strip — deliberately neutral so a client re-skin is a token change,
	   not a rewrite. Link colour comes from --blg-nav-link (contrast). */
	background-color: var(--blg-color-base);
	border-bottom: 1px solid var(--blg-color-neutral-300);
	min-height: var(--blg-mainbar-height);
	gap: 1.5rem;
	position: relative;
}

/* Logo — sits left, pushes the nav cluster right; overflows the bar a touch */
.kd-site-header .kd-site-logo.wp-block-site-logo {
	margin: 0 auto 0 0;
}

.kd-site-header .kd-site-logo img,
.kd-site-header .kd-site-logo .custom-logo {
	width: 110px;
	height: auto;
	max-height: none;
	display: block;
}

/* ── Brand badge (header) — circular logo overflows the bar into the hero ─────
   Desktop: absolutely placed against the (position:relative) mainbar so it hangs
   below the purple bar without growing it, and paints above the hero. The left
   offset matches the bar's content-column padding so it aligns with the content.
   Mobile: contained inside the bar (see the ≤768px override below). */
.kd-site-header .kd-brand-badge {
	/* Inline logo, sized to sit INSIDE the bar. The 2x overflowing badge this
	   replaced was a the community Celebrates flourish, not a starter default —
	   it depended on that project's circular mark and forced a taller header. */
	position: relative;
	display: flex;
	align-items: center;
	line-height: 0;
	/* Never let the mainbar's flex row squeeze the badge to make room for
	   its siblings (morning-r4: at ≤375px with the old hardcoded header
	   buttons still in the bar, the badge — and the img flex-item inside it —
	   were shrinking below their intrinsic ratio; computed rect was 106x52,
	   2.04:1, against the asset's real 2.57:1). The header-actions buttons
	   are hidden from the bar at mobile now (see below), but this stays as a
	   defensive floor so the logo can't be squished by a future sibling. */
	flex-shrink: 0;
}

/* Pin the brand to the LEFT edge of the bar.

   .kd-mainbar is justify-content:flex-end, which was correct while the badge was
   position:absolute and therefore out of flow — only the menu and actions were
   being pushed right. Once the badge became a normal flex item it was dragged
   right along with them and ended up sitting 483px past the bar's content start,
   directly against the menu. `margin-inline-end:auto` puts the brand hard left
   while leaving the menu + actions right-aligned as a group. */
.kd-site-header .kd-brand-badge {
	margin-inline-end: auto;
}

.kd-site-header .kd-brand-badge img {
	display: block;
	width: 140px; /* B Local Georgia horizontal lockup (Logo-Black.png, real ratio 1009x392 = ~2.57:1) */
	height: auto;
	aspect-ratio: 1009 / 392; /* CLS hint — replaces the removed height attribute (r4 review) */
	flex-shrink: 0; /* the img is itself a flex-item of .kd-brand-badge — see above */
	/* Asset is a transparent-background badge (no white card), so no clip needed;
	   the drop-shadow follows the badge's own alpha shape. */
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
	transition:
		width var(--blg-transition-base),
		filter var(--blg-transition-base);
}

/* ── Sticky-shrink on scroll ──────────────────────────────────────────────────
   JS (navigation.js) adds body.kd-header-scrolled past a small scroll threshold.
   The secondary strip collapses and the overflowing badge shrinks back INTO the
   main bar, so the header docks as a compact bar at the top. The sub-nav (if any)
   then sticks directly beneath it — see assets/css/patterns/anchor-nav.css. */
body.kd-header-scrolled .kd-topbar {
	max-height: 0;
	padding-block: 0 !important; /* override the inline 10px so it fully collapses */
	opacity: 0;
	visibility: hidden; /* drop the secondary links from the tab order once hidden */
	/* delay visibility:hidden until the collapse finishes so the links stay
	   reachable during the animation; reverses instantly on expand */
	transition:
		max-height var(--blg-transition-base),
		padding-block var(--blg-transition-base),
		opacity var(--blg-transition-base),
		visibility 0s var(--blg-transition-base);
}

/* Scrolled state: the logo already sits inside the bar, so nothing to resize.
   height:auto repeated explicitly (not just inherited) so this tier can never
   silently regress to a fixed height while width changes — the exact bug this
   pass fixed at mobile. */
body.kd-header-scrolled .kd-site-header .kd-brand-badge img {
	width: 120px;
	height: auto;
}

@media (max-width: 768px) {
	/* Mobile — keep it simple: contained inside the bar, no overflow */
	.kd-site-header .kd-brand-badge {
		position: static;
		left: auto;
		transform: none;
		margin-right: auto; /* pushes search/donate/hamburger to the right */
		align-self: center;
	}
	.kd-site-header .kd-brand-badge img {
		width: auto;
		height: 52px; /* fits inside the 72px mobile bar */
		filter: none;
	}
}

/* ── Classic menus on the bands (Appearance → Menus) ────────────────────────── */

.kd-menu-wrap {
	display: flex;
}

.kd-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--blg-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--blg-nav-font);
	font-weight: var(--blg-nav-weight);
	font-size: var(--blg-nav-size);
}

.kd-menu a {
	color: var(
		--blg-nav-link
	) !important; /* beats the global link colour on the light bar */
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	line-height: 1.2;
	transition: opacity var(--blg-transition-fast);
}

.kd-menu > li > a:hover,
.kd-menu > li > a:focus-visible {
	opacity: var(--blg-nav-link-hover-opacity);
	color: var(--blg-nav-link);
}

/* Desktop dropdowns (li.menu-item-has-children) */
.kd-menu--primary .menu-item-has-children {
	position: relative;
}

.kd-menu--primary .menu-item-has-children > a::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	margin-left: 0.15rem;
	transition: transform var(--blg-transition-fast);
}

.kd-menu--primary .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	min-width: var(--blg-dropdown-min-width);
	background: var(--blg-dropdown-bg);
	border-radius: var(--blg-dropdown-radius);
	box-shadow: var(--blg-dropdown-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--blg-transition-fast),
		transform var(--blg-transition-fast),
		visibility var(--blg-transition-fast);
	z-index: var(--blg-z-overlay);
}

.kd-menu--primary .menu-item-has-children:hover > .sub-menu,
.kd-menu--primary .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kd-menu--primary .sub-menu a {
	display: block;
	padding: 0.5rem 1.25rem;
	color: var(--blg-dropdown-link);
	font-weight: 500;
	white-space: nowrap;
}

.kd-menu--primary .sub-menu a:hover,
.kd-menu--primary .sub-menu a:focus-visible {
	color: var(--blg-dropdown-link-hover);
	opacity: 1;
}

/* ── Header actions — search + donate + hamburger ───────────────────────────── */

.kd-header-actions {
	gap: 1.25rem;
}

/* Collapse the core search block to an icon button, centered on the bar */
.kd-header-search {
	display: flex;
	align-items: center;
	margin: 0;
}

.kd-header-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	border: none;
	padding: 0;
	height: auto;
}

.kd-header-search .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--blg-color-base);
	min-width: auto;
	min-height: 0;
	height: 24px;
	padding: 0;
	margin: 0;
	line-height: 0;
}

.kd-header-search .wp-block-search__button svg {
	display: block;
}

.kd-header-search .wp-block-search__button svg {
	width: 24px;
	height: 24px;
	fill: var(--blg-color-base);
}

.kd-header-search .wp-block-search__button:hover {
	opacity: var(--blg-nav-link-hover-opacity);
}

/* ── Header action buttons (Join / Donate) — menu-manageable, morning-r4 ──────
   Rendered by blg_render_location_menu() (inc/navigation.php) as a plain
   wp_nav_menu() into the `kd-navmount--header-actions` marker — a bare <ul>,
   not wp:button blocks, so it's styled directly here rather than via
   .wp-block-button__link. Deliberately NOT given the shared `kd-menu` class
   (see the mount-config comment in navigation.php) so these two colors aren't
   fought by `.kd-menu a`'s !important. First item = primary pill (Join),
   second = clay outline pill (Donate) — position-based, matches the fixed
   2-item "BLGA Header Buttons" menu this ships with. */
.kd-header-actions__menu {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-header-actions__menu li {
	display: flex;
}

.kd-header-actions__menu a {
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1.5em;
	border-radius: var(--blg-radius-pill);
	font-family: var(--blg-nav-font);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	border: 2px solid transparent;
	transition:
		background-color var(--blg-transition-fast),
		color var(--blg-transition-fast),
		opacity var(--blg-transition-fast);
}

.kd-header-actions__menu li:first-child a {
	background-color: var(--blg-btn-bg);
	color: var(--blg-btn-fg);
}

.kd-header-actions__menu li:first-child a:hover,
.kd-header-actions__menu li:first-child a:focus-visible {
	background-color: var(--blg-btn-bg-hover);
	color: var(--blg-btn-fg);
}

/* NOTE: --blg-color-accent-2 is NOT Georgia Clay — it's the theme's decorative
   4-color accent-rotation alias (tokens.css), mapped to the WP "accent" preset
   (#00AEEF, cyan). Money-action Clay is the raw WP preset "accent-2"
   (#C64B2A, --wp--preset--color--accent-2) — same one the original hardcoded
   Donate button used via `has-accent-2-color`. Verified live: using the
   `--blg-color-*` alias here rendered cyan (rgb(0,174,239)), not clay. */
.kd-header-actions__menu li:not(:first-child) a {
	background-color: transparent;
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-2);
}

.kd-header-actions__menu li:not(:first-child) a:hover,
.kd-header-actions__menu li:not(:first-child) a:focus-visible {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--blg-color-base);
}

/* Bar cleanup (≤768px): the mainbar has only room for logo + hamburger at
   mobile widths — the Join/Donate pair crowded the bar, squished the logo
   below its intrinsic ratio, and pushed the hamburger out of view (verified
   via computed styles: logo rect was 106x52 = 2.04 ratio vs the asset's real
   2.57, on a bar that had no free width left). Join/Donate re-appear in the
   mobile slide-in panel instead (see .kd-header-actions__menu--mobile below). */
@media (max-width: 768px) {
	.kd-menu-wrap--header-actions {
		display: none;
	}
}

/* Mobile slide-in panel — Join/Donate rendered a second time (same
   `header-actions` menu, separate wp_nav_menu() call) as stacked full-width
   buttons at the panel's bottom, inside the existing `.kd-mobile-cta` wrapper. */
.kd-mobile-cta .kd-header-actions__menu--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

.kd-mobile-cta .kd-header-actions__menu--mobile li {
	width: 100%;
}

.kd-mobile-cta .kd-header-actions__menu--mobile a {
	width: 100%;
	justify-content: center;
	padding: 0.75em 1.5em;
}

/* ── Hamburger (mobile only) ────────────────────────────────────────────────── */

.kd-hamburger {
	display: none; /* shown ≤ breakpoint */
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 8px;
	background: none;
	border: none;
	cursor: pointer;
}

.kd-hamburger__bar {
	display: block;
	width: var(--blg-burger-width);
	height: var(--blg-burger-bar-height);
	background: var(--blg-burger-bar);
	border-radius: 2px;
	transition:
		transform var(--blg-transition-base),
		opacity var(--blg-transition-base);
}

/* morning-r4: --blg-burger-bar resolves to --blg-color-base (white) — a
   starter default written for a colored mainbar. BLG's mainbar is WHITE (see
   .kd-mainbar above), so the bars were rendering white-on-white: invisible,
   not just crowded out. Verified via computed background-color before/after.
   Scoped here (not a tokens.css edit) since the starter default is still
   correct for a dark-bar theme; this is a BLG-specific override. */
.kd-mainbar .kd-hamburger__bar {
	background: var(--blg-color-contrast);
}

/* The generic `.kd-mainbar :focus-visible { outline-color: base }` rule
   (Focus Indicators section, below) is also written for a dark/purple
   mainbar and would put a white ring on this white bar — invisible for
   keyboard users. Override for the hamburger specifically (higher
   specificity: .kd-mainbar .kd-hamburger:focus-visible beats
   .kd-mainbar :focus-visible); the broader mismatch for other mainbar
   elements is pre-existing and out of this pass's lane. */
.kd-mainbar .kd-hamburger:focus-visible {
	outline-color: var(--blg-color-contrast);
}

.kd-hamburger[aria-expanded="true"] .kd-hamburger__bar:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}
.kd-hamburger[aria-expanded="true"] .kd-hamburger__bar:nth-child(2) {
	opacity: 0;
}
.kd-hamburger[aria-expanded="true"] .kd-hamburger__bar:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

/* ── Off-canvas mobile panel (slides in from the right) ─────────────────────── */

.kd-mobile-overlay {
	position: fixed;
	inset: 0;
	background: var(--blg-mobile-overlay-bg);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--blg-mobile-transition),
		visibility var(--blg-mobile-transition);
	z-index: var(--blg-z-mobile-overlay);
}

.kd-mobile-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.kd-mobile-panel {
	/* Dark panel: same reasoning as .kd-topbar — the nav link token is scoped
	   per band so each surface carries its own contrast-correct value. The
	   panel is always in the DOM (transform-hidden), so an unscoped token here
	   silently ships navy-on-navy links. */
	--blg-nav-link: var(--blg-color-base);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--blg-mobile-panel-width);
	max-width: var(--blg-mobile-panel-max);
	background: var(--blg-mobile-panel-bg);
	color: var(--blg-mobile-panel-fg);
	padding: var(--blg-mobile-panel-pad);
	box-shadow: var(--blg-mobile-panel-shadow);
	transform: translateX(100%);
	/* visibility, not just transform: a transform-hidden element is still
	   focusable. `inert` (set in PHP + toggled in JS) is the primary mechanism;
	   this is the fallback when JS has not run. */
	visibility: hidden;
	transition:
		transform var(--blg-mobile-transition),
		visibility var(--blg-mobile-transition);
	z-index: var(--blg-z-mobile-panel);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.kd-mobile-panel.is-open {
	transform: translateX(0);
	visibility: visible;
}

/* Keep the panel (and its ✕) clear of the WP admin bar when logged in —
   the bar is 32px on desktop, 46px at the ≤782px breakpoint. */
.admin-bar .kd-mobile-panel {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .kd-mobile-panel {
		top: 46px;
	}
}

.kd-mobile-close {
	position: absolute;
	top: 1.75rem;
	right: 1.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	border-radius: 50%;
	color: var(--blg-mobile-panel-fg);
	cursor: pointer;
	padding: 0;
	line-height: 0;
	z-index: 2;
	transition: background-color var(--blg-transition-fast);
}

.kd-mobile-close:hover,
.kd-mobile-close:focus-visible {
	background: rgba(255, 255, 255, 0.22);
}

/* The panel's ✕ is the close control while open — hide the hamburger so the two
   don't collide at the top-right corner (the burger sits in the header and was
   painting over / next to the panel's close button). */
body.kd-nav-open .kd-hamburger {
	opacity: 0;
	pointer-events: none;
}

.kd-mobile-panel__inner {
	margin-top: 4rem;
}

.kd-menu--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
	font-size: 1.1rem;
}

.kd-menu--mobile li {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.kd-menu--mobile a {
	color: var(--blg-mobile-panel-fg);
	display: block;
	padding: 0.85rem 0;
	width: 100%;
}

/* Parent row is the whole tap target (expands; does not navigate on mobile) */
.kd-menu--mobile .menu-item-has-children > a {
	position: relative;
	padding-right: 1.75rem;
	cursor: pointer;
}

.kd-menu--mobile .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--blg-transition-fast);
}

.kd-menu--mobile .menu-item-has-children.is-expanded > a::after {
	transform: translateY(-30%) rotate(-135deg);
}

.kd-menu--mobile .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem 1rem;
	display: none;
}

.kd-menu--mobile .menu-item-has-children.is-expanded > .sub-menu {
	display: block;
}

.kd-menu--mobile .sub-menu li {
	border-bottom: none;
}

.kd-menu--mobile .sub-menu a {
	padding: 0.5rem 0;
	font-size: 1rem;
	opacity: 0.92;
}

.kd-menu--mobile-secondary {
	margin-top: 1rem;
	font-size: 1rem;
	opacity: 0.85;
}

.kd-mobile-cta {
	margin-top: 1.75rem;
}

.kd-btn-invert-solid {
	display: inline-block;
	background: var(--blg-color-base);
	color: var(--blg-color-primary);
	border-radius: var(--blg-radius-pill);
	padding: 0.7em 2em;
	font-family: var(--blg-font-heading);
	font-weight: 900;
	font-size: var(--blg-size-btn);
	text-transform: uppercase;
	letter-spacing: 0.2px;
	text-decoration: none;
}

/* Lock body scroll while the panel is open */
body.kd-nav-open {
	overflow: hidden;
}

/* Admin-only "assign a menu" hint when a location is empty */
.kd-nav-empty a {
	color: var(--blg-color-base);
	font-size: 0.85rem;
	opacity: 0.8;
	text-decoration: underline;
}

/* ── Nav responsive switch ────────────────────────────────────────────────────
   Raised 768 -> 1199 (afternoon-r1). Adding "Certification Help" made the
   primary menu six top-level items, and the desktop bar genuinely runs out of
   room below 1200px: the nav needs 542px (402px of labels + five 28px gaps)
   while its flex container measures 512px at 1100 and 448px at 1024, so it
   wrapped to two rows — measured, not guessed. Squeezing --blg-nav-gap to fit
   would have meant ~9px between items at 1024, which is not a gap.

   Only the NAV switch moved. `.kd-menu-wrap--header-actions` still hides at
   768 (see the bar-cleanup rule above), so 769-1199 renders logo + Join +
   Donate + hamburger — an ordinary tablet header that keeps both CTAs visible
   rather than burying them. Below 769 nothing changed. */

@media (max-width: 1199px) {
	/* hide desktop primary nav + indigo strip; show hamburger */
	.kd-menu-wrap--primary,
	.kd-topbar {
		display: none;
	}
	.kd-hamburger {
		display: flex;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   SITE FOOTER — purple band (Figma Footer component 177:3795)
   ══════════════════════════════════════════════════════════════════════════════ */

.kd-site-footer {
	background-color: var(--blg-color-contrast);
	color: var(--blg-color-base);
	padding-left: var(--blg-edge-pad) !important;
	padding-right: var(--blg-edge-pad) !important;
}

.kd-site-footer a {
	color: var(--blg-color-base);
}

.kd-site-footer a:hover {
	color: var(--blg-color-base);
	opacity: 0.8;
}

.kd-site-footer .kd-footer-heading {
	color: var(--blg-color-base);
	margin-top: 0;
}

.kd-footer-columns {
	align-items: flex-start;
}

.kd-footer-col p {
	color: var(--blg-color-base);
	max-width: var(--blg-footer-measure);
}

/* Footer brand — logo and tagline both up a step (Alain, 2026-08-21). The
   logo was 84px, well under the header's, which left the brand column reading
   as the quietest thing in the footer when it should anchor it. The tagline is
   the footer's own statement of what the org is, so it sits at body-lg rather
   than plain body. Source asset is 140px wide, so 120 stays under its natural
   size — no upscaling. */
.kd-footer-logo img,
.kd-footer-logo .custom-logo {
	width: 120px;
	height: auto;
}

.kd-footer-tagline {
	font-size: var(--blg-size-body-lg); /* 18px, was 16px */
	line-height: 1.45;
}

/* Footer link menu — right-aligned column (classic menu) */
.kd-menu-wrap--footer {
	justify-content: flex-end;
}

.kd-menu--footer {
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
	font-family: var(--blg-font-body);
	font-weight: 400;
	font-size: 1rem;
}

.kd-menu--footer a,
.kd-site-footer .kd-menu a {
	/* must out-rank the light-bar `.kd-menu a { !important }` rule above */
	color: var(--blg-color-base) !important;
	text-decoration: none;
}

.kd-menu--footer a:hover {
	text-decoration: underline;
	opacity: 0.9;
}

/* Social icon menu — pink circles per spec (#E770A8), indigo on hover */
.kd-social-wrap {
	margin-top: var(--blg-space-md);
	display: flex;
	justify-content: flex-end;
}

.kd-social-menu {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-social-menu .kd-social-item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--blg-color-accent);
	color: var(--blg-color-base);
	transition: background-color var(--blg-transition-fast);
}

.kd-social-menu .kd-social-item a svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.kd-social-menu .kd-social-item a:hover {
	background: var(--blg-color-secondary);
}

/* Pink divider — extra classes out-specify core's .has-background.is-style-wide
   rule (which otherwise forces the separator height). */
.kd-site-footer .kd-footer-divider.wp-block-separator.has-background {
	border: none;
	height: 3px;
	background-color: var(--blg-color-accent);
	opacity: 1;
	max-width: none;
	width: 100%;
}

.kd-footer-copyright {
	color: var(--blg-color-base);
	opacity: 0.85;
	margin: 0;
}

/* ── Focus Indicators (Accessibility) ───────────────────────────────────────── */

*:focus-visible {
	outline: 3px solid var(--blg-color-primary);
	outline-offset: 2px;
}

/* Buttons — rounded focus ring */
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--blg-color-primary);
	outline-offset: 3px;
	border-radius: var(--blg-radius-pill);
}

/* On the purple bands, focus ring switches to white for contrast */
.kd-mainbar :focus-visible,
.kd-topbar :focus-visible,
.kd-site-footer :focus-visible {
	outline-color: var(--blg-color-base);
}

/* Remove default outline on mouse click */
:focus:not(:focus-visible) {
	outline: none;
}

/* ── Footer subscribe form ────────────────────────────────────────────────
   The footer's Subscribe control used to be a dead `href="#"` button; it now
   renders Gravity Forms id 3 (single email field). Styled here rather than in
   newsletter-inset.css because that partial is scoped to the Contact page's
   inset card — this is the same FORM on a dark ground, which needs the
   opposite ink.

   One row: email pill + Sky Cyan Subscribe pill, matching the inset's shape so
   the two instances read as the same component. */

.kd-footer-subscribe .gform_wrapper.gform-theme {
	--gf-ctrl-bg-color: var(--blg-color-base);
	--gf-ctrl-border-width: 0;
	--gf-ctrl-radius: var(--blg-radius-pill);
	--gf-ctrl-color: var(--blg-color-contrast);
	--gf-ctrl-font-family: var(--blg-font-body);
	--gf-ctrl-size: var(--blg-size-body);
	--gf-ctrl-btn-bg-color-primary: var(--blg-color-accent); /* Sky Cyan */
	--gf-ctrl-btn-bg-color-hover-primary: var(--blg-color-base);
	--gf-ctrl-btn-color-primary: var(--blg-color-contrast);
	--gf-ctrl-btn-border-width-primary: 0;
	--gf-ctrl-btn-font-family: var(--blg-font-heading);
	--gf-ctrl-btn-font-size: 0.9375rem;
	--gf-ctrl-btn-font-weight: var(--blg-fw-heading);
	--gf-ctrl-btn-radius: var(--blg-radius-pill);
	--gf-ctrl-btn-padding-x: 1.5em;
	--gf-ctrl-btn-padding-y: 0.7em;
	--gf-ctrl-btn-text-transform: uppercase;
}

.kd-footer-subscribe .gform_wrapper form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--blg-space-sm);
}

.kd-footer-subscribe .gform_wrapper .gform-body {
	flex: 1 1 11rem;
	min-width: 0;
	margin: 0;
}

.kd-footer-subscribe .gform_wrapper .gform_fields {
	display: block; /* single field — the grid would add a row gap for nothing */
}

.kd-footer-subscribe .gform_wrapper .gfield {
	margin: 0;
}

.kd-footer-subscribe .gform_wrapper .gfield input[type="email"] {
	width: 100%;
	padding: 0.7rem 1.15rem;
}

.kd-footer-subscribe .gform_wrapper .gform_footer {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.kd-footer-subscribe .gform_wrapper .gform_footer .gform_button {
	white-space: nowrap;
	cursor: pointer;
}

/* Validation + the ajax confirmation take the full row, and must be legible on
   the dark footer — the form's own defaults assume a light ground. */
.kd-footer-subscribe .gform_wrapper .gform_validation_errors,
.kd-footer-subscribe .gform_wrapper .gfield_validation_message,
.kd-footer-subscribe .gform_confirmation_message {
	flex: 1 1 100%;
	margin: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	font-family: var(--blg-font-body);
	font-size: 0.875rem;
	color: var(--blg-color-base);
}

/* ── Eyebrow + section heading — ONE type spec, site-wide ──────────────────
   Alain, 2026-08-21: "The eyebrow, whether they are blue or dark petrol, they
   should have the same style as the Our Story eyebrow (beside colors)."

   morning-r6 unified every PATTERN-SCOPED eyebrow to `.kd-split__eyebrow`'s
   spec, but eyebrows composed inline in page-content/*.html were never covered
   — there was no rule on the bare `.kd-eyebrow` class at all, so they fell
   through to the body font at paragraph size and whatever inline font-weight
   the markup carried. Measured on /about/: "Our Story" and "Why We Do It" were
   Raleway 900 / 14.08px, while "What We Believe" and "Our Board" were
   Inter 600 / 16px. Same page, two eyebrow styles.

   Type only — COLOUR IS DELIBERATELY NOT SET. Eyebrows are petrol on the split
   pattern, Georgia Blue on plain sections and white on the stat cards; that is
   context, and the class should not fight it.

   `.kd-section-heading` is the matching piece for section H2s: Alain again —
   "The split card h2 are 50 and they look great, so why is this one smaller".
   Same clamp and line-height as `.kd-split__heading` so a section head reads
   identically whether it sits in a split or a plain band. !important for the
   same reason the split rule needs it: global.css's own h2 mobile down-scale
   rules ship with !important and would otherwise stomp display headings. */

.kd-eyebrow {
	font-family: var(--blg-font-heading);
	font-size: var(--blg-size-eyebrow); /* 14px */
	font-weight: var(--blg-fw-heading); /* 900 */
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kd-section-heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-h2-section) !important;
	line-height: var(--blg-lh-h2-section) !important;
}

/* ── Section Spacing ───────────────────────────────────────────────────────── */

/* Owl selector: one --blg-section-gap margin between every pair of stacked
   .entry-content children — groups AND the cover-based CTA band. Applied once,
   regardless of whether the adjacent section is plain or banded/colored.
   First child gets no margin-top (top of page is handled by hero / no-hero
   clearance tokens, which are left untouched).

   `main > .entry-content` (afternoon-r1), NOT bare `.entry-content`: this
   section-rhythm family only makes sense where post-content's children ARE
   whole sections, which is true on the page templates (page.html,
   page-with-hero.html, front-page.html all put wp:post-content directly under
   <main> — verified in the rendered DOM, not just the template source). The
   CPT singles (single.html, single-post.html, single-kd_event.html) nest
   post-content inside a `__body` wrapper group, so ITS children are ordinary
   prose blocks — paragraphs, lists, the kd-events plugin's meta block — and
   every one of them was collecting a 120px SECTION gap. On the event single
   that produced a page of disconnected fragments with ~120px of void between
   each; the tracker had it logged as the unexplained "~120px hero->meta-list
   gap". The direct-child combinator is the whole fix: page rendering is
   byte-identical (measured), nested prose stops being treated as sections.

   All four rules in this family carry the same `main >` scope so their
   documented specificity relationship is preserved: the owl goes (0,1,0) ->
   (0,1,1) and the trailing-margin zeroer (0,2,0) -> (0,2,1), so the zeroer
   still wins its tie exactly as before. */
main > .entry-content > * + * {
	margin-block-start: var(--blg-section-gap);
}

/* Zero the trailing margin only. The owl above (--blg-section-gap, specificity
   0,1,0) already beats WP's zero-specificity :where(.is-layout-constrained) > * + *
   block-gap, so the inter-section gap is exactly --blg-section-gap. Do NOT switch
   this to `margin-block:0` — `.entry-content > .wp-block-group` is (0,2,0) and
   would override the owl's margin-block-start, collapsing every gap to zero. */
main > .entry-content > .wp-block-group {
	margin-block-end: 0;
}

/* morning-r6: the LAST section on every page ran flush into the footer — 0px
   confirmed via computed-style read on Home/Join/About/Members (the CTA
   band's own 96px is internal card padding, not clearance to the footer
   below it). Root cause: `.kd-section{padding-block:0}` zeroes a banded
   section's own padding and the zeroing rule directly above zeroes every
   section's margin-block-end (both by design, so the owl's margin-block-start
   is the ONLY inter-section gap) — nothing ever gave the trailing edge of the
   page itself any clearance before `footer.wp-block-template-part` (main's
   sibling, outside .entry-content entirely). Mirrors the first-child
   hero-clearance treatment below, same --blg-section-gap token, same
   equal-specificity/source-order idiom as the zeroing rule above (both are
   0,2,0 — this one is declared after, so it wins the tie). Matches ANY
   last-child tag, not just .wp-block-group, so Members' raw [blg_members]
   shortcode output (no wp-block-group wrapper — confirmed via computed
   className read) gets it too, not only the pattern-composed pages. */
main > .entry-content > *:last-child:not(.alignfull) {
	/* Full-bleed (alignfull) last bands — e.g. Join's petrol form band — run FLUSH
	   into the footer (matching band+footer tokens would otherwise sandwich a page-
	   background stripe between two dark blocks — r6 review 🔴). Contained last
	   sections (tint CTA card, grids) keep the rhythm gap. */
	margin-block-end: var(--blg-section-gap);
}

/* Plain sections: no vertical padding — the margin-gap is the only space.
   Banded sections set their own padding-block in their pattern partials. */
.kd-section {
	padding-block: 0;
}

/* Interior-hero pages: <main> has blockGap:0 and the owl above skips the first
   child, so the first content section would butt directly against the hero.
   Give it one rhythm unit of separation below the hero.

   Applies under BOTH heroes, but keyed on what the first child actually is
   rather than on which hero precedes it. A full-bleed (.alignfull) band is
   meant to run flush to the hero — that was the original reason home was
   excluded wholesale. Any ordinary constrained section is not, and was landing
   with 0px against the hero because the section-rhythm owl selector
   (> * + *) skips the first child by design.

   `.blg-values-row-section` is EXCLUDED from the interior-hero clause
   (morning-r6): that band now supplies its own padding-block top inset
   (values-row.css, generalized to every variant) so it doesn't need this
   external margin too — Join is the only interior-hero page where this band
   is the first section, and without the exclusion it would stack this
   120px/96px/64px margin ON TOP OF the band's own 96px/64px padding-top for a
   ~216px double-pad. Home's own branch already excludes it via the blanket
   `:not(.alignfull)` (this band is alignfull there too), so this only changes
   Join's rendering. */
main:has(.kd-hero-interior)
	> .entry-content
	> :first-child:not(.blg-values-row-section),
main:has(.kd-hero-home) > .entry-content > :first-child:not(.alignfull) {
	margin-block-start: var(--blg-section-gap);
}

.entry-content > .wp-block-group > *:first-child {
	margin-top: 0;
}

.entry-content > .wp-block-group > *:last-child {
	margin-bottom: 0;
}

/* Section header → content gap */
.kd-section-header {
	margin-bottom: 65px !important;
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}

.kd-section-header h2 {
	margin-bottom: var(--blg-gap-tight) !important;
}

.kd-section-header p {
	margin-top: 0 !important;
}

/* ── Kill WP default 24px margin between site-level blocks ───────────────── */

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ── Interior Page Hero ────────────────────────────────────────────────────── */

.kd-hero-interior {
	width: 100%;
	align-items: flex-start !important; /* top-anchor content vertically (cover cross-axis) */
	min-height: var(
		--blg-hero-interior-min
	) !important; /* beat the cover's inline min-height */
	/* BLGA: solid Deep Petrol is the default (comps: interior heroes are flat
	   contrast bands); a Featured Image (raster OR svg) overrides it. */
	background: var(--blg-color-contrast);
	/* Match the header/footer band: edge-pad gutter; the inner caps at content-max. */
	padding-inline: var(--blg-edge-pad) !important;
	padding-top: var(
		--blg-hero-content-top
	) !important; /* breadcrumb 50px below the badge */
}

/* No Featured Image → show the brand gradient clean (kill the dark legibility wash). */
.kd-hero-interior:not(:has(img)) .wp-block-cover__background {
	background: transparent !important;
	opacity: 1 !important;
}

/* Featured Image set → keep the left-to-right wash so white text stays legible. */
.kd-hero-interior:has(img) .wp-block-cover__background {
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0.35) 50%,
		transparent 100%
	) !important;
	opacity: 1 !important;
}

/* Hero content aligns to the same gutter + max-width as the rest of the site. */
.kd-hero-interior .wp-block-cover__inner-container {
	max-width: var(--blg-content-max);
	margin: 0 auto;
	width: 100%;
}

.kd-hero-interior .wp-block-post-title {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-banner);
	color: var(--blg-color-base);
	line-height: var(--blg-lh-tight);
	margin-top: var(--blg-space-sm);
	margin-bottom: 0;
}

.kd-hero-subtitle {
	margin-top: 2rem;
	max-width: 36rem;
}

/* Sticky footer — the wrapper fills the viewport so the footer sits at the bottom
   on short pages. `main` grows to take the slack; the hero keeps its own height
   (it's min-height, not flex-stretched), so hero sections are unaffected. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Pages WITHOUT a hero (no-hero pages, CPT archives, posts) get top clearance so
   content doesn't collide with the badge that overflows the bar. Hero templates
   are auto-exempt — the badge is meant to spill onto the hero. */
.wp-site-blocks > main:not(:has(.kd-hero-interior)):not(:has(.kd-hero-home)) {
	padding-top: var(--blg-no-hero-top);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.kd-breadcrumb {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--blg-color-base);
}

.kd-breadcrumb__home {
	color: var(--blg-color-base);
	opacity: 0.7;
	display: flex;
	align-items: center;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.kd-breadcrumb__home:hover {
	opacity: 1;
	color: var(--blg-color-base);
}

.kd-breadcrumb__sep {
	opacity: 0.7;
	display: flex;
	align-items: center;
}

.kd-breadcrumb__link {
	color: var(--blg-color-base);
	opacity: 0.7;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.kd-breadcrumb__link:hover {
	opacity: 1;
	color: var(--blg-color-base);
}

.kd-breadcrumb__current {
	opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤1024px)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	/* Typography — scale down headings */
	h1,
	.has-huge-font-size {
		font-size: 2.5rem !important;
	}
	h2,
	.has-xx-large-font-size {
		font-size: 1.6rem !important;
	}
	h3,
	.has-x-large-font-size {
		font-size: 1.35rem !important;
	}

	/* Header gutter override removed — the base .kd-topbar/.kd-mainbar rule
	   already pads with --blg-edge-pad. The hardcoded 24px that used to live
	   here diverged from the body's clamp gutter (7.64vw → 78px @1024, 59px
	   @768), so the logo and Donate button stopped lining up with the content
	   column through the whole 768–1024 band. One token, every band. */

	.kd-site-header .kd-site-logo img,
	.kd-site-header .kd-site-logo .custom-logo {
		width: 90px;
	}

	/* Footer — brand full width, other two columns side by side */
	.kd-footer-columns {
		flex-wrap: wrap !important;
		gap: var(--blg-space-lg) !important;
	}

	.kd-footer-columns > .kd-footer-col--brand {
		flex-basis: 100% !important;
	}

	.kd-footer-columns > .kd-footer-col--newsletter,
	.kd-footer-columns > .kd-footer-col--links {
		flex-basis: calc(50% - var(--blg-space-lg) / 2) !important;
	}

	/* (footer gutter override removed — the base .kd-site-footer rule already
	   pads with --blg-edge-pad, which tracks the body gutter at every width.
	   The fixed 24px here put the footer 54px outside the body column @1024.) */

	/* Hero — reduce min-height on tablet */
	.wp-block-cover {
		min-height: 50vh !important;
	}

	/* Interior hero keeps its fixed token, not the viewport-relative floor —
	   same equal-specificity source-order fight as the ≤768 case (r5 review). */
	.kd-hero-interior {
		min-height: var(--blg-hero-interior-min) !important;
		padding-top: var(--blg-hero-content-top) !important;
	}

	/* Buttons — slightly smaller on tablet */
	.wp-block-button__link,
	.kd-btn {
		padding: 0.7em 1.5em;
		font-size: 1rem;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	/* Typography — further scale-down */
	h1,
	.has-huge-font-size {
		font-size: 2.125rem !important;
	}
	h2,
	.has-xx-large-font-size {
		font-size: 1.5rem !important;
	}
	h3,
	.has-x-large-font-size {
		font-size: 1.3rem !important;
	}

	/* Body text — slightly tighter line height */
	body {
		line-height: 1.6;
	}

	/* Hero — shorter on mobile */
	.wp-block-cover {
		min-height: 40vh !important;
	}

	/* Interior/no-hero heroes — HUG content on mobile, not viewport-relative
	   (morning-r5 visual-pass fix). --blg-hero-content-top (134px) and
	   --blg-hero-interior-min (452px) exist to clear the DESKTOP brand badge,
	   which overflows the mainbar and needs 50px of breathing room below it
	   (see "Interior Page Hero" above). At ≤768px the badge is CONTAINED
	   inside the bar instead (no overflow — see the .kd-brand-badge ≤768px
	   override further up), so that clearance no longer applies: keeping the
	   desktop values here was forcing a ~600-800px band (134px padding-top
	   alone eats over a third of a phone screen) with a large empty
	   Deep-Petrol void under short titles. Mobile gets its own, much smaller
	   values. This rule is also the thing that makes `.kd-hero-interior`
	   actually hug its content instead of being floored by the generic
	   `.wp-block-cover{min-height:40vh}` rule just above — both rules are a
	   single class selector (equal specificity), so source order decides,
	   and this one comes after. */
	/* Hero-token mobile overrides moved to tokens.css beside the base definitions (r5 review). */

	.kd-hero-interior {
		min-height: var(--blg-hero-interior-min) !important;
		padding-top: var(--blg-hero-content-top) !important;
	}

	/* /donate/thank-you/ (morning-r5 fix #3) — this no-hero page's own content
	   card (page-content/donate-thank-you.html) carries a fixed 96px
	   top/bottom padding (spacing preset 70) baked in as an inline style for
	   its desktop "framed" look. Stacked under --blg-no-hero-top above, that
	   put "Thank you" ~152px below the header on mobile — most of a phone
	   screen of empty space. Trims the TOP only (bottom stays symmetric,
	   doesn't contribute to the reported void); beats the inline style
	   because inline has no !important of its own. */
	.kd-donate-thankyou {
		padding-top: 24px !important;
	}

	.wp-block-cover__inner-container {
		padding-left: var(--blg-space-md) !important;
		padding-right: var(--blg-space-md) !important;
	}

	/* Header — collapse top strip, keep main bar */
	.kd-mainbar {
		min-height: 72px;
	}

	.kd-site-header .kd-site-logo img,
	.kd-site-header .kd-site-logo .custom-logo {
		width: 80px;
	}

	/* Hide secondary strip links on small screens — they live in the overlay menu */
	.kd-topbar {
		display: none;
	}

	/* Footer — stack to a single column */
	.kd-footer-columns {
		flex-wrap: wrap !important;
		gap: var(--blg-space-lg) !important;
	}

	.kd-footer-columns > .kd-footer-col {
		flex-basis: 100% !important;
	}

	.kd-footer-col--links .kd-menu-wrap--footer,
	.kd-footer-col--links .kd-social-wrap {
		justify-content: flex-start !important;
	}

	.kd-footer-col--links .kd-menu--footer {
		align-items: flex-start !important;
	}

	/* (footer gutter override removed — see the ≤1024 note; base rule wins.) */

	/* Buttons — keep inline, slightly smaller */
	.wp-block-button__link,
	.kd-btn {
		padding: 0.65em 1.4em;
		font-size: 0.9375rem;
	}

	.kd-section-header {
		margin-bottom: 32px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small phones (≤480px)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	h1,
	.has-huge-font-size {
		font-size: 1.85rem !important;
	}
	h2,
	.has-xx-large-font-size {
		font-size: 1.4rem !important;
	}

	.kd-section-header {
		margin-bottom: var(--blg-space-sm) !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Landscape orientation (short viewports)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
	.wp-block-cover {
		min-height: 60vh !important;
	}
}

/* ── Link contrast on light surfaces ──────────────────────────────────────────
   Embolden Blue (#2383EB) on white measures 3.81:1 — it FAILS WCAG AA (4.5:1)
   for normal-size text. It passes AA Large (3:1), so it stays correct for
   buttons and large display text, but body-size links need a darker value.
   --blg-color-link is that value: Anchor Navy, 14.6:1 on white. Change this
   token, not the brand primary, if a client needs a different link colour. */
:root {
	--blg-color-link: var(--blg-color-contrast);
}

.entry-content a:not(.wp-element-button):not([class*="kd-btn"]),
.kd-card a {
	color: var(--blg-color-link);
}

/* ── Skip link (WCAG 2.4.1 Bypass Blocks) ─────────────────────────────────────
   With a two-tier nav plus a hero sub-nav, a keyboard user otherwise tabs
   through 15+ links before reaching content on EVERY page. Visually hidden
   until focused, then pinned top-left above everything. Relies on
   .screen-reader-text, which is defined below rather than borrowed from core's
   block-library stylesheet — the theme used that class in four places without
   ever defining it. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kd-skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: calc(var(--blg-z-header) + 10);
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	overflow: visible;
	background: var(--blg-color-base);
	color: var(--blg-color-contrast);
	border-radius: var(--blg-radius-sm);
	box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
	font-weight: 700;
	text-decoration: none;
}