/* ============================================================
   WordPress + theme additions
   Bits the design prototype didn't include but the live theme needs:
   mobile nav drawer, services tabs panel state, screen-reader utility,
   WP caption/alignment classes, comments. Kept separate so the handoff's
   theme.css stays the single source of truth for the design system.
   ============================================================ */

/* ---- Accessibility ---- */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed;
	top: 8px; left: 8px;
	z-index: 1000;
	width: auto; height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	color: var(--ink);
}

/* ---- Mobile nav toggle (hidden on desktop) ---- */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px; height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	width: 18px; height: 1.5px;
	margin: 0 auto;
	background: var(--ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 820px) {
	.nav-toggle { display: flex; }
	.site-header__inner { position: relative; }
	.nav {
		position: absolute;
		top: calc(100% + 1px);
		left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: color-mix(in oklab, var(--bg) 96%, transparent);
		backdrop-filter: saturate(160%) blur(10px);
		-webkit-backdrop-filter: saturate(160%) blur(10px);
		border-bottom: 1px solid var(--rule);
		padding: 8px var(--gutter) 16px;
		display: none;
	}
	body.nav-open .nav { display: flex; }
	.nav a { padding: 12px 8px; font-size: 16px; border-bottom: 1px solid var(--rule-2); }
	body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
	body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
	body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
	.header-cta { display: none; }
}

/* ---- Services outcome tabs ---- */
.outcome-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}
.outcome-tab {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	padding: 10px 18px;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-2);
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.outcome-tab:hover { background: var(--surface-warm); border-color: var(--accent); }
.outcome-tab.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
[data-panel][hidden] { display: none; }

/* ---- Service cards (2x2 grid) ---- */
.service-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 800px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 10px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.service-card .num {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--ink-3);
}
.service-card h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.012em; }
.service-card p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.service-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ---- Filter chips ---- */
.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.filter-chip {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	padding: 8px 14px;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-2);
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.filter-chip:hover { background: var(--surface-warm); border-color: var(--accent); }
.filter-chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* ---- Work archive rows ---- */
.work-row {
	display: grid;
	grid-template-columns: 56px 200px 1fr 180px;
	gap: 28px;
	align-items: start;
	padding: 32px 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: inherit;
}
.work-row:first-of-type { border-top: 1px solid var(--rule); }
.work-row__index {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--ink-3);
	padding-top: 6px;
}
.work-row__thumb {
	aspect-ratio: 16/10;
	background: var(--surface-warm);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
}
.work-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.work-row__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 8px;
}
.work-row h3 { font-size: 24px; letter-spacing: -0.015em; font-weight: 500; margin-bottom: 10px; }
.work-row:hover h3 { color: var(--accent); }
.work-row__excerpt { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; max-width: 56ch; margin-bottom: 12px; }
.work-row__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.work-row__meta { display: flex; flex-direction: column; gap: 14px; }
.work-row__meta .k {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.work-row__meta .v { font-size: 14.5px; color: var(--ink); margin-top: 2px; }
@media (max-width: 900px) {
	.work-row { grid-template-columns: 1fr; gap: 14px; }
	.work-row__meta { flex-direction: row; flex-wrap: wrap; gap: 24px; }
}

/* ---- WordPress media / alignment ---- */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
	font-size: 13px;
	color: var(--ink-3);
	margin-top: 8px;
}
.wp-block-image img { border-radius: 6px; }

/* ---- Posts pagination ---- */
.wpe-pagination {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 48px;
}
.wpe-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink-2);
	font-size: 14px;
}
.wpe-pagination .page-numbers.current { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.wpe-pagination .page-numbers:hover { background: var(--surface-warm); }

/* ---- Single post / generic content ---- */
.entry-content { max-width: 64ch; }
.entry-content p { color: var(--ink-2); margin-bottom: 18px; font-size: 16.5px; line-height: 1.65; }
.entry-content h2 { margin: 48px 0 16px; }
.entry-content h3 { margin: 40px 0 14px; }
.entry-content ul, .entry-content ol { color: var(--ink-2); padding-left: 18px; margin: 0 0 18px; }
.entry-content li { margin-bottom: 8px; }
.entry-content a { color: var(--accent); }
.entry-content img { border-radius: 6px; }
.entry-content blockquote {
	background: var(--surface-warm);
	border-left: 2px solid var(--accent);
	padding: 20px 28px;
	margin: 24px 0;
	font-size: 18px;
	color: var(--ink);
}

/* ============================================================
   Home page: full-width featured case study (e.g. NRA),
   with the remaining two cards sitting 50/50 beneath it.
   ============================================================ */
@media (min-width: 901px) {
	.work-grid .work-card--feature { grid-column: 1 / -1; }
	.work-card--feature .work-card__excerpt { max-width: 72ch; }
	.work-card--feature .work-card__outcomes { grid-template-columns: repeat(3, 1fr); gap: 14px 28px; }
}

/* ============================================================
   Single blog posts: full page-width content area (no narrow
   column / white side gutters). Scoped to body.single-post so
   case studies (single-case_study) and pages are untouched.
   ============================================================ */
body.single-post article .wrap { max-width: none; }
body.single-post .entry-content { max-width: none; }