/**
 * Base styles — Adapt Theme
 *
 * @font-face declarations, a minimal reset, and element-level typography.
 * No component styles here — those live in components.css (Section 8.6,
 * amended v1.3.1 / Appendix A4-O1: grouped components.css, no file per
 * component). No page-specific rules (Section 8.6).
 */

/* ---------------------------------------------------------------------
 * Self-hosted fonts (Section 4.4, Section 8.11)
 *
 * Unconditional self-hosting, woff2 only, font-display: swap. No Google
 * Fonts CDN request is made from any page. Only the weights actually used
 * are shipped: headings SemiBold/Bold, body Regular/Medium/Bold.
 *
 * Paths are relative to this file (assets/css/) up to assets/fonts/.
 * theme.json declares the same five faces under settings.typography.
 * fontFamilies[].fontFace so the block editor matches the frontend.
 * ------------------------------------------------------------------- */

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/PlusJakartaSans-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/PlusJakartaSans-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------
 * Minimal reset
 * ------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

/*
 * CLIP, NOT HIDDEN — and the distinction is the whole reason this rule
 * can exist at all.
 *
 * The homepage's full-bleed bands (components.css, "Full-bleed section
 * bands") are widened with `margin-inline: calc(50% - 50vw)`. 100vw
 * includes the classic scrollbar's width, so on any platform that
 * reserves gutter space the bands overhang the document by ~15px and
 * raise a horizontal scrollbar.
 *
 * `overflow-x: hidden` would suppress that scrollbar and simultaneously
 * break `.site-header`'s `position: sticky`, because `hidden` makes the
 * element a scroll container and a sticky child then sticks to a box
 * that never scrolls. `clip` suppresses the overflow WITHOUT creating a
 * scroll container, so the sticky header keeps the viewport as its
 * scrollport.
 *
 * `.primary-navigation` is `position: fixed` and a descendant of this
 * element. Overflow on an ancestor only clips a fixed descendant when
 * that ancestor also establishes its containing block (transform,
 * filter, contain). `position: sticky` on `.site-header` does not, so
 * the drawer is unaffected. Both behaviours were verified live at 375px
 * and 1280px, not assumed.
 *
 * Set on both elements deliberately: the root's overflow propagates to
 * the viewport, and declaring it on html alone leaves body's used value
 * ambiguous across engines.
 */

html,
body {
	overflow-x: clip;
}

body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: var(--font-weight-body-regular);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---------------------------------------------------------------------
 * Element-level typography (Section 4.4)
 *
 * Confident weights only for headings — SemiBold/Bold. No thin or light
 * weights are shipped, so none are available to apply here.
 * ------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-heading-semibold);
	line-height: var(--line-height-heading);
	color: var(--color-text);
	margin: 0 0 var(--space-sm);
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-heading-bold);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

p {
	margin: 0 0 var(--space-sm);
}

a {
	color: var(--color-link);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* ---------------------------------------------------------------------
 * Skip link (accessibility baseline, Section 1: WCAG 2.2 AA target)
 * ------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background-color: var(--color-white);
	color: var(--color-text);
	padding: var(--space-xs) var(--space-sm);
}

.skip-link:focus {
	left: var(--space-xs);
	top: var(--space-xs);
}

/* ---------------------------------------------------------------------
 * Reduced motion (Section 4.8, Section 1's WCAG 2.2 AA target)
 *
 * Added Wave 5, 2026-08-02. Section 4.8 has governed motion since v1.3
 * — "subtle hover states, small transitions, simple accordion
 * animation, minimal fade/slide," and performance over effect — but the
 * theme carried no reduced-motion handling at all until now. Every
 * transition shipped in Waves 0-4 played regardless of the user's OS
 * setting. WCAG 2.2 SC 2.3.3 (Animation from Interactions) is Level AAA
 * and therefore not the target, but honouring the preference is the
 * baseline expectation behind Section 4.8's own restraint, and it costs
 * nothing.
 *
 * Placed in base.css rather than components.css deliberately: this is a
 * global reset of behaviour, not a component's styling, and it must
 * apply to any component added later without that component having to
 * remember it. Wave 5's navigation is the first consumer.
 *
 * !important is required and is not a suppression of the project's
 * discipline about it. This block has to beat every component rule
 * regardless of specificity or source order, and it is the documented
 * idiom for exactly that. It is scoped to a media query that only
 * matches when the user has asked for reduced motion.
 *
 * Durations are 0.01ms rather than 0, so transitionend/animationend
 * listeners still fire and JavaScript that waits on them cannot hang.
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}