/**
 * Global Base Styles — Gg
 */

*,
*::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(--kd-font-body);
	font-size: var(--kd-size-body);
	font-weight: var(--kd-fw-body);
	line-height: var(--kd-lh-body);
	color: var(--kd-color-body);
	background-color: var(--kd-color-base);
	-webkit-font-smoothing: antialiased;
}

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

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

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

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

.kd-announcement-bar {
	background-color: var(--kd-color-banner-bg);
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--kd-color-base);
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: max(var(--kd-space-lg), calc((100% - 1216px) / 2)) !important;
	padding-right: max(
		var(--kd-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(--kd-font-heading);
	font-size: var(--kd-size-btn);
	font-weight: var(--kd-fw-heading);
	text-transform: uppercase;
	letter-spacing: 0.2px;
	border-radius: var(--kd-radius-pill);
	padding: 0.85em 1.75em;
	transition:
		background-color var(--kd-transition-base),
		color var(--kd-transition-base),
		border-color var(--kd-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(--kd-btn-bg);
	color: var(--kd-btn-fg);
	border-color: var(--kd-btn-bg);
}

.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
	.wp-block-button__link:hover {
	background-color: var(--kd-btn-bg-hover);
	border-color: var(--kd-btn-bg-hover);
	color: var(--kd-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(--kd-btn-outline);
	border-color: var(--kd-btn-outline);
	border-width: 3px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--kd-btn-outline-hover);
	border-color: var(--kd-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(--kd-color-base);
	border-color: var(--kd-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(--kd-color-base);
	color: var(--kd-color-primary);
	border-color: var(--kd-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(--kd-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(--kd-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(--kd-btn-link-accent);
	text-decoration-color: var(--kd-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(--kd-btn-fg);
	color: var(--kd-btn-bg);
	border-color: var(--kd-btn-fg);
}
.kd-hero-interior
	.wp-block-button:not(.is-style-outline)
	.wp-block-button__link:hover {
	background-color: color-mix(
		in srgb,
		var(--kd-btn-fg) 88%,
		var(--kd-btn-bg)
	);
	border-color: color-mix(in srgb, var(--kd-btn-fg) 88%, var(--kd-btn-bg));
	color: var(--kd-btn-bg);
}
.kd-hero-interior .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--kd-btn-fg);
	border-color: var(--kd-btn-fg);
}
.kd-hero-interior
	.wp-block-button.is-style-outline
	.wp-block-button__link:hover {
	background-color: var(--kd-btn-fg);
	color: var(--kd-btn-bg);
	border-color: var(--kd-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(--kd-z-header);
}

/* Below 600px WordPress switches #wpadminbar to position:absolute (it scrolls away
   with the page instead of staying pinned to the viewport top). The sticky header
   must NOT keep reserving the admin-bar height there, or a ~46px empty gap opens
   above it once the bar scrolls off — the top offset would point at a bar that's no
   longer at the top. Reset the offset to 0 for that scroll-away range; above 600px
   the bar stays fixed and the var offset is correct. Mirrors the admin-bar handling
   already on .kd-mobile-panel below. Logged-out there's no admin bar (base top is
   already 0), so this is a no-op. */
@media screen and (max-width: 600px) {
	header.wp-block-template-part:has(.kd-site-header) {
		top: 0;
	}
}

.kd-site-header {
	position: relative;
	z-index: var(--kd-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(--kd-edge-pad) !important;
	padding-right: var(--kd-edge-pad) !important;
}

/* Tier 1 — indigo secondary strip */
.kd-topbar {
	background-color: var(--kd-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(--kd-transition-base),
		padding-block var(--kd-transition-base),
		opacity var(--kd-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 {
	background-color: var(--kd-color-primary);
	min-height: var(--kd-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 {
	position: absolute;
	left: var(--kd-edge-pad);
	top: 0; /* top of the badge = top of the purple mainbar */
	z-index: var(--kd-z-header);
	line-height: 0;
	transition: top var(--kd-transition-base);
}

.kd-site-header .kd-brand-badge img {
	display: block;
	width: 168px; /* 2× the ~84px mainbar: top touches the bar top, center sits on the bar bottom */
	height: auto;
	/* 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(--kd-transition-base),
		filter var(--kd-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(--kd-transition-base),
		padding-block var(--kd-transition-base),
		opacity var(--kd-transition-base),
		visibility 0s var(--kd-transition-base);
}

body.kd-header-scrolled .kd-site-header .kd-brand-badge {
	top: 10px; /* center a 64px badge inside the 84px bar */
}

body.kd-header-scrolled .kd-site-header .kd-brand-badge img {
	width: 64px; /* "resize back into the nav" — no longer overflows the bar */
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

@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(--kd-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--kd-nav-font);
	font-weight: var(--kd-nav-weight);
	font-size: var(--kd-nav-size);
}

.kd-menu a {
	color: var(--kd-nav-link);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	line-height: 1.2;
	transition: opacity var(--kd-transition-fast);
}

.kd-menu > li > a:hover,
.kd-menu > li > a:focus-visible {
	opacity: var(--kd-nav-link-hover-opacity);
	color: var(--kd-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(--kd-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(--kd-dropdown-min-width);
	background: var(--kd-dropdown-bg);
	border-radius: var(--kd-dropdown-radius);
	box-shadow: var(--kd-dropdown-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--kd-transition-fast),
		transform var(--kd-transition-fast),
		visibility var(--kd-transition-fast);
	z-index: var(--kd-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(--kd-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(--kd-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(--kd-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(--kd-color-base);
}

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

.kd-header-donate .wp-block-button__link {
	padding: 0.5em 1.5em;
	font-size: 1.0625rem;
	white-space: nowrap;
}

/* Tighter donate on phones so it sits cleanly beside search + hamburger */
@media (max-width: 768px) {
	.kd-header-donate .wp-block-button__link {
		padding: 0.4em 1.1em;
		font-size: 0.9rem;
		border-width: 2px;
	}
	.kd-header-actions {
		gap: 0.75rem;
	}
}

/* ── 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(--kd-burger-width);
	height: var(--kd-burger-bar-height);
	background: var(--kd-burger-bar);
	border-radius: 2px;
	transition:
		transform var(--kd-transition-base),
		opacity var(--kd-transition-base);
}

.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(--kd-mobile-overlay-bg);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--kd-mobile-transition),
		visibility var(--kd-mobile-transition);
	z-index: var(--kd-z-mobile-overlay);
}

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

.kd-mobile-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--kd-mobile-panel-width);
	max-width: var(--kd-mobile-panel-max);
	background: var(--kd-mobile-panel-bg);
	color: var(--kd-mobile-panel-fg);
	padding: var(--kd-mobile-panel-pad);
	box-shadow: var(--kd-mobile-panel-shadow);
	transform: translateX(100%);
	transition: transform var(--kd-mobile-transition);
	z-index: var(--kd-z-mobile-panel);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

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

/* 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(--kd-mobile-panel-fg);
	cursor: pointer;
	padding: 0;
	line-height: 0;
	z-index: 2;
	transition: background-color var(--kd-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(--kd-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(--kd-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(--kd-color-base);
	color: var(--kd-color-primary);
	border-radius: var(--kd-radius-pill);
	padding: 0.7em 2em;
	font-family: var(--kd-font-heading);
	font-weight: 900;
	font-size: var(--kd-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(--kd-color-base);
	font-size: 0.85rem;
	opacity: 0.8;
	text-decoration: underline;
}

/* ── Nav responsive switch ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
	/* 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(--kd-color-primary);
	color: var(--kd-color-base);
	padding-left: var(--kd-edge-pad) !important;
	padding-right: var(--kd-edge-pad) !important;
}

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

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

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

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

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

.kd-footer-logo img,
.kd-footer-logo .custom-logo {
	width: 84px;
	height: auto;
}

.kd-footer-tagline {
	font-size: 1rem;
}

/* 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(--kd-font-body);
	font-weight: 400;
	font-size: 1rem;
}

.kd-menu--footer a {
	color: var(--kd-color-base);
	text-decoration: none;
}

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

/* Social icon menu — pink circles per spec (accent), indigo on hover */
.kd-social-wrap {
	margin-top: var(--kd-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(--kd-color-accent);
	color: var(--kd-color-base);
	transition: background-color var(--kd-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(--kd-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(--kd-color-accent);
	opacity: 1;
	max-width: none;
	width: 100%;
}

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

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

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

/* Buttons — rounded focus ring */
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--kd-color-primary);
	outline-offset: 3px;
	border-radius: var(--kd-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(--kd-color-base);
}

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

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

/* Owl selector: one --kd-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). */
.entry-content > * + * {
	margin-block-start: var(--kd-section-gap);
}

/* Zero the trailing margin only. The owl above (--kd-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 --kd-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. */
.entry-content > .wp-block-group {
	margin-block-end: 0;
}

/* Gap between the LAST content section and the footer — the footer is a separate
   template part the owl above can't reach, so without this the last section sits
   flush against it (the comps show one rhythm unit of page-bg before the footer).
   Padding, not margin, so it can't margin-collapse across the main/footer boundary. */
.entry-content {
	padding-block-end: var(--kd-section-gap); /* 100px ≥768 / 64px <768 — matches the inter-section rhythm */
}

/* 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. Scoped to
   .kd-hero-interior so the home page (.kd-hero-home + a full-bleed first band
   that is intentionally flush to the hero) is untouched. */
main:has(.kd-hero-interior) .entry-content > :first-child {
	margin-block-start: var(--kd-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(--kd-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(
		--kd-hero-interior-min
	) !important; /* beat the cover's inline min-height */
	/* Brand gradient is the default; a Featured Image (raster OR svg) overrides it. */
	background: var(--kd-color-contrast) url("../images/hero-gradient.svg")
		center / cover no-repeat;
	/* Match the header/footer band: edge-pad gutter; the inner caps at content-max. */
	padding-inline: var(--kd-edge-pad) !important;
	padding-top: var(
		--kd-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(--kd-content-max);
	margin: 0 auto;
	width: 100%;
}

.kd-hero-interior .wp-block-post-title {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: var(--kd-size-banner);
	color: var(--kd-color-base);
	line-height: var(--kd-lh-tight);
	margin-top: var(--kd-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(--kd-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(--kd-color-base);
}

.kd-breadcrumb__home {
	color: var(--kd-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(--kd-color-base);
}

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

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

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

.kd-breadcrumb__current {
	opacity: 0.9;
}

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

@media (max-width: 1024px) {
	/* Header — tighter padding */
	.kd-topbar,
	.kd-mainbar {
		padding-left: var(--kd-space-md) !important;
		padding-right: var(--kd-space-md) !important;
	}

	.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(--kd-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(--kd-space-lg) / 2) !important;
	}

	.kd-site-footer {
		padding-left: var(--kd-space-md) !important;
		padding-right: var(--kd-space-md) !important;
	}

	/* Hero — reduce min-height on tablet */
	.wp-block-cover {
		min-height: 50vh !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) {
	/* Hero — shorter on mobile */
	.wp-block-cover {
		min-height: 40vh !important;
	}

	.wp-block-cover__inner-container {
		padding-left: var(--kd-space-md) !important;
		padding-right: var(--kd-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(--kd-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;
	}

	.kd-site-footer {
		padding-left: var(--kd-space-md) !important;
		padding-right: var(--kd-space-md) !important;
	}

	/* 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) {
	.kd-section-header {
		margin-bottom: var(--kd-space-sm) !important;
	}
}

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

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