/**
 * Responsive breakpoints.
 *
 * Mobile-first: the base styles in every other file are the mobile styles, and
 * these queries only add complexity upward.
 *
 * Most of this file redefines custom properties rather than restating rules.
 * Changing --section-spacing once re-scales every .section on the site, so
 * nothing is duplicated between here and layout.css.
 *
 * APPROVED BREAKPOINTS
 *   Mobile           0 – 767px    base styles, no query
 *   Tablet         768 – 1023px   min-width: 48em
 *   Desktop       1024 – 1279px   min-width: 64em
 *   Large desktop   1280px +      min-width: 80em
 *
 * Queries are written in em so they scale with the user's browser font size —
 * a visitor who sets a larger default still gets the layout intended for their
 * effective viewport. At the default 16px root size these are exactly the
 * approved pixel values: 48em = 768px, 64em = 1024px, 80em = 1280px.
 */

/* ===============================================================
 * Tablet — 768px and up
 * Section spacing steps to the locked 72px.
 * =============================================================== */
@media (min-width: 48em) {
	:root {
		--section-spacing: 72px;
		--container-padding: 32px;

		--text-3xl: 1.875rem;
		--text-4xl: 2.25rem;
		--text-5xl: 2.75rem;
	}

	/* Multi-column grids open up at tablet, two columns at a time. */
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Lets a mobile full-width button return to its natural width. */
	.btn--auto {
		inline-size: auto;
	}

	.md\:text-start {
		text-align: start;
	}

	.md\:text-center {
		text-align: center;
	}

	/*
	 * Header: from tablet up the logo can breathe. The CTA needs no rule here
	 * — the compact metrics let it stay visible right down to 320px.
	 */
	:root {
		--logo-max-height: 38px;
		--logo-max-width: 168px;
	}
}

/* ===============================================================
 * Desktop — 1024px and up
 * Section spacing steps to the locked 96px.
 * =============================================================== */
@media (min-width: 64em) {
	:root {
		--section-spacing: 96px;

		--text-4xl: 2.5rem;
		--text-5xl: 3rem;
	}

	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Asymmetric splits for content/sidebar style sections. */
	.grid--sidebar {
		grid-template-columns: 2fr 1fr;
	}

	.grid--sidebar-start {
		grid-template-columns: 1fr 2fr;
	}

	/* ---------------------------------------------------------------
	 * Header switches to the inline navigation and retires the toggle.
	 *
	 * SPACE BUDGET, MEASURED AT 1024px
	 *   total width                                    1024
	 *   less container gutters (32 each side)          -64
	 *   less two grid gaps                             -32
	 *   less logo (capped at 96)                       -96
	 *   less CTA                                      -138
	 *   = available for navigation                     694
	 *
	 * The eight locked top-level items, four of them chevroned, need roughly
	 * 650px at 14px type once padding is squeezed to 6px and the gap to zero.
	 * The remaining space accommodates the compact language switcher. Adding a ninth menu item or
	 * lengthening a label will overflow this track — re-measure first.
	 * --------------------------------------------------------------- */
	:root {
		--logo-max-height: 30px;
		--logo-max-width: 96px;
		--nav-font-size: var(--text-sm);
		--nav-gap: 0;
		--nav-link-padding-inline: 0.375rem;
		--nav-chevron-size: 12px;
	}

	.site-nav {
		display: block;
	}

	.lang-switcher {
		display: block;
	}

	.menu-toggle {
		display: none;
	}

	/*
	 * Mega panels exist only from the desktop breakpoint up. Below it the drawer
	 * accordion is the navigation, and the panels are never rendered as panels —
	 * the brief's "no mega menus on mobile" is enforced here rather than by hiding
	 * markup after the fact.
	 *
	 * Three columns: two groups of links and the promotional panel.
	 */
	.mega-panel__inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

/* ===============================================================
 * Large desktop — 1280px and up
 *
 * The container has reached its locked 1280px maximum, so only the display
 * type scale continues to grow.
 * =============================================================== */
@media (min-width: 80em) {
	:root {
		--text-5xl: 3.25rem;
	}

	/*
	 * Large desktop has spare room, so the header relaxes: a larger logo,
	 * roomier navigation pills and a taller bar.
	 */
	:root {
		--header-height: 72px;
		--logo-max-height: 38px;
		--logo-max-width: 160px;
		--nav-gap: var(--space-1);
		--nav-link-padding-inline: var(--space-3);
		--nav-chevron-size: 14px;
	}

	.site-footer__main {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
		gap: var(--space-12);
	}

	/*
	 * Hero opens into two columns. The copy column takes the larger share so
	 * the headline keeps a comfortable measure instead of stretching across
	 * half the container.
	 */
	.hero__inner {
		grid-template-columns: 1.15fr 1fr;
	}
}

/* ===============================================================
 * Forced colours (Windows High Contrast)
 *
 * Ensures focus and button boundaries survive when the OS replaces the
 * palette — WCAG 2.2 §1.4.11.
 * =============================================================== */
@media (forced-colors: active) {
	.btn,
	.card,
	.form-input,
	.form-textarea,
	.form-select {
		border: 1px solid currentColor;
	}

	:focus-visible {
		outline: 2px solid currentColor;
	}
}

/*
 * Logo sizing is not repeated here. Both logo tiers read the --logo-max-*
 * tokens set by the breakpoints above, so components.css is the only place that
 * needs to size them.
 */