/* ==========================================================================
   Cookie consent banner — Complianz, wearing the site's own clothes
   ==========================================================================

   THIS FILE OWNS THE LOOK OF THE BANNER.

   Complianz keeps its colours in the database and stamps them into
   wp-content/uploads/complianz/css/banner-1-optin.css as a :root block of 33
   custom properties on every banner save. That generated file is rebuilt
   without warning, so it must never be edited by hand — and because it is
   regenerated, the colour pickers under Complianz → Cookie banner → Appearance
   will appear to do nothing while this stylesheet is loaded. That is the
   intended arrangement: the brand lives in the theme, with the rest of the
   brand, and travels in the deploy.

   HOW IT WORKS. Almost every rule Complianz ships reads a `var(--cmplz_*)`,
   so re-declaring those variables repaints the component without fighting a
   single one of its (0,5,0)-deep selectors. This sheet is enqueued after the
   generated one (functions.php, PHP_INT_MAX - 40), so equal specificity wins
   and no `!important` is needed anywhere below.

   Two traps worth knowing before editing:

     - The variable names are not consistently spelled. Thirty use an
       underscore after the prefix (`--cmplz_banner_width`); three do not
       (`--cmplz_categories-height`, `--cmplz-manage-consent-height`,
       `--cmplz-manage-consent-offset`). Copy them exactly or they no-op.
     - A handful of values have no variable at all — the category card's
       background, the toggle focus ring, the drop shadows and the button
       `white-space` — so those are overridden by selector further down.

   WHAT IS DELIBERATELY NOT TOUCHED. Nothing here changes behaviour. The
   plugin drives visibility through `.cmplz-hidden`, `.cmplz-show`,
   `.cmplz-dismissed` and `.cmplz-fade-in`, and its JS reveals the banner on
   the load event of its OWN stylesheet — so no `display` is set on the banner
   itself, no class is repurposed, and Accept and Deny keep identical size,
   shape and typography. Consent must be as easy to refuse as to give, so the
   two differ only in fill, never in prominence.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The palette
   The fallbacks are the real token values, copied from the :root block the
   theme ships. They matter: that block lives in v2-chrome.css / v2-home.css /
   v2-single.css, and a page type that loaded none of them would otherwise
   paint the banner with empty custom properties.
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner,
#cmplz-manage-consent {

  /* Surface */
  --cmplz_banner_width:             472px;
  --cmplz_banner_background_color:  var(--bg, #FFFFFF);
  --cmplz_banner_border_color:      var(--line, #E6EAF1);
  --cmplz_banner_border_width:      1px 1px 1px 1px;
  --cmplz_banner_border_radius:     20px 20px 20px 20px;

  /* Despite the name this is not a margin — it is the gap between the
     buttons and between the footer links. */
  --cmplz_banner_margin:            10px;

  /* Type. Complianz exposes one font-size field that writes the body, link
     and category sizes together; they are separated here so the message can
     read comfortably without the small print growing with it. */
  --cmplz_title_font_size:          19px;
  --cmplz_text_color:               var(--ink, #1E2B47);
  --cmplz_text_font_size:           13.5px;
  --cmplz_link_font_size:           12.5px;
  --cmplz_category_body_font_size:  12.5px;
  --cmplz_hyperlink_color:          var(--cta, #C8461F);
  --cmplz_button_font_size:         14px;

  /* Buttons. Pills, like every other button on the site. */
  --cmplz_button_border_radius:     999px 999px 999px 999px;

  --cmplz_button_accept_background_color: var(--cta, #C8461F);
  --cmplz_button_accept_border_color:     var(--cta, #C8461F);
  --cmplz_button_accept_text_color:       #FFFFFF;

  /* Deny is the house outline button: white, navy rule, navy text, and it
     inverts on hover. Same footprint as Accept. */
  --cmplz_button_deny_background_color:   var(--bg, #FFFFFF);
  --cmplz_button_deny_border_color:       var(--navy, #1E2B47);
  --cmplz_button_deny_text_color:         var(--navy, #1E2B47);

  /* Shared by "View preferences", "Save preferences" and "Manage options". */
  --cmplz_button_settings_background_color: var(--bg, #FFFFFF);
  --cmplz_button_settings_border_color:     var(--line, #E6EAF1);
  --cmplz_button_settings_text_color:       var(--ink-3, #56617A);

  /* Categories. The "always active" colour is hardcoded to the CSS keyword
     `green` in the plugin's PHP — the least on-brand value in the component. */
  --cmplz_category_header_title_font_size:  13.5px;
  --cmplz_category_header_active_font_size: 11.5px;
  --cmplz_category_header_always_active_color: var(--green, #1B7F4C);

  /* Toggles */
  --cmplz_slider_active_color:   var(--cta, #C8461F);
  --cmplz_slider_inactive_color: #C3CBD9;
  --cmplz_slider_bullet_color:   #FFFFFF;
}

/* --------------------------------------------------------------------------
   2. The card
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner {
  font-family: var(--font-body, "Inter", -apple-system, "Segoe UI", sans-serif);
  padding: 20px 22px;
  grid-gap: 12px;
  /* The shipped shadow is two hard black layers (0.19 and 0.23 alpha). The
     site's cards sit on a soft, navy-tinted lift instead. */
  box-shadow:
    0 24px 60px -28px rgba(30, 43, 71, .34),
    0 4px 14px rgba(30, 43, 71, .06);
}

/* Complianz repeats the shadow on .cmplz-show and then roughly doubles it on
   hover, which makes the whole panel jump when the pointer crosses it. Hold
   it steady. */
.cmplz-cookiebanner.cmplz-show,
.cmplz-cookiebanner.cmplz-show:hover {
  box-shadow:
    0 24px 60px -28px rgba(30, 43, 71, .34),
    0 4px 14px rgba(30, 43, 71, .06);
}

/* Width, and a trap worth recording. The banner is a fixed-position grid with
   no width of its own: what actually sized it was a hard
   `width: calc(var(--cmplz_banner_width) - 42px)` on the MESSAGE, the 42px
   being the plugin's own padding. Relaxing that to `auto` so the message
   could follow the padding set above removed the only constraint in play and
   the card stretched the full viewport. So the width is declared on the card
   itself, where it belongs, and the children are then free. */
@media (min-width: 768px) {
  .cmplz-cookiebanner {
    width: var(--cmplz_banner_width);
    max-width: calc(100vw - 20px);
  }

  .cmplz-cookiebanner .cmplz-message,
  .cmplz-cookiebanner .cmplz-categories {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   3. Header — logo, title, close
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner .cmplz-title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--navy, #1E2B47);
}

/* Complianz hides the title entirely below 425px. A consent dialogue that
   does not say what it is reads as an advert; it stays, one size down. */
@media (max-width: 425px) {
  .cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block;
    font-size: 17px;
  }
}

/* The banner logo is a 640x640 SQUARE lockup — the camel over the wordmark —
   not the horizontal one in the site header. Complianz caps it at 34px, which
   renders that whole lockup as an illegible 34x34 thumbnail. The header cell
   is 100px wide, so there is room to let it actually read. */
.cmplz-cookiebanner .cmplz-logo img {
  max-height: 48px;
  max-width: 92px;
  width: auto;
  object-fit: contain;
}

.cmplz-cookiebanner .cmplz-close {
  color: var(--ink-3, #56617A);
  border-radius: 999px;
  transition: color .18s ease;
}

.cmplz-cookiebanner .cmplz-close:hover {
  color: var(--cta, #C8461F);
  /* The shipped hover shrinks the glyph from 20px to 18px, which reads as a
     flinch. Colour alone is enough. */
  font-size: 20px;
  line-height: 20px;
}

/* The dividers ship as empty divs with no rule to draw them. Make them an
   intentional hairline, full-bleed across the card. */
.cmplz-cookiebanner .cmplz-divider {
  margin-left: -22px;
  margin-right: -22px;
  border-top: 1px solid var(--line, #E6EAF1);
}

/* --------------------------------------------------------------------------
   4. The message
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner .cmplz-message {
  color: var(--ink-2, #3A4660);
  line-height: 1.62;
  margin-bottom: 2px;
}

.cmplz-cookiebanner .cmplz-message a {
  color: var(--cta, #C8461F);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cmplz-cookiebanner .cmplz-message a:hover {
  color: var(--cta-hover, #A8391A);
}

/* --------------------------------------------------------------------------
   5. Categories — the "View preferences" state
   Same element as the banner, revealed by .cmplz-fade-in. Styling only.
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: #F7F9FC;
  border: 1px solid var(--line, #E6EAF1);
  border-radius: 12px;
  overflow: hidden;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) {
  margin-bottom: 8px;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
  padding: 11px 12px;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
  font-weight: 600;
  color: var(--navy, #1E2B47);
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
  font-weight: 600;
  letter-spacing: .01em;
}

/* The chevron is an inline SVG inheriting `color` from its button. */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle {
  color: var(--ink-3, #56617A);
  border-radius: 999px;
  transition: color .18s ease;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle:hover {
  color: var(--cta, #C8461F);
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
  color: var(--ink-3, #56617A);
  line-height: 1.6;
  padding: 0 12px 12px;
}

/* --------------------------------------------------------------------------
   6. Toggles
   The track is .cmplz-label:before, the knob is :after. Colours come from the
   variables above; the focus ring is hardcoded to #245fcc and is corrected
   here, matched to the plugin's own selector depth so it simply follows it.
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before {
  box-shadow: 0 0 0 3px var(--icon-soft, #FDECE7);
}

/* Each switch carries its accessible name in a `.screen-reader-text` span —
   and NOTHING on this site defines that class, so WordPress's standard
   visually-hidden text was painting a second, duplicate category name beside
   every toggle ("Preferences  [switch] Preferences"). The class is emitted by
   core and by plenty of plugins, so the same gap exists site-wide; this fixes
   only what the banner shows.
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner .cmplz-label .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   7. Buttons
   The house pill: 48px tall, 600 weight, inverting outline for the secondary.
   Accept and Deny are deliberately the same size and shape.
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner .cmplz-buttons {
  flex-wrap: wrap;
  gap: 10px;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  font-family: inherit;
  font-weight: 600;
  min-height: 48px;
  padding: 10px 22px;
  line-height: 1.25;
  border-width: 1.5px;
  /* The shipped `nowrap` is a real hazard here: TranslatePress serves longer
     French labels into these same buttons, and on a narrow card they would
     overflow rather than wrap. */
  white-space: normal;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover {
  transform: translateY(-1px);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible {
  outline: 2px solid var(--cta, #C8461F);
  outline-offset: 2px;
}

/* Accept — the brand CTA, with the same soft lift the site's primary buttons
   carry. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
  box-shadow: 0 12px 24px -16px rgba(200, 70, 31, .9);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
  background-color: var(--cta-hover, #A8391A);
  border-color: var(--cta-hover, #A8391A);
  color: #FFFFFF;
}

/* Deny — the outline button, inverting on hover exactly like .btn--line. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
  background-color: var(--navy, #1E2B47);
  border-color: var(--navy, #1E2B47);
  color: #FFFFFF;
}

/* View preferences — quieter than the two consent choices, but still a real
   button rather than a link. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
  border-color: var(--navy, #1E2B47);
  color: var(--navy, #1E2B47);
}

/* Save preferences — the confirming action once the categories are open, so
   it carries weight without competing with the terracotta Accept. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
  background-color: var(--navy, #1E2B47);
  border-color: var(--navy, #1E2B47);
  color: #FFFFFF;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
  background-color: var(--navy-2, #172238);
  border-color: var(--navy-2, #172238);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   8. Footer links
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner .cmplz-links .cmplz-link {
  color: var(--ink-3, #56617A);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(86, 97, 122, .35);
  transition: color .18s ease, text-decoration-color .18s ease;
}

.cmplz-cookiebanner .cmplz-links .cmplz-link:hover {
  color: var(--cta, #C8461F);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   9. The "Manage consent" pill, after the banner is dismissed
   It reads the same surface variables, so it only needs its type correcting.
   -------------------------------------------------------------------------- */
#cmplz-manage-consent .cmplz-manage-consent {
  font-family: var(--font-body, "Inter", -apple-system, "Segoe UI", sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #1E2B47);
  box-shadow: 0 -8px 26px -14px rgba(30, 43, 71, .4);
}

/* --------------------------------------------------------------------------
   10. Phones
   Below 768px Complianz drops the banner to a full-width sheet on the bottom
   edge and stacks the buttons. Give it the gutters and the rounded top edge
   the rest of the site uses, and keep it clear of the home indicator.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .cmplz-cookiebanner {
    border-radius: 20px 20px 0 0;
    border-width: 1px 0 0 0;
    padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 50px -24px rgba(30, 43, 71, .4);
  }

  .cmplz-cookiebanner .cmplz-divider {
    margin-left: -18px;
    margin-right: -18px;
  }

  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    width: 100%;
  }
}