/*
 * Warren — base stylesheet.
 *
 * HARD RULE: every colour, font, radius, shadow MUST consume a CSS custom
 * property (--pr-*) defined in Brand.php. No raw hex, no hardcoded fonts.
 * Layout-scale constants (spacing, breakpoints) live as literals here only
 * if they're not currently per-site. Promote to Brand if they ever need to be.
 *
 * Class naming: vanilla / WP-conventional throughout. No theme-specific
 * prefix on DOM classes. That keeps templates portable, greppable, and
 * familiar to anyone landing on the codebase from a stock WP theme.
 */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--pr-font-body);
	color: var(--pr-text);
	background: var(--pr-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--pr-font-display);
	color: var(--pr-text);
	line-height: 1.2;
	margin: 0 0 .6em;
}
p { margin: 0 0 1em; }
a {
	color: var(--pr-accent);
	text-decoration: none;
}
a:hover, a:focus-visible {
	color: var(--pr-accent-hover);
	text-decoration: underline;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: var(--pr-container-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
	padding-block: clamp(24px, 5vw, 56px);
}

/* ---------- Site chrome ---------- */
.site-header,
.site-footer {
	background: var(--pr-surface);
	border-bottom: 1px solid var(--pr-border);
}
.site-footer {
	border-bottom: none;
	border-top: 1px solid var(--pr-border);
	color: var(--pr-text-muted);
	font-size: .9rem;
	padding-block: 24px;
}
.site-header { padding-block: 16px; }
.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 0;
}
.site-branding a {
	color: var(--pr-text);
	font-family: var(--pr-font-display);
	font-weight: 700;
}

/* ---------- Surfaces ---------- */
.card {
	background: var(--pr-surface);
	border: 1px solid var(--pr-border);
	border-radius: var(--pr-radius);
	box-shadow: var(--pr-shadow-card);
	overflow: hidden;
}

/* ---------- Buttons / chips ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: var(--pr-radius);
	background: var(--pr-accent);
	color: #fff;
	font-weight: 600;
	border: 0;
	cursor: pointer;
	transition: background .15s ease;
}
.btn:hover,
.btn:focus-visible {
	background: var(--pr-accent-hover);
	color: #fff;
	text-decoration: none;
}
.chip {
	display: inline-block;
	padding: 4px 10px;
	margin: 0 4px 4px 0;
	border-radius: 999px;
	border: 1px solid var(--pr-border);
	font-size: .85rem;
	color: var(--pr-text-muted);
}
.chip:hover {
	color: var(--pr-text);
	border-color: var(--pr-border-strong);
	text-decoration: none;
}

/* ---------- Byline ---------- */
.byline {
	color: var(--pr-text-muted);
	font-size: .9rem;
	margin: 0 0 1em;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.byline__avatar img {
	width: 32px; height: 32px; border-radius: 50%;
	display: inline-block; vertical-align: middle;
}
.byline a { color: var(--pr-text); font-weight: 600; }
.byline__sep { opacity: .5; }

/* ---------- Card grid (archive, search, index) ---------- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: clamp(16px, 3vw, 28px);
	margin-block: 24px;
}

.post-card {
	background: var(--pr-surface);
	border: 1px solid var(--pr-border);
	border-radius: var(--pr-radius);
	box-shadow: var(--pr-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.post-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--pr-surface-alt);
}
.post-card__media img {
	width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
	transition: transform .3s ease;
}
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.post-card__title { font-size: 1.2rem; margin: 0; }
.post-card__title a { color: var(--pr-text); }
.post-card__title a:hover { color: var(--pr-accent); text-decoration: none; }
.post-card__excerpt { color: var(--pr-text-muted); font-size: .95rem; }
.post-card__more {
	margin-top: auto;
	color: var(--pr-accent);
	font-size: .9rem;
	font-weight: 600;
}

/* ---------- Archive header ---------- */
.archive-header { margin-bottom: 16px; }
.archive-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.archive-description { color: var(--pr-text-muted); max-width: 60ch; }

/* ---------- Single post ---------- */
.entry { max-width: 760px; margin-inline: auto; }
.entry-header { margin-bottom: 24px; }
.entry-kicker,
.kicker {
	display: inline-block;
	text-transform: uppercase;
	font-size: .75rem;
	letter-spacing: .08em;
	color: var(--pr-accent);
	font-weight: 700;
	margin-bottom: 8px;
}
.entry-title { font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin-bottom: .4em; }
.entry-hero,
.hero {
	margin: 0 0 28px;
	border-radius: var(--pr-radius-lg);
	overflow: hidden;
}
.entry-hero img,
.hero img { width: 100%; height: auto; display: block; }
.entry-content { font-size: 1.05rem; line-height: 1.75; }
.entry-content h2 { margin-top: 1.6em; font-size: 1.5rem; }
.entry-content h3 { margin-top: 1.4em; font-size: 1.25rem; }
.entry-content blockquote {
	margin: 1.4em 0;
	padding: 12px 20px;
	border-left: 3px solid var(--pr-accent);
	color: var(--pr-text-muted);
	font-style: italic;
}
.entry-tags { margin-top: 28px; }
.entry-comments { max-width: 760px; margin: 40px auto 0; }

/* ---------- Static page ---------- */
.page-article { max-width: 760px; margin-inline: auto; }
.page-title   { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin-bottom: .5em; }
.page-hero {
	margin: 0 0 24px;
	border-radius: var(--pr-radius-lg);
	overflow: hidden;
}
.page-content { font-size: 1.05rem; line-height: 1.75; }

/* ---------- Pagination ---------- */
.pagination { margin-block: 32px; }
.pagination ul {
	list-style: none;
	display: flex;
	gap: 6px;
	padding: 0;
	flex-wrap: wrap;
	justify-content: center;
}
.pagination a,
.pagination span {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--pr-radius);
	border: 1px solid var(--pr-border);
	font-size: .9rem;
	color: var(--pr-text);
	text-decoration: none;
}
.pagination a:hover { border-color: var(--pr-accent); color: var(--pr-accent); }
.pagination .current {
	background: var(--pr-accent);
	color: #fff;
	border-color: var(--pr-accent);
}

/* ---------- 404 ---------- */
.error-404 h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.error-404 p  { color: var(--pr-text-muted); }