/* Reset ------------------------------------------------------------------ */

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

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

/* Safety net only, not the fix — any element that overflows the viewport
   should be caught and corrected at its own source (min-width: 0 on grid/
   flex items, max-width: 100% on media, a scrollable wrapper around wide
   tables, etc). This just guarantees a stray future overflow never
   produces a page-wide horizontal scrollbar. */
html, body {
    overflow-x: hidden;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

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

table, iframe {
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

/* Base type ---------------------------------------------------------------- */

body {
    background: var(--color-bg);
    color: var(--color-navy-700);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    /* Inherited by all text — a long unbroken word or URL wraps instead of
       forcing the page wider. */
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-navy-900);
    line-height: var(--leading-tight);
    font-weight: 700;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

/* Layout -------------------------------------------------------------------- */

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

@media (min-width: 600px) {
    .container { --container-pad: var(--space-5); }
}

@media (min-width: 900px) {
    .container { --container-pad: var(--space-6); }
}

/* Utilities ------------------------------------------------------------------ */

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

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 1000;
    background: var(--color-accent-500);
    color: var(--color-accent-contrast);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: top var(--dur-fast) var(--ease-out);
}

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

/* Body scroll lock while the mobile drawer is open — toggled by main.js,
   never via inline styles. */
body.drawer-open {
    overflow: hidden;
}

/* Focus ring ------------------------------------------------------------------ */

:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* Reveal-on-scroll base state — sections.css/components.css opt individual
   elements in via the .reveal class; JS adds .is-visible once observed.

   Progressive enhancement: .reveal only starts hidden once we know JS is
   actually running (html.js, set by the inline script in <head> — see
   includes/header.php). If JS is blocked, errors, or simply hasn't run
   yet, content stays visible by default instead of risking permanent
   invisibility. */

.reveal {
    opacity: 1;
    transform: none;
}

html.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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