/* FSP Cookie Consent Banner v1.2 — component styles.
   Ported from the canvas export (Website/Cookie Consent Banner.html).
   Vars scoped to --cc-* to avoid collision with site tokens.
   Demo scaffolding stripped; drops into every page via build-pages.mjs. */

  :root {
    --cc-navy:        #0a2540;
    --cc-ink:         #0b1428;
    --cc-body:        #425466;
    --cc-muted:       #64748b;
    --cc-faint:       #94a3b8;
    --cc-lime:        #c8f23c;
    --cc-lime-deep:   #5f8a12;
    --cc-wash:        #f6f8fc;
    --cc-line:        rgba(10,37,64,0.10);
    --cc-line-soft:   rgba(10,37,64,0.06);
    --cc-line-strong: rgba(10,37,64,0.20);
    --cc-toggle-off:  #dfe5ee;
    --cc-radius-btn:  11px;
    --cc-radius-card: 18px;
    --cc-ease:        cubic-bezier(0.22,1,0.36,1);
    --cc-font: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  /* ── First-layer banner ─────────────────────────────────────────── */
  .cc-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    background: #ffffff;
    border-top: 3px solid var(--cc-navy);
    box-shadow: 0 -16px 44px -22px rgba(10,37,64,0.28);
    padding: 26px 40px;
    display: flex; align-items: center; gap: 40px;
    transform: translateY(110%);
    transition: transform .55s var(--cc-ease);
  }
  .cc-banner[data-open="true"] { transform: translateY(0); }
  .cc-banner__text { flex: 1; min-width: 0; }
  .cc-banner__title {
    font-size: 19px; font-weight: 400; color: var(--cc-navy);
    letter-spacing: -0.018em; margin: 0 0 8px;
  }
  .cc-banner__body {
    font-size: 14px; line-height: 1.6; color: var(--cc-body); margin: 0;
    max-width: 72ch;
  }
  .cc-link {
    color: var(--cc-navy); font-weight: 400; text-decoration: underline;
    text-underline-offset: 2px; text-decoration-thickness: 1.5px;
  }
  .cc-link:hover { color: var(--cc-lime-deep); }
  .cc-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }

  /* ── Buttons (symmetry of choice: reject & accept identical footprint) ── */
  .cc-btn {
    font-family: var(--cc-font); font-size: 12px; font-weight: 400;
    letter-spacing: -0.004em; cursor: pointer; white-space: nowrap;
    padding: 11px 19px; border-radius: var(--cc-radius-btn);
    transition: background .18s var(--cc-ease), border-color .18s, color .18s, transform .18s;
    border: 1.5px solid transparent;
  }
  .cc-btn:active { transform: translateY(1px); }
  /* Per the Cookie Consent Banner design (v1.4 canvas): Reject all — navy
     outline; Manage — light neutral middle; Accept all — SOLID NAVY fill. */
  .cc-btn--reject {
    background: #ffffff; border-color: var(--cc-navy); color: var(--cc-navy);
    min-width: 117px;
  }
  .cc-btn--reject:hover { background: var(--cc-navy); color: #ffffff; }
  .cc-btn--manage {
    background: #ffffff; border-color: var(--cc-line-strong); color: var(--cc-navy);
  }
  .cc-btn--manage:hover { border-color: var(--cc-navy); }
  .cc-btn--accept {
    background: var(--cc-navy); border-color: var(--cc-navy); color: #ffffff;
    min-width: 117px;
  }
  .cc-btn--accept:hover { background: var(--cc-ink); }

  /* ── Preferences center (modal) ─────────────────────────────────── */
  .cc-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(10,20,40,0.46); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 28px; opacity: 0; pointer-events: none;
    transition: opacity .3s var(--cc-ease);
  }
  .cc-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
  .cc-modal {
    background: #ffffff; border-radius: var(--cc-radius-card);
    width: 100%; max-width: 560px; max-height: min(600px, calc(100vh - 120px));
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 50px 100px -38px rgba(10,37,64,0.45);
    transform: translateY(14px) scale(0.985);
    transition: transform .3s var(--cc-ease);
  }
  .cc-overlay[data-open="true"] .cc-modal { transform: none; }

  /* Head — plain "Cookie settings" title + subtitle (design v1.4 canvas) */
  .cc-modal__head {
    padding: 22px 30px 16px; border-bottom: 1px solid var(--cc-line-soft);
  }
  .cc-modal__head h2 {
    font-size: 22px; font-weight: 400; color: var(--cc-navy);
    letter-spacing: -0.02em; margin: 0 0 6px;
  }
  .cc-modal__head p { font-size: 14px; line-height: 1.55; color: var(--cc-body); margin: 0; }

  .cc-modal__body { overflow-y: auto; padding: 2px 30px; }

  .cc-cat {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 15px 0; border-bottom: 1px solid var(--cc-line-soft);
  }
  .cc-cat:last-child { border-bottom: none; }
  .cc-cat__main { flex: 1; min-width: 0; }
  .cc-cat__title {
    font-size: 16px; font-weight: 400; color: var(--cc-navy);
    letter-spacing: -0.012em; margin: 0 0 6px;
  }
  .cc-cat__desc { font-size: 13.5px; line-height: 1.55; color: var(--cc-body); margin: 0; }
  /* ALWAYS ON — green text (design v1.4 canvas) */
  .cc-cat__alwayson {
    display: inline-block; margin-top: 10px;
    font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cc-lime-deep);
  }
  /* App-only minor line inside the (website-hidden) advertising row */
  .cc-cat__minorline {
    display: block; margin-top: 6px;
    color: #6b4fd8; font-weight: 700;
  }
  .cc-cat__control { flex-shrink: 0; padding-top: 2px; }

  /* Toggle switch — off by default, lime when on */
  .cc-switch {
    position: relative; width: 46px; height: 27px; border: 0; padding: 0;
    border-radius: 999px; background: var(--cc-toggle-off); cursor: pointer;
    transition: background .25s var(--cc-ease); flex-shrink: 0;
  }
  .cc-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 21px; height: 21px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(10,37,64,0.3);
    transition: transform .25s var(--cc-ease);
  }
  .cc-switch[aria-checked="true"] { background: var(--cc-lime); }
  .cc-switch[aria-checked="true"]::after { transform: translateX(19px); }
  .cc-switch:focus-visible { outline: 3px solid rgba(132,204,22,0.4); outline-offset: 2px; }
  .cc-switch[disabled] { opacity: 0.55; cursor: not-allowed; }

  /* US / regional controls block — neutral panel (design v1.4 canvas) */
  .cc-region {
    margin: 4px 0 8px; padding: 18px; border-radius: 14px;
    background: var(--cc-wash); border: 1px solid var(--cc-line-soft);
  }
  .cc-region .cc-cat { padding-top: 0; padding-bottom: 18px; border-bottom: 1px solid var(--cc-line); }
  .cc-region .cc-cat:last-of-type { border-bottom: none; padding-bottom: 0; }
  .cc-note {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 13px; line-height: 1.5; color: var(--cc-muted); margin-top: 16px;
  }
  .cc-note svg { flex-shrink: 0; margin-top: 1px; }
  .cc-note strong { color: var(--cc-navy); font-weight: 400; }

  /* Opt-Out Request Honored — GPC confirmation (design v1.4 canvas).
     Shown INSTEAD of the toggle row when a GPC signal is detected. */
  .cc-gpc-honored {
    display: flex; gap: 11px; align-items: flex-start;
    margin: 14px 0 2px; padding: 14px 16px; border-radius: 12px;
    background: rgba(132,204,22,0.10); border: 1px solid rgba(132,204,22,0.35);
  }
  .cc-gpc-honored[hidden] { display: none; }
  .cc-gpc-honored svg { flex-shrink: 0; margin-top: 2px; color: var(--cc-lime-deep); }
  .cc-gpc-honored__title {
    font-size: 14px; font-weight: 400; letter-spacing: -0.01em;
    color: var(--cc-navy); margin: 0 0 3px;
  }
  .cc-gpc-honored__body {
    font-size: 12px; line-height: 1.5; color: var(--cc-body); margin: 0;
  }

  /* Minor rule banner */
  .cc-minor {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 14px 0 4px; padding: 14px 16px; border-radius: 12px;
    background: rgba(132,204,22,0.10); border: 1px solid rgba(132,204,22,0.3);
    font-size: 13px; line-height: 1.5; color: var(--cc-navy);
  }
  .cc-minor svg { flex-shrink: 0; margin-top: 1px; color: var(--cc-lime-deep); }
  .cc-minor strong { font-weight: 400; }

  /* Locked advertising state (under-18) */
  .cc-locked {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cc-muted);
  }

  .cc-modal__foot {
    padding: 16px 30px; border-top: 1px solid var(--cc-line-soft);
    display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap;
    background: #fff;
  }
  .cc-modal__foot .cc-btn { flex: 1 1 auto; }

  /* ── Persistent reopen control ──────────────────────────────────── */
  .cc-tab {
    position: fixed; left: 20px; bottom: 20px; z-index: 8800;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 16px 11px 13px; border-radius: 999px;
    background: #ffffff; border: 1px solid var(--cc-line);
    color: var(--cc-navy); font-family: var(--cc-font); font-size: 13px;
    cursor: pointer; box-shadow: 0 10px 28px -14px rgba(10,37,64,0.4);
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity .3s var(--cc-ease), transform .3s var(--cc-ease), background .15s;
  }
  /* The floating tab is retired (21 Sep 2026): nothing sets data-show="true" any more, so it
     stays invisible and inert. The markup and these rules stay because the consent panel is
     reopened from the "Cookie settings" link in every footer, and the guard expects #cc-tab
     in the arena shell. Do not "fix" this by showing it again without asking. */
  .cc-tab[data-show="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .cc-tab:hover { background: var(--cc-wash); }
  .cc-tab svg { color: var(--cc-lime-deep); }

  /* ── Responsive ─────────────────────────────────────────────────── */
  @media (max-width: 860px) {
    .cc-banner { flex-direction: column; align-items: stretch; gap: 20px; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); }
    .cc-banner__actions { flex-wrap: wrap; }
    .cc-banner__actions .cc-btn { flex: 1 1 auto; }
    .cc-banner__actions .cc-btn--manage { flex-basis: 100%; order: 3; }
  }
  @media (max-width: 520px) {
    .cc-modal__foot { flex-direction: column-reverse; }
    .cc-modal__foot .cc-btn { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cc-banner, .cc-overlay, .cc-modal, .cc-switch, .cc-switch::after, .cc-tab { transition: none; }
  }


/* ── Mobile: the settings tab must not sit on top of body copy ───────────
   At 390px the labelled pill covers a third of the reading column (it was
   landing across paragraph text on every page). Collapse it to a compact
   icon button, tucked into the corner and out of the text flow. */
@media (max-width: 899px) {
  .cc-tab {
    left: 12px; bottom: 12px;
    padding: 0; width: 40px; height: 40px;
    justify-content: center; gap: 0;
    border-radius: 999px;
    box-shadow: 0 6px 18px -8px rgba(10,37,64,0.45);
  }
  .cc-tab .cc-tab__label { display: none; }
}