/* =====================================================================
   layout.css
   Structural rules only: how the header/footer/sections are arranged
   on the page. Visual details of individual pieces (button colours,
   chip shapes) live in components.css, loaded right after this file.
   ===================================================================== */

.pfs-wrap {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: max(var(--space-5), env(safe-area-inset-left, 0px));
	box-sizing: border-box;
}

.pfs-section {
	padding-block: clamp(var(--space-7), 9vw, var(--space-9));
}

.pfs-alt {
	background: var(--surface);
	border-block: 1px solid var(--line);
}

.pfs-section-head {
	max-width: 640px;
	margin-bottom: var(--space-6);
}

/* ---- Site header ------------------------------------------------- */

.site-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 20;
	background: color-mix(in srgb, var(--paper) 90%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.site-header-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-5);
	min-height: var(--header-height);
}

.site-brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	font-family: var(--font-ui);
	font-weight: 800;
	font-size: var(--text-lg);
	letter-spacing: -0.01em;
}

.site-nav {
	margin-left: var(--space-5);
	flex: 1 1 auto;
}
.site-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
}
.site-nav a {
	text-decoration: none;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--text-sm);
}
.site-nav a:hover {
	color: var(--brand-text);
}

/* Below 860px, the nav collapses behind the "Menu" button — but only
   once .has-js confirms JavaScript is actually running (see the
   script at the top of header.php). Without JavaScript, none of the
   rules in this block apply at any width, so the nav stays fully
   visible and reachable; nav.js has nothing to open otherwise. */
@media (max-width: 859px) {
	html.has-js .site-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		margin-left: 0;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		padding: var(--space-4) var(--space-5) var(--space-5);
	}
	html.has-js .site-nav.is-open {
		display: block;
	}
	html.has-js .site-nav ul {
		flex-direction: column;
		gap: var(--space-3);
	}
}

.site-header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: auto;
}

/* Same rule: the nav-toggle button itself only ever appears once
   .has-js is present. A no-JS visitor never sees a button that
   wouldn't do anything if pressed. */
.nav-toggle {
	display: none;
}
@media (max-width: 859px) {
	html.has-js .nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-ui);
		font-weight: 600;
		font-size: var(--text-xs);
		background: none;
		border: 1.5px solid var(--line);
		border-radius: var(--radius-pill);
		padding: 0 1rem;
		min-height: 40px;
		cursor: pointer;
		color: var(--ink);
	}
}

/* ---- Site footer ---------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--line);
}

.site-footer-bar {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-6);
	text-align: center;
}
@media (min-width: 760px) {
	.site-footer-bar {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

.site-footer-copy {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--muted);
}

.site-footer-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	list-style: none;
}

/* ---- Main content ----------------------------------------------------- */

.site-main {
	overflow-x: hidden; /* a single oversized child should never cause
	                       the whole page to scroll sideways */
}