/* ============================================================
   DJC_ConsentBanner -- HIGH-VISIBILITY SKIN

   Additive layer. Loads AFTER the base sheet and wins on source
   order alone -- every selector here is the same flat single class
   the base uses, so nothing needs a specificity bump or
   !important. Removing the <link> restores the base look exactly;
   this file changes no behaviour and no markup.

   Why it exists: the base strip was tuned to read as browser
   chrome rather than an interruption, which was right while
   nothing non-essential ran until the visitor chose. With
   analytics opening granted outside the opt-in regions, the strip
   is now the notice that something is already running, and the
   opt-out regimes expect that notice to be conspicuous. A strip
   nobody registers is a weaker disclosure, not a politer one.

   What this file may NEVER do: give accept a different weight,
   colour, size, order, or hover treatment than reject. They share
   one rule with no modifier on either, exactly as in the base, and
   every change below moves both together. Equal prominence is a
   legal requirement. For the same reason nothing here uses
   --brand-3, the give / download cta colour -- a consent button
   that looks like a donate button is a persuasion cue.

   Contrast only ever goes UP from the base. The muted line carries
   the mandated purpose-and-vendor disclosure at small sizes, so
   its ratio is a compliance property: base shipped 5.0:1 on the
   sheet and 4.8:1 on the strip, this skin lands 6.9:1 and 6.2:1.
   Do not soften these greys to taste, and re-measure the muted line
   against any new surface tint before shipping it.

   Like the base, this ships on pages that never load
   campaign-base.css, so every color-mix() is preceded by a flat
   declaration and every house token is read with a fallback.
   ============================================================ */

/* ========================================
   TOKENS
   ======================================== */
.djc-consent {
  /* a blue tint rather than the near-white the base used, so the
     strip separates from an ordinary white page instead of blending
     into the bottom of it. the sheet stays white on purpose -- the
     category rows are a reading surface and want no cast. */
  --dc-surface-alt: #eef2fa;

  /* darker than the base across the board, and shifted a few
     degrees cool so the type sits on the blue surface rather than
     on top of it. the muted line carries the mandated disclosure:
     6.2:1 on the strip and 6.9:1 on the sheet, both up from base */
  --dc-ink: #1f2124;
  --dc-ink-strong: #0f1114;
  --dc-ink-muted: #565a63;
  --dc-line: #d3dae8;
  --dc-line-strong: #5b6472;

  /* the house royal blue, as a literal. measures 7.6:1 on white --
     better than the notice blue it replaces -- and matching the rule
     above keeps links, focus ring and switch reading as one family
     instead of two near-identical blues */
  --dc-accent: #2a5298;

  /* the top rule: royal blue into royal purple, the house primary
     and secondary. LITERAL on purpose rather than var(--brand-1) --
     the seasonal [data-brand] blocks retint those to wine and to
     teal, and this component ships on every page including ones
     that never load the base sheet at all. a compliance notice that
     changes colour per campaign is a bug, not theming. */
  --dc-edge-from: #2a5298;
  --dc-edge-to: #6b2d8b;
  --dc-edge-size: 3px;

  /* kept defined so the parked sheet rule further down still
     resolves if it is ever switched back on */
  --dc-edge: var(--dc-edge-from);

  /* stronger confirmation colours. the gpc notice reports that we
     already turned something off for the visitor, which is the one
     message in the component worth making unmissable */
  --dc-ok-bkg: #dff0e6;
  --dc-ok-ink: #245c42;
  --dc-ok-line: #a9d4bb;

  /* the off track still has to clear 3:1 on its own; this sits
     nearer 4:1 and reads as "off" more definitely than the base */
  --dc-switch-off: #7a7a77;

  /* up one step from the base. the disclosure line was running at
     11-12px, which is legible but easy to skip past */
  --dc-size-body: clamp(13px, 1.5vw, 14px);
  --dc-size-label: clamp(12px, 1.3vw, 13px);
}

/* links carry the accent already, but at this size they need to be
   unmistakably links and not just coloured words */
.djc-consent a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* a 2px ring at 3px offset -- the base ring was sized for a quiet
   component and gets lost against the heavier chrome below */
.djc-consent :focus-visible {
  outline: 3px solid var(--dc-accent);
  outline-offset: 3px;
}

/* ========================================
   STRIP
   ======================================== */
/* the accent rule plus the lift are what actually make the strip
   register. the base deliberately had neither -- it wanted browser
   chrome; this wants a notice */
/* the flat colour stays as the fallback and border-image paints the
   sweep over it -- anything that cannot do border-image still gets a
   solid royal-blue rule rather than no rule at all. slice 1 on a
   horizontal gradient means every slice is identical, so the top
   edge shows the full blue-to-purple run. */
.djc-consent__strip {
  border-top: var(--dc-edge-size) solid var(--dc-edge-from);
  border-image: linear-gradient(90deg, var(--dc-edge-from), var(--dc-edge-to)) 1;
  box-shadow: 0 -3px 24px rgb(15 17 20 / 0.20);
  box-shadow: 0 -3px 24px color-mix(in srgb, var(--dc-ink-strong) 20%, transparent);
}

.djc-consent__strip-in {
  gap: 10px 18px;
  padding: 13px 18px;
}

.djc-consent__copy {
  line-height: 1.5;
}

/* the sentence is the disclosure, so it runs at the strongest ink
   in the component rather than body ink */
.djc-consent__text {
  color: var(--dc-ink-strong);
  font-weight: 500;
}

/* ========================================
   BUTTONS
   ======================================== */
/* ONE rule, no modifier on accept or reject, same as the base.
   both get the heavier border, the darker label, and the larger
   target together -- if a future edit needs to target one of them
   individually, that edit is wrong */
.djc-consent__btn {
  min-width: 124px;
  padding: 9px 18px;
  font-weight: 600;
  color: var(--dc-ink-strong);
  background: var(--dc-surface);
  border: 1px solid #6f6f6c;
  border: 1px solid color-mix(in srgb, var(--dc-ink) 62%, white);
}

/* hover tints toward the accent instead of grey -- colour on both
   buttons equally, which is the only way colour is allowed in here */
.djc-consent__btn:hover {
  background: #ecf0f6;
  background: color-mix(in srgb, var(--dc-accent) 9%, white);
  border-color: var(--dc-accent);
}

.djc-consent__btn:active {
  background: #dde3ef;
  background: color-mix(in srgb, var(--dc-accent) 16%, white);
}

.djc-consent__btn--accept,
.djc-consent__btn--accept:hover,
.djc-consent__btn--accept:active {
  color: #ffffff;
  background: var(--dc-accent);
  border-color: var(--dc-accent);
}

.djc-consent__btn--accept:hover {
  background: #203f75;
  border-color: #203f75;
}

/* ========================================
   GPC NOTICE
   ======================================== */
.djc-consent__gpc {
  padding: 8px 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--dc-ok-line);
}

/* ========================================
   SHEET
   ======================================== */
/* the sheet picks up the same edge so the two layers still read as
   one object opening, now with a shared accent seam */
/* 15px wider than the base. this skin runs the vendor line a size up, which
   is what pushed the shortest vendor string onto a line of its own -- so the
   width lives here with the type that caused it, not in the base sheet */
.djc-consent__sheet {
  max-width: 575px;
  /* border-top: var(--dc-edge-size) solid var(--dc-edge); */
  box-shadow: 0 -4px 28px rgb(15 17 20 / 0.22);
  box-shadow: 0 -4px 28px color-mix(in srgb, var(--dc-ink-strong) 22%, transparent);
}

.djc-consent__scrim {
  background: rgb(15 17 20 / 0.45);
  background: color-mix(in srgb, var(--dc-ink-strong) 45%, transparent);
}

.djc-consent__head {
  padding: 16px 20px 14px;
}

.djc-consent__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--dc-ink-strong);
}

.djc-consent__close {
  font-size: 20px;
  color: var(--dc-ink);
}

.djc-consent__row {
  gap: 18px;
  padding: 14px 20px;
}

.djc-consent__row-label {
  color: var(--dc-ink-strong);
}

.djc-consent__row-locked {
  font-size: 12px;
  color: var(--dc-ink);
}

.djc-consent__foot {
  gap: 10px;
  padding: 16px 20px;
}

/* ========================================
   TOGGLE
   ======================================== */
/* a larger target as well as a louder one -- these switches are how
   a visitor turns analytics off, so they are the working controls
   of the component, not decoration */
.djc-consent__toggle {
  width: 44px;
  height: 26px;
}

.djc-consent__toggle::after {
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
}

.djc-consent__toggle.is-on::after {
  transform: translateX(18px);
}

/* ========================================
   REOPEN
   ======================================== */
/* the pill is the only withdrawal affordance on the page once a
   choice is recorded, so it carries the accent outright. a
   withdrawal control that is harder to find than the original
   banner defeats the point of having one */
.djc-consent__reopen {
  padding: 8px 14px;
  font-weight: 600;
  color: var(--dc-accent);
  background: var(--dc-surface);
  border: 1px solid var(--dc-accent);
  box-shadow: 0 1px 8px rgb(15 17 20 / 0.14);
  box-shadow: 0 1px 8px color-mix(in srgb, var(--dc-ink-strong) 14%, transparent);
}

.djc-consent__reopen:hover {
  color: var(--dc-surface);
  background: var(--dc-accent);
}

/* ========================================
   RESPONSIVE
   ======================================== */
/* the buttons still go full width together and never one before
   the other -- a stacked accept above a stacked reject would read
   as a hierarchy no matter how identical the two rules are */
@media (max-width: 620px) {
  .djc-consent__strip-in {
    padding: 12px 14px;
  }

  .djc-consent__btn {
    min-width: 0;
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {

  .djc-consent__btn,
  .djc-consent__reopen {
    transition: none;
  }
}