/* ==========================================================================
 * consent.css — banner styling for bergundsoehne.ch
 * Everything is scoped under [data-cc-root] / .cc-* so it cannot collide with
 * the site CSS. Theme tokens match the BERG & SÖHNE "Snow/Vault" brand skin.
 * Honors prefers-reduced-motion and prefers-color-scheme.
 * ======================================================================== */

[data-cc-root]{
  --cc-font:'Jost',system-ui,-apple-system,sans-serif;
  --cc-title-font:'Cormorant Garamond',Georgia,serif;
  --cc-surface:#FEFEFE;
  --cc-surface-2:#F4F4F2;
  --cc-fg:#1F1E1C;
  --cc-muted:rgba(31,30,28,.66);
  --cc-line:rgba(31,30,28,.16);
  --cc-accent:#7A6230;          /* gold-ink — meets contrast on light surface */
  --cc-accent-2:#C9B488;
  --cc-accent-fg:#FEFEFE;
  --cc-btn-radius:2px;
  --cc-card-radius:4px;
  --cc-shadow:0 24px 60px -20px rgba(31,30,28,.35),0 2px 8px rgba(31,30,28,.08);
  --cc-focus:#7A6230;
  --cc-switch-line:rgba(31,30,28,.5);   /* >=3:1 track border for 1.4.11 */
  --cc-ease:cubic-bezier(.16,1,.3,1);
}

/* Bottom sticky bar: no scroll lock — page behind stays visible + usable. */
html.cc-open{}

/* ---- Container: full-width band pinned to the bottom edge (carries surface) ---- */
.cc-wrap{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;
  font-family:var(--cc-font);color:var(--cc-fg);
  background:var(--cc-surface);border-top:1px solid var(--cc-line);
  box-shadow:0 -12px 40px -14px rgba(0,0,0,.30);
  max-height:min(88vh,560px);overflow-y:auto;
  transform:translateY(100%);animation:cc-rise .32s var(--cc-ease) forwards;}

/* No dark overlay — the site stays visible/clickable. */
.cc-scrim{display:none;}

/* ---- Content: centered, max-width, transparent (surface is on .cc-wrap) ---- */
.cc-banner{position:relative;width:100%;max-width:1080px;margin:0 auto;
  background:transparent;color:var(--cc-fg);border:0;border-radius:0;box-shadow:none;
  padding:clamp(14px,2.4vw,20px) clamp(16px,4vw,30px);
  display:flex;flex-direction:column;gap:8px;}

.cc-banner:focus{outline:none;}

.cc-title{font-family:var(--cc-title-font);font-weight:600;
  font-size:clamp(16px,2.1vw,20px);line-height:1.15;letter-spacing:.01em;margin:0;}
.cc-body{font-size:13.5px;line-height:1.55;color:var(--cc-muted);margin:0;max-width:92ch;}
.cc-link{color:var(--cc-accent);text-underline-offset:2px;}
.cc-link:hover{text-decoration:none;}

/* ---- Categories: compact horizontal row in the bottom bar ---- */
.cc-cats{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 24px;
  border-top:1px solid var(--cc-line);padding:10px 0 2px;margin:2px 0;}
.cc-cat{flex:1 1 210px;min-width:180px;padding:0;border:0;}
.cc-cat__head{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.cc-cat__name{font-weight:500;font-size:15px;letter-spacing:.01em;}
.cc-cat__desc{margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--cc-muted);max-width:none;}
.cc-cat__badge{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--cc-accent);border:1px solid var(--cc-line);border-radius:999px;
  padding:3px 10px;white-space:nowrap;}

/* ---- Toggle switch ---- */
.cc-switch{position:relative;display:inline-flex;flex-shrink:0;cursor:pointer;}
.cc-switch__input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer;}
.cc-switch__track{width:44px;height:24px;border-radius:999px;background:#cdcbc3;
  border:1px solid var(--cc-switch-line);transition:background .2s var(--cc-ease);display:block;}
.cc-switch__thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s var(--cc-ease);}
.cc-switch__input:checked ~ .cc-switch__track{background:var(--cc-accent);}
.cc-switch__input:checked ~ .cc-switch__track .cc-switch__thumb,
.cc-switch__input:checked + .cc-switch__track .cc-switch__thumb{transform:translateX(20px);}
.cc-switch__input:focus-visible ~ .cc-switch__track{outline:2px solid var(--cc-focus);outline-offset:2px;}

/* ---- Actions: three EQUAL buttons (right-aligned on desktop) ---- */
.cc-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:2px;}
@media (min-width:560px){.cc-actions{grid-template-columns:1fr 1fr 1fr;}}
@media (min-width:860px){.cc-actions{grid-template-columns:repeat(3,minmax(120px,auto));justify-content:end;}}
.cc-btn{appearance:none;font-family:inherit;font-size:14px;font-weight:500;letter-spacing:.02em;
  padding:12px 16px;border-radius:var(--cc-btn-radius);cursor:pointer;
  background:var(--cc-surface);color:var(--cc-fg);border:1px solid var(--cc-fg);
  transition:background .18s var(--cc-ease),color .18s var(--cc-ease);text-align:center;}
.cc-btn:hover{background:var(--cc-fg);color:var(--cc-surface);}
.cc-btn:focus-visible{outline:2px solid var(--cc-focus);outline-offset:2px;}

/* ---- Animations ---- */
@keyframes cc-fade{to{opacity:1;}}
@keyframes cc-rise{to{transform:translateY(0);opacity:1;}}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .cc-wrap{animation:none;transform:none;}
  .cc-switch__track,.cc-switch__thumb,.cc-btn{transition:none;}
}

/* ---- Windows High Contrast / forced-colors: keep switch states distinct ---- */
@media (forced-colors:active){
  .cc-switch__track{border:1px solid CanvasText;background:Canvas;}
  .cc-switch__input:checked ~ .cc-switch__track{background:Highlight;}
  .cc-switch__thumb{background:CanvasText;}
  .cc-btn{border:1px solid CanvasText;}
}

/* ---- Dark scheme ---- */
@media (prefers-color-scheme:dark){
  [data-cc-root]{
    --cc-surface:#161310;--cc-surface-2:#1e1a15;
    --cc-fg:#F0EADB;--cc-muted:rgba(240,234,219,.66);
    --cc-line:rgba(240,234,219,.20);
    --cc-accent:#C9B488;--cc-accent-fg:#161310;--cc-focus:#C9B488;
    --cc-switch-line:rgba(240,234,219,.55);
    --cc-shadow:0 24px 60px -20px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.4);
  }
  .cc-switch__track{background:#413b31;}
  .cc-btn{border-color:var(--cc-fg);}
  .cc-btn:hover{background:var(--cc-fg);color:#161310;}
}