/* Consent banner, wearing the brand.

   The vendored stylesheet (assets/vendor/cookieconsent-3.1.0.css) is never
   edited — it is upstream's file, verbatim, so a version bump is a drop-in.
   Everything here is an override on top of it, and all of it goes through the
   library's own custom properties where they exist rather than fighting its
   selectors.

   The palette is the site's, taken from the same tokens the pages use, so the
   box reads as part of inrelay rather than a compliance widget parked on top:
   canvas ground, ink text, clay for the primary action, the same 18px radius
   and shadow as .answer, mono for the small print. */

#cc-main {
  --cc-font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  --cc-bg: var(--card, #FFFDFA);
  --cc-primary-color: var(--ink, #1E1A16);
  --cc-secondary-color: var(--ink-3, #6b6157);

  --cc-btn-primary-bg: var(--ink, #1E1A16);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--ink, #1E1A16);
  --cc-btn-primary-hover-bg: var(--clay, #A8451C);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--clay, #A8451C);

  /* NOTE what --cc-btn-secondary-* actually styles here: NOT the refusal.
     Upstream gives Accept and "Only essential" the same `cm__btn` class, so
     they are identical by default - which is the arrangement the rules want,
     and the job is simply not to break it. Renaming the refusal is fine and
     is arguably clearer; DE-EMPHASISING it is the thing regulators fine for,
     so if a future change makes these two look different, that is a bug. `cm__btn--secondary` is the third,
     quieter "What this means" control. Checked in the DOM rather than
     assumed; the first version of this file had the comment the other way
     round and styled the wrong button. */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--ink, #1E1A16);
  --cc-btn-secondary-border-color: var(--line-2, rgba(30,26,22,.18));
  --cc-btn-secondary-hover-bg: rgba(30,26,22,.06);
  --cc-btn-secondary-hover-color: var(--ink, #1E1A16);
  --cc-btn-secondary-hover-border-color: var(--ink, #1E1A16);

  --cc-separator-border-color: var(--line-2, rgba(30,26,22,.14));
  --cc-toggle-on-bg: var(--clay, #A8451C);
  --cc-toggle-off-bg: var(--line-2, rgba(30,26,22,.28));
  --cc-toggle-readonly-bg: rgba(30,26,22,.12);
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-cookie-category-block-bg: var(--canvas, #F2EEE6);
  --cc-cookie-category-block-border: var(--line-2, rgba(30,26,22,.12));
  --cc-cookie-category-block-hover-bg: var(--canvas, #F2EEE6);
  --cc-overlay-bg: rgba(12,11,9,.45);
  --cc-link-color: var(--clay, #A8451C);
  --cc-btn-border-radius: 100px;
}

/* ...but 100px must NOT reach the preference blocks. Upstream drives BOTH the
   buttons and the category sections from --cc-btn-border-radius, so a pill
   radius meant for a 42px button turns a multi-line block into a lozenge with
   the text bulging out of the curve. Give the blocks a card radius instead;
   the buttons keep their pill. */
/* ONE card per category, not two stacked boxes. Upstream borders and rounds
   the title and the description wrapper separately, which with a card radius
   reads as two tiles with a doubled border between them. Put the border and
   the radius on the section, clip the children to it, and separate them with a
   single hairline. */
#cc-main .pm__section,
#cc-main .pm__section--toggle {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--cc-cookie-category-block-border);
}
#cc-main .pm__section-title,
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border-radius: 0;
  border: 0;
}
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border-top: 1px solid var(--cc-cookie-category-block-border);
}

/* the card itself: the same corner and shadow language as .answer */
#cc-main .cm,
#cc-main .pm {
  border-radius: 18px;
  border: 1px solid var(--line-2, rgba(30,26,22,.12));
  box-shadow: var(--shadow, 0 18px 40px -20px rgba(30,26,22,.28));
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--serif, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  letter-spacing: -.01em;
}
#cc-main .cm__title { font-size: 21px; }

#cc-main .cm__desc,
#cc-main .pm__desc { font-size: 14px; line-height: 1.55; }

/* the buttons are pills, like every other action on the site */
#cc-main .cm__btn,
#cc-main .pm__btn { font-weight: 600; letter-spacing: .01em; }

/* "What this means" is a quiet third option, not a button competing with the
   two real choices. The class is cm__btn--secondary - the earlier guess at
   cm__link-group/cm__btn--close matched nothing, so it rendered as a third
   outlined pill. */
#cc-main .cm__btn--secondary,
#cc-main .pm__btn--secondary {
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  color: var(--ink-3, #6b6157);
}
#cc-main .cm__btn--secondary:hover,
#cc-main .pm__btn--secondary:hover {
  background: none;
  color: var(--ink, #1E1A16);
}

/* the injected footer link inherits the legal row's styling by being a clone,
   so it needs nothing here beyond a pointer */
.foot-legal [data-cc-open] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  #cc-main .cm, #cc-main .pm { transition: none !important; animation: none !important; }
}