/* ==========================================================================
   Complianz cookie-consent banner — restyled to match the site's
   locked-in "Chocolate Rose" brand system instead of Complianz's stock
   look. Reads as a small dark editorial card, consistent with the
   site's .section-dark treatment, using the same button system as the
   rest of the site (.btn-primary / .btn-outline-light in base.css) so
   nothing here is a one-off invented style.

   Loaded after Complianz's own generated banner CSS so these rules win
   on equal specificity; a few !important flags are used only where
   Complianz's own stylesheet is more specific than a plain class
   selector can beat cleanly (documented inline).
   ========================================================================== */

.cmplz-cookiebanner {
  background: var(--chocolate-deep) !important;
  color: var(--offwhite);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px -12px rgba(var(--ink-deep-rgb), 0.55), 0 0 0 1px var(--line-on-dark);
  font-family: var(--font-body);
  /* Complianz's own stylesheet has no max-width, letting the
     banner/preferences card stretch to whatever container width it's
     placed in, which reads as oversized on mobile. Capped here plus
     tighter internal spacing. Complianz's Style tab may offer a native
     "compact" banner option worth checking before extending this
     further. */
  max-width: 360px !important;
  padding: 1.2em 1.3em !important;
}
@media (max-width: 600px) {
  .cmplz-cookiebanner {
    /* Complianz's "bottom-right" variant positions this via
       `right` only, leaving `left: auto`. That left it resolving
       flush against the left edge with the entire margin dumped on
       the right (mobile QA, 2026-07-31: "not fully expanded, gap on
       right side"). Anchoring `left` to match `right` makes the
       card float with equal margins on both sides instead. */
    max-width: calc(100vw - 2.5rem) !important;
    left: 1.25rem !important;
    right: 1.25rem !important;
    padding: 1em 1.1em !important;
  }
}

.cmplz-header {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

/* Real DOM check on staging (2026-07-28, headless-Chrome via the footer's
   "Cookie Preferences" link): the "Manage Consent" heading is a plain
   <div class="cmplz-title"> (id cmplz-header-1-optin), not an h1/h2 — an
   earlier version of this rule assumed it might vary by Complianz version
   and added an h1/h2/h3 fallback that never actually matched anything.
   Removed that dead rule; `!important` added here instead, since without
   it this lost to Complianz's own stylesheet (verified: computed color
   was rgb(34,34,34), not the off-white below, until this was added). */
.cmplz-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--offwhite) !important;
}

/* Complianz's default logo slot is unused here — the banner already
   sits inside a branded site, it doesn't need its own logo mark. */
.cmplz-header .cmplz-logo {
  display: none;
}

.cmplz-close {
  color: rgba(var(--offwhite-rgb), 0.7) !important;
}
.cmplz-close:hover {
  color: var(--offwhite) !important;
}

.cmplz-divider {
  background: var(--line-on-dark) !important;
  opacity: 1;
}

.cmplz-message,
.cmplz-description {
  font-family: var(--font-body);
  color: rgba(var(--offwhite-rgb), 0.85) !important;
  line-height: 1.6;
}

.cmplz-category-title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--offwhite) !important;
}

/* Complianz sets this to a hardcoded "green" via
   --cmplz_category_header_always_active_color, meant for a white
   banner — overridden here to fit the dark card. */
.cmplz-always-active {
  color: rgba(var(--offwhite-rgb), 0.6) !important;
  font-size: 0.78em;
}

/* Any inline link inside the message/category copy (Complianz sets
   these to a bright blue, --cmplz_hyperlink_color, sized for a white
   background). */
.cmplz-message a,
.cmplz-description a {
  color: var(--accent-candle) !important;
}

/* Checkbox accent — Complianz renders these as styled toggle/checkbox
   controls via ::before/::after on the label, keyed off accent-color
   on modern browsers plus a background override for older ones. */
.cmplz-consent-checkbox {
  accent-color: var(--accent-terracotta);
}
.cmplz-consent-checkbox:checked + .cmplz-label {
  background: var(--accent-terracotta) !important;
  border-color: var(--accent-terracotta) !important;
}

.cmplz-category-toggle {
  color: rgba(var(--offwhite-rgb), 0.7) !important;
}
.cmplz-category-toggle:hover {
  color: var(--offwhite) !important;
}

/* -- Buttons: reuse the site's real button system instead of a new one -- */

.cmplz-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}

.cmplz-btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95em 1.9em;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cmplz-btn:hover {
  transform: translateY(-2px);
}

/* Accept — same treatment as .btn-primary elsewhere on the site.
   Real-browser QA (axe-core, 2026-08-01): offwhite text on plain
   --accent-terracotta measured ~4.44:1, a narrow miss of 4.5:1 - same
   near-miss family as .eyebrow/.card-link/.event-meta-item .label
   above, same fix (25% mix toward --ink for a safe margin). */
.cmplz-btn.cmplz-accept {
  background: color-mix(in srgb, var(--accent-terracotta) 75%, var(--ink) 25%) !important;
  color: var(--offwhite) !important;
  border-color: color-mix(in srgb, var(--accent-terracotta) 75%, var(--ink) 25%) !important;
}
.cmplz-btn.cmplz-accept:hover {
  background: var(--chocolate) !important;
  border-color: var(--chocolate) !important;
}

/* Save preferences — kept visible (used inside Complianz's own
   preferences panel once opened, e.g. from the Opt-out preferences
   page), same treatment as .btn-outline-light. */
.cmplz-btn.cmplz-save-preferences {
  background: transparent !important;
  color: var(--offwhite) !important;
  border-color: var(--line-on-dark) !important;
}
.cmplz-btn.cmplz-save-preferences:hover {
  background: var(--offwhite) !important;
  color: var(--chocolate) !important;
  border-color: var(--offwhite) !important;
}

/* Deny/Reject button and the in-banner "Preferences" button are both
   hidden — the banner itself shows only "I Understand". The site's one
   real "Opt-out preferences" page (footer link, template-parts/footer.php)
   is the single place to manage/opt out, not a second in-banner
   preferences panel duplicating that function. Complianz's own native
   "hide reject/preferences button" toggle (Consent > Settings) was
   checked and doesn't cover this case, so this CSS fallback stays.
   Note: this hides the buttons visually only — it does not itself
   change what Complianz's own opt-in consent-resolution logic still
   technically allows. */
.cmplz-btn.cmplz-deny,
.cmplz-btn.cmplz-view-preferences {
  display: none !important;
}

.cmplz-documents .cmplz-link {
  font-family: var(--font-body);
  color: rgba(var(--offwhite-rgb), 0.75) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cmplz-documents .cmplz-link:hover {
  color: var(--offwhite) !important;
}

/* Complianz's own persistent "Manage consent" floating icon (auto-shown
   after a first decision, on every page, in a corner) is removed — it
   read as odd/obtrusive, especially on mobile.
   Replaced with a plain "Cookie Preferences" text link in the footer
   (template-parts/footer.php) that reuses the `cmplz-manage-consent`
   class Complianz's own script listens on, without `.cmplz-btn` and
   without living inside Complianz's fixed-position floating container —
   so this selector (specific to the real floating button/container) hides
   only the floating icon, not the footer link.
   NOTE: not yet verified live against the real staging Complianz install
   in this session (no browser/staging access) — Complianz's exact
   floating-icon markup can vary slightly by version, so re-check on
   staging that the icon is actually gone and the footer link still
   reopens the dialog before calling this done. */
#cmplz-manage-consent-container,
.cmplz-manage-consent-container,
button.cmplz-btn.cmplz-manage-consent {
  display: none !important;
}