/* =================================================================
   RSG Cookie Consent

   Portable by design. Every colour and shape is a custom property, so
   a theme restyles the banner without editing this file:

     :root{
       --rsg-cc-accent:#df2c23;
       --rsg-cc-radius:16px;
     }

   Where a theme already publishes a token (--red, --ink, --line), this
   file picks it up automatically and falls back to a neutral value.
   ================================================================= */

:root{
  --rsg-cc-bg:         var(--paper, #ffffff);
  --rsg-cc-fg:         var(--ink, #15171c);
  --rsg-cc-muted:      var(--muted, #5f646e);
  --rsg-cc-line:       var(--line, #e2e4e9);

  /* Deliberately neutral. A consent banner is site furniture, not a call to
     action, and a brand-coloured Accept button reads as a nudge. Override
     --rsg-cc-accent only if the neutral treatment clashes with the design. */
  --rsg-cc-accent:     #1e2128;
  --rsg-cc-accent-fg:  #ffffff;
  --rsg-cc-btn-line:   #c3c7d0;

  --rsg-cc-radius:     14px;
  --rsg-cc-shadow:     0 -2px 28px rgba(10,12,18,.10);
  --rsg-cc-z:          99999;
  --rsg-cc-font:       inherit;

  /* Align with the theme's own container, so the banner shares the page grid. */
  --rsg-cc-max:        var(--maxw, 1280px);
  --rsg-cc-pad:        var(--pad, clamp(20px, 4.5vw, 48px));
}

/* Some themes reset [hidden]. Make sure it always holds. */
.rsg-cc[hidden],
.rsg-cc [hidden]{ display:none !important; }

.rsg-cc,
.rsg-cc *{ box-sizing:border-box; }

.rsg-cc{
  position:fixed; inset:0; z-index:var(--rsg-cc-z);
  pointer-events:none;
  font-family:var(--rsg-cc-font);
  color:var(--rsg-cc-fg);
}

.rsg-cc__scrim{
  position:fixed; inset:0; pointer-events:auto;
  background:rgba(12,14,20,.55);
}

html.rsg-cc-locked, html.rsg-cc-locked body{ overflow:hidden; }

/* ------------------------------------------------------------- banner */

.rsg-cc__banner{
  position:absolute; pointer-events:auto;
  background:var(--rsg-cc-bg);
  border:1px solid var(--rsg-cc-line);
  box-shadow:var(--rsg-cc-shadow);
  padding:1.15rem 1.3rem;
}

/* Bar across the bottom.
   The padding formula caps the content to --rsg-cc-max and centres it, without
   needing a wrapper element in the markup. */
.rsg-cc--bar .rsg-cc__banner{
  left:0; right:0; bottom:0;
  border-left:0; border-right:0; border-bottom:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(1.5rem, 5vw, 4rem);
  padding:1.25rem max(var(--rsg-cc-pad), calc((100% - var(--rsg-cc-max)) / 2));
}
.rsg-cc--bar .rsg-cc__title{ grid-column:1; grid-row:1; margin:0 0 .3rem; }
.rsg-cc--bar .rsg-cc__text{ grid-column:1; grid-row:2; margin:0; max-width:78ch; }
.rsg-cc--bar .rsg-cc__actions{ grid-column:2; grid-row:1 / span 2; justify-content:flex-end; }

/* Box, bottom left. */
.rsg-cc--box .rsg-cc__banner{
  left:clamp(.75rem, 3vw, 1.5rem);
  bottom:clamp(.75rem, 3vw, 1.5rem);
  width:min(30rem, calc(100vw - 1.5rem));
  border-radius:var(--rsg-cc-radius);
}

/* Centred, with the page dimmed. */
.rsg-cc--modal .rsg-cc__banner{
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(34rem, calc(100vw - 1.5rem));
  border-radius:var(--rsg-cc-radius);
}

.rsg-cc__title{
  margin:0 0 .4rem; padding:0;
  font-size:.98rem; font-weight:700; line-height:1.35; letter-spacing:-.01em;
  color:var(--rsg-cc-fg);
}

.rsg-cc__text{
  margin:0 0 .9rem;
  font-size:.875rem; line-height:1.6;
  color:var(--rsg-cc-muted);
}

.rsg-cc__policy{ color:inherit; text-decoration:underline; }

.rsg-cc__actions{
  display:flex; flex-wrap:wrap; gap:.55rem; align-items:center;
}

/* ------------------------------------------------------------ buttons */

.rsg-cc__btn{
  font:inherit; font-size:.875rem; font-weight:600; line-height:1.2;
  padding:.62rem 1.25rem;
  min-width:7.5rem;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}

/* Accept and reject are drawn identically. The ICO expects equal prominence,
   and a neutral outline keeps both out of the site's call-to-action language. */
.rsg-cc__btn--primary{
  background:var(--rsg-cc-bg);
  color:var(--rsg-cc-fg);
  border-color:var(--rsg-cc-btn-line);
}
.rsg-cc__btn--primary:hover{
  background:var(--rsg-cc-accent);
  color:var(--rsg-cc-accent-fg);
  border-color:var(--rsg-cc-accent);
}

/* The panel's save button is the only filled control, because it confirms a
   choice the visitor has already made rather than pushing one. */
.rsg-cc__btn--ghost{
  background:var(--rsg-cc-bg);
  color:var(--rsg-cc-fg);
  border-color:var(--rsg-cc-btn-line);
}
.rsg-cc__btn--ghost:hover{
  background:var(--rsg-cc-accent);
  color:var(--rsg-cc-accent-fg);
  border-color:var(--rsg-cc-accent);
}

.rsg-cc__btn--quiet{
  background:transparent;
  color:var(--rsg-cc-muted);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  min-width:0;
  padding-left:.5rem; padding-right:.5rem;
}
.rsg-cc__btn--quiet:hover{ color:var(--rsg-cc-fg); }

.rsg-cc__btn:focus-visible,
.rsg-cc__close:focus-visible,
.rsg-cc-link:focus-visible{
  outline:2px solid var(--rsg-cc-accent);
  outline-offset:2px;
}

/* The reopen link. Drawn as a link, not a button, wherever it sits. */
.rsg-cc-link{
  font:inherit; color:inherit;
  background:none; border:0; padding:0; margin:0;
  cursor:pointer; text-decoration:underline;
}

/* -------------------------------------------------------------- panel */

.rsg-cc__panel{
  position:absolute; pointer-events:auto;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(34rem, calc(100vw - 1.5rem));
  max-height:min(84vh, 44rem);
  display:flex; flex-direction:column;
  background:var(--rsg-cc-bg);
  border:1px solid var(--rsg-cc-line);
  border-radius:var(--rsg-cc-radius);
  box-shadow:var(--rsg-cc-shadow);
}

.rsg-cc__panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.3rem;
  border-bottom:1px solid var(--rsg-cc-line);
}
.rsg-cc__panel-head .rsg-cc__title{ margin:0; font-size:1.08rem; }

.rsg-cc__close{
  flex:none;
  width:2rem; height:2rem;
  display:grid; place-items:center;
  background:none; border:0; border-radius:999px;
  color:var(--rsg-cc-muted); cursor:pointer;
}
.rsg-cc__close:hover{ color:var(--rsg-cc-fg); }
.rsg-cc__close svg{ width:1.05rem; height:1.05rem; }

.rsg-cc__panel-body{
  padding:.4rem 1.3rem 1.1rem;
  overflow:auto;
}

.rsg-cc__cat{ padding:1rem 0; border-bottom:1px solid var(--rsg-cc-line); }
.rsg-cc__cat:last-of-type{ border-bottom:0; }

.rsg-cc__cat-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}

.rsg-cc__cat-label{ font-weight:600; font-size:.95rem; }

.rsg-cc__cat-desc{
  margin:.4rem 0 0;
  font-size:.85rem; line-height:1.55;
  color:var(--rsg-cc-muted);
}

.rsg-cc__badge{
  flex:none;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:999px;
  background:var(--mist, #f2f3f7);
  color:var(--rsg-cc-muted);
}

/* Switch. A real checkbox, visually hidden, so it stays keyboard usable. */
.rsg-cc__switch{
  display:inline-flex; align-items:center; gap:.6rem;
  cursor:pointer;
}
.rsg-cc__switch input{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}
.rsg-cc__switch-ui{
  flex:none;
  width:2.4rem; height:1.35rem;
  border-radius:999px;
  background:var(--line-2, #d5d8e0);
  position:relative;
  transition:background-color .16s ease;
}
.rsg-cc__switch-ui::after{
  content:""; position:absolute; top:.17rem; left:.17rem;
  width:1rem; height:1rem; border-radius:999px;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .16s ease;
}
.rsg-cc__switch input:checked + .rsg-cc__switch-ui{ background:var(--rsg-cc-accent); }
.rsg-cc__switch input:checked + .rsg-cc__switch-ui::after{ transform:translateX(1.05rem); }
.rsg-cc__switch input:disabled + .rsg-cc__switch-ui{ opacity:.55; }
.rsg-cc__switch input:disabled ~ .rsg-cc__cat-label{ cursor:default; }
.rsg-cc__switch input:focus-visible + .rsg-cc__switch-ui{
  outline:2px solid var(--rsg-cc-accent); outline-offset:2px;
}

.rsg-cc__panel-policy{ margin:1rem 0 0; font-size:.85rem; }

.rsg-cc__panel-foot{
  display:flex; flex-wrap:wrap; gap:.55rem;
  padding:1rem 1.3rem;
  border-top:1px solid var(--rsg-cc-line);
}
.rsg-cc__panel-foot .rsg-cc__btn--primary{
  background:var(--rsg-cc-accent);
  color:var(--rsg-cc-accent-fg);
  border-color:var(--rsg-cc-accent);
}
.rsg-cc__panel-foot .rsg-cc__btn--primary:hover{ filter:brightness(1.25); }

/* ------------------------------------------------------- small screens */

/* Below the two-column threshold the bar stacks: text, then buttons. */
@media (max-width:900px){
  .rsg-cc--bar .rsg-cc__banner{
    grid-template-columns:minmax(0,1fr);
    row-gap:1rem;
  }
  .rsg-cc--bar .rsg-cc__actions{
    grid-column:1; grid-row:3;
    justify-content:flex-start;
  }
}

@media (max-width:640px){
  .rsg-cc--bar .rsg-cc__banner{ border-radius:0; }
  .rsg-cc__actions,
  .rsg-cc__panel-foot{ flex-direction:column; align-items:stretch; }
  .rsg-cc__btn{ width:100%; }
  .rsg-cc__btn--quiet{ padding-top:.4rem; padding-bottom:.4rem; }
  .rsg-cc__panel{ max-height:88vh; }
}

@media (prefers-reduced-motion:reduce){
  .rsg-cc *{ transition:none !important; }
}