/* ==========================================================================
   MAILOZA — BASE STYLESHEET (layout shell + design tokens)
   Phase: W1.3 — Header, Navigation, Footer & Layout Framework

   This file is the SINGLE SOURCE OF TRUTH for the design system. Every later
   phase references these CSS custom properties (vars) only — never raw hex,
   px, or magic numbers. Values implement docs/06-design-system-specification.md.

   Light mode at launch. Dark-mode tokens are designed (see :root[data-theme])
   but NOT enabled.

   Table of contents
     1.  Design tokens (:root)
     2.  Reset / normalize basics
     3.  Base element styles
     4.  Layout primitives (.container, sections)
     5.  Header
     6.  Navigation + dropdowns (desktop)
     7.  Buttons
     8.  Emergency element
     9.  Mobile menu (hamburger, off-canvas, accordions)
     10. Footer
     11. Accessibility (skip link, focus, visually-hidden)
     12. Responsive breakpoints
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS  (docs/06 §5 colour, §6 type, §7 spacing/radii/elevation)
   ========================================================================== */
:root {
    /* --- Colour: Primary — Deep Trust Blue (§5.1) ----------------------- */
    --blue-900: #0A1A33;
    --blue-800: #0F2A52;   /* canonical Mailoza blue */
    --blue-700: #16386B;
    --blue-600: #1E4D8C;
    --blue-500: #2B6CB0;
    --blue-100: #DCE7F5;
    --blue-50:  #F2F6FC;

    /* --- Colour: Accent — Signal Teal (§5.2) --------------------------- */
    --teal-700: #0E6E66;
    --teal-600: #0F857A;   /* primary CTA fill */
    --teal-500: #13A89A;
    --teal-400: #2BC4B4;
    --teal-100: #D6F2EE;
    --teal-50:  #EEFAF8;

    /* --- Colour: Neutrals — the workhorse scale (§5.3) ----------------- */
    --neutral-900: #0D1420;   /* primary text (near-black, blue-tinted) */
    --neutral-800: #1C2738;
    --neutral-700: #39445A;   /* body text */
    --neutral-600: #5A6478;   /* secondary text */
    --neutral-500: #7B8497;   /* muted / placeholder (large/UI only) */
    --neutral-400: #A2AAB9;
    --neutral-300: #C9CFD9;   /* borders, dividers */
    --neutral-200: #E2E6EC;
    --neutral-100: #F0F2F5;   /* raised surface on wash */
    --neutral-50:  #F7F8FA;   /* page background wash */
    --white:       #FFFFFF;

    /* --- Colour: Status semantics (§5.4) — never decorative ------------ */
    --success-700: #1E7A3D;
    --success-600: #23903F;
    --success-100: #DCF3E3;
    --success-50:  #EFF8F2;

    --warning-700: #A65A00;
    --warning-600: #C26A00;
    --warning-100: #FBEAD2;
    --warning-50:  #FDF5E9;

    --critical-700: #B42318;
    --critical-600: #D0342A;
    --critical-100: #FBE3E0;
    --critical-50:  #FDF0EF;

    --info-700: #1E4D8C;
    --info-600: #2B6CB0;
    --info-100: #DCE7F5;
    --info-50:  #F2F6FC;

    /* --- Semantic surface / text / border / action tokens (§5.5) ------- */
    /* Pages and components reference THESE, so a future theme swaps underneath. */
    --bg-page:            var(--neutral-50);
    --bg-surface:         var(--white);
    --bg-surface-subtle:  var(--neutral-100);
    --bg-inverse:         var(--blue-900);

    --text-primary:    var(--neutral-900);
    --text-body:       var(--neutral-700);
    --text-secondary:  var(--neutral-600);
    --text-on-inverse: var(--white);
    --text-link:       var(--blue-600);
    --text-link-hover: var(--teal-700);

    --border-default: var(--neutral-300);
    --border-strong:  var(--neutral-400);

    --action-primary:        var(--teal-600);
    --action-primary-hover:  var(--teal-500);
    --action-primary-active: var(--teal-700);
    --action-secondary:      var(--blue-600);

    --emergency-text:   var(--critical-700);
    --emergency-border: var(--critical-600);
    --emergency-wash:   var(--critical-50);

    --focus-ring:       var(--teal-400);
    --state-disabled-bg:   var(--neutral-200);
    --state-disabled-text: var(--neutral-400);

    /* --- Typography: families (§6.1) ----------------------------------- */
    /* Self-host Inter (woff2, subset) later — NO font CDN. Until the woff2
       files land in assets/fonts/, the system stack below renders cleanly.
       @font-face placeholder (uncomment + add files in assets/fonts/):

       @font-face {
         font-family: "Inter";
         src: url("../fonts/Inter-Variable.woff2") format("woff2");
         font-weight: 100 900;
         font-display: swap;
         font-style: normal;
       }
    */
    --font-sans: "Inter", "Inter var", system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font-sans); /* swap only if design proves it elevates authority */
    --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace,
                 "SF Mono", Menlo, Consolas, monospace;

    /* --- Typography: scale (§6.2) — rem (px at 16px root) --------------- */
    --text-display:  3.75rem;  /* 60 */
    --text-h1:       3rem;     /* 48 */
    --text-h2:       2.25rem;  /* 36 */
    --text-h3:       1.75rem;  /* 28 */
    --text-h4:       1.375rem; /* 22 */
    --text-lg:       1.25rem;  /* 20 */
    --text-base:     1rem;     /* 16 — body default */
    --text-sm:       0.875rem; /* 14 */
    --text-xs:       0.75rem;  /* 12 */
    --text-overline: 0.75rem;  /* 12 */

    /* Fluid headline pairs (§6.8) */
    --fluid-display: clamp(2rem, 6vw, 3.75rem);
    --fluid-h1:      clamp(1.875rem, 4vw, 3rem);
    --fluid-h2:      clamp(1.5rem, 3vw, 2.25rem);
    --fluid-h3:      clamp(1.25rem, 2vw, 1.75rem);
    --fluid-lead:    clamp(1.125rem, 1.5vw, 1.25rem);

    /* --- Typography: weights (§6.3) ------------------------------------ */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* --- Typography: line-height (§6.4) -------------------------------- */
    --leading-tight:   1.1;
    --leading-snug:    1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;  /* body / long-form */
    --leading-loose:   1.75;

    /* --- Typography: tracking (§6.5) ----------------------------------- */
    --tracking-tighter: -0.02em;
    --tracking-tight:   -0.01em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-overline:0.08em;

    /* Reading measure (§6.8) */
    --measure: 68ch;

    /* --- Spacing scale (§7.1) — 4px base ------------------------------- */
    --space-0:  0;
    --space-1:  0.25rem;  /* 4 */
    --space-2:  0.5rem;   /* 8 */
    --space-3:  0.75rem;  /* 12 */
    --space-4:  1rem;     /* 16 — base */
    --space-5:  1.5rem;   /* 24 */
    --space-6:  2rem;     /* 32 — card padding default */
    --space-7:  2.5rem;   /* 40 */
    --space-8:  3rem;     /* 48 */
    --space-9:  4rem;     /* 64 */
    --space-10: 5rem;     /* 80 — section rhythm */
    --space-11: 7.5rem;   /* 120 */
    --space-12: 10rem;    /* 160 */

    /* --- Containers & gutters (§7.2) ----------------------------------- */
    --container-max:    1280px;
    --container-wide:   1440px;
    --container-narrow: 768px;
    --container-form:   560px;
    --gutter:           var(--space-4);  /* mobile; grows at breakpoints (§12) */

    /* --- Grid gaps (§7.5) ---------------------------------------------- */
    --gap-grid:       var(--space-6);
    --gap-grid-tight: var(--space-4);
    --gap-grid-loose: var(--space-8);
    --gap-stack:      var(--space-5);
    --gap-inline:     var(--space-2);

    /* --- Radii (§7.7) -------------------------------------------------- */
    --radius-sm:   4px;
    --radius-md:   8px;   /* buttons, cards */
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    /* --- Elevation (§7.7) — borders preferred over heavy shadows ------- */
    --elevation-1: 0 1px 2px rgba(13, 20, 32, 0.06);
    --elevation-2: 0 4px 12px rgba(13, 20, 32, 0.08);
    --elevation-3: 0 12px 32px rgba(13, 20, 32, 0.12);

    /* --- Motion (§12) — calm, purposeful ------------------------------- */
    --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;

    /* --- Z-index scale ------------------------------------------------- */
    --z-header:    100;
    --z-dropdown:  200;
    --z-backdrop:  900;
    --z-mobilenav: 1000;
    --z-skiplink:  1100;

    /* --- Component metrics --------------------------------------------- */
    --header-height: 72px;
    --tap-min: 44px;  /* minimum accessible touch target (§14) */

    /* --- Icon sizes (docs/06 §10.2) — used by W1.4 components ----------- */
    --icon-sm:  16px;
    --icon-md:  20px;
    --icon-lg:  24px;  /* default */
    --icon-xl:  32px;
    --icon-2xl: 48px;

    /* Breakpoints are authored as @media literals in §12.
       Reference values (docs/06 §8.2):
         --bp-sm: 480px · --bp-md: 768px · --bp-lg: 1024px · --bp-xl: 1280px */
}

/* Dark-mode tokens DESIGNED but NOT enabled (docs/06 §16). Activate later by
   setting data-theme="dark" on <html> and uncommenting / completing this block.
:root[data-theme="dark"] {
    --bg-page:    #0A1424;
    --bg-surface: #111C30;
    --text-primary: #F2F4F8;
    --text-body:    #C2C9D6;
}
*/


/* ==========================================================================
   2. RESET / NORMALIZE BASICS
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

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

body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

button {
    cursor: pointer;
    background: none;
    border: none;
}

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

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

/* Respect reduced-motion globally (§12) */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   3. BASE ELEMENT STYLES
   ========================================================================== */
html {
    font-size: 100%; /* 16px root */
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    background-color: var(--bg-page);
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fluid-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--fluid-h2); }
h3 { font-size: var(--fluid-h3); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); }

p {
    max-width: var(--measure);
}

a:not([class]) {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:not([class]):hover {
    color: var(--text-link-hover);
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

strong, b {
    font-weight: var(--weight-semibold);
}

:target {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

/* Vertical section rhythm helpers (§7.3) */
.section        { padding-block: var(--space-9); }
.section--lg    { padding-block: var(--space-10); }
.section--hero  { padding-block: var(--space-11); }
.section--compact { padding-block: var(--space-8); }

/* The placeholder page body gets calm default spacing until real templates land. */
main > .container,
main > h1:first-child {
    /* pages currently echo bare <h1>/<p>; give them breathing room */
}

main {
    padding-block: var(--space-9);
    padding-inline: var(--gutter);
    max-width: var(--container-max);
    margin-inline: auto;
}

main > h1 {
    margin-bottom: var(--space-4);
}

main > p {
    color: var(--text-body);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   5. HEADER  (premium, clean, sticky-ready)
   ========================================================================== */

/* --- Slim utility (top) bar -------------------------------------------------
   A thin, clearly-secondary bar ABOVE the main header that holds the trust
   line (left) and the secondary doors — Emergency + Customer Portal (right).
   It is NOT sticky: it sits above the sticky main header and scrolls away, so
   the dominant header stays pinned while this declutters the main row. Its
   inner uses the same .container as the body, so its edges align with content. */
.site-topbar {
    background-color: var(--bg-surface-subtle);
    border-bottom: 1px solid var(--border-default);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.site-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 38px;
}

.site-topbar__trust {
    margin: 0;
    max-width: none;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-topbar__links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-shrink: 0;
}

.site-topbar__link {
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-standard);
}

.site-topbar__link:hover {
    color: var(--blue-800);
}

/* Emergency door — keeps the red accent + phone icon, but sized down to read
   as a secondary utility link rather than the loud bordered header pill. */
.site-topbar__emergency {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--emergency-text);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-standard);
}

.site-topbar__emergency:hover {
    color: var(--critical-600);
}

.site-topbar__emergency-icon {
    flex-shrink: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    transition: box-shadow var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard);
}

/* JS adds .is-scrolled once the page is scrolled (subtle lift) */
.site-header.is-scrolled {
    box-shadow: var(--elevation-2);
    border-bottom-color: transparent;
}

.site-header__inner {
    display: flex;
    align-items: center;
    /* Tightened from --space-5 (24px): the 9-item nav needs a smaller
       inter-cluster gap to fit on the 1200–1440 desktop range (§12). */
    gap: var(--space-4);
    min-height: var(--header-height);
    /* Aligns the header content with the BODY: same max-width + gutter as
       .container so the logo lines up with the body's left edge and the CTA
       with its right edge. With Emergency moved to the top bar there is now
       ample room for brand + 9-item nav + the single CTA within ~1200px. */
    max-width: var(--container-max);
}

/* Brand lockup ------------------------------------------------------------ */
.brand {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    flex-shrink: 0;
}

.brand__name {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--blue-800);
}

/* Brand logo (SVG lockup). Height-bound so it scales crisply; the intrinsic
   200×48 aspect ratio sets the width. Reads clearly down to header heights. */
.brand__logo {
    display: block;
    height: 34px;
    width: auto;
}

.brand__tagline {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Right-aligned action cluster (the two doors) */
.site-header__actions {
    display: flex;
    align-items: center;
    /* Tightened from --space-4 (16px) to claw back desktop width (§12). */
    gap: var(--space-3);
    margin-left: auto;
    flex-shrink: 0;
}


/* ==========================================================================
   6. NAVIGATION + DROPDOWNS  (desktop horizontal; accessible dropdowns)
   ========================================================================== */
.site-nav__list {
    display: flex;
    align-items: center;
    /* Tight inter-item gap; with 9 top-level items every pixel counts (§12). */
    gap: var(--space-1);
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    /* Horizontal padding tightened from --space-3 (12px) to --space-2 (8px)
       so the 9-item bar fits at >=1200px. Mobile block (§12) restores roomy
       touch padding. */
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
}

.site-nav__link:hover {
    color: var(--blue-800);
    background-color: var(--blue-50);
}

/* Active top-level item (ancestor-aware): calm teal underline accent */
.site-nav__item.is-active > .site-nav__link {
    color: var(--blue-800);
    font-weight: var(--weight-semibold);
}

.site-nav__item.is-active > .site-nav__link::after {
    content: "";
    position: absolute;
    /* Insets match the link's horizontal padding (--space-2) so the
       underline aligns with the tightened nav links. */
    left: var(--space-2);
    right: var(--space-2);
    bottom: -2px;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: var(--teal-600);
}

.site-nav__caret {
    transition: transform var(--duration-fast) var(--ease-standard);
    flex-shrink: 0;
}

/* Submenu (dropdown panel) ----------------------------------------------- */
.site-nav__submenu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 240px;
    padding: var(--space-3);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-2);
    /* hidden by default; shown on hover (desktop) or [aria-expanded] (JS) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                visibility var(--duration-fast);
    z-index: var(--z-dropdown);
}

/* Desktop: open on hover/focus-within of the item, OR when JS sets expanded.
   Breakpoint raised to 1280px (matches the nav-collapse breakpoint in §12):
   the horizontal dropdowns only behave as hover-menus where the full
   horizontal bar is shown. Below 1280px the nav is the off-canvas accordion. */
@media (min-width: 1280px) {
    .has-dropdown:hover > .site-nav__submenu,
    .has-dropdown:focus-within > .site-nav__submenu,
    .has-dropdown .site-nav__trigger[aria-expanded="true"] + .site-nav__submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .has-dropdown:hover > .site-nav__trigger .site-nav__caret,
    .site-nav__trigger[aria-expanded="true"] .site-nav__caret {
        transform: rotate(180deg);
    }
}

.site-nav__sublink {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-body);
    transition: color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
}

.site-nav__sublink:hover {
    color: var(--blue-800);
    background-color: var(--blue-50);
}

.site-nav__sublink.is-current {
    color: var(--blue-800);
    font-weight: var(--weight-semibold);
    background-color: var(--blue-50);
}

.site-nav__sublink--overview {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-default);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-bottom: var(--space-1);
    padding-bottom: var(--space-2);
}


/* ==========================================================================
   7. BUTTONS  (accessible hit areas >= 44px; full state set)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-inline);
    min-height: var(--tap-min);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
}

/* Primary — the dominant teal CTA */
.btn--primary {
    background-color: var(--action-primary);
    color: var(--white);
    border: 1px solid transparent;
}

.btn--primary:hover {
    background-color: var(--action-primary-hover);
    box-shadow: var(--elevation-1);
}

.btn--primary:active {
    background-color: var(--action-primary-active);
    transform: translateY(1px);
}

/* Secondary — blue outline */
.btn--secondary {
    background-color: transparent;
    color: var(--action-secondary);
    border: 1px solid var(--action-secondary);
}

.btn--secondary:hover {
    background-color: var(--blue-50);
}

/* Ghost / tertiary — text + arrow, no fill */
.btn--ghost {
    background-color: transparent;
    color: var(--text-link);
    border: 1px solid transparent;
    padding-inline: var(--space-3);
}

.btn--ghost:hover {
    color: var(--text-link-hover);
}

/* Sizes */
.btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: 52px; padding: var(--space-4) var(--space-7); }

.btn[disabled],
.btn[aria-disabled="true"] {
    background-color: var(--state-disabled-bg);
    color: var(--state-disabled-text);
    border-color: transparent;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}


/* ==========================================================================
   8. EMERGENCY DOOR  (now a calm secondary link in the top utility bar — §5.8)
   --------------------------------------------------------------------------
   The bordered header pill was retired when the Emergency door moved into the
   slim top utility bar (see .site-topbar__emergency above). Kept this section
   anchor so the numbered ToC stays stable; the styling lives with the topbar.
   ========================================================================== */


/* ==========================================================================
   9. MOBILE MENU  (hamburger; off-canvas panel; dropdowns become accordions)
   ========================================================================== */
.nav-toggle {
    display: none; /* shown < lg in §12 */
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    flex-shrink: 0;
}

.nav-toggle:hover {
    background-color: var(--blue-50);
}

.nav-toggle__bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 22px;
}

.nav-toggle__bars span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: var(--radius-pill);
    background-color: currentColor;
    transition: transform var(--duration-base) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard);
}

/* Hamburger → X when open */
.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Backdrop behind the mobile panel */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background-color: rgba(10, 26, 51, 0.45);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}

.nav-open .nav-backdrop {
    opacity: 1;
}


/* ==========================================================================
   10. FOOTER  (multi-column grid; muted premium; dark band)
   ========================================================================== */
.site-footer {
    margin-top: var(--space-10);
    padding-block: var(--space-10) var(--space-8);
    background-color: var(--bg-inverse);
    color: var(--text-on-inverse);
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.site-footer__brand {
    max-width: 36ch;
}

.site-footer__name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--white);
    margin-bottom: var(--space-3);
}

/* Footer brand logo (light lockup for the dark band). */
.site-footer__logo {
    display: block;
    height: 38px;
    width: auto;
    margin-bottom: var(--space-4);
}

.site-footer__reassurance {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.92);
}

.site-footer__positioning {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.66);
    margin-top: var(--space-2);
}

.site-footer__contact {
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__contact-label {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2px;
}

.site-footer__contact a {
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-sm);
    text-decoration: none;
}

.site-footer__contact a:hover {
    color: var(--teal-400);
}

/* Link columns */
.site-footer__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}

.site-footer__heading {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: var(--space-4);
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__link {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--text-sm);
    transition: color var(--duration-fast) var(--ease-standard);
}

a.site-footer__link:hover {
    color: var(--white);
}

.site-footer__link.is-soon {
    color: rgba(255, 255, 255, 0.5);
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.site-footer__soon-tag {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.6);
}

/* Bottom bar */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-9);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__copyright {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.site-footer__social {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.site-footer__social-link {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
}

a.site-footer__social-link:hover {
    color: var(--white);
}

.site-footer__social-link.is-disabled {
    color: rgba(255, 255, 255, 0.35);
    cursor: default;
}


/* ==========================================================================
   11. ACCESSIBILITY  (skip link, focus rings, visually-hidden)
   ========================================================================== */

/* Visible focus on every interactive element (teal ring, >=2px, offset) */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Don't double-up the ring for mouse users on already-styled controls */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip-to-content link — visually hidden until focused */
.skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-skiplink);
    padding: var(--space-3) var(--space-4);
    background-color: var(--blue-800);
    color: var(--white);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    transform: translateY(-150%);
    transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
}

main:focus {
    outline: none;
}

/* Screen-reader-only utility */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS  (mobile-first; nav collapses < 1280px)

   The horizontal 9-item primary nav + brand + two doors only genuinely fits
   from 1280px up (even after tightening gaps/padding and shortening the CTA),
   so the hamburger handles everything below 1280px (the old 1024px cutoff left
   1024–1279px overflowing). The desktop dropdown-reveal block (§6) uses the
   SAME 1280px so hover-menus and the bar appear together. At >=1280px the brand
   tagline is hidden (wordmark-only) to keep the bar compact — a standard
   premium header pattern; the tagline still shows on mobile/tablet.
   ========================================================================== */

/* On the desktop nav bar (>=1280px) show the wordmark only — the tagline
   would push the lockup ~144px wider than the tight bar can spare. It still
   appears in the roomy mobile/tablet header. Token-driven, fully reversible. */
@media (min-width: 1280px) {
    .brand__tagline {
        display: none;
    }
}

/* --- Tablet portrait (>= 768px / --bp-md): grow gutters ------------------ */
@media (min-width: 768px) {
    :root {
        --gutter: var(--space-6);
    }

    .site-footer__top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--space-9);
    }

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

/* --- Wide tablet / small laptop (>= 1024px): footer 5-col --------------- */
@media (min-width: 1024px) {
    .site-footer__nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* --- Desktop nav appears (>= 1280px): grow gutters -----------------------
   A moderate --space-7 (40px) gutter once the horizontal nav shows: enough
   air around the bar without stealing the width the 9-item nav needs at the
   1280px low end. The 1024–1279px hamburger range keeps the --space-6 gutter. */
@media (min-width: 1280px) {
    :root {
        --gutter: var(--space-7);
    }
}

/* --- BELOW 1280px: mobile navigation (hamburger + off-canvas) ------------ */
@media (max-width: 1279.98px) {
    .nav-toggle {
        display: inline-flex;
    }

    /* Below the desktop nav: drop the long trust line so the top bar collapses
       to just the two secondary doors (Emergency + Portal), centred. Emergency
       access is preserved here (and also reachable via the off-canvas menu). */
    .site-topbar__trust {
        display: none;
    }

    .site-topbar__inner {
        justify-content: center;
    }

    .site-topbar__links {
        gap: var(--space-6);
    }

    /* The primary CTA stays visible (never menu-gated). */
    .site-header__actions {
        margin-left: auto;
    }

    /* Off-canvas nav panel — same nav.php markup, restyled */
    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 88vw);
        z-index: var(--z-mobilenav);
        background-color: var(--bg-surface);
        box-shadow: var(--elevation-3);
        padding: calc(var(--header-height) + var(--space-4)) var(--space-5) var(--space-8);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--duration-slow) var(--ease-standard);
        -webkit-overflow-scrolling: touch;
    }

    .nav-open .site-nav {
        transform: translateX(0);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
    }

    .site-nav__item {
        position: static;
        border-bottom: 1px solid var(--border-default);
    }

    .site-nav__link {
        width: 100%;
        justify-content: space-between;
        padding: var(--space-4) var(--space-3);
        font-size: var(--text-base);
        border-radius: 0;
    }

    .site-nav__item.is-active > .site-nav__link::after {
        display: none; /* underline accent is a desktop affordance */
    }

    .site-nav__item.is-active > .site-nav__link {
        color: var(--teal-700);
    }

    /* Dropdowns become accordions: collapsed by default, expand via JS */
    .site-nav__submenu {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 var(--space-3) var(--space-3);
        /* collapse */
        display: none;
    }

    .site-nav__trigger[aria-expanded="true"] + .site-nav__submenu {
        display: block;
    }

    .site-nav__trigger[aria-expanded="true"] .site-nav__caret {
        transform: rotate(180deg);
    }

    .site-nav__sublink {
        padding: var(--space-3) var(--space-3);
    }

    /* Prevent body scroll behind the open panel */
    body.nav-open {
        overflow: hidden;
    }
}

/* --- Small phones: shorten the header action cluster --------------------- */
@media (max-width: 600px) {
    .brand__tagline {
        display: none; /* keep the header to one line on small phones */
    }

    .site-header__cta {
        padding-inline: var(--space-4);
        font-size: var(--text-sm);
    }

    /* Tighten the top bar's two doors so they never wrap on the smallest phones. */
    .site-topbar__links {
        gap: var(--space-4);
    }
}