/*
 * Dr. Sarang Patil – Holistic Healer — main stylesheet.
 * One file, per docs/PERFORMANCE.md §2. Mobile-first, no framework.
 */

/*
 * Self-hosted fonts (P4-22 / HD-11). Each is a single variable WOFF2
 * covering weights 400-700, fetched once from Google Fonts' own CDN
 * and served from this theme rather than depending on the visitor's
 * OS having these fonts installed (the previous state — see
 * docs/ARCHITECTURE.md). SIL OFL 1.1, license text alongside these
 * files in assets/fonts/. Subsetted per script (Latin / Devanagari /
 * Gujarati) so a page never downloads glyph data for a script it
 * doesn't use.
 */
@font-face {
	font-family: "Noto Sans";
	src: url("../fonts/noto-sans-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Noto Sans Devanagari";
	src: url("../fonts/noto-sans-devanagari.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
	font-family: "Noto Sans Gujarati";
	src: url("../fonts/noto-sans-gujarati.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0A80-0AFF;
}

/* ---------- Design tokens ---------- */

:root {
	--hh-bg: #faf6f0;
	--hh-bg-raised: #ffffff;
	--hh-ink: #2c2a26;
	--hh-ink-soft: #6b6558;
	/*
	 * Accent/focus match the logo's deep teal (2026-09-21) — not its
	 * gold, which only has enough contrast against the logo's own dark
	 * background, not against this site's light background. Gold is
	 * used deliberately below, on dark surfaces (dark mode, buttons)
	 * where it actually has the contrast to work as text/borders.
	 */
	/* P5-02: palette aligned with the main site (drsarangpatil.com): forest green + turmeric gold. */
	--hh-accent: #0f4a3b;
	--hh-accent-ink: #ffffff;
	--hh-accent-soft: rgba(31, 122, 99, 0.09);
	--hh-line: #e2dccf;
	--hh-focus: #1f7a63;
	--hh-gold: #d9a441;
	--hh-gold-soft: rgba(217, 164, 65, 0.15);
	/*
	 * --hh-gold fails WCAG AA (2.7:1) as small text on the light --hh-bg
	 * (confirmed 2026-09-21 contrast audit) — it was only ever designed
	 * for borders/buttons/dark-mode surfaces where it has enough
	 * contrast. This darker variant (5:1) is for gold TEXT on a light
	 * background specifically, e.g. the post-card type badge.
	 */
	--hh-gold-text: #86610f;

	--hh-font-serif: Georgia, "Times New Roman", serif;
	--hh-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Gujarati", Helvetica, Arial, sans-serif;

	--hh-space-1: 0.5rem;
	--hh-space-2: 1rem;
	--hh-space-3: 1.5rem;
	--hh-space-4: 2.5rem;
	--hh-space-5: 4rem;

	--hh-measure: 42rem;
	--hh-max-width: 72rem;
	--hh-radius: 0.5rem;
	--hh-radius-lg: 0.875rem;
	--hh-radius-full: 9999px;

	--hh-shadow-sm: 0 2px 8px rgba(44, 42, 38, 0.04), 0 1px 2px rgba(44, 42, 38, 0.06);
	--hh-shadow-md: 0 8px 24px rgba(44, 42, 38, 0.07), 0 2px 6px rgba(44, 42, 38, 0.04);
	--hh-shadow-lg: 0 16px 36px rgba(44, 42, 38, 0.09), 0 4px 12px rgba(44, 42, 38, 0.05);
	--hh-transition: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * Dark mode is opt-in only, via the .theme-toggle button — deliberately
 * NOT an @media (prefers-color-scheme: dark) query (2026-09-21 decision:
 * the site defaults to light for every visitor regardless of their
 * device setting; a visitor who wants dark has to choose it, and that
 * choice is remembered via localStorage — see the inline script in
 * header.php and the click handler in main.js).
 */
:root[data-theme="dark"] {
	--hh-bg: #13201d;
	--hh-bg-raised: #1b2c28;
	--hh-ink: #f2ede4;
	--hh-ink-soft: #a9b8b2;
	--hh-accent: #cda866;
	--hh-accent-ink: #1c1508;
	--hh-accent-soft: rgba(205, 168, 102, 0.15);
	--hh-gold-text: #cda866;
	--hh-line: #2f423d;
	--hh-focus: #cda866;
	--hh-gold: #cda866;
	--hh-gold-soft: rgba(205, 168, 102, 0.15);

	--hh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
	--hh-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
	--hh-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.45);
}

/*
 * Uniform photographic-image/video treatment in dark mode — applied
 * once, broadly, rather than per block type, so a post-card thumbnail,
 * a video facade poster, an author photo and the site logo all get the
 * same slight dimming instead of some looking correctly toned down and
 * others sitting there at full brightness. Decorative inline SVG (the
 * digestion-flow diagram) is excluded — it already re-themes correctly
 * via the --hh-* custom properties above, dimming it too would double
 * up.
 */
:root[data-theme="dark"] img,
:root[data-theme="dark"] .youtube-facade__thumbnail {
	filter: brightness(0.85) contrast(1.05);
}

/*
 * ---------- Canonical breakpoints (P4-03, 2026-09-21) ----------
 * Formalizing the breakpoint values already in use throughout this file
 * — no responsive behavior changed, this is documentation only. Every
 * @media rule below should use one of these four values; introducing a
 * fifth (or a value not on this list) needs a deliberate reason, not an
 * ad hoc pick.
 *
 *   26rem (~416px)  — small-phone refinement (max-width, rare)
 *   40rem (~640px)  — small tablet / large phone landscape
 *   48rem (~768px)  — tablet — primary nav, grid layouts
 *   60rem (~960px)  — desktop — grid layouts, wider layout shifts
 *
 * These are plain numbers, not custom properties: CSS custom properties
 * are not usable inside @media conditions in any shipping browser (no
 * `@media (min-width: var(--x))`), so there is no safe way to back a
 * media query with a --hh-* token. This comment is the single source of
 * truth instead — check here before adding a new breakpoint value.
 */

/* ---------- Reset ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--hh-bg);
	color: var(--hh-ink);
	font-family: var(--hh-font-sans);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* Enhanced Script & Reading Polish */
html[lang^="hi"] body,
html[lang^="mr"] body,
html[lang^="gu"] body {
	line-height: 1.8;
}

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

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: var(--hh-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--hh-transition), text-decoration-color var(--hh-transition);
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--hh-focus);
	outline-offset: 2px;
}

/*
 * Sans, not serif (P4-18 decision, 2026-09-22): headings previously used
 * --hh-font-serif (Georgia), which has zero Devanagari/Gujarati glyph
 * coverage — Hindi/Marathi/Gujarati headings fell through to whatever
 * the browser substituted, uncontrolled. --hh-font-sans already carries
 * Noto Sans Devanagari/Gujarati in its stack, so this is the one visual
 * system across all four languages the typography standard calls for.
 */
h1,
h2,
h3,
h4 {
	font-family: var(--hh-font-sans);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 var(--hh-space-2);
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 var(--hh-space-2);
}

button {
	font-family: inherit;
}

/* ---------- Reading Progress Bar ---------- */

.reading-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3.5px;
	background: linear-gradient(90deg, var(--hh-accent), var(--hh-gold));
	z-index: 9999;
	transition: width 0.1s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

/* ---------- Accessibility utilities ---------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -3rem;
	left: var(--hh-space-2);
	z-index: 1000;
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
	padding: var(--hh-space-1) var(--hh-space-2);
	border-radius: var(--hh-radius);
	transition: top var(--hh-transition);
}

.skip-link:focus {
	top: var(--hh-space-2);
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
	position: fixed;
}

/* ---------- Layout ---------- */

.content-wrapper {
	max-width: var(--hh-max-width);
	margin: 0 auto;
	padding: var(--hh-space-4) var(--hh-space-2);
}

.content-wrapper--narrow {
	max-width: var(--hh-measure);
}

.section-heading {
	margin-bottom: var(--hh-space-3);
	font-size: clamp(1.4rem, 3vw, 1.85rem);
}

/* ---------- Header ---------- */

.site-header {
	border-bottom: 1px solid var(--hh-line);
	background: var(--hh-bg-raised);
	box-shadow: var(--hh-shadow-sm);
	position: sticky;
	top: 0;
	z-index: 500;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--hh-transition), box-shadow var(--hh-transition);
}

.site-header.is-pinned {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--hh-shadow-md);
}

:root[data-theme="dark"] .site-header.is-pinned {
	background: rgba(27, 44, 40, 0.94);
}

.site-header.is-unpinned {
	transform: translateY(-100%);
}

.site-header__inner {
	max-width: var(--hh-max-width);
	margin: 0 auto;
	padding: var(--hh-space-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hh-space-2);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--hh-space-2);
}

.custom-logo-link {
	display: block;
	flex-shrink: 0;
}

.custom-logo {
	/* P5-02: the logo is the lotus symbol on a transparent background (as on the main site), shown uncropped. */
	display: block;
	width: 4rem;
	height: 4rem;
	margin-block: -0.5rem;
	object-fit: contain;
}

/* In dark mode the symbol's dark petals and figure would vanish, so it sits on a cream disc. */
:root[data-theme="dark"] .custom-logo {
	background: #faf6ee;
	border-radius: 50%;
}

.site-branding__text {
	margin: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.site-title {
	font-family: var(--hh-font-serif);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--hh-ink);
	text-decoration: none;
	letter-spacing: -0.01em;
}

.site-description {
	font-size: 0.8rem;
	color: var(--hh-ink-soft);
	margin-top: 0.15rem;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

/*
 * Four icon buttons (bookmarks, search, theme, nav) in a row get tight
 * against a narrow phone viewport alongside the logo/title. Shrink the
 * buttons and gap rather than hide any of them — all four stay reachable.
 */
@media (max-width: 26rem) {
	.site-header__actions {
		gap: 0.2rem;
	}

	.header-bookmarks-toggle,
	.header-search-toggle,
	.nav-toggle,
	.theme-toggle {
		width: 2.15rem;
		height: 2.15rem;
	}
}

.header-wa-btn {
	display: none;
	align-items: center;
	gap: 0.35rem;
	padding: 0.38rem 0.85rem;
	border-radius: var(--hh-radius-full);
	background: #25d366;
	color: #ffffff;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--hh-shadow-sm);
	transition: all var(--hh-transition);
}

@media (min-width: 48rem) {
	.header-wa-btn {
		display: inline-flex;
	}
}

.header-wa-btn:hover {
	background: #20ba5a;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--hh-shadow-md);
	text-decoration: none;
}

.header-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: transparent;
	color: var(--hh-ink);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	cursor: pointer;
	transition: all var(--hh-transition);
}

.header-search-toggle:hover {
	border-color: var(--hh-accent);
	background: var(--hh-bg);
}

.nav-toggle,
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	background: transparent;
	color: var(--hh-ink);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	cursor: pointer;
	transition: all var(--hh-transition);
}

.nav-toggle:hover,
.theme-toggle:hover {
	border-color: var(--hh-accent);
	background: var(--hh-bg);
}

.theme-toggle__icon {
	display: block;
	transition: transform var(--hh-transition);
}

.theme-toggle:hover .theme-toggle__icon {
	transform: rotate(15deg);
}

.theme-toggle__icon--sun {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
	display: block;
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
	display: none;
}

.theme-toggle__label {
	display: none;
}

/*
 * Icon-only on mobile (matches the other header action buttons, keeps
 * the crowded mobile action row compact); a visible label appears from
 * tablet width up, where there's room, so the toggle reads as "Light"/
 * "Dark" rather than relying on the icon alone for discoverability.
 * The label swaps with the theme the same way the sun/moon icons do.
 */
@media (min-width: 48rem) {
	.theme-toggle {
		width: auto;
		gap: 0.4rem;
		padding: 0 0.7rem;
	}

	.theme-toggle__label {
		display: inline;
		font-size: 0.82rem;
		font-weight: 600;
	}

	.theme-toggle__label--dark {
		display: none;
	}

	:root[data-theme="dark"] .theme-toggle__label--light {
		display: none;
	}

	:root[data-theme="dark"] .theme-toggle__label--dark {
		display: inline;
	}
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	display: block;
	width: 1.25rem;
	height: 2px;
	background: var(--hh-ink);
	position: relative;
	transition: all var(--hh-transition);
}

.nav-toggle__bar::before {
	position: absolute;
	top: -6px;
}

.nav-toggle__bar::after {
	position: absolute;
	top: 6px;
}

/* Hamburger → X when the mobile menu is open (JS toggles aria-expanded). */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
	top: 0;
	transform: rotate(-45deg);
}

.primary-navigation {
	flex-basis: 100%;
	display: none;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--hh-transition), transform var(--hh-transition);
}

.primary-navigation.is-open {
	display: block;
	opacity: 1;
	transform: translateY(0);
	position: relative;
	background: var(--hh-bg-raised);
	box-shadow: var(--hh-shadow-lg);
}

/*
 * Dims the rest of the page while the mobile menu is open, matching the
 * search modal / bookmarks drawer treatment instead of just pushing
 * content down with no visual weight. Desktop nav is never toggled
 * (always visible, see the 60rem rule below), so the backdrop is
 * mobile-only regardless of its hidden attribute.
 */
.primary-navigation__backdrop {
	position: fixed;
	inset: 0;
	z-index: 400;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

@media (min-width: 60rem) {
	.primary-navigation__backdrop {
		display: none;
	}
}

.primary-menu__list {
	display: flex;
	flex-direction: column;
	gap: var(--hh-space-1);
	padding-top: var(--hh-space-2);
	border-top: 1px solid var(--hh-line);
	margin-top: var(--hh-space-2);
}

.primary-menu__list a {
	color: var(--hh-ink);
	text-decoration: none;
	display: block;
	padding: var(--hh-space-1) 0;
	font-weight: 500;
	transition: color var(--hh-transition);
}

.primary-menu__list a:hover {
	color: var(--hh-accent);
}

/*
 * Current-page indication (P4-04) — WP core already adds
 * .current-menu-item/.current_page_item to the active wp_nav_menu()
 * item automatically; this theme had no matching CSS at all before now.
 */
.primary-menu__list .current-menu-item > a,
.primary-menu__list .current_page_item > a,
.primary-menu__list .current-menu-ancestor > a {
	color: var(--hh-accent);
	font-weight: 700;
}

/*
 * Submenu support (P4-04) — the theme previously had no CSS at all for
 * wp_nav_menu()'s nested <ul class="sub-menu">, so any menu item with
 * children (e.g. "Health Topics" > pillar topics, "Resources" >
 * sub-pages) would have rendered as an unstyled, broken flat list. The
 * toggle <button class="submenu-toggle"> is inserted by JS (main.js)
 * only for items that actually have children — progressive enhancement,
 * not a hard theme requirement, so a menu with no submenus is unaffected.
 */
.menu-item-has-children {
	position: relative;
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.15rem;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--hh-ink-soft);
	cursor: pointer;
	vertical-align: middle;
	transition: color var(--hh-transition);
}

.submenu-toggle:hover {
	color: var(--hh-accent);
}

.submenu-toggle svg {
	transition: transform var(--hh-transition);
}

.menu-item-has-children.is-submenu-open .submenu-toggle {
	color: var(--hh-accent);
}

.menu-item-has-children.is-submenu-open .submenu-toggle svg {
	transform: rotate(180deg);
}

.sub-menu {
	display: none;
	flex-direction: column;
}

.menu-item-has-children.is-submenu-open > .sub-menu {
	display: flex;
	margin: 0.25rem 0 0.5rem;
	padding-left: var(--hh-space-2);
	border-left: 2px solid var(--hh-line);
}

.sub-menu a {
	font-size: 0.92rem;
	font-weight: 400;
}

@media (min-width: 60rem) {
	.sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 14rem;
		margin: 0;
		padding: var(--hh-space-1);
		background: var(--hh-bg-raised);
		border: 1px solid var(--hh-line);
		border-radius: var(--hh-radius);
		box-shadow: var(--hh-shadow-md);
		z-index: 600;
	}

	.menu-item-has-children.is-submenu-open > .sub-menu,
	.menu-item-has-children:hover > .sub-menu,
	.menu-item-has-children:focus-within > .sub-menu {
		display: flex;
	}

	.sub-menu .menu-item {
		display: block;
	}

	.sub-menu a {
		padding: 0.5rem 0.75rem;
		border-radius: var(--hh-radius);
	}

	.sub-menu a:hover {
		background: var(--hh-bg);
	}
}

.language-switcher {
	display: flex;
	gap: 0.4rem;
	margin-top: var(--hh-space-2);
	font-size: 0.85rem;
}

.language-switcher a {
	color: var(--hh-ink-soft);
	text-decoration: none;
	padding: 0.2rem 0.5rem;
	border-radius: var(--hh-radius);
	border: 1px solid transparent;
	transition: all var(--hh-transition);
}

.language-switcher a:hover {
	color: var(--hh-ink);
	border-color: var(--hh-line);
}

.language-switcher a[aria-current="true"] {
	color: var(--hh-accent);
	background: var(--hh-bg);
	border-color: var(--hh-line);
	font-weight: 600;
}

@media (min-width: 60rem) {
	.nav-toggle {
		display: none;
	}

	.primary-navigation {
		display: flex;
		align-items: center;
		flex-basis: auto;
		gap: var(--hh-space-3);
		opacity: 1;
		transform: none;
	}

	.primary-menu__list {
		flex-direction: row;
		border-top: none;
		margin-top: 0;
		padding-top: 0;
		gap: var(--hh-space-3);
	}

	.primary-menu__list a {
		padding: 0;
	}

	.language-switcher {
		margin-top: 0;
	}
}

/* ---------- Hero ---------- */

.hero {
	border-bottom: 1px solid var(--hh-line);
	background: var(--hh-bg-raised);
}

.hero__inner {
	max-width: var(--hh-max-width);
	margin: 0 auto;
	padding: var(--hh-space-5) var(--hh-space-2) var(--hh-space-4);
	text-align: center;
}

/*
 * Small kicker above the H1 (P4-05) — the site name moved out of the H1
 * itself (now the approved "Understand Your Health..." headline) but
 * still needs to appear on the homepage for brand continuity; this is
 * deliberately not a heading, so the page keeps exactly one H1.
 */
.hero__eyebrow {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hh-accent);
	margin-bottom: var(--hh-space-1);
}

.hero__title {
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: var(--hh-space-2);
	letter-spacing: -0.02em;
}

.hero__tagline {
	color: var(--hh-ink-soft);
	font-size: 1.15rem;
	line-height: 1.6;
	max-width: var(--hh-measure);
	margin: 0 auto;
}

/* ---------- Hero Trust Bar ---------- */

.hero__trust-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-top: var(--hh-space-3);
	padding-top: var(--hh-space-2);
}

.hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--hh-ink-soft);
	background: var(--hh-bg);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-full);
	padding: 0.25rem 0.85rem;
}

.hero__trust-icon {
	color: var(--hh-accent);
	display: flex;
	align-items: center;
}

/* ---------- Topic Exploration Pills ---------- */

.topic-pills-wrapper {
	margin: var(--hh-space-2) 0 var(--hh-space-4);
}

.topic-pills-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hh-ink-soft);
	margin-bottom: var(--hh-space-1);
}

.topic-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.topic-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--hh-ink);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-full);
	text-decoration: none;
	transition: all var(--hh-transition);
	box-shadow: var(--hh-shadow-sm);
}

.topic-pill:hover,
.topic-pill.is-active {
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
	border-color: var(--hh-accent);
	transform: translateY(-2px);
	box-shadow: var(--hh-shadow-md);
	text-decoration: none;
}

/* ---------- Format Filter Navigation ---------- */

.format-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: var(--hh-space-3);
	border-bottom: 1px solid var(--hh-line);
	padding-bottom: var(--hh-space-2);
}

.format-nav__item a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--hh-ink-soft);
	text-decoration: none;
	border-radius: var(--hh-radius);
	transition: all var(--hh-transition);
}

.format-nav__item a:hover {
	color: var(--hh-ink);
	background: var(--hh-bg-raised);
	text-decoration: none;
}

.format-nav__item a.is-active {
	color: var(--hh-accent);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	font-weight: 600;
	box-shadow: var(--hh-shadow-sm);
}

/*
 * ---------- Homepage sections (P4-05) ----------
 * Shared by Health Topics, Sampurna Swasthya, Resources, Assessment,
 * About, and Consultation — a small reusable "info card" / "feature
 * block" system reusing the same surface treatment as
 * .resource-summary (bg-raised, line border, radius-lg, shadow-sm) and
 * the P4-03 button system, rather than one-off styling per section.
 */

.homepage-section {
	margin: var(--hh-space-5) 0;
}

.homepage-section__intro {
	max-width: var(--hh-measure);
	color: var(--hh-ink-soft);
	margin-bottom: var(--hh-space-3);
}

.info-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hh-space-3);
}

@media (min-width: 40rem) {
	.info-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 60rem) {
	.info-card-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.info-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--hh-space-3);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

.info-card--pending {
	opacity: 0.75;
}

.info-card__title {
	font-size: 1.1rem;
	margin: 0;
}

.info-card__desc {
	flex-grow: 1;
	margin: 0;
	color: var(--hh-ink-soft);
	font-size: 0.92rem;
	line-height: 1.6;
}

.info-card__link {
	align-self: flex-start;
	margin-top: 0.25rem;
}

.info-card__pending-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hh-ink-soft);
}

.homepage-feature-block {
	display: flex;
	flex-direction: column;
	gap: var(--hh-space-2);
	padding: var(--hh-space-4);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

.homepage-feature-block__title {
	margin-bottom: 0.35rem;
}

.homepage-feature-block__desc {
	max-width: var(--hh-measure);
	color: var(--hh-ink-soft);
	line-height: 1.6;
}

@media (min-width: 48rem) {
	.homepage-feature-block {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--hh-space-4);
	}

	.homepage-feature-block__body {
		flex: 1;
	}
}

/* ---------- Post list / cards ---------- */

.post-list {
	display: flex;
	flex-direction: column;
	gap: var(--hh-space-4);
}

.post-list--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hh-space-3);
}

@media (min-width: 40rem) {
	.post-list--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 60rem) {
	.post-list--grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.post-card {
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	overflow: hidden;
	background: var(--hh-bg-raised);
	display: flex;
	flex-direction: column;
	transition: transform var(--hh-transition), box-shadow var(--hh-transition), border-color var(--hh-transition);
	box-shadow: var(--hh-shadow-sm);
}

.post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--hh-shadow-md);
	border-color: var(--hh-accent);
}

.post-card__thumbnail {
	overflow: hidden;
	background: var(--hh-bg);
}

.post-card__thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.post-card:hover .post-card__thumbnail img {
	transform: scale(1.03);
}

.post-card__body {
	padding: var(--hh-space-3);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.post-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: var(--hh-space-1);
}

.post-card__type-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hh-gold-text);
	background: var(--hh-bg);
	border: 1px solid var(--hh-gold);
	border-radius: var(--hh-radius-full);
	padding: 0.15em 0.65em;
}

.post-card__topic-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--hh-accent);
	background: var(--hh-bg);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-full);
	padding: 0.15em 0.65em;
}

.post-card__title {
	font-size: 1.2rem;
	margin-bottom: 0.4rem;
	line-height: 1.35;
}

.post-card__title a {
	color: var(--hh-ink);
	text-decoration: none;
	transition: color var(--hh-transition);
}

.post-card__title a:hover {
	color: var(--hh-accent);
}

.post-card__meta {
	font-size: 0.8rem;
	color: var(--hh-ink-soft);
	margin-bottom: var(--hh-space-1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hh-space-1);
}

.post-card__meta > *:not(:first-child)::before {
	content: "\00b7";
	margin-right: var(--hh-space-1);
}

.post-card__reading-time {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.post-card__reading-time svg {
	width: 0.85rem;
	height: 0.85rem;
	display: inline-block;
}

.post-card__excerpt {
	color: var(--hh-ink-soft);
	font-size: 0.95rem;
	line-height: 1.55;
	flex-grow: 1;
}

.post-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: var(--hh-space-2);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--hh-accent);
	text-decoration: none;
}

.post-card__read-more:hover {
	text-decoration: underline;
}

/* Featured Hero Article Layout */
.post-card--featured {
	grid-column: 1 / -1;
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-md);
	margin-bottom: var(--hh-space-2);
}

@media (min-width: 48rem) {
	.post-card--featured {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		align-items: stretch;
	}

	.post-card--featured .post-card__thumbnail {
		height: 100%;
	}

	.post-card--featured .post-card__thumbnail img {
		height: 100%;
		aspect-ratio: auto;
	}

	.post-card--featured .post-card__body {
		padding: var(--hh-space-4);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.post-card--featured .post-card__title {
		font-size: clamp(1.4rem, 2.5vw, 1.9rem);
		margin: 0.35rem 0 0.75rem;
		line-height: 1.3;
	}

	.post-card--featured .post-card__excerpt {
		font-size: 1.05rem;
		line-height: 1.6;
	}
}

/* ---------- Single article / page ---------- */

.single-article__header,
.single-page__header {
	margin-bottom: var(--hh-space-3);
}

.single-article__title,
.single-page__title {
	font-size: clamp(1.75rem, 4.5vw, 2.5rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.single-article__meta {
	color: var(--hh-ink-soft);
	font-size: 0.92rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hh-space-1);
}

.single-article__meta > *:not(:first-child)::before {
	content: "\00b7";
	margin-right: var(--hh-space-1);
}

.single-article__reading-time {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.single-article__reading-time svg {
	width: 0.9rem;
	height: 0.9rem;
}

/*
 * Reader Display Controls (A- / A+). No longer its own bordered/
 * shadowed pill (2026-09-21) — three stacked boxed controls (this,
 * the audio bar, and the save button) competed with the article
 * content for attention above the fold. It's now one plain inline
 * group inside the shared .article-utility-bar strip below, which
 * carries the single visual container for all three.
 */
.reader-controls {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
}

.reader-controls__label {
	color: var(--hh-ink-soft);
	font-size: 0.75rem;
	font-weight: 500;
	margin-right: 0.2rem;
}

.reader-controls__btn {
	background: transparent;
	border: 1px solid transparent;
	color: var(--hh-ink);
	cursor: pointer;
	padding: 0.15rem 0.5rem;
	font-weight: 600;
	border-radius: var(--hh-radius);
	transition: all var(--hh-transition);
}

.reader-controls__btn.is-active,
.reader-controls__btn:hover {
	color: var(--hh-accent);
	background: var(--hh-bg);
	border-color: var(--hh-line);
}

.single-article__content[data-font-size="large"] {
	font-size: 1.25rem;
	line-height: 1.85;
}

.single-article__content[data-font-size="large"] h2 {
	font-size: 1.85rem;
}

.single-article__content[data-font-size="large"] h3 {
	font-size: 1.45rem;
}

.single-article__thumbnail,
.single-page__thumbnail {
	margin-bottom: var(--hh-space-4);
	border-radius: var(--hh-radius-lg);
	overflow: hidden;
	box-shadow: var(--hh-shadow-md);
}

.single-article__content,
.single-page__content {
	font-size: 1.1rem;
	line-height: 1.75;
}

.single-article__content > *,
.single-page__content > * {
	max-width: var(--hh-measure);
}

.single-article__content img,
.single-page__content img {
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

/* Restore semantic list rendering in article/page prose. The global
   `ul, ol { list-style: none }` reset above exists for nav/UI chrome
   (menus, tag lists, footer lists) — those all carry their own class
   and are unaffected here. Plain, unclassed lists only occur in
   migrated article content, so :not([class]) targets exactly those
   without touching purpose-built lists like .key-takeaways__list. */
.single-article__content ul:not([class]),
.single-page__content ul:not([class]) {
	list-style: disc;
	padding-left: 1.25em;
	margin: 0 0 var(--hh-space-2);
}

.single-article__content ol:not([class]),
.single-page__content ol:not([class]) {
	list-style: decimal;
	padding-left: 1.25em;
	margin: 0 0 var(--hh-space-2);
}

.single-article__content li,
.single-page__content li {
	margin-bottom: var(--hh-space-1);
}

.single-article__content ul:not([class]) ul:not([class]),
.single-article__content ol:not([class]) ul:not([class]),
.single-page__content ul:not([class]) ul:not([class]),
.single-page__content ol:not([class]) ul:not([class]) {
	list-style: circle;
	margin: var(--hh-space-1) 0 0;
}

.single-article__content ul:not([class]) ol:not([class]),
.single-article__content ol:not([class]) ol:not([class]),
.single-page__content ul:not([class]) ol:not([class]),
.single-page__content ol:not([class]) ol:not([class]) {
	margin: var(--hh-space-1) 0 0;
}

/* Every migrated article opens with a provenance note stored as an
   HTML comment inside a <p> (a P4-26 convention) — that empty <p>
   still counts as :first-of-type, so it was stealing the lead-text
   treatment below from the real opening sentence and leaving a stray
   blank paragraph. Hide the empty one and shift lead-text to whichever
   paragraph actually follows it. */
.single-article__content > p:empty,
.single-page__content > p:empty {
	display: none;
}

/* Lead text styling */
.lead-text,
.single-article__content > p:first-of-type:not(.hh-no-lead),
.single-article__content > p:empty:first-of-type + p:not(.hh-no-lead) {
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--hh-ink);
}

/* Enhanced pull-quotes and blockquotes */
blockquote,
.pullquote {
	margin: var(--hh-space-3) 0;
	padding: var(--hh-space-2) var(--hh-space-3);
	border-left: 4px solid var(--hh-gold);
	background: var(--hh-bg-raised);
	border-radius: 0 var(--hh-radius) var(--hh-radius) 0;
	font-family: var(--hh-font-serif);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--hh-ink);
	box-shadow: var(--hh-shadow-sm);
}

/* ---------- Table of Contents (TOC) ---------- */

.article-toc {
	margin: var(--hh-space-3) 0 var(--hh-space-4);
	padding: var(--hh-space-2) var(--hh-space-3);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

.article-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
}

.article-toc__title {
	font-family: var(--hh-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--hh-ink);
}

.article-toc__toggle-icon {
	transition: transform var(--hh-transition);
}

.article-toc[aria-expanded="false"] .article-toc__toggle-icon {
	transform: rotate(-90deg);
}

.article-toc[aria-expanded="false"] .article-toc__list {
	display: none;
}

.article-toc__list {
	margin: var(--hh-space-2) 0 0;
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.article-toc__item--h3 {
	padding-left: 1.25rem;
	font-size: 0.9rem;
}

.article-toc__link {
	color: var(--hh-ink-soft);
	text-decoration: none;
	transition: color var(--hh-transition);
	display: inline-block;
}

.article-toc__link:hover,
.article-toc__link.is-active {
	color: var(--hh-accent);
	font-weight: 600;
	text-decoration: none;
}

.single-article__taxonomy {
	margin-top: var(--hh-space-4);
	padding-top: var(--hh-space-2);
	border-top: 1px solid var(--hh-line);
	color: var(--hh-ink-soft);
	font-size: 0.9rem;
}

/* ---------- Enhanced Author Bio Card ---------- */

.author-bio {
	margin-top: var(--hh-space-4);
	padding: var(--hh-space-3);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	background: var(--hh-bg-raised);
	box-shadow: var(--hh-shadow-sm);
	display: flex;
	gap: var(--hh-space-3);
	align-items: center;
}

.author-bio__avatar-wrapper {
	position: relative;
	flex-shrink: 0;
}

.author-bio img {
	border-radius: 50%;
	display: block;
	border: 2px solid var(--hh-accent);
}

.author-bio__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hh-gold-text);
	margin-bottom: 0.25rem;
}

.author-bio__name {
	font-family: var(--hh-font-serif);
	font-size: 1.15rem;
	margin-bottom: 0.25rem;
}

.author-bio__name a {
	color: var(--hh-ink);
	text-decoration: none;
	transition: color var(--hh-transition);
}

.author-bio__name a:hover {
	color: var(--hh-accent);
}

.author-bio__description {
	color: var(--hh-ink-soft);
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
}

/* ---------- Archive / search / 404 ---------- */

.archive-header {
	margin-bottom: var(--hh-space-3);
}

.archive-header__description {
	color: var(--hh-ink-soft);
}

.search-type-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 var(--hh-space-3);
	padding: 0;
}

.search-type-filter a {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--hh-ink-soft);
	text-decoration: none;
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-full);
	padding: 0.3rem 0.85rem;
	background: var(--hh-bg-raised);
	transition: all var(--hh-transition);
	box-shadow: var(--hh-shadow-sm);
}

.search-type-filter a:hover {
	border-color: var(--hh-accent);
	color: var(--hh-ink);
}

.search-type-filter a.is-active {
	color: var(--hh-accent-ink);
	background: var(--hh-accent);
	border-color: var(--hh-accent);
}

.no-results {
	text-align: center;
	padding: var(--hh-space-4) 0;
}

.no-results__icon {
	color: var(--hh-gold);
	margin: 0 auto var(--hh-space-2);
}

.no-results__suggestions {
	margin-top: var(--hh-space-3);
}

.no-results__suggestions-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--hh-ink-soft);
	margin-bottom: var(--hh-space-1);
}

/* ---------- Search form ---------- */

.search-form {
	display: flex;
	gap: var(--hh-space-1);
	margin: var(--hh-space-2) 0;
}

.search-form__input-wrap {
	position: relative;
	flex: 1;
}

.search-form input[type="search"] {
	width: 100%;
	padding: 0.6rem 2.2rem 0.6rem 0.9rem;
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	background: var(--hh-bg-raised);
	color: var(--hh-ink);
	font-size: 0.95rem;
	transition: border-color var(--hh-transition), box-shadow var(--hh-transition);
}

.search-form input[type="search"]:focus {
	border-color: var(--hh-accent);
	box-shadow: 0 0 0 3px rgba(31, 92, 80, 0.15);
	outline: none;
}

.search-form__clear {
	position: absolute;
	right: 0.6rem;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--hh-ink-soft);
	cursor: pointer;
	padding: 0.25rem;
	display: none;
}

.search-form input[type="search"]:not(:placeholder-shown) ~ .search-form__clear {
	display: block;
}

.search-form input[type="submit"] {
	padding: 0.6rem var(--hh-space-3);
	border: 1px solid var(--hh-accent);
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
	border-radius: var(--hh-radius);
	cursor: pointer;
	font-weight: 600;
	transition: opacity var(--hh-transition), transform var(--hh-transition);
}

.search-form input[type="submit"]:hover {
	opacity: 0.95;
	transform: translateY(-1px);
}

/* ---------- Pagination ---------- */

.pagination,
.nav-links {
	display: flex;
	gap: var(--hh-space-2);
	justify-content: center;
	align-items: center;
	margin-top: var(--hh-space-4);
}

.pagination .page-numbers {
	color: var(--hh-ink-soft);
	text-decoration: none;
	padding: 0.35rem 0.75rem;
	border-radius: var(--hh-radius);
	border: 1px solid var(--hh-line);
	background: var(--hh-bg-raised);
	font-size: 0.9rem;
	transition: all var(--hh-transition);
}

.pagination .page-numbers:hover {
	border-color: var(--hh-accent);
	color: var(--hh-ink);
}

.pagination .page-numbers.current {
	color: var(--hh-accent-ink);
	background: var(--hh-accent);
	border-color: var(--hh-accent);
	font-weight: 600;
}

/* ---------- Multi-Column Modern Editorial Footer ---------- */

.site-footer {
	border-top: 1px solid var(--hh-line);
	margin-top: var(--hh-space-5);
	background: var(--hh-bg-raised);
	padding: var(--hh-space-5) 0 var(--hh-space-3);
}

.site-footer__grid {
	max-width: var(--hh-max-width);
	margin: 0 auto;
	padding: 0 var(--hh-space-2);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hh-space-4);
	text-align: left;
}

@media (min-width: 48rem) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

.site-footer__col-title {
	font-family: var(--hh-font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hh-accent);
	margin-bottom: var(--hh-space-2);
}

.site-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.site-footer__list a {
	color: var(--hh-ink-soft);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color var(--hh-transition);
}

.site-footer__list a:hover {
	color: var(--hh-accent);
}

.site-footer__bottom {
	max-width: var(--hh-max-width);
	margin: var(--hh-space-4) auto 0;
	padding: var(--hh-space-3) var(--hh-space-2) 0;
	border-top: 1px solid var(--hh-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hh-space-2);
	font-size: 0.85rem;
	color: var(--hh-ink-soft);
}

.site-footer__bottom-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hh-space-2);
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer__bottom-links a {
	color: var(--hh-ink-soft);
	text-decoration: none;
}

.site-footer__bottom-links a:hover {
	color: var(--hh-accent);
}

/* Floating Back to Top Button */
.back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 2.85rem;
	height: 2.85rem;
	border-radius: 50%;
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
	border: 1px solid rgba(255, 255, 255, 0.15);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--hh-shadow-lg);
	cursor: pointer;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: all var(--hh-transition);
	z-index: 900;
}

.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.back-to-top:hover {
	transform: translateY(-3px);
	box-shadow: var(--hh-shadow-lg);
	background: var(--hh-focus);
}

:root[data-theme="dark"] .back-to-top:hover {
	background: var(--hh-gold);
}

/* Lightbox Modal */
.hh-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--hh-space-3);
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.hh-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}

.hh-lightbox__content {
	max-width: 90vw;
	max-height: 90vh;
	overflow: auto;
	background: var(--hh-bg-raised);
	padding: var(--hh-space-3);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-lg);
}

.hh-lightbox__content img,
.hh-lightbox__content svg {
	width: 100%;
	height: auto;
}

.hh-lightbox__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--hh-transition);
}

.hh-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.hh-diagram {
	cursor: zoom-in;
}

/* Quick Search Modal */
.search-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 10vh var(--hh-space-2);
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--hh-transition);
}

.search-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.search-modal__inner {
	width: 100%;
	max-width: 36rem;
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	padding: var(--hh-space-3);
	box-shadow: var(--hh-shadow-lg);
	transform: translateY(-16px);
	transition: transform var(--hh-transition);
}

.search-modal.is-open .search-modal__inner {
	transform: translateY(0);
}

/* ---------- Content blocks (blocks/) ---------- */

.quick-answer,
.key-takeaways,
.references-list,
.evidence-snapshot {
	margin: var(--hh-space-3) 0;
	padding: var(--hh-space-3);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-left: 4px solid var(--hh-accent);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

/*
 * The four block types share one box shape (above) but are otherwise
 * identical, so a reader scanning past several in a row has to read the
 * small label to tell them apart. Give each a distinct icon (works
 * regardless of how many accent hues the palette has) plus a border
 * color split across the two accents that stay visually distinct in
 * both light and dark mode (--hh-focus collapses onto --hh-accent in
 * dark mode, so it can't be used as a third differentiator — see the
 * dark-mode token block above).
 */
.key-takeaways {
	border-left-color: var(--hh-gold);
}

.references-list {
	border-left-color: var(--hh-line);
}

.quick-answer__label,
.key-takeaways__label,
.references-list__label,
.evidence-snapshot__label,
.evidence-snapshot__limitation-label {
	margin: 0 0 var(--hh-space-1);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hh-accent);
}

.key-takeaways__label {
	color: var(--hh-gold-text);
}

.references-list__label {
	color: var(--hh-ink-soft);
}

.quick-answer__label::before,
.key-takeaways__label::before,
.references-list__label::before,
.evidence-snapshot__label::before {
	margin-right: 0.35em;
}

.quick-answer__label::before {
	content: "\1F4A1";
}

.key-takeaways__label::before {
	content: "\2714";
}

.references-list__label::before {
	content: "\1F517";
}

.evidence-snapshot__label::before {
	content: "\1F52C";
}

.quick-answer__text {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.6;
}

.key-takeaways__list,
.references-list__list {
	margin: 0;
	padding-left: 1.25rem;
}

.key-takeaways__list li,
.references-list__list li {
	margin-bottom: var(--hh-space-1);
}

.evidence-snapshot__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hh-space-1) var(--hh-space-3);
	margin: 0 0 var(--hh-space-2);
}

@media (min-width: 40rem) {
	.evidence-snapshot__fields {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Illustrative diagrams ---------- */

.hh-diagram,
.digestion-flow-diagram {
	position: relative;
	margin: var(--hh-space-3) 0;
	padding: var(--hh-space-2);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

.hh-diagram__scroll,
.digestion-flow-diagram__scroll {
	overflow-x: auto;
}

/*
 * The diagram SVGs have a min-width (below), so on narrow viewports
 * they overflow and scroll horizontally with no visible cue that
 * there's more to see. A right-edge fade hints at it without adding
 * any JS scroll-position tracking.
 */
@media (max-width: 40rem) {
	.hh-diagram::after,
	.digestion-flow-diagram::after {
		content: "";
		position: absolute;
		top: var(--hh-space-2);
		right: var(--hh-space-2);
		bottom: var(--hh-space-2);
		width: 2rem;
		background: linear-gradient(to right, transparent, var(--hh-bg-raised));
		pointer-events: none;
		border-radius: 0 var(--hh-radius) var(--hh-radius) 0;
	}
}

.hh-diagram svg,
.digestion-flow-diagram svg {
	display: block;
	min-width: 640px;
	width: 100%;
	height: auto;
}

.hh-diagram figcaption,
.digestion-flow-diagram figcaption {
	margin-top: var(--hh-space-2);
	font-size: 0.85rem;
	color: var(--hh-ink-soft);
	text-align: center;
}

.hh-article-image {
	margin: var(--hh-space-3) 0;
}

.hh-article-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

.hh-article-image figcaption {
	margin-top: var(--hh-space-2);
	font-size: 0.85rem;
	color: var(--hh-ink-soft);
	text-align: center;
}

.evidence-snapshot__fields dt {
	font-size: 0.75rem;
	color: var(--hh-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.evidence-snapshot__fields dd {
	margin: 0 0 var(--hh-space-1);
	font-weight: 600;
}

.evidence-snapshot__limitation {
	font-size: 0.95rem;
	color: var(--hh-ink-soft);
}

/*
 * ---------- Button system (P4-03, 2026-09-21) ----------
 * Semantic variants introduced to give future CTAs one shared system
 * instead of a new one-off class per component. Visual language is
 * copied from the two pill-button treatments that already existed
 * (.cta-block__button for filled/primary, .resource-read-online__toggle
 * for outlined/secondary) — nothing new was designed. .button--ghost is
 * genuinely new (a third, lower-emphasis variant the spec asked for) but
 * reuses the same tokens/radius/transition, no new visual language.
 *
 * Existing component classes (.cta-block__button, .header-wa-btn,
 * .resource-read-online__toggle, .newsletter-signup__submit) are left
 * exactly as they were — each already renders correctly and nothing here
 * changes their output. The CTA block (blocks/cta/render.php) is the one
 * place wired to also carry .button.button--primary alongside its own
 * class, as a working example of the shared system; the others were not
 * touched because their shapes/sizes are already component-specific and
 * merging them would have been a visual redesign, not a refinement.
 */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.75rem var(--hh-space-4);
	border: none;
	border-radius: var(--hh-radius-full);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--hh-transition);
}

.button--primary {
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
	box-shadow: var(--hh-shadow-md);
}

.button--primary:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--hh-shadow-lg);
	opacity: 0.95;
}

.button--secondary {
	padding: 0.55rem var(--hh-space-3);
	background: transparent;
	color: var(--hh-accent);
	border: 1px solid var(--hh-accent);
	box-shadow: none;
}

.button--secondary:hover {
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
	transform: none;
}

.button--ghost {
	padding: 0.55rem var(--hh-space-3);
	background: transparent;
	color: var(--hh-ink);
	border: 1px solid var(--hh-line);
	box-shadow: none;
}

.button--ghost:hover {
	border-color: var(--hh-accent);
	color: var(--hh-accent);
	transform: none;
}

.cta-block {
	margin: var(--hh-space-4) 0;
	text-align: center;
}

.cta-block__button {
	display: inline-block;
	padding: 0.75rem var(--hh-space-4);
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
	border-radius: var(--hh-radius-full);
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	box-shadow: var(--hh-shadow-md);
	transition: all var(--hh-transition);
}

.cta-block__button:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--hh-shadow-lg);
	opacity: 0.95;
}

/* ---------- Consult strip (end of article, P5-02) ---------- */

.consult-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hh-space-3);
	margin: var(--hh-space-5) 0 var(--hh-space-4);
	padding: var(--hh-space-4);
	background: var(--hh-accent-soft);
	border: 1px solid var(--hh-line);
	border-left: 4px solid var(--hh-gold);
	border-radius: var(--hh-radius-lg);
}

.consult-strip__text {
	flex: 1 1 18rem;
}

.consult-strip__title {
	margin: 0 0 var(--hh-space-1);
	font-size: 1.2rem;
}

.consult-strip__desc {
	margin: 0;
	color: var(--hh-ink-soft);
}

.consult-strip__button {
	display: inline-block;
	padding: 0.75rem var(--hh-space-4);
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
	border-radius: var(--hh-radius-full);
	text-decoration: none;
	font-weight: 600;
	box-shadow: var(--hh-shadow-md);
	transition: all var(--hh-transition);
}

.consult-strip__button:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--hh-shadow-lg);
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
	margin-bottom: var(--hh-space-3);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	font-size: 0.85rem;
	color: var(--hh-ink-soft);
}

.breadcrumbs__item:not(:last-child)::after {
	content: "\203A";
	margin-left: 0.4em;
	color: var(--hh-line);
	font-size: 1em;
}

.breadcrumbs__item a {
	color: var(--hh-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--hh-transition), border-color var(--hh-transition);
}

.breadcrumbs__item a:hover {
	color: var(--hh-accent);
	border-bottom-color: var(--hh-accent);
}

.breadcrumbs__item [aria-current="page"] {
	color: var(--hh-ink);
	font-weight: 600;
}

/* ---------- Resource landing page ---------- */

.resource-meta-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: var(--hh-space-2) 0 var(--hh-space-3);
}

.resource-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	font-weight: 500;
	padding: 0.25rem 0.85rem;
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-full);
	color: var(--hh-ink);
	box-shadow: var(--hh-shadow-sm);
}

.resource-summary {
	display: grid;
	gap: var(--hh-space-2);
	margin: var(--hh-space-3) 0;
	padding: var(--hh-space-3);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

.resource-summary__block h2 {
	font-size: 1rem;
	font-family: var(--hh-font-sans);
	font-weight: 600;
	margin-bottom: 0.25em;
	color: var(--hh-accent);
}

.resource-summary__block p {
	color: var(--hh-ink);
	margin: 0;
	line-height: 1.6;
}

.resource-actions {
	margin-top: var(--hh-space-4);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hh-space-2);
}

.resource-actions__note {
	font-size: 0.85rem;
	color: var(--hh-ink-soft);
}

.resource-actions__note--info {
	display: inline-block;
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-full);
	padding: var(--hh-space-1) var(--hh-space-3);
	box-shadow: var(--hh-shadow-sm);
}

.resource-read-online__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem var(--hh-space-3);
	border: 1px solid var(--hh-accent);
	background: transparent;
	color: var(--hh-accent);
	border-radius: var(--hh-radius-full);
	cursor: pointer;
	font-weight: 600;
	transition: all var(--hh-transition);
}

.resource-read-online__toggle:hover {
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
}

.resource-read-online__viewport {
	width: 100%;
	margin-top: var(--hh-space-3);
	min-height: 300px;
	background: var(--hh-bg-raised);
	border-radius: var(--hh-radius-lg);
	border: 1px solid var(--hh-line);
	padding: var(--hh-space-2);
	box-shadow: var(--hh-shadow-md);
}

.resource-read-online__viewport[hidden] {
	display: none;
}

.resource-read-online__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--hh-space-1);
}

.resource-read-online__fullscreen-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--hh-ink-soft);
	background: var(--hh-bg);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	padding: 0.25rem 0.6rem;
	cursor: pointer;
	transition: all var(--hh-transition);
}

.resource-read-online__fullscreen-btn:hover {
	color: var(--hh-ink);
	border-color: var(--hh-accent);
}

.resource-read-online__frame {
	width: 100%;
	aspect-ratio: 8.5 / 11;
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
}

/* ---------- Feedback widget ---------- */

.feedback-widget {
	margin: var(--hh-space-4) 0;
	padding: var(--hh-space-3);
	text-align: center;
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

.feedback-widget__question {
	font-weight: 600;
	font-size: 1.05rem;
	margin-bottom: var(--hh-space-2);
}

.feedback-widget__buttons {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
}

.feedback-widget__vote {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1.25rem;
	border: 1px solid var(--hh-line);
	background: var(--hh-bg);
	color: var(--hh-ink);
	border-radius: var(--hh-radius-full);
	cursor: pointer;
	font-size: 0.92rem;
	font-weight: 500;
	transition: all var(--hh-transition);
}

.feedback-widget__vote:hover {
	border-color: var(--hh-accent);
	background: var(--hh-bg-raised);
	color: var(--hh-accent);
	transform: translateY(-2px);
	box-shadow: var(--hh-shadow-sm);
}

.feedback-widget__thanks {
	color: var(--hh-accent);
	font-weight: 500;
	margin: 0;
	animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- Related content ---------- */

.related-content {
	margin-top: var(--hh-space-5);
	padding-top: var(--hh-space-4);
	border-top: 1px solid var(--hh-line);
}

/* ---------- Newsletter signup ---------- */

.newsletter-signup {
	margin: var(--hh-space-4) 0;
	padding: var(--hh-space-4);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
	text-align: center;
}

.newsletter-signup__label {
	font-weight: 600;
	font-size: 1.15rem;
	margin-bottom: var(--hh-space-2);
}

.newsletter-signup__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hh-space-1);
	justify-content: center;
}

.newsletter-signup__input {
	flex: 1;
	min-width: 14rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	background: var(--hh-bg);
	color: var(--hh-ink);
	font-size: 0.95rem;
	transition: border-color var(--hh-transition), box-shadow var(--hh-transition);
}

.newsletter-signup__input:focus {
	border-color: var(--hh-accent);
	box-shadow: 0 0 0 3px rgba(31, 92, 80, 0.15);
	outline: none;
}

.newsletter-signup__submit {
	padding: 0.6rem var(--hh-space-3);
	background: var(--hh-accent);
	color: var(--hh-accent-ink);
	border: none;
	border-radius: var(--hh-radius);
	cursor: pointer;
	font-weight: 600;
	transition: all var(--hh-transition);
}

.newsletter-signup__submit:hover {
	opacity: 0.95;
	transform: translateY(-1px);
}

.newsletter-signup__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.newsletter-signup__message {
	margin-top: var(--hh-space-2);
	font-size: 0.9rem;
	color: var(--hh-ink-soft);
}

/* ---------- YouTube facade ---------- */

.youtube-facade {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--hh-radius-lg);
	overflow: hidden;
	cursor: pointer;
	background: #000;
	box-shadow: var(--hh-shadow-md);
}

.youtube-facade__thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.88;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity var(--hh-transition);
}

.youtube-facade:hover .youtube-facade__thumbnail {
	transform: scale(1.02);
	opacity: 0.95;
}

.youtube-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(31, 92, 80, 0.85);
	box-shadow: var(--hh-shadow-lg);
	transition: transform var(--hh-transition), background-color var(--hh-transition);
}

.youtube-facade:hover .youtube-facade__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: rgba(31, 92, 80, 0.95);
}

.youtube-facade__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.7rem 0 0.7rem 1.1rem;
	border-color: transparent transparent transparent #fff;
}

.youtube-facade__frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--hh-radius-lg);
}

/* ---------- Share buttons & Toast ---------- */

.share-buttons {
	margin-top: var(--hh-space-4);
	text-align: center;
}

.share-buttons__label {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hh-ink-soft);
	margin-bottom: var(--hh-space-2);
}

.share-buttons__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.share-buttons__link,
.share-buttons__copy {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-full);
	background: var(--hh-bg-raised);
	color: var(--hh-ink);
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--hh-transition);
	box-shadow: var(--hh-shadow-sm);
}

.share-buttons__link:hover,
.share-buttons__copy:hover {
	border-color: var(--hh-accent);
	color: var(--hh-accent);
	transform: translateY(-2px);
	box-shadow: var(--hh-shadow-md);
	text-decoration: none;
}

.share-buttons__icon {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.share-toast {
	position: fixed;
	bottom: var(--hh-space-3);
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--hh-ink);
	color: var(--hh-bg);
	padding: 0.6rem 1.25rem;
	border-radius: var(--hh-radius-full);
	font-size: 0.85rem;
	font-weight: 500;
	box-shadow: var(--hh-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 9999;
}

.share-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ---------- Advanced Clinical & Discovery UI Suite ---------- */

/* Header Bookmarks Toggle & Badge */
.header-bookmarks-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	background: transparent;
	color: var(--hh-ink);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	cursor: pointer;
	transition: all var(--hh-transition);
}

.header-bookmarks-toggle:hover {
	border-color: var(--hh-accent);
	color: var(--hh-accent);
	background: var(--hh-bg);
}

.bookmarks-count-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--hh-accent);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.25rem;
	border-radius: var(--hh-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Saved Guides Drawer */
.saved-guides-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	justify-content: flex-end;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.saved-guides-drawer.is-open {
	opacity: 1;
	pointer-events: auto;
}

.saved-guides-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.saved-guides-drawer__panel {
	position: relative;
	width: 100%;
	max-width: 24rem;
	height: 100%;
	background: var(--hh-bg-raised);
	border-left: 1px solid var(--hh-line);
	box-shadow: var(--hh-shadow-lg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.saved-guides-drawer.is-open .saved-guides-drawer__panel {
	transform: translateX(0);
}

.saved-guides-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--hh-space-3);
	border-bottom: 1px solid var(--hh-line);
}

.saved-guides-drawer__title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--hh-ink);
}

.saved-guides-drawer__title svg {
	color: var(--hh-accent);
}

.saved-guides-drawer__close {
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--hh-ink-soft);
	cursor: pointer;
	padding: 0.2rem 0.5rem;
	border-radius: var(--hh-radius);
	transition: color var(--hh-transition);
}

.saved-guides-drawer__close:hover {
	color: var(--hh-ink);
}

.saved-guides-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--hh-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--hh-space-2);
}

.saved-guides-drawer__empty {
	color: var(--hh-ink-soft);
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: center;
	margin-top: var(--hh-space-4);
}

.saved-guide-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--hh-bg);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-md);
	transition: all var(--hh-transition);
}

.saved-guide-item:hover {
	border-color: var(--hh-accent);
	box-shadow: var(--hh-shadow-sm);
}

.saved-guide-item__link {
	color: var(--hh-ink);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	flex: 1;
	line-height: 1.35;
}

.saved-guide-item__link:hover {
	color: var(--hh-accent);
}

.saved-guide-item__remove {
	background: none;
	border: none;
	color: var(--hh-ink-soft);
	cursor: pointer;
	padding: 0.25rem;
	border-radius: var(--hh-radius);
	transition: all var(--hh-transition);
}

.saved-guide-item__remove:hover {
	color: #e53935;
	background: rgba(229, 57, 53, 0.1);
}

/* Bookmark Button on Cards and Single */
.bookmark-btn {
	background: none;
	border: 1px solid transparent;
	color: var(--hh-ink-soft);
	padding: 0.3rem;
	border-radius: var(--hh-radius);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	font-weight: 500;
	transition: all var(--hh-transition);
}

.bookmark-btn:hover {
	color: var(--hh-accent);
	background: var(--hh-bg);
	border-color: var(--hh-line);
}

.bookmark-btn.is-bookmarked {
	color: var(--hh-accent);
}

.bookmark-btn.is-bookmarked svg {
	fill: currentColor;
}

/*
 * Inside .article-utility-bar the divider between controls already
 * separates it visually, so it no longer needs its own pill/background
 * — kept as the one item with a bit more weight (padding, no italic
 * muting) since Save is the actual action of the three, not just a
 * display preference.
 */
.bookmark-btn--single {
	padding: 0.3rem 0.4rem;
	color: var(--hh-ink);
}

/* Post Card Header Row */
.post-card__header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--hh-space-1);
}

/* Search Modal Live Results Dropdown */
.search-modal__live-results {
	margin-top: var(--hh-space-2);
	max-height: 20rem;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.search-result-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.8rem;
	border-radius: var(--hh-radius-md);
	text-decoration: none;
	color: var(--hh-ink);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	transition: all var(--hh-transition);
}

.search-result-item:hover,
.search-result-item.is-selected {
	border-color: var(--hh-accent);
	background: var(--hh-bg);
	transform: translateX(4px);
}

.search-result-item__title {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}

.search-result-item__meta {
	font-size: 0.75rem;
	color: var(--hh-ink-soft);
	display: flex;
	gap: 0.5rem;
	margin-top: 0.15rem;
}

.search-result-empty {
	padding: var(--hh-space-2);
	text-align: center;
	font-size: 0.85rem;
	color: var(--hh-ink-soft);
}

.search-result-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var(--hh-space-2);
	font-size: 0.85rem;
	color: var(--hh-ink-soft);
}

.search-result-loading__spinner {
	width: 0.9rem;
	height: 0.9rem;
	border: 2px solid var(--hh-line);
	border-top-color: var(--hh-accent);
	border-radius: 50%;
	animation: hh-spin 0.7s linear infinite;
}

@keyframes hh-spin {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Article Utility Bar — the single shared container for the three
 * controls it holds (text size, listen, save). Deliberately quiet: a
 * thin one-line strip rather than three separate boxed pills, so it
 * reads as ambient utility rather than competing with the article
 * title/content for attention immediately above the fold
 * (2026-09-21 — see docs' UI/UX audit).
 */
.article-utility-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hh-space-2);
	margin-bottom: var(--hh-space-3);
	padding: 0.4rem 0.7rem;
	border-top: 1px solid var(--hh-line);
	border-bottom: 1px solid var(--hh-line);
	color: var(--hh-ink-soft);
}

.article-utility-bar > * + * {
	padding-left: var(--hh-space-2);
	border-left: 1px solid var(--hh-line);
}

/*
 * The divider assumes a single row; on a narrow phone the bar can wrap
 * onto a second line, where a leftover border-left at the start of the
 * wrapped line reads as a stray mark rather than a separator. Drop it
 * there and rely on the row gap instead.
 */
@media (max-width: 30rem) {
	.article-utility-bar > * + * {
		padding-left: 0;
		border-left: none;
	}
}

/* Audio Player Speech Synthesis Bar — see .article-utility-bar above. */
.audio-player-bar {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.audio-player-bar__play-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: none;
	color: var(--hh-ink);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0.15rem 0.4rem;
	border-radius: var(--hh-radius);
	transition: color var(--hh-transition);
}

.audio-player-bar__play-btn:hover,
.audio-player-bar.is-playing .audio-player-bar__play-btn {
	color: var(--hh-accent);
}

.audio-player-bar__speed-btn {
	background: var(--hh-bg);
	border: 1px solid var(--hh-line);
	color: var(--hh-ink-soft);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.1rem 0.4rem;
	border-radius: var(--hh-radius-full);
	cursor: pointer;
	transition: all var(--hh-transition);
}

.audio-player-bar__speed-btn:hover {
	color: var(--hh-ink);
	border-color: var(--hh-accent);
}

/* Medically Reviewed Badge & Modal */
.medically-reviewed-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: var(--hh-accent-soft);
	border: 1px solid var(--hh-accent);
	color: var(--hh-accent);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.2rem 0.6rem;
	border-radius: var(--hh-radius-full);
	cursor: pointer;
	transition: all var(--hh-transition);
}

.medically-reviewed-badge:hover {
	transform: translateY(-1px);
	border-color: currentColor;
	box-shadow: var(--hh-shadow-sm);
}

.medical-review-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--hh-space-3);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.medical-review-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.medical-review-modal__dialog {
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-lg);
	max-width: 32rem;
	width: 100%;
	padding: var(--hh-space-4);
	position: relative;
	transform: scale(0.96);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.medical-review-modal.is-open .medical-review-modal__dialog {
	transform: scale(1);
}

.medical-review-modal__close {
	position: absolute;
	top: var(--hh-space-2);
	right: var(--hh-space-2);
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--hh-ink-soft);
	cursor: pointer;
	padding: 0.2rem 0.5rem;
	border-radius: var(--hh-radius);
	transition: color var(--hh-transition);
}

.medical-review-modal__close:hover {
	color: var(--hh-ink);
}

.medical-review-modal__badge {
	color: var(--hh-accent);
	margin-bottom: var(--hh-space-2);
}

.medical-review-modal__title {
	font-size: 1.25rem;
	margin: 0 0 var(--hh-space-2);
}

.medical-review-modal__desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--hh-ink-soft);
	margin-bottom: var(--hh-space-3);
}

.medical-review-modal__points {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 0.88rem;
}

.medical-review-modal__points li {
	position: relative;
	padding-left: 1.25rem;
	color: var(--hh-ink);
}

.medical-review-modal__points li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--hh-accent);
	font-weight: 700;
}

/* Citation Hover Cards (Footnotes / Study Previews) */
.citation-hovercard {
	position: absolute;
	z-index: 10000;
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-md);
	box-shadow: var(--hh-shadow-lg);
	padding: 0.85rem;
	max-width: 18rem;
	font-size: 0.82rem;
	color: var(--hh-ink);
	line-height: 1.4;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	pointer-events: none;
}

.citation-hovercard.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.citation-hovercard__label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hh-accent);
	margin-bottom: 0.25rem;
}

.citation-hovercard__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--hh-accent);
	margin-top: 0.4rem;
	font-weight: 600;
	text-decoration: none;
}

.citation-hovercard__link:hover {
	text-decoration: underline;
}

/* Next Up in Topic Story Bar */
.next-up-bar {
	position: fixed;
	bottom: var(--hh-space-3);
	left: var(--hh-space-3);
	max-width: 22rem;
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-lg);
	padding: 0.85rem 1.15rem;
	z-index: 850;
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.next-up-bar.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.next-up-bar__tag {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hh-accent);
	margin-bottom: 0.2rem;
}

.next-up-bar__link {
	color: var(--hh-ink);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.35;
	display: block;
	transition: color var(--hh-transition);
}

.next-up-bar__link:hover {
	color: var(--hh-accent);
}

/* Interactive Medical Accordions & Checklists */
.hh-accordion {
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-md);
	background: var(--hh-bg-raised);
	margin: var(--hh-space-3) 0;
	overflow: hidden;
}

.hh-accordion__summary {
	padding: 0.9rem 1.15rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--hh-ink);
	user-select: none;
	transition: background-color var(--hh-transition);
}

.hh-accordion__summary::-webkit-details-marker {
	display: none;
}

.hh-accordion__summary::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--hh-accent);
	transition: transform var(--hh-transition);
}

.hh-accordion[open] .hh-accordion__summary::after {
	content: "−";
}

.hh-accordion__content {
	padding: 0 1.15rem 1.15rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--hh-ink-soft);
}

.hh-checklist {
	list-style: none;
	padding: 0;
	margin: var(--hh-space-3) 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hh-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.6rem 0.85rem;
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-md);
	cursor: pointer;
	transition: all var(--hh-transition);
}

.hh-checklist__item.is-checked {
	text-decoration: line-through;
	opacity: 0.75;
	border-color: var(--hh-accent);
	background: var(--hh-accent-soft);
}

/* Scroll-triggered reveal animations */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/*
 * ---------- Consultation & Contact form (P4-11) ----------
 * Reuses the assessment's safety-banner and error/status treatment
 * (.assessment-safety-banner, .assessment-error, .assessment-actions,
 * .assessment-page__disclaimer) — only the labeled text/select/textarea
 * fields are genuinely new, since no form with real text inputs existed
 * anywhere else in the theme (the newsletter form is email-only).
 */

.consultation-form__field {
	margin-bottom: var(--hh-space-3);
}

.consultation-form__field label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
}

.consultation-form__field input[type="text"],
.consultation-form__field select,
.consultation-form__field textarea {
	width: 100%;
	padding: 0.65rem var(--hh-space-2);
	font: inherit;
	color: var(--hh-ink);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	transition: border-color var(--hh-transition), box-shadow var(--hh-transition);
}

.consultation-form__field input[type="text"]:focus,
.consultation-form__field select:focus,
.consultation-form__field textarea:focus {
	border-color: var(--hh-accent);
	box-shadow: 0 0 0 3px var(--hh-accent-soft);
	outline: none;
}

.consultation-form__field textarea {
	resize: vertical;
}

.consultation-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.consultation-form__note {
	font-size: 0.85rem;
	color: var(--hh-ink-soft);
	margin-bottom: var(--hh-space-3);
}

.consultation-form__emergency-note {
	font-weight: 600;
	margin-top: var(--hh-space-2);
}

.consultation-form__privacy-link {
	font-size: 0.9rem;
}

.hh-consultation-status--success {
	border-color: var(--hh-accent);
	color: var(--hh-ink);
}

/*
 * ---------- Digestive Health Assessment (P4-10) ----------
 * Reuses existing tokens/components throughout (resource-meta-pill,
 * info-card, button, section-heading) — only the radio-scale UI and
 * the safety banner are genuinely new, since nothing like a labeled
 * 0-4 response scale existed anywhere else in the theme.
 */

.assessment-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--hh-space-2) 0 var(--hh-space-3);
}

.assessment-progress {
	position: sticky;
	top: 4.5rem;
	z-index: 10;
	margin: 0 0 var(--hh-space-3);
	padding: 0.6rem var(--hh-space-2);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	box-shadow: var(--hh-shadow-sm);
	font-weight: 600;
	font-size: 0.9rem;
}

.assessment-error {
	margin-bottom: var(--hh-space-3);
	padding: var(--hh-space-2) var(--hh-space-3);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-accent);
	border-radius: var(--hh-radius);
	color: var(--hh-accent);
	font-weight: 600;
}

.assessment-domain {
	margin: 0 0 var(--hh-space-4);
	padding: 0;
	border: none;
}

.assessment-domain__legend {
	padding: 0;
	margin-bottom: var(--hh-space-2);
	font-family: var(--hh-font-serif);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--hh-ink);
}

.assessment-question {
	margin: 0 0 var(--hh-space-3);
	padding: var(--hh-space-3);
	background: var(--hh-bg-raised);
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-sm);
}

.assessment-question__legend {
	padding: 0;
	margin-bottom: var(--hh-space-2);
	font-weight: 600;
	line-height: 1.5;
}

.assessment-question__number {
	color: var(--hh-ink-soft);
	margin-right: 0.35em;
}

.assessment-scale {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.assessment-scale__option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	flex: 1 1 5.5rem;
	min-width: 5.5rem;
	padding: 0.6rem 0.4rem;
	text-align: center;
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius);
	cursor: pointer;
	transition: all var(--hh-transition);
}

.assessment-scale__option:has(input:checked) {
	border-color: var(--hh-accent);
	border-width: 2px;
	background: var(--hh-accent-soft);
}

.assessment-scale__option:has(input:focus-visible) {
	outline: 2px solid var(--hh-focus);
	outline-offset: 2px;
}

.assessment-scale__value {
	font-family: var(--hh-font-serif);
	font-size: 1.1rem;
	font-weight: 600;
}

.assessment-scale__label {
	font-size: 0.8rem;
	color: var(--hh-ink-soft);
}

.assessment-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hh-space-2);
	margin: var(--hh-space-4) 0;
}

.assessment-safety-banner {
	margin-bottom: var(--hh-space-4);
	padding: var(--hh-space-3);
	background: var(--hh-bg-raised);
	border: 2px solid var(--hh-accent);
	border-radius: var(--hh-radius-lg);
	box-shadow: var(--hh-shadow-md);
}

.assessment-safety-banner__title {
	margin-top: 0;
	color: var(--hh-accent);
}

.assessment-domain-list dt {
	font-weight: 600;
	margin-top: var(--hh-space-2);
}

.assessment-domain-list dd {
	margin: 0.25em 0 0;
	color: var(--hh-ink-soft);
}

.assessment-page__disclaimer {
	margin-top: var(--hh-space-4);
	padding-top: var(--hh-space-3);
	border-top: 1px solid var(--hh-line);
	font-size: 0.9rem;
	color: var(--hh-ink-soft);
}

@media (min-width: 48rem) {
	.assessment-scale__option {
		flex: 0 1 auto;
		min-width: 6rem;
	}
}

/* ---------- Print Stylesheet ---------- */

@media print {
	.site-header,
	.reading-progress-bar,
	.skip-link,
	.back-to-top,
	.feedback-widget,
	.share-buttons,
	.share-toast,
	.newsletter-signup,
	.related-content,
	.nav-toggle,
	.theme-toggle,
	.header-search-toggle,
	.reader-controls,
	.resource-actions,
	.site-footer,
	.search-modal,
	.hh-lightbox {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 12pt;
		line-height: 1.5;
	}

	.content-wrapper,
	.content-wrapper--narrow {
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	a {
		color: #000 !important;
		text-decoration: underline !important;
	}

	.single-article__content img,
	.single-article__content svg {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	.author-bio {
		border: 1px solid #ccc !important;
		page-break-inside: avoid;
	}
}