/*
Theme Name: Healing Hope
Theme URI: https://healinghopeteam.com/
Author: Healing Hope Team
Author URI: https://healinghopeteam.com/
Description: Gutenberg-first block theme for the Healing Hope Team site. Presentation only — business logic and content types live in the healing-hope-core plugin. Ships with two style variations (Calm/Natural, Modern/Wellness — the latter is theme.json's own default as of Phase 2C); see docs/theme-foundation.md.
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.3
Version: 0.2.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healing-hope

Phase 2C production build: homepage, CPT single/archive templates, and
the component CSS below (cards, hero, nav, disclosure, etc). Every color
below is a var(--wp--preset--color--*) reference generated from
theme.json — no colors are hardcoded here, per the standing "do not
create a new color system" rule. See docs/design-to-wordpress-map.md.
*/

/* ---------- Skip link ---------- */
.skip-link {
	position: absolute;
	left: var(--wp--preset--spacing--space-4);
	top: -3rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--md);
	z-index: 1000;
	transition: top 0.15s ease;
}
.skip-link:focus { top: var(--wp--preset--spacing--space-4); }

/* ---------- Header / navigation ---------- */
/* Two-row header (Phase 2E refinement): row 1 is brand + utility
   (logo, social, search); row 2 is navigation + primary actions. Below
   1280px both rows collapse to "logo + Menu" with row 2 becoming the
   slide-down mobile panel — see the breakpoint blocks below. */
/* padding-inline lives here, not on the block's own style attribute, for
   the same reason documented at .site-footer below: useRootPaddingAwareAlignments
   gives the header a "has-global-padding" class whose padding depends on
   an undefined --wp--style--root--padding-* custom property, so the
   block's own left/right padding never reaches the DOM and the header
   renders with zero horizontal inset. space-5 matches .site-footer and
   every main-content section's padding-inline so the three line up. */
.site-header { position: sticky; top: 0; z-index: 100; padding-inline: var(--wp--preset--spacing--space-5); }
.site-header__inner { position: relative; }
.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--space-4);
}
.site-header__row--brand {
	padding-block: var(--wp--preset--spacing--space-3);
}

/* Logo: compact icon mark + tight wordmark, sized as a brand mark
   rather than a banner (Phase 2E polish — was 2.25rem/36px, felt
   dominant against the nav row). */
.site-logo {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-1);
	text-decoration: none;
	flex-shrink: 0;
	min-width: 0;
}
.site-logo__mark { display: block; flex-shrink: 0; width: 1.75rem; height: 1.75rem; }
.site-logo__text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--step-0);
	color: var(--wp--preset--color--text);
	line-height: 1.1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Row 1 utilities: social icons + the desktop search control. Hidden
   below 1280px — at those widths the Menu button is the only row 1
   action on the right, and search moves into the mobile panel. */
.site-header__utilities { display: none; align-items: center; gap: var(--wp--preset--spacing--space-4); }

.site-social { list-style: none; display: flex; align-items: center; gap: var(--wp--preset--spacing--space-3); margin: 0; padding: 0; }
.site-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text-muted);
}
.site-social a:hover,
.site-social a:focus-visible { color: var(--wp--preset--color--primary-hover); }

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-2);
	background: transparent;
	border: 1px solid var(--wp--preset--color--text);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--space-2) var(--wp--preset--spacing--space-4);
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	cursor: pointer;
}
.nav-toggle__icon { width: 1.1em; height: 2px; background: currentColor; box-shadow: 0 -0.35em 0 currentColor, 0 0.35em 0 currentColor; display: block; }
/* [hidden] is a normal-origin UA rule, and any author rule that sets
   display on the same element beats it regardless of specificity — so
   the panel's own display:flex below would otherwise force it visible
   even while [hidden], for both this and the search panel. Confirmed
   empirically during Phase 2E QA; not previously caught because the
   toggle's aria-expanded/hidden *attribute* state was verified without
   also checking computed display at every breakpoint. */
.site-header__row--nav[hidden] { display: none; }
.site-header__row--nav { flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--space-5); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--space-3); }
.site-nav a { text-decoration: none; color: var(--wp--preset--color--text); font-weight: 700; font-size: var(--wp--preset--font-size--step-minus-1); letter-spacing: 0.02em; text-transform: uppercase; }
/* primary-hover, not primary, for the text color here: primary
   (#6B8F71) on white is ~3.6:1, under the 4.5:1 AA text minimum at
   this font size; primary-hover (#56735C) clears ~5.2:1. */
.site-nav a[aria-current="page"] { color: var(--wp--preset--color--primary-hover); border-bottom: 2px solid var(--wp--preset--color--primary-hover); }
.primary-nav__ctas { display: flex; gap: var(--wp--preset--spacing--space-2); flex-wrap: wrap; }

/* Header CTAs stay compact so two buttons don't compete for attention
   the way full-size .btn (used in hero/content areas) would. Watch Live
   is a distinctive outline; Consult stays the one solid/primary action. */
.site-header .btn {
	padding: var(--wp--preset--spacing--space-2) var(--wp--preset--spacing--space-4);
	font-size: var(--wp--preset--font-size--step-minus-1);
}
.btn-outline-primary { background: transparent; color: var(--wp--preset--color--primary-hover); border-color: var(--wp--preset--color--primary-hover); }
.btn-outline-primary:hover { background: var(--wp--preset--color--surface-alt); }

/* The two-row desktop layout only kicks in once there's genuinely room
   for nav row 2 (8 links + 2 CTAs) to read as one calm line (~1280px+,
   per design spec); narrower "desktop-ish" widths (tablet, small
   laptop) fall back to the same clean mobile menu rather than wrapping
   into an ugly in-between state. */
@media (min-width: 1280px) {
	.nav-toggle { display: none; }
	.site-header__utilities { display: flex; }
	.site-header__row--nav[hidden] { display: flex !important; }
	.site-header__row--nav {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--space-4);
		min-width: 0;
		padding-block: var(--wp--preset--spacing--space-3);
		border-top: 1px solid var(--wp--preset--color--border);
	}
	.site-nav { min-width: 0; }
	.site-nav ul { flex-direction: row; gap: var(--wp--preset--spacing--space-5); flex-wrap: nowrap; }
	.primary-nav__ctas { margin-left: auto; flex-shrink: 0; }
	/* Compound selector, not `.hh-search--mobile` alone: the later,
	   equal-specificity `.hh-search { display: flex; }` base rule (below,
	   shared by both the desktop and mobile search instances) would
	   otherwise win on source order and leave this second toggle visible
	   in the desktop nav row alongside the row-1 one — confirmed live,
	   not just in theory (Phase 2G footer/search pass). */
	.site-header__row--nav .hh-search--mobile { display: none; }
}
@media (max-width: 1279px) {
	.site-header__row--nav {
		position: absolute;
		inset-inline: var(--wp--preset--spacing--space-4);
		top: 100%;
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--md);
		box-shadow: var(--wp--preset--shadow--lg);
		padding: var(--wp--preset--spacing--space-5);
		margin-top: var(--wp--preset--spacing--space-2);
		z-index: 50;
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
	}
}

/* ---------- Buttons (extends theme.json's core button styles) ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-2);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--step-minus-1);
	line-height: 1;
	padding: var(--wp--preset--spacing--space-4) var(--wp--preset--spacing--space-6);
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface); }
.btn-primary:hover { background: var(--wp--preset--color--primary-hover); color: var(--wp--preset--color--surface); }
.btn-secondary { background: transparent; color: var(--wp--preset--color--text); border-color: var(--wp--preset--color--text); }
.btn-secondary:hover { background: var(--wp--preset--color--surface-alt); }
.btn-text { background: transparent; color: var(--wp--preset--color--primary); padding: var(--wp--preset--spacing--space-2) 0; text-transform: none; letter-spacing: normal; font-weight: 600; }
.btn-text:hover { color: var(--wp--preset--color--primary-hover); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Badges / disclosure ---------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-1);
	font-size: var(--wp--preset--font-size--step-minus-1);
	font-weight: 700;
	padding: var(--wp--preset--spacing--space-1) var(--wp--preset--spacing--space-3);
	border-radius: 999px;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--text);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.badge-featured { background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, var(--wp--preset--color--surface)); border: 1px solid var(--wp--preset--color--accent); }
.disclosure {
	font-size: var(--wp--preset--font-size--step-minus-1);
	color: var(--wp--preset--color--text-muted);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);
}
.disclosure strong { color: var(--wp--preset--color--text); }
.external-link::after { content: "↗"; display: inline-block; margin-left: var(--wp--preset--spacing--space-1); font-size: 0.85em; }
.client-content-required {
	display: inline-block;
	font-style: italic;
	color: var(--wp--preset--color--text-muted);
	background: var(--wp--preset--color--surface-alt);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--space-1) var(--wp--preset--spacing--space-3);
}

/* ---------- Placeholder media (no real image available yet) ---------- */
.placeholder-media {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--wp--preset--color--surface-alt);
	border: 1px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--step-minus-1);
	padding: var(--wp--preset--spacing--space-4);
	min-height: 8rem;
	border-radius: var(--wp--custom--radius--md);
	aspect-ratio: 4 / 3;
}

/* ---------- Sections ---------- */
.section-pad { padding-block: var(--wp--preset--spacing--space-7); }
.section-alt { background: var(--wp--preset--color--surface-alt); }
.section__eyebrow { font-size: var(--wp--preset--font-size--step-minus-1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--secondary); margin-bottom: var(--wp--preset--spacing--space-2); display: block; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: var(--wp--preset--spacing--space-5); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid > * { min-width: 0; }
@media (max-width: 900px) { .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } }
.hh-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-2);
	height: 100%;
}
.hh-card .placeholder-media, .hh-card img { border-radius: var(--wp--custom--radius--sm); }
.hh-card__meta { font-size: var(--wp--preset--font-size--step-minus-1); color: var(--wp--preset--color--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hh-card__body { color: var(--wp--preset--color--text-muted); flex: 1; font-size: var(--wp--preset--font-size--step-minus-1); }

/* ---------- Directory filters (Practitioner archive) ---------- */
.hh-directory-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--space-4);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--space-4);
	margin-bottom: var(--wp--preset--spacing--space-6);
}
.hh-directory-filters__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-1);
	flex: 1 1 12rem;
	min-width: 0;
}
.hh-directory-filters__field label {
	font-size: var(--wp--preset--font-size--step-minus-1);
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}
.hh-directory-filters__field input[type="search"],
.hh-directory-filters__field select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--space-2) var(--wp--preset--spacing--space-3);
	font: inherit;
	font-size: var(--wp--preset--font-size--step-minus-1);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	width: 100%;
}
.hh-directory-filters__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-3);
	flex: 0 0 auto;
}
@media (max-width: 640px) {
	.hh-directory-filters { flex-direction: column; align-items: stretch; }
	.hh-directory-filters__field { flex: 1 1 auto; }
	.hh-directory-filters__actions { justify-content: space-between; }
}

/* ---------- Contact form ---------- */
.hh-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-5);
	max-width: var(--wp--custom--container--narrow);
	margin-top: var(--wp--preset--spacing--space-5);
}
.hh-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-2);
	margin: 0;
}
.hh-contact-form__field label {
	font-size: var(--wp--preset--font-size--step-minus-1);
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}
.hh-contact-form__input {
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);
	font: inherit;
	font-size: var(--wp--preset--font-size--step-0);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	width: 100%;
}
.hh-contact-form__input:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary);
}
.hh-contact-form__input:user-invalid {
	border-color: var(--wp--preset--color--error);
}
.hh-contact-form__textarea {
	resize: vertical;
	min-height: 9rem;
}
.hh-contact-form__submit { align-self: flex-start; }
@media (max-width: 480px) {
	.hh-contact-form__submit { align-self: stretch; justify-content: center; }
}

/* ---------- Newsletter signup form ---------- */
.hh-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--space-4);
	max-width: var(--wp--custom--container--narrow);
	margin-top: var(--wp--preset--spacing--space-5);
}
.hh-newsletter-form__notice {
	flex-basis: 100%;
}
.hh-newsletter-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-2);
	margin: 0;
	flex: 1 1 12rem;
}
.hh-newsletter-form__field label {
	font-size: var(--wp--preset--font-size--step-minus-1);
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}
.hh-newsletter-form__input {
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);
	font: inherit;
	font-size: var(--wp--preset--font-size--step-0);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	width: 100%;
}
.hh-newsletter-form__input:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary);
}
.hh-newsletter-form__input:user-invalid {
	border-color: var(--wp--preset--color--error);
}
.hh-newsletter-form__submit { flex: 0 0 auto; }
@media (max-width: 480px) {
	.hh-newsletter-form { flex-direction: column; align-items: stretch; }
	.hh-newsletter-form__submit { justify-content: center; }
}

/* ---------- Hero ---------- */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--space-7); align-items: center; }
.hero-grid > * { min-width: 0; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Bio / founder layout ---------- */
.bio-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--wp--preset--spacing--space-6); align-items: start; }
.bio-grid > * { min-width: 0; }
@media (max-width: 800px) { .bio-grid { grid-template-columns: 1fr; } }

/* ---------- Live status ---------- */
.live-panel { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--space-6); }
.live-status { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--space-2); font-weight: 700; text-transform: uppercase; font-size: var(--wp--preset--font-size--step-minus-1); letter-spacing: 0.04em; }
.live-status::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--wp--preset--color--text-muted); flex-shrink: 0; }

/* ---------- Consultation ---------- */
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--space-4); }
.flow-grid > * { min-width: 0; }
@media (max-width: 700px) { .flow-grid { grid-template-columns: 1fr; } }
.flow-step { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--space-5); background: var(--wp--preset--color--surface); }
.flow-step__num { font-size: var(--wp--preset--font-size--step-4); font-weight: 700; color: var(--wp--preset--color--secondary); display: block; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--space-4); }
.pricing-grid > * { min-width: 0; }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--space-6); text-align: center; }
.price-card__amount { font-size: var(--wp--preset--font-size--step-5); font-weight: 700; color: var(--wp--preset--color--primary); display: block; }

/* ---------- Footer ---------- */
/* Bg intentionally "surface" (white), not "surface-alt": the homepage's
   last content band before the footer is already surface-alt, and the
   footer previously reused that same color with no border between them —
   the two visually fused into one shapeless block. White + a hairline
   top border gives the footer a deliberate edge and bookends the white
   header at the top of the page (Phase 2F container/footer pass).
   Padding lives here rather than on the block's own style attribute:
   theme.json's useRootPaddingAwareAlignments adds a "has-global-padding"
   class to any constrained-layout block, whose generated padding rule
   reads an undefined --wp--style--root--padding-* custom property (this
   theme never defines one) — the declaration is invalid, so the browser
   drops it and the block renders with zero padding regardless of what
   the block's own style.spacing.padding says. A plain class here isn't
   subject to that. */
.site-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--space-6) var(--wp--preset--spacing--space-5);
	padding-inline: var(--wp--preset--spacing--space-5);
}
.site-logo--footer { margin-bottom: var(--wp--preset--spacing--space-3); }
.site-logo--footer .site-logo__mark { width: 1.5rem; height: 1.5rem; }
.site-logo--footer .site-logo__text { font-size: var(--wp--preset--font-size--step-0); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.9fr; gap: var(--wp--preset--spacing--space-6); }
.footer-col__tagline { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--step-minus-1); max-width: 20rem; }
.footer-col h3 { font-size: var(--wp--preset--font-size--step-minus-1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--secondary); margin: 0 0 var(--wp--preset--spacing--space-3); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--space-2); padding: 0; margin: 0; }
.footer-col a { color: var(--wp--preset--color--text-muted); text-decoration: none; font-size: var(--wp--preset--font-size--step-minus-1); }
.footer-col a:hover,
.footer-col a:focus-visible { color: var(--wp--preset--color--primary-hover); text-decoration: underline; }
.footer-social li a { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--space-2); }
/* Copyright row: a hairline rule + tight, secondary-weight spacing so it
   reads as the footer's closing line, not a second unrelated section. */
.footer-bottom {
	margin-top: var(--wp--preset--spacing--space-5);
	padding-top: var(--wp--preset--spacing--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
}
.footer-bottom p { margin: 0; font-size: var(--wp--preset--font-size--step-minus-1); color: var(--wp--preset--color--text-muted); }
@media (max-width: 960px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--space-5) var(--wp--preset--spacing--space-6); }
	.footer-col--brand { grid-column: 1 / -1; }
	.footer-col__tagline { max-width: none; }
}
@media (max-width: 480px) {
	.site-footer { padding-block: var(--wp--preset--spacing--space-5) var(--wp--preset--spacing--space-4); }
	.footer-grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--space-5); }
	.footer-bottom { margin-top: var(--wp--preset--spacing--space-4); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Search ---------- */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* Compact utility control: a single icon button that reveals a small
   search field on demand, instead of a permanently-open input + a
   separate "Search" button competing with the Watch Live/Consult CTAs
   for header space (Phase 2E). Two instances exist in the header markup
   — .hh-search--desktop (row 1 utility strip, >=1280px) and
   .hh-search--mobile (inside the collapsible menu panel, <1280px) —
   each other is hidden by the breakpoint rules above/below so only one
   is ever visible or reachable by keyboard at a time. */
.hh-search { position: relative; display: flex; align-items: center; }
.hh-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	flex-shrink: 0;
}
.hh-search__toggle:hover,
.hh-search__toggle[aria-expanded="true"] { background: var(--wp--preset--color--surface-alt); border-color: var(--wp--preset--color--border); color: var(--wp--preset--color--text); }
.hh-search-form[hidden] { display: none; }
.hh-search-form {
	display: flex;
	gap: var(--wp--preset--spacing--space-2);
	align-items: center;
	min-width: 0;
}
.hh-search-form input[type="search"] {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--space-2) var(--wp--preset--spacing--space-3);
	font: inherit;
	font-size: var(--wp--preset--font-size--step-minus-1);
	min-width: 0;
	width: 100%;
	max-width: 12rem;
}
.hh-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text);
	cursor: pointer;
}
.hh-search__submit:hover { background: var(--wp--preset--color--surface-alt); }
/* Desktop instance: the toggle reveals a small floating panel below the
   *entire* two-row header, not just row 1. .hh-search is position:relative
   by default (see .hh-search above), which would make the flyout's
   absolute positioning relative to the toggle itself — row 1 only — and
   drop it straight on top of the Watch Live / Consult buttons living in
   row 2 directly underneath. Clearing that positioning context here lets
   the flyout fall back to .site-header__inner (already position:relative)
   instead, so `top: 100%` clears row 2 and the buttons stay reachable. */
@media (min-width: 1280px) {
	.hh-search--desktop { position: static; }
	.hh-search--desktop .hh-search-form {
		position: absolute;
		right: 0;
		top: calc(100% + var(--wp--preset--spacing--space-2));
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--md);
		box-shadow: var(--wp--preset--shadow--lg);
		padding: var(--wp--preset--spacing--space-3);
		z-index: 60;
	}
}
/* Mobile instance: reveals inline within the already-floating menu
   panel, so it doesn't need its own floating card. */
.hh-search--mobile { width: 100%; }
.hh-search--mobile .hh-search-form { width: 100%; }
.hh-search--mobile .hh-search-form input[type="search"] { max-width: none; }

/* ---------- Overflow guard (same class of bug caught during the design-exploration QA) ---------- */
h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; }
body { overflow-x: hidden; }

/* Real migrated legacy article content often contains raw <img> tags with
   explicit pixel width/height attributes from the old site (e.g.
   width="949") — without this, they blow out the container on narrow
   viewports. Caught during Phase 2D QA on real migrated article content. */
.entry-content img,
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}
/* Legacy content also sometimes has fixed-width tables (embedded pricing
   grids, etc.) — let them scroll horizontally within themselves instead
   of blowing out the page. */
.entry-content table,
.wp-block-post-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}