/*
 * Directory Theme — core stylesheet (P0 foundation).
 *
 * Token source of truth is theme.json (it emits --wp--preset--color--*,
 * --wp--preset--font-family--*, --wp--preset--font-size--*). Here we bridge
 * those presets to the legacy --pkm-* / --eh-* names so the ported V1 component
 * CSS (arriving in P3) works unchanged, and lay down the accessible base.
 *
 * No @import, no third-party font CDN (P0 ships system fallbacks; webfonts are
 * self-hosted in P3). One file, loaded site-wide.
 */

/* -------------------------------------------------------------------------
 * Token bridge: theme.json presets -> legacy --pkm-* names
 * ---------------------------------------------------------------------- */
:root {
	--pkm-cream: var(--wp--preset--color--cream, #f3efe5);
	--pkm-card: var(--wp--preset--color--card, #ffffff);
	--pkm-ink: var(--wp--preset--color--ink, #21303f);
	--pkm-ink-soft: var(--wp--preset--color--ink-soft, #3a4a59);
	--pkm-muted: var(--wp--preset--color--muted, #5b6976);
	--pkm-rust: var(--wp--preset--color--rust, #b5442b);
	--pkm-rust-dark: var(--wp--preset--color--rust-dark, #a63e26);
	--pkm-sage: var(--wp--preset--color--sage, #287059);
	--pkm-sage-bg: var(--wp--preset--color--sage-bg, #e6efe9);
	--pkm-blue: var(--wp--preset--color--blue, #2a63c2);
	--pkm-line: var(--wp--preset--color--line, #ece6da);
	--pkm-line-soft: var(--wp--preset--color--line-soft, #f0ebe1);
	--pkm-navy-1: var(--wp--preset--color--navy, #23436a);
	--pkm-navy-2: var(--wp--preset--color--navy-deep, #152a49);

	--pkm-shadow: var(--wp--custom--shadow, 0 1px 2px rgba(33, 48, 63, .04), 0 8px 24px rgba(33, 48, 63, .06));
	--pkm-shadow-lg: var(--wp--custom--shadow-lg, 0 4px 12px rgba(21, 42, 73, .10), 0 24px 48px rgba(21, 42, 73, .10));
	--pkm-radius: var(--wp--custom--radius, 14px);
	--pkm-radius-sm: var(--wp--custom--radius-sm, 10px);

	--pkm-font-display: var(--wp--preset--font-family--display, "Bitter", Georgia, "Times New Roman", serif);
	--pkm-font-body: var(--wp--preset--font-family--body, "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif);

	--pkm-wrap: 1180px;
}

/* -------------------------------------------------------------------------
 * Base reset + WCAG floors
 * ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	/* 16px minimum body text (WCAG 2.2 readability floor). */
	font-size: 1rem;
	line-height: 1.6;
	font-family: var(--pkm-font-body);
	color: var(--pkm-ink);
	background: var(--pkm-cream);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--pkm-font-display);
	font-weight: 600;
	line-height: 1.2;
	color: var(--pkm-ink);
	margin: 0 0 .5em;
}

a { color: var(--pkm-rust); }
a:hover { color: var(--pkm-rust-dark); }

img { max-width: 100%; height: auto; }

/* -------------------------------------------------------------------------
 * Accessibility: focus, skip link, screen-reader text, reduced motion
 * ---------------------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--pkm-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: .75rem 1.25rem;
	background: var(--pkm-card);
	color: var(--pkm-ink);
	box-shadow: var(--pkm-shadow-lg);
	border-radius: 0 0 var(--pkm-radius-sm) 0;
}
.skip-link:focus {
	left: 0;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

/* Interactive targets meet the 24x24 minimum (WCAG 2.2 — Target Size). */
button, .button, input[type="submit"] { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * Layout primitives
 * ---------------------------------------------------------------------- */
.site-main { display: block; }

.wrap, .section__inner, .site-header__inner, .site-footer__inner, .hero__inner {
	max-width: var(--pkm-wrap);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section__title { font-size: var(--wp--preset--font-size--x-large, 1.75rem); margin-bottom: 1.25rem; }

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */
.site-header {
	background: var(--pkm-card);
	border-bottom: 1px solid var(--pkm-line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1rem;
}
.site-brand { display: flex; align-items: center; gap: .75rem; }
.site-brand__name {
	font-family: var(--pkm-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--pkm-ink);
	text-decoration: none;
}
.site-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}
.site-nav__list a { color: var(--pkm-ink-soft); text-decoration: none; }
.site-nav__list a:hover { color: var(--pkm-rust); }

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */
.hero {
	background: linear-gradient(160deg, var(--pkm-navy-1), var(--pkm-navy-2));
	color: #fff;
	padding-block: clamp(2.5rem, 7vw, 5rem);
}
.hero__inner { text-align: center; }
.hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 .5rem;
}
.hero__title { color: #fff; font-size: var(--wp--preset--font-size--xx-large, 2.75rem); margin: 0 0 .5rem; }
.hero__lede { color: rgba(255, 255, 255, .85); max-width: 42rem; margin: 0 auto 1.75rem; }

.hero__search {
	display: flex;
	gap: .5rem;
	max-width: 32rem;
	margin: 0 auto;
}
.hero__search input[type="search"] {
	flex: 1;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid transparent;
	border-radius: var(--pkm-radius-sm);
	font-size: 1rem;
}
.hero__search button {
	min-height: 44px;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: var(--pkm-radius-sm);
	background: var(--pkm-rust);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.hero__search button:hover { background: var(--pkm-rust-dark); }

.hero__stats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	margin: 1.75rem 0 0;
	padding: 0;
	color: rgba(255, 255, 255, .85);
}
.hero__stats strong { display: block; font-size: 1.5rem; color: #fff; font-family: var(--pkm-font-display); }

/* -------------------------------------------------------------------------
 * Cards / grid
 * ---------------------------------------------------------------------- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
}
.listing-card, .post-card {
	background: var(--pkm-card);
	border: 1px solid var(--pkm-line);
	border-radius: var(--pkm-radius);
	box-shadow: var(--pkm-shadow);
	overflow: hidden;
}
.listing-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.listing-card__media img { width: 100%; height: 100%; object-fit: cover; }
.listing-card__body, .post-card { padding: 1rem 1.125rem; }
.listing-card__title { font-size: 1.125rem; margin: 0 0 .25rem; }
.listing-card__title a, .post-card__title a { color: var(--pkm-ink); text-decoration: none; }
.listing-card__title a:hover, .post-card__title a:hover { color: var(--pkm-rust); }
.listing-card__meta { color: var(--pkm-muted); font-size: .875rem; margin: 0; }
.listing-card__meta a { color: var(--pkm-sage); }

.post-list { display: grid; gap: 1.25rem; padding-block: 2rem; }

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.site-footer {
	background: var(--pkm-card);
	border-top: 1px solid var(--pkm-line);
	margin-top: 3rem;
}
.site-footer__inner { padding-block: 2rem; }
.site-footer__brand { font-family: var(--pkm-font-display); font-weight: 600; margin: 0 0 .5rem; }
.site-footer__nav { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 .75rem; padding: 0; }
.site-footer__nav a { color: var(--pkm-ink-soft); text-decoration: none; }
.site-footer__legal { color: var(--pkm-muted); font-size: .875rem; margin: 0; }

.notice {
	background: var(--pkm-sage-bg);
	border: 1px solid var(--pkm-line);
	border-radius: var(--pkm-radius);
	padding: 1rem 1.25rem;
}

@media (max-width: 640px) {
	.site-header__inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* Social chips on the single listing — size + whiten the inline brand SVGs
 * (replaces the dropped Font Awesome glyphs). */
.pkm-si { color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pkm-si svg { width: 18px; height: 18px; display: block; }

/* Sponsor / promo slot in the listing sidebar. */
.pkm-promo { margin: 0 0 18px; }
.pkm-promo-link { display: block; }
.pkm-promo-link img { display: block; width: 100%; height: auto; border-radius: var(--pkm-radius, 14px); box-shadow: var(--pkm-shadow, 0 1px 2px rgba(33,48,63,.05), 0 8px 22px rgba(33,48,63,.07)); }

/* -------------------------------------------------------------------------
 * Plain page (page.php) — hero + readable prose column (legal pages etc.)
 * ---------------------------------------------------------------------- */
.page-head {
	background: linear-gradient(160deg, var(--pkm-navy-1), var(--pkm-navy-2));
	color: #fff;
	padding-block: clamp(2rem, 5vw, 3.25rem);
}
.page-head h1 { color: #fff; margin: 0; font-size: var(--wp--preset--font-size--x-large, 1.75rem); }
.page-head__crumbs { color: rgba(255, 255, 255, .85); font-size: .875rem; margin-bottom: .5rem; }
.page-head__crumbs a { color: #fff; }
.page-prose {
	max-width: 760px;
	margin-inline: auto;
	padding-block: clamp(2rem, 4vw, 3rem);
}
.page-prose > :first-child { margin-top: 0; }
.page-prose h2 { font-size: 1.35rem; margin: 1.7em 0 .5em; }
.page-prose h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.page-prose p, .page-prose li { font-size: 1rem; line-height: 1.7; color: var(--pkm-ink-soft); }
.page-prose ul, .page-prose ol { padding-left: 1.25em; margin: 0 0 1em; }
.page-prose li { margin: .35em 0; }
.page-prose a { color: var(--pkm-rust); }
.page-prose a:hover { color: var(--pkm-rust-dark); }