/* Gig Harbor Now — Supplemental Theme Styles. Not expressible in theme.json. Cap: 15KB (spec §8). */

/* 0a. Heading utility classes — mirror semantic heading styles without element semantics */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
}

h1, .h1 { font-size: clamp(36px, 5vw, 40px); line-height: 1.2; }
h2, .h2 { font-size: clamp(30px, 3.5vw, 34px); line-height: 1.25; }
h3, .h3 { font-size: clamp(24px, 2.5vw, 26px); line-height: 1.3; }
h4, .h4 { font-size: clamp(20px, 2vw, 21px); line-height: 1.35; }
h5, .h5 { font-size: var(--wp--preset--font-size--regular); line-height: 1.4; }
h6, .h6 { font-size: var(--wp--preset--font-size--small); line-height: 1.4; }

/* 0b. Smooth scrolling for anchor links (respects reduced-motion below) */
html { scroll-behavior: smooth; }

/* 1. Defensive image handling (spec §3) */

img[src=""],
img:not([src]) {
	display: none;
}

.wp-block-image img,
.wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	min-height: 0;
	width: 100%;
	height: 100%;
}

/* Cap standalone images at 80vh but not when inside a hero/cover wrapper */
.wp-block-image img { max-height: 80vh; height: auto; }

.is-style-square img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* 2. Reduced motion (spec §7) */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 3. Focus indicators — two-tone ring; see implementation-overrides.md §S5 focus-ring deviation */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--surface);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--primary-dark);
}

.skip-link {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal;
}

.skip-link:focus,
.skip-link:focus-visible {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	padding: 1em 2em;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
	z-index: 100000;
	position: fixed;
	top: 0;
	left: 0;
}

/* 3b. Universal button hover — darken background for all WP button blocks.
   Specific buttons (header CTA, search) override with explicit colors. */
.wp-block-button__link:hover,
.wp-element-button:hover {
	filter: brightness(0.88);
}

/* 3c. Heading link hover — WP inline element styles from block color overrides
   suppress theme.json's link :hover. Restore it universally. */
:is(h1, h2, h3, h4, h5, h6) a,
:is(h1, h2, h3, h4, h5, h6) a:visited {
	color: var(--wp--preset--color--primary-dark);
}

:is(h1, h2, h3, h4, h5, h6) a:hover,
:is(h1, h2, h3, h4, h5, h6) a:visited:hover {
	color: var(--wp--preset--color--accent-2);
}

/* 4. Zero out WP root blockGap on site-level children (header, hero, nav).
   WP generates `:where(.wp-site-blocks) > * { margin-block-start: 25px }`
   from styles.spacing.blockGap in theme.json. We zero it for elements that
   must be flush (hero, nav, main). */
:where(.wp-site-blocks) > .site-header,
:where(.wp-site-blocks) > .hero-featured-post,
:where(.wp-site-blocks) > .wp-block-template-part,
:where(.wp-site-blocks) > .site-main,
:where(.wp-site-blocks) > .site-footer {
	margin-block-start: 0;
}

/* 5–8. Header */

/* Layer 1 — utility (secondary) bar: ~36px, hidden on mobile.
   Content constrained to 1440px. Transparent bg when inside hero-viewport. */
.wp-block-group.utility-bar {
	display: none;
	height: 36px;
	line-height: 1;
	overflow: visible;
	padding-left: max(20px, calc((100% - 1440px) / 2));
	padding-right: max(20px, calc((100% - 1440px) / 2));
}

@media (min-width: 768px) {

	.wp-block-group.utility-bar { display: flex; }
}

/* Utility social icons: 20px visible, white on teal bar */
.utility-bar .social-icon {
	min-width: 20px;
	min-height: 20px;
	padding: 6px;
}

.utility-bar .social-icon img {
	filter: brightness(0) invert(1);
}

.utility-bar .utility-social-icons {
	gap: 8px;
}

.utility-bar a,
.utility-nav-wrap a {
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	line-height: 1.2;
}

/* Top-level utility nav items: full-height hover area matching the 36px bar.
   Hover applied to the <li> so it includes both the link and the chevron button. */
.utility-bar .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
}

.utility-bar .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover {
	background: rgba(255, 255, 255, 0.08);
}

.utility-bar .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.utility-bar .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--accent-1);
}

/* Chevron icon: inherit color, visually integrated with parent item */
.utility-bar .wp-block-navigation__submenu-icon {
	color: inherit;
	background: none;
	border: none;
	padding: 0 0 0 4px;
	cursor: pointer;
}

.utility-bar .wp-block-navigation__submenu-icon svg {
	stroke: currentColor;
}

/* Reduce gap between utility nav items — the 12px item padding provides spacing */
.utility-bar .wp-block-navigation__container {
	gap: 0;
}

/* Keep generic link hover for social icons etc */
.utility-bar a:hover,
.utility-nav-wrap a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

/* Layer 3 — hero photo banner (under the primary nav). The hero-featured-post
   pattern in the template fills it with a cover block + image + overlay; the
   empty placeholder in parts/header.html collapses when nothing is injected. */
.header-hero-banner {
	background-color: var(--wp--preset--color--primary-dark);
	max-width: 1440px;
	margin-inline: auto;
	min-height: 0;
}

/* Collapse the empty placeholder cover when no content was injected. */
.header-hero-banner > .wp-block-cover__inner-container:empty {
	display: none;
}

.header-hero-banner:has(> .wp-block-cover__inner-container:empty) {
	display: none;
}

/* Remove WP root blockGap around hero on front-page and single */
.hero-featured-post {
	margin-block: 0;
}

/* Single post: mobile CTAs shown below content when sidebar hidden (<1024px),
   hidden on desktop where sidebar provides them instead. */
@media (min-width: 1024px) {
	.single-post__mobile-ctas { display: none; }
}

/* Sponsor banner inserted inline in post content */
.single-post__sponsor-insert {
	margin: var(--wp--preset--spacing--30) 0;
}

/* Author link on hero — white, underline on hover */
.hero-featured-post__author a,
.hero-featured-post__author a:visited {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.hero-featured-post__author a:hover {
	text-decoration: underline;
}

/* Share bar — top + bottom borders per Figma */
.ghn-share-bar--post {
	border-top: 1px solid var(--wp--preset--color--border-light);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Single post content area — 60px spacing above and below, 40px column gap */
.single-post__layout {
	padding-top: 60px;
	padding-bottom: 60px;
	gap: 0 40px;
}

/* ===================================================================
   Post Content — Common HTML Element Styles
   Covers: captions, blockquotes, pull quotes, lists, tables, code,
   preformatted text, citations, horizontal rules.
   =================================================================== */

/* --- Captions (figcaption, .wp-element-caption, legacy .wp-caption-text) --- */
.wp-block-post-content figcaption,
.wp-block-post-content .wp-element-caption,
.wp-block-post-content .wp-caption-text {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-top: 8px;
	line-height: 1.5;
	font-style: italic;
}

/* --- Blockquotes --- */
.wp-block-post-content .wp-block-quote {
	border-left: 4px solid var(--wp--preset--color--primary);
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface-alt);
	border-radius: 0 4px 4px 0;
}

.wp-block-post-content .wp-block-quote p {
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	line-height: 1.6;
	margin: 0;
}

.wp-block-post-content .wp-block-quote p + p {
	margin-top: 16px;
}

.wp-block-post-content .wp-block-quote cite,
.wp-block-post-content .wp-block-quote footer {
	display: block;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.wp-block-post-content .wp-block-quote cite::before,
.wp-block-post-content .wp-block-quote footer::before {
	content: "— ";
}

/* Blockquote style: large (WP variant) */
.wp-block-post-content .wp-block-quote.is-style-large {
	border-left: none;
	padding: var(--wp--preset--spacing--40);
	text-align: center;
}

.wp-block-post-content .wp-block-quote.is-style-large p {
	font-size: var(--wp--preset--font-size--x-large);
}

/* --- Pull Quotes --- */
.wp-block-post-content .wp-block-pullquote {
	border-top: 3px solid var(--wp--preset--color--primary-dark);
	border-bottom: 3px solid var(--wp--preset--color--primary-dark);
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--40) 0;
	text-align: center;
}

.wp-block-post-content .wp-block-pullquote blockquote {
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
}

.wp-block-post-content .wp-block-pullquote blockquote p {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	font-style: italic;
	line-height: 1.4;
}

.wp-block-post-content .wp-block-pullquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
}

/* --- Lists (ul, ol) --- */
.wp-block-post-content ul,
.wp-block-post-content ol {
	margin: 24px 0;
	padding-left: 28px;
	font-size: var(--wp--preset--font-size--regular);
	line-height: 1.8;
}

.wp-block-post-content li {
	margin-bottom: 8px;
}

.wp-block-post-content ul li::marker {
	color: var(--wp--preset--color--primary);
}

.wp-block-post-content ol li::marker {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.wp-block-post-content li > ul,
.wp-block-post-content li > ol {
	margin: 8px 0;
}

/* --- Tables --- */
.wp-block-post-content .wp-block-table {
	margin: var(--wp--preset--spacing--40) 0;
	overflow-x: auto;
}

.wp-block-post-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.wp-block-post-content .wp-block-table thead {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
}

.wp-block-post-content .wp-block-table thead th {
	padding: 12px 16px;
	text-align: left;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--x-small);
}

.wp-block-post-content .wp-block-table tbody td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.wp-block-post-content .wp-block-table tbody tr:nth-child(even) {
	background: var(--wp--preset--color--surface-alt);
}

.wp-block-post-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--surface-alt);
}

.wp-block-post-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
	background: transparent;
}

/* Table caption */
.wp-block-post-content .wp-block-table figcaption {
	font-style: normal;
	text-align: center;
}

/* --- Code & Preformatted Text --- */
.wp-block-post-content code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.875em;
	background: var(--wp--preset--color--surface-alt);
	padding: 2px 6px;
	border-radius: 3px;
	border: 1px solid var(--wp--preset--color--border-light);
}

.wp-block-post-content .wp-block-code {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 24px;
	background: var(--wp--preset--color--primary-dark);
	border-radius: 6px;
	overflow-x: auto;
}

.wp-block-post-content .wp-block-code code {
	display: block;
	background: transparent;
	border: none;
	padding: 0;
	color: var(--wp--preset--color--border-light);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	white-space: pre;
}

.wp-block-post-content .wp-block-preformatted {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 24px;
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 6px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	overflow-x: auto;
	white-space: pre-wrap;
}

/* --- Horizontal Rules --- */
.wp-block-post-content hr,
.wp-block-post-content .wp-block-separator {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border-light);
	margin: var(--wp--preset--spacing--40) 0;
}

.wp-block-post-content .wp-block-separator.is-style-wide {
	border-top-width: 2px;
}

.wp-block-post-content .wp-block-separator.is-style-dots {
	border: none;
	text-align: center;
	line-height: 1;
}

.wp-block-post-content .wp-block-separator.is-style-dots::before {
	content: "···";
	font-size: 24px;
	letter-spacing: 16px;
	color: var(--wp--preset--color--primary);
}

/* --- Inline Citations --- */
.wp-block-post-content cite {
	font-style: italic;
	color: var(--wp--preset--color--text-muted);
}

/* ===================================================================
   Hero Viewport — front-page wrapper around header + hero.
   Hero always maintains 16:9 aspect ratio. On 16:9 viewports the hero
   fills the screen exactly, so the utility bar overlays the top and
   the primary nav overlays the bottom. On other aspect ratios, navs
   sit normally above/below the hero.
   =================================================================== */
.hero-viewport {
	position: relative;
	margin-block: 0;
}

/* Hero always uses 16:9 aspect ratio */
.hero-viewport .hero-featured-post {
	margin-block: 0;
}

/* Scroll-down arrow — hidden by default, shown at 16:9 */
.hero-scroll-arrow {
	display: none;
	position: absolute;
	bottom: 96px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 201;
	color: var(--wp--preset--color--surface);
	opacity: 0.8;
	transition: opacity 0.2s ease;
	text-decoration: none;
	animation: hero-bounce 2s ease-in-out infinite;
}

.hero-scroll-arrow:hover {
	opacity: 1;
	color: var(--wp--preset--color--surface);
}

@keyframes hero-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(8px); }
}

/* === 16:9 overlay layout ===
   At 16:8–16:10 viewports, the hero fills the viewport exactly.
   Accounts for OS taskbar, browser chrome reducing effective viewport.
   Utility bar overlays top, primary nav overlays bottom. */
@media (min-aspect-ratio: 16/10) and (max-aspect-ratio: 2/1) {

	.hero-viewport {
		height: 100vh;
		overflow: hidden;
	}

	/* Utility bar overlays the top of the hero */
	.hero-viewport > .wp-block-template-part:first-child {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 200;
	}

	.hero-viewport .utility-bar {
		background: rgba(0, 0, 0, 0.3);
	}

	/* Hero fills the entire viewport */
	.hero-viewport .hero-featured-post__cover.wp-block-cover {
		height: 100vh;
		width: 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: auto;
	}

	/* Primary nav pulled up over hero bottom, then sticky.
	   Solid white bg — the 0.92 opacity caused a tinted color artifact.
	   z-index raised above hero overlay (200) so nav stays on top. */
	.hero-viewport + .wp-block-template-part:has(.primary-nav-bar) {
		margin-top: -80px;
		background: var(--wp--preset--color--surface);
		z-index: 200;
	}

	/* Overlay content clearance — push content away from nav bars.
	   Top: 36px utility bar + 40px gap = 76px.
	   Bottom: 80px primary nav + 40px gap = 120px. */
	.hero-viewport .hero-featured-post__cover .wp-block-cover__inner-container {
		padding-bottom: 120px;
	}

	/* Hero logo must clear the utility bar on 16:9 viewports */
	.hero-viewport .hero-logo-overlay {
		top: 76px;
	}

	/* Show scroll arrow — positioned between overlay bottom and nav top */
	.hero-scroll-arrow {
		display: block;
		bottom: 96px;
	}
}

/* ===================================================================
   Primary Nav — sticky when outside .hero-viewport (scroll past hero).
   Also used on single pages where nav is NOT inside hero-viewport.
   =================================================================== */
.wp-block-template-part:has(.primary-nav-bar) {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	background: var(--wp--preset--color--surface);
	margin-block: 0;
	overflow-x: clip;
}

/* Ensure the inner nav bar has no competing background — the wrapper handles it */
.primary-nav-bar.has-background {
	background-color: transparent;
}

/* Remove WP root blockGap on main when it follows the nav */
.wp-block-template-part:has(.primary-nav-bar) + .site-main {
	margin-top: 0;
}

/* Universal content spacing: 60px desktop, 30px mobile.
   Top: gap between nav and content.
   Bottom: gap between content and footer.
   Templates with a page-title-bar zero out the top padding
   and use margin-top on the first content block instead. */
.site-main {
	padding-top: 60px;
	margin-bottom: 60px;
}

.site-main:has(> .page-title-bar) {
	padding-top: 0;
}

.site-main > .page-title-bar + .wp-block-columns,
.site-main > .page-title-bar + .wp-block-group {
	margin-top: 60px;
}

@media (max-width: 767px) {
	.site-main {
		padding-top: 30px;
		margin-bottom: 30px;
	}

	.site-main:has(> .page-title-bar) {
		padding-top: 0;
	}

	.site-main > .page-title-bar + .wp-block-columns,
	.site-main > .page-title-bar + .wp-block-group {
		margin-top: 30px;
	}
}

/* Primary nav bar inner content — same max() padding as utility bar:
   20px minimum on narrow screens, auto-centers at 1440px on wider.
   Nav items left-aligned next to logo; CTAs pushed right via margin-left:auto. */
.primary-nav-bar {
	position: relative;
	height: 80px;
	width: 100%;
	align-items: center;
	gap: 20px;
	padding-left: max(20px, calc((100% - 1440px) / 2));
	padding-right: max(20px, calc((100% - 1440px) / 2));
	box-sizing: border-box;
}

/* Nav grows to fill space; CTAs pushed to far right */
.primary-nav-bar .site-nav-bar {
	flex: 1 1 auto;
}

.primary-nav-bar .header-cta-buttons {
	margin-left: auto;
	flex-shrink: 0;
}

/* On mobile: nav bar above hero. Pull the primary-nav template-part up
   with order:-1 so it renders before the hero-viewport visually.
   DOM order (and thus tab order) is unchanged — only visual reflow. */
@media (max-width: 767px) {

	.wp-site-blocks { display: flex; flex-direction: column; }

	.wp-block-template-part:has(.primary-nav-bar) { order: -1; }

	/* Dark nav bar on mobile — matches footer, white hamburger icon */
	.wp-block-template-part:has(.primary-nav-bar) {
		background: var(--wp--preset--color--primary-dark);
		border-bottom: none;
	}

	/* Reduce nav bar height on mobile — 56px is sufficient for logo + hamburger */
	.primary-nav-bar { height: 56px; }

	/* Scale down the logo on mobile to fit 56px bar */
	.primary-nav-logo img { max-height: 40px; width: auto; }

	/* Nav wrapper transparent on mobile so dark nav bar bg shows through */
	.primary-nav-bar .site-nav-bar {
		background-color: transparent;
	}

	/* Hamburger icon: white on dark background */
	.primary-nav-bar .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--surface);
	}
}

/* Nav logo: hidden by default, fades in when hero logo scrolls out of view.
   The .nav-logo-visible class is toggled by IntersectionObserver in functions.php. */
.primary-nav-logo {
	flex-shrink: 0;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.primary-nav-logo.nav-logo-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.primary-nav-logo .custom-logo-link,
.primary-nav-logo img {
	display: block;
}

/* Nav bar inner wrapper — white bg on desktop (was inline style, moved to CSS
   so mobile can override to transparent for the dark nav bar). */
@media (min-width: 768px) {

	.primary-nav-bar .site-nav-bar {
		background-color: var(--wp--preset--color--surface);
	}
}

.primary-nav-bar .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	padding: 8px 12px;
}

/* Prevent nav overflow: shrink link padding on mid-width screens */
@media (max-width: 1100px) {

	.primary-nav-bar .wp-block-navigation a { padding: 8px 6px; }

	/* Caret absorbs the reduced right padding too */
	.primary-nav-bar .wp-block-navigation .wp-block-navigation__submenu-icon { padding-right: 6px; }
}

/* Below 900px the nav items won't fit — ensure the overflow button shows */
@media (max-width: 900px) {

	.primary-nav-bar .site-nav-bar { overflow: hidden; }
}

.primary-nav-bar .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

/* Dropdown caret — tight against the link text, inherits hover color.
   WP core renders a <button class="wp-block-navigation__submenu-icon"> with
   an SVG chevron as a sibling of the link inside .has-child items.

   Design approach (per W3C WAI fly-out menu pattern, WCAG 2.4.4 / 4.1.2):
   - Button is a separate focusable element (not merged into the link)
   - Button has aria-expanded + aria-label (set by WP core)
   - SVG uses stroke:currentColor so it inherits color on hover/focus
   - Caret is visually part of the menu item: link's right padding removed,
     caret absorbs it so inter-item spacing is consistent with/without carets.

   WP core sizes the button at 0.6em with SVG inheriting. We keep that
   approach but add right padding so the caret functions as the item's
   trailing edge for consistent inter-item gaps. */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: currentColor;
	background: none;
	border: none;
	width: 0.6em;
	height: 0.6em;
	padding: 0 12px 0 4px;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex-shrink: 0;
}

/* SVG sizing — must beat WP core's `.wp-block-navigation
   .wp-block-navigation__submenu-icon svg { width: inherit }` (0,2,1).
   Core's inherit resolves to 0 when the button uses em sizing in a flex
   context. We override with explicit 10px and higher specificity (0,4,1). */
.primary-nav-bar .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon svg {
	width: 10px;
	height: 10px;
	stroke: currentColor;
	fill: none;
	flex-shrink: 0;
}

/* Parent item hover: caret follows the link color change */
.primary-nav-bar .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-icon,
.primary-nav-bar .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--primary);
}

/* Link inside .has-child: remove right padding (caret absorbs it) */
.primary-nav-bar .wp-block-navigation .has-child > .wp-block-navigation-item__content {
	padding-right: 0;
}

.primary-nav-bar .wp-block-navigation .has-child {
	display: flex;
	align-items: center;
}

/* Mobile overlay — dark background + white text. Specificity must beat WP's
   .wp-block-navigation:not(.has-background) ... (0,4,0). Doubled class bumps
   our selector to (0,5,0) so our colors win. */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
}

.primary-nav-bar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--surface);
}

/* Reset submenu containers inside the mobile overlay — must not render as white
   boxes. WP's default uses background:inherit which chains from our dark bg. */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: none;
	box-shadow: none;
	border-top: none;
}

/* Close button: white on dark overlay */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--surface);
}

/* Tighten overlay layout: reduce top padding, add consistent item spacing,
   reduce submenu padding so parent-to-child gap isn't jarring. */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 40px;
}

/* All links in overlay: 44px minimum touch target (WCAG 2.5.5 AAA / Apple HIG).
   Uses min-height + flex so the tappable area covers the full row. */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open a,
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* Top-level items: no extra padding — the 44px link height provides rhythm */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	padding: 0;
}

/* Submenu containers inside overlay: tighter padding, indented */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0 24px;
}

/* Submenu links: slightly smaller font + reduced opacity for hierarchy */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 15px;
	opacity: 0.85;
	min-height: 40px;
}

/* Injected utility links — only visible inside the mobile overlay.
   Hidden on desktop. Shows as a separated section at the bottom of the hamburger menu. */
.mobile-utility-links {
	display: none;
}

.is-menu-open .mobile-utility-links {
	display: block;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-utility-links__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 8px;
}

.mobile-utility-links__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-utility-links__list a {
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.mobile-utility-links__list a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Nested children (e.g. About → Staff, Board, etc.) */
.mobile-utility-links__sublist {
	list-style: none;
	padding: 0 0 0 16px;
	margin: 2px 0 0;
}

.mobile-utility-links__sublist a {
	font-size: 15px;
	opacity: 0.85;
	min-height: 40px;
	display: flex;
	align-items: center;
}

/* Dropdown submenus — matches prod: white bg, teal links, clean borders.
   Prod uses > chevron indicator on parent items with children. */
.primary-nav-bar .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.primary-nav-bar .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	height: auto;
}

/* Desktop dropdown submenus — white bg, teal links, teal accent border on
   the edge adjacent to the nav item. Specificity (0,3,1) beats WP core's
   .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container (0,3,0)
   which sets border: 1px solid rgba(0,0,0,0.15) and would override our accent. */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--border-light);
	border-top: 3px solid var(--wp--preset--color--primary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	padding: 8px 0;
	min-width: 220px;
	border-radius: 0 0 4px 4px;
}

/* Upward dropdowns — when the nav overlaps the hero bottom (before scrolling),
   open submenus above the nav bar so they don't overflow off-screen.
   .nav-dropdowns-up is toggled by scroll listener in functions.php. */
.nav-dropdowns-up .primary-nav-bar .wp-block-navigation .wp-block-navigation__submenu-container {
	top: auto;
	bottom: 100%;
	border: 1px solid var(--wp--preset--color--border-light);
	border-bottom: 3px solid var(--wp--preset--color--primary);
	border-radius: 4px 4px 0 0;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.primary-nav-bar .wp-block-navigation__submenu-container a,
.primary-nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	display: block;
	padding: 10px 20px;
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
	font-weight: 400;
	line-height: 1.4;
}

.primary-nav-bar .wp-block-navigation__submenu-container a:hover,
.primary-nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface-warm);
	color: var(--wp--preset--color--primary-dark);
}

/* Utility bar dropdown — dark teal bg, white links, matching prod */
.utility-bar .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.utility-bar .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	height: auto;
}

.utility-bar .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--primary-dark);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	padding: 8px 0;
	min-width: 200px;
	border-radius: 0 0 4px 4px;
}

.utility-bar .wp-block-navigation .wp-block-navigation__submenu-container a,
.utility-bar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--surface);
	padding: 8px 16px;
	display: block;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.utility-bar .wp-block-navigation__submenu-container a:hover,
.utility-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-1);
	background: rgba(255, 255, 255, 0.08);
	text-decoration: none;
}

/* Hide CTA buttons under 1024px — not enough room alongside nav links.
   CTAs remain accessible via the bottom-of-page CTA band. */
@media (max-width: 1023px) {

	.primary-nav-bar .header-cta-buttons { display: none; }
}

/* When mobile overlay is open, show CTAs as a fixed bar at the bottom.
   html.has-modal-open is set by WP's Interactivity API on overlay open. */
@media (max-width: 1023px) {

	html.has-modal-open .primary-nav-bar .header-cta-buttons {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100001;
		background: var(--wp--preset--color--primary-dark);
		padding: 12px 20px;
		justify-content: center;
		gap: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	/* Hide search icon inside overlay CTA bar */
	html.has-modal-open .primary-nav-bar .header-search-icon { display: none; }
}

.header-cta-buttons { flex-shrink: 0; }

/* Search icon in primary nav — compact icon that expands to show input on focus.
   Input is absolutely positioned so it doesn't push other nav items off-screen. */
.header-search-icon {
	position: relative;
}

.header-search-icon .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 0;
}

.header-search-icon .wp-block-search__button {
	min-width: 40px;
	min-height: 40px;
	padding: 8px;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--primary-dark);
	cursor: pointer;
}

.header-search-icon .wp-block-search__input {
	position: absolute;
	right: 44px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	padding: 0;
	border: none;
	opacity: 0;
	transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
	background: var(--wp--preset--color--surface);
	z-index: 10;
}

.header-search-icon:focus-within .wp-block-search__input {
	width: 220px;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	opacity: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* stylelint-disable selector-class-pattern */
@media (max-width: 480px) {

	.header-btn-newsletters .wp-block-button__link,
	.header-btn-donate .wp-block-button__link {
		padding: 12px 16px;
		font-size: var(--wp--preset--font-size--small);
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

.header-btn-newsletters .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-1-hover);
	color: var(--wp--preset--color--primary-dark);
	filter: none;
}

.header-btn-donate .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-2-hover);
	color: var(--wp--preset--color--surface);
	filter: none;
}
/* stylelint-enable selector-class-pattern */

/* 9–13. Social icons + footer */

.utility-social-icons {
	gap: 12px;
	align-items: center;
}

.footer-social-icons {
	gap: 16px;
}

.social-icon,
.footer-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	transition: opacity 0.15s ease;
}

.social-icon { opacity: 0.9; }

.footer-social-icon { opacity: 0.85; }

.social-icon:hover,
.footer-social-icon:hover {
	opacity: 1;
}

.social-icon img,
.footer-social-icon img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	max-height: none;
}

.social-icon img { width: 20px; height: 20px; }

.footer-social-icon img { width: 24px; height: 24px; }

.site-footer,
.site-footer p,
.site-footer a {
	color: var(--wp--preset--color--surface);
}

.site-footer a:hover {
	color: var(--wp--preset--color--accent-1);
}

.footer-address,
.footer-phone,
.footer-copyright {
	font-family: var(--wp--preset--font-family--sans);
}

.footer-copyright {
	opacity: 0.8;
}

/* stylelint-disable selector-class-pattern */
.footer-nav .wp-block-navigation-item.current-menu-item > a,
.footer-nav .wp-block-navigation-item.current-page-item > a,
.footer-nav .wp-block-navigation-link.current-menu-item > a {
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}
/* stylelint-enable selector-class-pattern */

.footer-nav .wp-block-navigation a {
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}

.footer-nav .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Footer navigation: suppress any list-style bullets from unresolved nav blocks */
.site-footer .wp-block-navigation ul,
.site-footer .wp-block-navigation li,
.site-footer .wp-block-page-list ul,
.site-footer .wp-block-page-list li {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

@media (max-width: 767px) {

	.site-footer .wp-block-columns { flex-direction: column; }

	.site-footer .wp-block-columns > .wp-block-column {
		width: 100%;
		margin-bottom: 32px;
	}

	.site-footer .wp-block-column:last-child { margin-bottom: 0; }

	/* CTA band: remove gap between stacked donate + newsletter columns */
	.site-cta-band { gap: 0; }

	.site-cta-band .wp-block-column { margin-bottom: 0; }
}

/* 14. Hero template part */
.site-hero img[data-object-fit][src=""],
.site-hero img[data-object-fit]:not([src]) {
	display: block;
}

.site-hero {
	aspect-ratio: 16 / 9;
	max-height: 100vh;
	max-width: 2560px;
	width: min(100%, calc(100vh * 16 / 9));
	margin-inline: auto;
	position: relative;
}

.site-hero img[data-object-fit] {
	aspect-ratio: unset;
	max-height: none;
}

/* Hero logo overlay — top-left of the hero cover, not the inner container.
   Positioned relative to .hero-featured-post__cover (which has position:relative). */
.hero-logo-overlay {
	display: none;
	position: absolute;
	top: 32px;
	left: max(20px, calc((100% - 1440px) / 2));
	z-index: 2;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hero-logo-overlay__img {
	display: block;
	width: 168px;
	height: auto;
	object-fit: contain;
}

@media (min-width: 782px) {

	.hero-logo-overlay { display: block; }
}

/* Nav logo is always visible — it sits below the hero in the nav bar. */

/* 15–16. Share bar + homepage patterns */

.share-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: var(--wp--preset--spacing--20) 0;
}

.share-bar-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin: 0;
	white-space: nowrap;
}

.share-bar-icons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.share-bar-link,
.ghn-share-bar__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--border-light);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
	padding: 0;
	font: inherit;
}

.share-bar-link:hover,
.ghn-share-bar__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary);
}

.share-bar-link svg,
.ghn-share-bar__link svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

.hero-featured-post {
	margin-block-end: 0;
}

/* Hero cover — full-bleed. Inside .hero-viewport it fills 100vh (overridden above).
   Outside hero-viewport (fallback), uses 16:9 capped at viewport height. */
.hero-featured-post__cover.wp-block-cover {
	max-width: 2560px;
	max-height: 100vh;
	width: min(100%, calc(100vh * 16 / 9));
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	min-height: 0;
	align-items: flex-end;
	justify-content: flex-start;
}

/* Inner container constrained to 1440px for nav-level alignment. */
.hero-featured-post__cover .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Left-align overlay content within the hero cover. Width and position
   match Figma: 900px wide starting 120px from hero left edge. */
.hero-featured-post__cover .hero-featured-post__overlay {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 900px;
	margin-left: 0;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Hero category badge — yellow chip on the overlay.
   wp:post-terms renders as <div class="...hero-featured-post__badge"><a>Cat</a></div>.
   The block JSON sets backgroundColor/textColor but we also need padding + shape. */
.hero-featured-post__badge {
	display: inline-block;
	width: auto;
	margin: 0;
}

.hero-featured-post__badge a {
	display: inline-block;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--primary-dark);
	padding: 4px 12px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.hero-featured-post__badge a:hover {
	background: var(--wp--preset--color--accent-1-hover);
	color: var(--wp--preset--color--primary-dark);
}

.hero-featured-post__category,
.post-card__category a {
	text-decoration: none;
}

/* Title on hero cover: white-on-photo, link-color override via descendant
   specificity (no !important — spec policy). */
.hero-featured-post__cover .hero-featured-post__title,
.hero-featured-post__cover .hero-featured-post__title a,
.hero-featured-post__cover .hero-featured-post__title a:visited,
.hero-featured-post__cover .hero-featured-post__title a:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* No underlines on article links (post-card title, lead title, hero title,
   hero category pill) — visual distinction is carried by size/weight/color
   instead. WCAG 1.4.1 requires a non-color cue on body-copy links only;
   these are headline links in a clearly-typographically-distinct context.

   Underlines still applied to in-body links + sponsor name/URL + "More X" link
   which all sit within body copy and need the text-decoration cue. */
.sponsor-strip__name a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.hero-featured-post__category,
.hero-featured-post__category a {
	text-decoration: none;
}

/* Figma: Roboto Regular 16px, primary teal, no underline */
.category-section__more-link {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.hero-featured-post__category a {
	color: inherit;
}

.hero-featured-post__category a:hover,
.post-card__category:hover,
.category-section__more-link:hover {
	color: var(--wp--preset--color--accent-2);
}

/* Reset WP default block margins inside the hero overlay — Figma uses gap:12px */
.hero-featured-post__cover .hero-featured-post__title { margin-block: 0; }

.hero-featured-post__cover .hero-featured-post__meta { margin-block: 0; }

/* On mobile, reduce hero overlay padding so headline has more room in 16:9 frame */
@media (max-width: 768px) {

	.hero-featured-post__cover .hero-featured-post__overlay {
		gap: 4px;
		padding-bottom: 0;
	}

	.hero-featured-post__badge a { font-size: 10px; padding: 3px 8px; }

	/* Reduce gap between title and meta to near-zero so long titles fit */
	.hero-featured-post__cover .hero-featured-post__title { margin-block-end: 0; }

	.hero-featured-post__meta { gap: 0.3rem; margin-block-start: 2px; }

	/* Push overlay closer to the bottom edge of the hero.
	   WP cover block has its own 18px padding; inner container adds more.
	   Zero both and let the overlay's gap handle minimal spacing. */
	.hero-featured-post__cover.wp-block-cover {
		padding-bottom: 8px;
	}

	.hero-featured-post__cover .wp-block-cover__inner-container {
		padding-bottom: 4px;
	}

	/* Remove bottom margin on meta row */
	.hero-featured-post__cover .hero-featured-post__meta {
		margin-block-end: 0;
	}

}

/* Hero byline row: all elements must match — Figma: Roboto 14px white */
.hero-featured-post__meta {
	gap: 8px;
}

.hero-featured-post__meta,
.hero-featured-post__meta .wp-block-post-author-name,
.hero-featured-post__meta .wp-block-post-date,
.hero-featured-post__meta .wp-block-post-date time {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--surface);
}

.hero-featured-post__meta .wp-block-post-author-name {
	font-weight: 700;
}

/* Section spacing + top rule. First section has no top rule (Figma: no divider above News). */
.category-section {
	margin-block-end: 0;
	padding-block-start: 24px;
	padding-block-end: 24px;
}

/* Section top rule — Figma: 1px divider above every section except the first */
.category-section + .category-section {
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* Figma: 6px accent border, 48px tall, 20px gap, Merriweather Bold 34px */
.category-section__heading {
	border-left: 6px solid var(--ghn-category-color, var(--wp--preset--color--primary));
	padding-left: 20px;
	padding-block: 8px;
	margin-block: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.25;
}

/* Category section grid — default 60:40 ratio for thumb-left (News) briefs. */
.category-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 720fr) minmax(0, 440fr);
	gap: 40px;
	align-items: start;
	max-width: 1200px;
}

/* Thumb-above (stacked) sections: 780:380 ratio (~67:33) with 40px gap = 1200px.
   Slightly wider lead vs default so lead/brief bottom edges align better. */
.category-section--brief-thumb-above .category-section__grid {
	grid-template-columns: minmax(0, 780fr) minmax(0, 380fr);
}

@media (max-width: 768px) {

	.category-section__grid,
	.category-section--brief-thumb-above .category-section__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--25);
	}
}

/* Briefs column — vertical stack inside the 40% side. */
.category-section__briefs {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--25);
}

.category-section__more { margin-block-start: 0.75rem; margin-block-end: 0; text-align: right; }

/* ---------- page-title-bar (archive, category, author, search, etc.) ---------- */
/* Figma: full-width bar, left accent strip. Uses align:full + constrained
   layout so the heading naturally aligns with the 1200px content column.
   Accent color: set --title-bar-accent on .page-title-bar to override per-template
   or per-page. Defaults to primary (teal). */
.page-title-bar {
	--title-bar-accent: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--surface-alt);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding-top: 32px;
	padding-bottom: 32px;
}

.page-title-bar__heading {
	position: relative;
	padding-left: 1.25rem;
}

.page-title-bar__heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 48px;
	background: var(--title-bar-accent);
	border-radius: 3px;
}

@media (max-width: 767px) {
	.page-title-bar__heading::before {
		width: 4px;
		height: 32px;
		border-radius: 2px;
	}
}

/* ---------- post-card-list (horizontal: thumbnail left, text right) ---------- */
/* Figma archive/author/search: post-card-list-desktop 800×177, 32px gap */
.post-card-list.wp-block-group {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 0 20px;
	align-items: center;
	padding: 25px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.post-card-list__image {
	display: block;
	overflow: hidden;
	border-radius: 0;
}

.post-card-list__image img {
	display: block;
	width: 240px;
	height: 135px;
	object-fit: cover;
}

.post-card-list__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.post-card-list .post-card__excerpt {
	margin-block: 2px 4px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
	.post-card-list.wp-block-group {
		grid-template-columns: 1fr;
		gap: 0.75rem 0;
	}
}

/* When a post has no featured image, PHP injects a per-category placeholder
   via ghn_fallback_featured_image(). Hide-and-span removed in favour of
   always showing a thumbnail to maintain consistent grid layout. */

/* ---------- category featured first post ---------- */
/* First child: full-width vertical layout with "FEATURED" label */
.category-post-template > li:first-child .post-card-list.wp-block-group {
	grid-template-columns: 1fr;
	align-items: start;
	border-bottom: none;
	padding-bottom: 0;
	gap: 12px;
}

.category-post-template > li:first-child .post-card-list.wp-block-group::before {
	content: "FEATURED";
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.54px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.category-post-template > li:first-child .post-card-list__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.category-post-template > li:first-child .post-card__title {
	font-size: 28px !important;
	line-height: 1.2;
}

.category-post-template > li:first-child .post-card__excerpt {
	font-size: var(--wp--preset--font-size--medium) !important;
	line-height: 1.55;
}

.category-post-template > li:first-child .post-card__byline,
.category-post-template > li:first-child .post-card__author,
.category-post-template > li:first-child .post-card__byline-sep,
.category-post-template > li:first-child .post-card__date {
	color: var(--wp--preset--color--primary) !important;
	font-size: var(--wp--preset--font-size--small) !important;
}

/* Remove gap/margin between li items — cards have their own padding/border separators */
.category-post-template,
.wp-block-post-template:has(.post-card-list) {
	gap: 0 !important;
}
.wp-block-post-template:has(.post-card-list) > li {
	margin-block: 0 !important;
}

/* First post: no top padding — aligns with sidebar top (60px container margin handles spacing) */
.wp-block-post-template:has(.post-card-list) > li:first-child .post-card-list.wp-block-group {
	padding-top: 0;
}

/* Hide category badge on category pages — redundant since user is already on that category */
.category-post-template .post-card__category {
	display: none;
}

/* Sponsor box injected by PHP after first post */
.category-sponsor-box-item {
	list-style: none;
}

.category-sponsor-box {
	margin-block: 32px;
}

/* ---------- post-card (shared) ---------- */
.post-card {
	display: flex;
	flex-direction: column;
}

.post-card__image {
	display: block;
	overflow: hidden;
}

.post-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.post-card__body {
	padding-block-start: 0.75rem;
	flex: 1;
}

.post-card__title {
	margin-block: 0;
}

.post-card__title a {
	text-decoration: none;
}


.post-card__excerpt {
	font-size: var(--wp--preset--font-size--regular);
	line-height: 1.45;
	margin-block: 0.5rem 0.75rem;
}

/* Figma: Roboto Regular 14px, primary teal #2a8289 for lead/news briefs */
.post-card__byline {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.post-card__author a { text-decoration: none; }
.post-card__author::before { content: "By "; }

/* Separator dot: visible size, WCAG contrast compliant (#454545 = 9.7:1 on white) */
.post-card__byline-sep { margin-inline: 0.35rem; color: #454545; font-size: 1.3em; line-height: 1; }

/* ---------- lead card ---------- */
/* Figma: Merriweather Bold 34px, line-height 1.25 */
.post-card--lead .post-card__title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.25;
}

/* ---------- brief card ---------- */
/* Figma thumb-left: Merriweather Bold 21px; thumb-above: 17px */
.post-card--brief .post-card__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
}

.category-section--brief-thumb-above .post-card--brief .post-card__title {
	font-size: 17px;
	line-height: normal;
}

/* thumbnail-left — Figma: 140x79 thumbnail (16:9) to the left of title/byline */
.category-section--brief-thumb-left .post-card--brief {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 12px;
	align-items: center;
}

.category-section--brief-thumb-left .post-card--brief .post-card__body {
	padding-block-start: 0;
}

/* Brief separator — Figma: 1px solid #e1e1e1 between each brief card */
.category-section__brief-separator {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border-light);
	margin: 0;
}

/* Under 1200px: force thumb-left briefs to thumb-above layout and hide
   extra briefs beyond 2 so the column doesn't overwhelm the lead card. */
@media (max-width: 1199px) {

	.category-section--brief-thumb-left .post-card--brief {
		grid-template-columns: 1fr;
	}

	/* Hide children beyond the 3rd in the briefs column (brief 1 + hr + brief 2 = 3).
	   Previous nth-child/nth-of-type selectors miscounted because articles and hrs
	   interleave, leaving orphan separators visible. This hides child 4+ cleanly. */
	.category-section--brief-thumb-left .category-section__briefs > :nth-child(n+4) {
		display: none;
	}
}

@media (max-width: 768px) {

	.category-section__grid,
	.category-section--brief-thumb-above .category-section__grid {
		grid-template-columns: 1fr;
	}
}

/* Mobile typography for category cards — must come AFTER the base rules above
   to win at equal specificity. */
@media (max-width: 768px) {

	.post-card--lead .post-card__title { font-size: var(--wp--preset--font-size--x-large); }

	.post-card__excerpt { font-size: var(--wp--preset--font-size--medium); }

	.category-section__heading { font-size: 28px; }
}

/* 17. Sponsor strip — horizontal band per Figma category-sponsor-strip (88px) */

.sponsor-strip {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	background: var(--wp--preset--color--surface-warm);
	max-width: 100%;
	box-sizing: border-box;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--sans);
	margin-block: 24px 32px;
}

/* Figma: Roboto Bold 10px, text-muted, letter-spacing 1.2px */
.sponsor-strip__label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.sponsor-strip .sponsor-box__logo {
	flex-shrink: 0;
}

.sponsor-strip .sponsor-box__logo img {
	max-width: 154px;
	max-height: 64px;
	object-fit: contain;
}

.sponsor-strip__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.sponsor-strip__name {
	font-size: var(--wp--preset--font-size--regular);
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

.sponsor-strip__tagline {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-muted);
}

.sponsor-strip__visit {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: auto;
}

.sponsor-strip__visit:hover { color: var(--wp--preset--color--accent-2); }

@media (max-width: 768px) {

	/* Sponsor strip: stacked mobile layout.
	   Row 1: PRESENTED BY + logo side by side.
	   Row 2: sponsor name + tagline.
	   Row 3: visit link. */
	.sponsor-strip {
		height: auto;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		padding: 16px;
	}

	/* Label stays inline with logo */
	.sponsor-strip__label {
		flex-shrink: 0;
	}

	.sponsor-strip .sponsor-box__logo img {
		max-width: 120px;
		max-height: 48px;
	}

	/* Info takes full width on its own row */
	.sponsor-strip__info {
		flex-basis: 100%;
	}

	.sponsor-strip__name {
		font-size: var(--wp--preset--font-size--medium);
	}

	.sponsor-strip__visit {
		margin-left: 0;
	}
}

/* 18. Sidebar (spec §4.4, §5.1) */

/* Hide sidebar below 1024px (must be ≥300px, so no room on narrow screens) */
@media (max-width: 1023px) {

	.sidebar,
	.site-sidebar-column,
	.sidebar-column { display: none; }
}

/* Sidebar column: 360px on wide screens, never narrower than 300px */
.single-post__sidebar {
	min-width: 300px;
}

@media (min-width: 1440px) {
	.single-post__sidebar { flex-basis: 360px !important; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
	.single-post__sidebar { flex-basis: 300px !important; }
}

/* Sidebar widgets — padding per Figma spec.
   1440px+: 40px all around → 280px inner content in 360px column.
   1024–1439px: 20px all around → 260px inner in 300px column.
   Uses !important to override inline padding from block JSON attributes. */
.sidebar .cta-donate,
.sidebar .cta-newsletter {
	padding: 20px !important;
	border-radius: 0;
	box-sizing: border-box;
}

@media (min-width: 1440px) {
	.sidebar .cta-donate,
	.sidebar .cta-newsletter {
		padding: 40px !important;
	}
}

.sidebar .cta-donate {
	margin-bottom: 24px;
}

/* Sidebar newsletter CTA — left-justify text, add input field */
.sidebar .cta-newsletter {
	text-align: left;
}

.sidebar .cta-newsletter .has-text-align-center {
	text-align: left;
}

.sidebar .cta-newsletter .wp-block-heading {
	font-size: var(--wp--preset--font-size--x-large);
}

.sidebar .cta-newsletter .wp-block-buttons {
	justify-content: flex-start;
}

.sidebar .cta-newsletter .wp-block-group:has(.wp-block-buttons) {
	justify-content: flex-start;
}

/* Sidebar newsletter inline form — email input + submit button */
.cta-newsletter__form {
	display: flex;
	gap: 0;
	margin-top: var(--wp--preset--spacing--20);
}

.cta-newsletter__input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	border: 1px solid var(--wp--preset--color--primary-dark);
	border-right: none;
	border-radius: 4px 0 0 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

.cta-newsletter__input::placeholder {
	color: #999;
}

.cta-newsletter__submit {
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--primary-dark);
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	white-space: nowrap;
}

.cta-newsletter__submit:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	filter: none;
}

.author-profile {
	--ghn-author-avatar-size: 110px;
	--ghn-author-stack-gap: 16px;
	--ghn-author-social-gap: 12px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
}

.author-profile__avatar-wrap {
	width: var(--ghn-author-avatar-size);
	height: var(--ghn-author-avatar-size);
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: var(--ghn-author-stack-gap);
}

.author-profile__avatar-wrap .author-avatar,
.author-profile__avatar-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-profile .author-name {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--ghn-author-stack-gap);
}

.author-profile .author-bio.bio-box {
	border-left: 4px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--surface-alt);
	padding: 12px 12px 12px 16px;
	margin-bottom: var(--wp--preset--spacing--20);
}

.author-profile .author-bio-text {
	font-size: var(--wp--preset--font-size--regular);
	line-height: 1.4;
	margin: 0;
}

.author-profile__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ghn-author-social-gap);
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}

.author-profile__social-link {
	color: var(--wp--preset--color--primary);
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.obituary-card .obituary-card__body {
	padding: 20px;
}

.obituary-card__name a {
	color: var(--wp--preset--color--primary-dark);
}

.obituary-card .wp-block-post-featured-image {
	max-width: 100%;
}

.obituary-card .wp-block-post-featured-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.obituary-card__body > :first-child {
	margin-block-start: 0;
}

.obituary-card__dates {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}

.obituary-card__veteran-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	padding: 4px 10px 4px 8px;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: normal;
}

.obituary-card__veteran-star {
	color: var(--wp--preset--color--accent-1);
	font-size: 14px;
}

.obituary-card__veteran-badge-wrap {
	margin-top: 10px;
	margin-bottom: 0;
}

.single-obituary__portrait {
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
}

.single-obituary__portrait img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.single-obituary__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.single-obituary__content > * {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

.single-obituary__portrait,
.single-obituary__name,
.single-obituary__dates,
.single-obituary__body-heading {
	text-align: center;
}

.single-obituary__dates {
	justify-content: center;
}

.single-obituary__veteran-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	padding: 4px 10px 4px 8px;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: normal;
	width: auto;
}

.single-obituary__veteran-star {
	color: var(--wp--preset--color--accent-1);
	font-size: 14px;
}

.single-obituary__dates {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.single-obituary__funeral-home {
	background: var(--wp--preset--color--surface-alt);
	padding: 20px;
	border: none;
}

.single-obituary__funeral-home-inner {
	font-family: var(--wp--preset--font-family--sans);
}

.single-obituary__funeral-home-label {
	font-weight: 700;
	font-size: 12px;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.06em;
	margin: 0 0 6px;
}

.single-obituary__funeral-home-name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--regular);
	color: var(--wp--preset--color--primary-dark);
	margin: 0 0 6px;
}

.single-obituary__funeral-home-details {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary-dark);
	margin: 0;
}

.single-obituary__funeral-home-url {
	font-size: var(--wp--preset--font-size--small);
	margin: 4px 0 0;
}

.single-obituary__funeral-home-url a {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.single-obituary__portrait {
		max-width: 220px;
	}

	.single-obituary__funeral-home {
		text-align: center;
	}
}

.author-card .wp-block-avatar img,
.author-archive__avatar img {
	border-radius: 50%;
	width: 120px;
	height: 120px;
	object-fit: cover;
}

.author-archive__bio {
	border-left: 4px solid var(--wp--preset--color--primary);
	padding-left: 1.5rem;
	margin-bottom: 2rem;
}

/* ---------- Universal form elements (Figma: input-field, button-dark) ---------- */

/* Text inputs, email inputs, search inputs, textareas */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
.wp-block-search .wp-block-search__input {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-input);
	border-radius: 2px;
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary-dark);
}

input::placeholder,
textarea::placeholder,
.wp-block-search .wp-block-search__input::placeholder {
	opacity: 0.5;
	color: var(--wp--preset--color--primary-dark);
}

/* Primary button style — dark bg, white text */
button[type="submit"],
input[type="submit"],
.wp-block-search__button.wp-element-button {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	border: none;
	border-radius: 2px;
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-block-search__button.wp-element-button:hover {
	background: var(--wp--preset--color--primary);
	filter: none;
}

/* Search block layout — input + button side by side */
.wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.wp-block-search__inside-wrapper .wp-block-search__input {
	flex: 1;
}

/* ---------- Search page (Figma: node 85:561) ---------- */

/* Search heading — uses theme H2 size via variable */
.search-heading {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.25;
}

/* Search result count — Figma: Roboto 14px, primary color */
.search-result-count__text {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
}

/* stylelint-disable selector-class-pattern */
/* ---------- Pagination (Figma: node 175:24) ---------- */
.wp-block-query-pagination {
	gap: 8px;
	margin-top: 32px;
	justify-content: flex-start;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	line-height: normal;
	white-space: nowrap;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-weight: 700;
	border-color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination-numbers .page-numbers:hover:not(.current),
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--surface-alt);
}
/* stylelint-enable selector-class-pattern */

.hero-shoutouts,
.shoutouts-archive .cta-donate {
	background-color: var(--wp--preset--color--accent-2);
}

.shoutout-sub-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 2rem;
}

.shoutout-sub-nav__link {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding-inline: 0.75rem;

	/* primary-dark: ≥4.5:1 on white; #2a8289 only ~3.1:1 (fails WCAG AA normal text) */
	color: var(--wp--preset--color--primary-dark);
}

.shoutout-sub-nav__link[aria-current="page"] {
	/* active: primary-dark bg + white — primary teal fails small-text contrast */
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary-dark);
}

/* 22. CTA band — equal-height columns, bottom margin above footer */

.site-cta-band {
	margin-bottom: 40px;
}

/* Force equal-height columns: each column stretches to match the tallest */
.site-cta-band > .wp-block-column {
	display: flex;
}

.site-cta-band > .wp-block-column > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 23. Print styles (spec §6) */

@media print {

	.site-header,.site-footer,.sidebar,.share-bar,.ghn-share-bar,.cta-donate,.cta-newsletter,.cta-submission,.sponsor-box,.sponsor-strip { display: none !important; }

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

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

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}
}

.home-link {
	text-align: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}

.home-link a {
	color: var(--wp--preset--color--primary);
}

/* 25. Footer legal links — WCAG 2.2 AA 2.5.8 44px touch target */

.footer-legal-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 0;
}