/* ============================================================
   birgit theme — base.css (tokens, reset, typography, self-hosted fonts) — loaded on every page
   Part of the conditional-partial split of the original single
   stylesheet. Rules moved verbatim; cascade preserved via enqueue order.
   ============================================================ */

/* ─── Self-hosted fonts (GDPR: no third-party CDN) ───────────── */
/* Inter — body (400/500/600). Cormorant Garamond — display (400/500/600 + 400 italic). */
/* Latin + Latin-ext (German diacritics) via unicode-range. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
    /* ─── Typography ─────────────────────────────────────────────── */
    --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-serif:   "Cormorant Garamond", ui-serif, Georgia, serif;
    --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
    
    /* ─── Green — backgrounds, soft surfaces (was creme in v1) ────── */
    --color-green-50:  #F1F8EE;   /* near-white, faintest tint        */
    --color-green-100: #DDEED5;   /* pale, used like creme-100        */
    --color-green-200: #BCDDAB;   /* mid-pale, slightly stronger      */
    --color-green-300: #88C075;   /* light forest                     */
    --color-green-400: #5BAA4A;
    --color-green-600: #349A2D;   /* Forest Green — primary brand     */
    --color-green-800: #237319;
    --color-green-900: #134510;
    
    /* ─── Cream — backgrounds, soft surfaces ─────────────────────── */
    --color-cream-50:  #FDFBF5;
    --color-cream-100: #F5EFE0;
    --color-cream-200: #E8DDC0;
    --color-cream-300: #D9C99A;
    --color-cream-600: #8C7A4E;
    --color-cream-800: #4A3E22;
    
    /* ─── Footer colour scheme — backgrounds, soft surfaces ─────────────────────── */
    --footer-bg:      var(--color-navy-800);
    --footer-text:    var(--color-cream-200);
    --footer-heading: var(--color-cream-50);
    --footer-accent:  var(--color-green-600);   /* swap to var(--color-navy-400) for a subtler dash */
    --footer-border:  rgba(255, 255, 255, 0.14);
    
    
    /* ─── Deep navy blue — primary brand colour ──────────────────── */
    --color-navy-50:  #EEF3F8;
    --color-navy-100: #D6E1EC;
    --color-navy-200: #A9BFD3;
    --color-navy-400: #4A6E8C;
    --color-navy-600: #2D4F73;
    --color-navy-800: #1B3A5C;
    --color-navy-900: #0F2842;
    
    /* ─── Warm neutral — body text, subtle borders ───────────────── */
    --color-stone-50:  #FAF9F6;
    --color-stone-200: #E8E4DA;
    --color-stone-400: #A8A299;
    --color-stone-600: #5C5851;
    --color-stone-800: #2E2B26;
    
    /* ─── Semantic accents (override per child theme later) ──────── */
    --color-accent-50:  var(--color-navy-50);
    --color-accent-200: var(--color-navy-200);
    --color-accent-600: var(--color-navy-600);
    --color-accent-800: var(--color-navy-800);
}

/* ─── Reset / base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    color: var(--color-stone-800);
    background: var(--color-cream-50);
    overflow-x: clip;  /* contain full-bleed bands WITHOUT a scroll container,
                          so position: sticky (navbar) keeps working */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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


/* ============================================================
   D-02 — Accessibility utilities (added in mitigation MPR-01)
   Skip link, visually-hidden helper, and a visible :focus-visible
   ring. Uses the existing design tokens (no new colours).
   ============================================================ */

/* Skip-to-content link: off-screen until focused, then pinned top-left. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--color-navy-800);
    color: var(--color-cream-50);
    font-family: var(--font-sans);
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
}

/* Visually-hidden: available to assistive tech, removed from view. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Visible keyboard focus ring (does not show on mouse focus). */
:focus-visible {
    outline: 3px solid var(--color-green-600);
    outline-offset: 2px;
}

/* Give the focused <main> target no persistent outline (it is programmatic). */
#main:focus:not(:focus-visible) {
    outline: none;
}