/* =============================================================================
   main.css - Reset, base layout, typography, utilities
   ============================================================================= */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
	font-family: var(--font-primary);
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	/* Prevent stray horizontal scrolling without breaking position:sticky
	   (overflow:clip does not create a scroll container, unlike overflow:hidden). */
	overflow-x: clip;
}

/* Belt-and-braces: nothing should be able to push the page wider than the viewport. */
html, body { max-width: 100%; }

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--tr-fast); }
a:hover { color: var(--color-primary-mid); }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--r-sm); }

ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ── Container ──────────────────────────────────────────────────────────── */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* ── Section padding ────────────────────────────────────────────────────── */
.section-pad      { padding-block: clamp(2.5rem, 5vw, 4.25rem); }
.section-pad-sm   { padding-block: clamp(1.75rem, 4vw, 2.5rem); }
.section-pad-lg   { padding-block: clamp(3rem, 6vw, 5rem); }

/* ── Headings ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-heading, var(--color-text));
}
h1 { font-size: clamp(var(--fs-4xl), 5vw, var(--fs-6xl)); }
h2 { font-size: clamp(var(--fs-3xl), 3.5vw, var(--fs-5xl)); }
h3 { font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-3xl)); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

p { margin-bottom: var(--sp-md); }
p:last-child { margin-bottom: 0; }

/* ── Section header ─────────────────────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: var(--sp-3xl); }

.section-header .badge {
	display: inline-block;
	padding: 0.375rem 1rem;
	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
	color: var(--color-primary);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--r-full);
	margin-bottom: var(--sp-md);
}

.section-header h2 { margin-bottom: var(--sp-md); }

.section-header p {
	font-size: var(--fs-lg);
	color: var(--color-text-muted);
	max-width: 640px;
	margin-inline: auto;
}

/* Dark variant */
.section-header.is-dark .badge {
	background: rgba(255,255,255,.12);
	color: var(--color-white);
}
.section-header.is-dark h2,
.section-header.is-dark p { color: var(--color-white); }
.section-header.is-dark p  { opacity: .75; }

/* ── Grid helpers ───────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-xl); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }

/* ── Flex helpers ───────────────────────────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.gap-md       { gap: var(--sp-md); }
.gap-lg       { gap: var(--sp-lg); }

/* ── Prose (WP editor content) ──────────────────────────────────────────── */
.entry-content h2,
.entry-content h3,
.entry-content h4 { margin-top: var(--sp-2xl); margin-bottom: var(--sp-md); }

.entry-content p,
.entry-content ul,
.entry-content ol { margin-bottom: var(--sp-md); }

.entry-content ul { list-style: disc; padding-left: var(--sp-xl); }
.entry-content ol { list-style: decimal; padding-left: var(--sp-xl); }

.entry-content a { text-decoration: underline; }
.entry-content a:hover { color: var(--color-primary-mid); }

.entry-content img { border-radius: var(--r-md); margin-block: var(--sp-xl); }

.entry-content blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--sp-lg);
	color: var(--color-text-muted);
	font-style: italic;
	margin-block: var(--sp-xl);
}

/* ── Utility: visually hidden ────────────────────────────────────────────── */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ── Utility: text colors ────────────────────────────────────────────────── */
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-muted   { color: var(--color-text-muted); }
.text-white   { color: var(--color-white); }
.text-center  { text-align: center; }

/* ── Utility: backgrounds ────────────────────────────────────────────────── */
.bg-light   { background: var(--color-bg-light); }
.bg-section { background: var(--color-bg-section); }
.bg-dark    { background: var(--color-dark); }
.bg-primary { background: var(--color-primary); }

/* ── Gradient text ───────────────────────────────────────────────────────── */
.gradient-text {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ── Site wrapper ────────────────────────────────────────────────────────── */
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; }

/* ── Skip link (accessibility) ──────────────────────────────────────────── */
.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	padding: 0.5rem 1rem;
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: 600;
	border-radius: var(--r-sm);
	z-index: 9999;
	transition: top var(--tr-fast);
}
.skip-link:focus { top: 1rem; }

/* ── Page hero (inner pages) ─────────────────────────────────────────────── */
.page-hero {
	background: linear-gradient(135deg, var(--color-dark) 0%, #1a2f4e 100%);
	padding-block: var(--sp-4xl) var(--sp-3xl);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(40rem 22rem at 12% 0%, rgba(59,130,246,.22) 0%, transparent 70%),
		radial-gradient(34rem 20rem at 90% 100%, rgba(245,158,11,.12) 0%, transparent 70%);
	pointer-events: none;
}

.page-hero__content { position: relative; z-index: 1; }

.page-hero__badge {
	display: inline-block;
	padding: 0.375rem 1rem;
	background: rgba(16,185,129,.15);
	color: var(--color-primary-mid);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--r-full);
	margin-bottom: var(--sp-md);
}

.page-hero h1 {
	color: var(--color-white);
	margin-bottom: var(--sp-md);
}

.page-hero p {
	font-size: var(--fs-lg);
	color: rgba(255,255,255,.7);
	max-width: 600px;
	margin-inline: auto;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; margin-top: var(--sp-3xl); }
.pagination .page-numbers {
	display: flex;
	gap: var(--sp-sm);
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0;
}
.pagination .page-numbers li a,
.pagination .page-numbers li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: var(--r-md);
	font-weight: 600;
	font-size: var(--fs-sm);
	transition: all var(--tr-fast);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
}
.pagination .page-numbers li a:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.pagination .page-numbers li .current { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.pagination .page-numbers li .prev,
.pagination .page-numbers li .next  { width: auto; padding-inline: var(--sp-md); }

/* ── Widget styles ───────────────────────────────────────────────────────── */
.widget { margin-bottom: var(--sp-2xl); }
.widget__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-white);
	margin-bottom: var(--sp-lg);
	padding-bottom: var(--sp-sm);
	border-bottom: 2px solid rgba(255,255,255,.1);
}

/* ── Scroll-to-top ───────────────────────────────────────────────────────── */
.scroll-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 44px; height: 44px;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--r-full);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: all var(--tr-base);
	z-index: 500;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; }
.scroll-top:hover { background: var(--color-primary-mid); transform: translateY(-2px); color: var(--color-white); }

/* ── Not found / 404 ─────────────────────────────────────────────────────── */
.not-found-inner {
	text-align: center;
	padding-block: var(--sp-4xl);
}
.not-found-inner .error-code {
	font-size: 8rem;
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1;
	opacity: .15;
}

/* ── Search form ─────────────────────────────────────────────────────────── */
.search-form { display: flex; gap: var(--sp-sm); max-width: 480px; margin-inline: auto; }
.search-form .search-field {
	flex: 1;
	padding: var(--sp-sm) var(--sp-md);
	border: 1px solid var(--color-border);
	border-radius: var(--r-md);
	font-size: var(--fs-base);
}
.search-form .search-field:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); }
.search-form .search-submit {
	padding: var(--sp-sm) var(--sp-lg);
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--r-md);
	font-weight: 600;
	transition: background var(--tr-fast);
}
.search-form .search-submit:hover { background: var(--color-primary-mid); }

/* ── Admin bar offset ────────────────────────────────────────────────────── */
/* The sticky element is .site-header, so the admin-bar offset must apply to it. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }