/* =========================================================
   CARE COLLECTIVE — OFFICIAL CI BRAND LAYER
   Source: the official Care Collective CI archive, Brand Guide v1.0 (Oct 2026)
   Loaded AFTER style.css / directory.css / each page's own
   <style> block, so these rules can safely win on shared
   selectors (header/nav/langs/buttons/cookie/footer) without
   needing !important. Colour tokens are intentionally NOT
   redeclared here — public/assets/css/style.css's :root already
   matches the Brand Guide's palette 1:1 (confirmed against the
   guide's own colour page), so this file only adds what was
   actually missing: real typefaces, the real logo, a compact
   header with a working mobile menu, and the few documented
   contrast/CI corrections (no white text on Teal).
   ========================================================= */

/* ---- Fonts: self-hosted, no Google Fonts / CDN ---- */
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/care-collective/Inter-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/care-collective/Inter-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/care-collective/Inter-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/care-collective/Inter-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/care-collective/Inter-ExtraBold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter Display";
  src:url("/assets/fonts/care-collective/InterDisplay-ExtraBold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* Major display headings use Inter Display ExtraBold; Thai keeps its
   existing Thai-capable fallback stack untouched (see style.css's
   html[lang="th"] body rule) — Inter Display simply isn't in that
   stack, so Thai glyphs never touch a Latin-only display face. */
h1, h2, h3,
.brand-title{
  font-family:"Inter Display","Inter",Arial,sans-serif;
  letter-spacing:-0.01em;
}

.nav-links a,
.btn,
.pill{
  font-family:"Inter",Arial,sans-serif;
  font-weight:600;
}

/* Normal nav items read as too heavy/dominant even at 600
   (SemiBold) next to the logo — owner feedback asked for Inter
   Medium (500) specifically, not 600 and not 700. Buttons/pills
   keep 600 above; only plain nav links drop to 500. The current-
   page item is distinguished by colour (var(--teal), see
   style.css's .nav-links a.active rule, untouched) and the
   existing underline marker some pages add — never by weight, so
   it never becomes visually heavier than its siblings. */
.nav-links a{
  font-size:16px;
  font-weight:500;
}

/* =========================================================
   CONTRAST CORRECTIONS (Brand Guide: no white text on Teal —
   2.0:1, use Petrol instead — 4.1:1+)

   Several of these exact selectors are ALSO defined a second
   time inside individual pages' own embedded <style> blocks,
   which load AFTER this shared file in the <head> — so an
   equal-specificity rule here would lose to theirs on source
   order alone. Every selector below is therefore prefixed with
   `body` purely to win that specificity tie-break reliably,
   regardless of where this stylesheet happens to be linked
   relative to a page's own styles; it changes no selector's
   actual meaning.
   ========================================================= */

body .pill.active,
body .pill[aria-current="page"]{
  background:var(--teal);
  color:var(--teal-dark);
}

body .cookie .primary{
  background:var(--gold);
  color:var(--teal-dark);
}

body .badge{
  background:var(--teal);
  color:var(--teal-dark);
}

/* Access & Support Check — selected answer-letter chip, result label */
body .answer-option input:checked + .answer-inner .answer-letter,
body .result-label{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--teal-dark);
}

/* Care Knowledge Library — filter chips and "clear" control */
body .library-clear:hover,
body .library-clear:focus,
body .library-filter.active,
body .library-filter[aria-pressed="true"]{
  background:var(--teal);
  color:var(--teal-dark);
}

/* =========================================================
   LOGO
   ========================================================= */

.brand-logo-link{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  text-decoration:none;
  color:inherit;
}

.brand-logo{
  display:block;
  width:210px;
  height:auto;
  max-width:100%;
}

.brand-logo-link .brand-subtitle{
  margin:0;
  font-size:13px;
  line-height:1.3;
}

@media (max-width:1100px){
  .brand-logo-link .brand-subtitle{
    display:none;
  }
}

/* =========================================================
   HEADER — COMPACT DESKTOP SHELL + RIGHT-SIDE MOBILE DRAWER

   Every rule in this section is scoped behind
   `.topbar:has(.brand-logo-link)` — i.e. it only ever applies
   to a header that has actually been migrated to the real CI
   logo (every released EN/DE/TH page). The still-unreleased FR
   pages keep the old typed-wordmark header and its original
   style.css layout completely untouched: :has() simply never
   matches there, so FR is unaffected rather than broken (it has
   no .mobile-menu-toggle button, so the drawer behaviour must
   never apply to it).

   DOM (unchanged across all migrated pages, and unchanged again
   in this follow-up pass — mobile-nav.js adds a close button and
   a few behaviours at runtime, it never needs new markup):
     .container.nav > a.brand-logo-link, button.mobile-menu-toggle, div.nav-right
       .nav-right > nav.nav-links, div.langs
   .nav-right is `display:contents` on desktop so nav-links/langs
   become direct grid items of .container.nav itself; below the
   breakpoint it becomes the drawer panel itself (position:fixed),
   so the SAME element and the SAME data-menu-open/aria-expanded
   state already wired by mobile-nav.js drives both desktop
   layout and the mobile drawer — one state, two presentations.

   Breakpoint: 1100px, not the original 960px. At 16px/SemiBold
   the longest released nav label set (German: Startseite /
   Leistungen / Zugang prüfen / Wissen & Orientierung / Concierge
   / Zusatzleistungen / Partner & Gemeinschaft) needs roughly
   1040-1060px of content width with the existing 22px gaps —
   essentially the full 1024px test width with no margin to
   spare. 1100px gives real breathing room instead of risking
   the exact "ugly wrap at 1024px" this pass exists to fix.
   ========================================================= */

.topbar:has(.brand-logo-link){
  padding:0;
  position:sticky;
  top:0;
  z-index:9999;
}

.topbar:has(.brand-logo-link) .mobile-menu-toggle{
  display:none;
}

/* The synthesized drawer-close button (inserted by mobile-nav.js)
   does not exist in any page's own HTML/CSS, so it has no other
   rule constraining it at all. It MUST be explicitly hidden here,
   unconditionally — exactly like .mobile-menu-toggle above — not
   only inside the mobile media query below. Previously this was
   only styled/sized inside that media query, which left it with
   browser-default <button> sizing at desktop widths; worse, because
   .nav-right is display:contents at desktop, that unstyled button
   became a direct, unplaced CSS Grid item, and its unsized child
   <svg viewBox="0 0 24 24"> (no width/height attribute, no CSS
   outside the media query) fell back to the browser's ~300x150px
   default replaced-element size — rendering as a large black X
   placed wherever grid auto-placement put it. This single
   unconditional rule, plus the unconditional SVG safety cap right
   below, is the actual fix — not another breakpoint-scoped patch. */
.nav-drawer-close{
  display:none;
}

/* Belt-and-suspenders: no icon inside either header control can
   ever exceed this size, regardless of which more specific rule
   below does or doesn't end up matching in a given browser. */
.mobile-menu-toggle svg,
.nav-drawer-close svg{
  display:block;
  width:22px;
  height:22px;
  max-width:24px;
  max-height:24px;
}

.topbar:has(.brand-logo-link) .container.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "logo . langs"
    "nav nav nav";
  align-items:center;
  column-gap:24px;
  row-gap:12px;
  padding-top:16px;
  padding-bottom:16px;
}

.topbar .container.nav > a.brand-logo-link{
  grid-area:logo;
}

.topbar:has(.brand-logo-link) .nav-right{
  display:contents;
}

.topbar:has(.brand-logo-link) .nav-right .langs{
  grid-area:langs;
  margin-left:0;
}

.topbar:has(.brand-logo-link) .nav-right .nav-links{
  grid-area:nav;
  gap:22px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

@media (max-width:1100px){
  .brand-logo{width:168px}

  .topbar:has(.brand-logo-link) .container.nav{
    grid-template-columns:1fr auto;
    grid-template-areas:"logo toggle";
    padding-top:12px;
    padding-bottom:12px;
    row-gap:0;
  }

  /* Dimmed backdrop behind the open drawer — a ::before on .topbar
     itself rather than a new DOM element, so a click anywhere on
     it (event.target === the .topbar element — a pseudo-element
     has no node of its own to be the target) can close the drawer
     from mobile-nav.js without any extra markup. */
  .topbar:has(.nav-right[data-menu-open])::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(20,42,50,.42);
    z-index:9999;
  }

  .topbar:has(.brand-logo-link) .mobile-menu-toggle{
    grid-area:toggle;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--teal-dark);
    cursor:pointer;
    padding:0;
    justify-self:end;
  }

  /* The drawer itself: fixed off-canvas panel, slides in from the
     right. Creme surface, Petrol text (inherited from body). A
     fixed, explicit width/height box — never an unconstrained
     "almost full page" canvas. */
  .topbar:has(.brand-logo-link) .nav-right{
    display:block;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(86vw, 340px);
    background:var(--bg);
    box-shadow:-18px 0 50px rgba(20,42,50,.2);
    z-index:10000;
    overflow-y:auto;
    padding:16px 20px 28px;
    transform:translateX(100%);
    transition:transform .26s ease;
  }

  .topbar:has(.brand-logo-link) .nav-right[data-menu-open]{
    transform:translateX(0);
  }

  /* Drawer header row: close control, top-right, small — the
     drawer never repeats the full horizontal logo (it's already
     visible in the sticky header behind/above it). */
  .topbar:has(.brand-logo-link) .nav-right .nav-drawer-close{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin:0 0 12px auto;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--teal-dark);
    cursor:pointer;
    padding:0;
  }

  /* --- Everything below resets properties a narrower pre-existing
     style.css breakpoint (≤760/≤420px) still sets on these same
     bare selectors — .nav-links/.nav-links a/.langs/.pill are not
     scoped to any one page, so those older rules keep applying
     underneath ours unless each property they touch is explicitly
     restated here. This is the actual fix for the old two-column
     card grid reappearing inside the new drawer: our previous
     override only ever added flex-direction/gap, never re-declared
     display/background/width, so the old display:grid (2-column)
     and card styling kept winning for every property we hadn't
     named ourselves. */

  .topbar:has(.brand-logo-link) .nav-right .langs{
    display:flex;
    width:auto;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
    padding-bottom:14px;
    margin-bottom:14px;
    border-bottom:1px solid var(--line);
  }

  .topbar:has(.brand-logo-link) .nav-right .pill{
    width:auto;
    min-width:52px;
    height:40px;
    padding:0 14px;
    font-size:15px;
  }

  .topbar:has(.brand-logo-link) .nav-right .nav-links{
    display:flex;
    width:auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-bottom:0;
    padding-top:0;
    border-top:none;
  }

  .topbar:has(.brand-logo-link) .nav-right .nav-links a{
    display:flex;
    align-items:center;
    width:auto;
    min-width:0;
    min-height:48px;
    padding:12px 4px;
    background:transparent;
    border-radius:0;
    border-bottom:1px solid var(--line);
    font-size:16px;
    line-height:1.3;
    text-align:left;
    white-space:normal;
  }

  .topbar:has(.brand-logo-link) .nav-right .nav-links a:last-child{
    border-bottom:none;
  }
}

/* Lock background scroll while the drawer is open (class toggled
   by mobile-nav.js on <html>, independent of any one page's own
   scroll-stage elements). */
html.cc-nav-locked{
  overflow:hidden;
}

@media (prefers-reduced-motion: reduce){
  .topbar:has(.brand-logo-link) .nav-right{
    transition:none;
  }
}

/* =========================================================
   FOOTER — PETROL SURFACE + NEGATIVE LOGO
   ========================================================= */

.footer{
  background:var(--teal-dark);
  border-top:none;
}

.footer h4,
.footer a,
.footer p,
.footer .footer-copy{
  color:#fff;
}

.footer a{
  opacity:.92;
}

.footer a:hover,
.footer a:focus-visible{
  opacity:1;
}

.footer .footer-copy{
  border-top:1px solid rgba(255,255,255,.18);
  opacity:.82;
}

.footer-logo{
  width:150px;
  height:auto;
  display:block;
  margin-bottom:10px;
}

/* =========================================================
   DECORATIVE CI ELEMENTS — sparing, aria-hidden, never over
   faces/controls, hidden on narrow screens if they would risk
   overflow or crowding.
   ========================================================= */

.cc-decor{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:0;
}

.cc-decor-bogen{
  width:min(260px, 30vw);
  height:auto;
  opacity:.9;
}

.cc-decor-monogram{
  width:min(420px, 55vw);
  height:auto;
  opacity:.55;
}

@media (max-width:600px){
  .cc-decor-bogen{
    width:150px;
  }
}