/* Responsive breakpoints: 72rem (nav dropdown), 48rem (mobile),
   60rem (tablet middle ground). Component-specific mobile rules live in
   each component's file; these are cross-cutting layout shifts. */

@media (max-width: 72rem) {
	.site-nav { display: flex; flex-wrap: wrap; align-items: center; padding-top: 1.25rem; }
	/* Brand and the two buttons share ONE row: the brand keeps its natural
	   width (flex-grow: 0 — growing it to fill leaves zero slack, and any
	   font metric difference on Safari overflows the line and wraps the
	   hamburger) and drops its subtitle on narrow screens. The pinned-right
	   position comes from the toggle's margin-left: auto. */
	.brand { flex: 0 0 auto; min-width: 0; white-space: nowrap; padding-bottom: 1.25rem; }
	.brand small { display: none; }
	/* Safari iOS measures the mono brand text wider than Blink; on a 393px
	   viewport the fixed-size row (icon + text + two 3rem buttons + gaps)
	   can exceed the line by a pixel or two and the last button wraps.
	   Tighten the fixed costs so the row fits with slack to spare. */
	.brand::before { width: .85rem; height: .85rem; }
	.brand { gap: .6rem; font-size: .8rem; letter-spacing: .06em; }
	.theme-toggle { margin-left: .5rem; }
	.nav-toggle { margin-left: .375rem; }
	/* Theme toggle and hamburger stay pinned at the top-right, outside the
	   dropdown, so both are always reachable without scrolling the nav. The
	   language picker lives inside the dropdown with the navigation links. */
	.theme-toggle {
		order: 1;
		margin-left: auto;
		margin-bottom: 1.25rem;
		/* Same footprint as the hamburger beside it: a 3rem square with the
		   glyph only — the label stays on desktop where there is room. */
		width: 3rem;
		min-height: 3rem;
		padding: 0;
	}
	.theme-toggle-label { display: none; }
	.theme-toggle-icon { font-size: 1.15rem; }
	.nav-toggle { order: 2; display: flex; margin-left: .5rem; margin-bottom: 1.25rem; }
	/* The menu is a dropdown: hidden until the hamburger opens it. */
	.nav-links {
		order: 3;
		display: none;
		width: 100%;
		flex-direction: column;
		border-top: 1px solid var(--border-soft);
		border-left: 0;
	}
	.nav-open .nav-links { display: flex; }
	.nav-links a {
		min-height: 3rem; /* HIG touch target: >= 44pt */
		border-right: 0;
		border-bottom: 1px solid var(--border-soft);
	}
	.nav-links a:last-child { border-bottom: 0; }
	.nav-links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
	.nav-links .language-picker {
		align-self: flex-start;
		margin: .75rem .9rem 1rem;
	}
}

@media (max-width: 48rem) {
	body { background-size: 2rem 2rem; }
	.site-nav, .site-main, .site-footer-inner, #footer-metrics, .footer-legal { width: min(calc(100% - 1.5rem), var(--page-width)); }
	#fgoths-content { padding-block: 3rem; }
	.hero h1 { font-size: clamp(2.25rem, 9vw, 4.25rem); }
	.page-title h1 { font-size: clamp(2.6rem, 14vw, 4.6rem); }
	.cta-group { width: min(100%, 24rem); flex-direction: column; align-items: stretch; }
	.cta-group .button { width: 100%; }
	.card-grid { grid-template-columns: 1fr; }
	.card { min-height: 0; padding: 1.75rem 1.25rem; }
	.card-icon { margin-bottom: 2rem; }
	.panel { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem 1.25rem; }
	.prose { padding: 1.5rem 1.25rem; }
	.prose-section { margin-top: 4rem; }
	/* Metrics strip: layout lives entirely in metric.css (grid +
	   progressive disclosure per tile priority); nothing to override here. */
	/* Forms: full-width controls with comfortable touch targets. */
	.field input, .field textarea { min-height: 3rem; font-size: 1rem; }
	.button { min-height: 3rem; }
	/* Footer identity: tighter stack. */
	.footer-id p { font-size: .62rem; }
	.footer-legal p { font-size: .6rem; }
}

/* Tablet middle ground: the hero headline scales down a step. (The card
   grid is two-up at every width ≥ the mobile breakpoint — see card.css.) */
@media (max-width: 60rem) and (min-width: 48rem) {
	.page-title h1 { font-size: clamp(3rem, 9vw, 6rem); }
}