/* Twoplus: the Complianz cookie banner, preferences and "manage consent" tab in the site's look.
   Loaded only on the front end and only when Complianz is active (inc/assets.php).

   How it stays update-proof:
   - Complianz styles everything through its --cmplz_* variables (declared on :root in its generated banner CSS).
     They are redefined here on the banner's own containers, so they win whatever order the stylesheets load in,
     including banner CSS that Complianz adds later from JavaScript. They point at the theme's tokens, so the banner
     follows the dark/light switch live.
   - The few other rules are scoped to the stable container ids (#cmplz-cookiebanner-container, #cmplz-manage-consent)
     and the documented classes; no !important except where noted.
   - Markup and texts are untouched (Complianz/Polylang translate them).

   Compliance: Accept and Deny look exactly the same (same size, colours and weight); Preferences stays visible as a
   secondary button; all text is WCAG AA on both themes; focus rings use the site's accent. Visual only: consent
   handling and script blocking are Complianz's own. */

#cmplz-cookiebanner-container,
#cmplz-manage-consent {
  --cmplz_banner_width: 440px;
  --cmplz_banner_background_color: var(--card);
  --cmplz_banner_border_color: var(--line);
  --cmplz_banner_border_width: 1px;
  --cmplz_banner_border_radius: calc(var(--radius) * 2);
  --cmplz_banner_margin: 10px;
  --cmplz_text_color: var(--ink);
  --cmplz_hyperlink_color: var(--ink);
  --cmplz_title_font_size: var(--step-0);
  --cmplz_text_font_size: var(--step--1);
  --cmplz_text_line_height: 1.55;
  --cmplz_link_font_size: var(--step--2);
  --cmplz_category_header_title_font_size: var(--step--1);
  --cmplz_category_header_active_font_size: var(--step--2);
  --cmplz_category_body_font_size: var(--step--2);
  --cmplz_category_header_always_active_color: var(--muted);
  --cmplz_button_font_size: var(--step--1);
  --cmplz_button_border_radius: 999px;
  /* Accept and Deny: identical on purpose (equal prominence). */
  --cmplz_button_accept_background_color: var(--ink);
  --cmplz_button_accept_border_color: var(--ink);
  --cmplz_button_accept_text_color: var(--paper);
  --cmplz_button_deny_background_color: var(--ink);
  --cmplz_button_deny_border_color: var(--ink);
  --cmplz_button_deny_text_color: var(--paper);
  /* Preferences / Save: the site's outline button. */
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--ink);
  --cmplz_button_settings_text_color: var(--ink);
  --cmplz_slider_active_color: var(--accent);
  --cmplz_slider_inactive_color: var(--muted);
  --cmplz_slider_bullet_color: #fff;
  --tp-cmplz-shadow: 0 18px 48px rgb(0 0 0 / .28), 0 2px 8px rgb(0 0 0 / .12);
}

/* ------------------------------------------------------------------ the banner card */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  box-shadow: var(--tp-cmplz-shadow);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover { box-shadow: var(--tp-cmplz-shadow); }

/* Entrance: a short rise, like the rest of the site. "translate" (not "transform") so centred layouts keep theirs. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show { animation: tp-cmplz-in .5s var(--ease) both; }
@keyframes tp-cmplz-in { from { opacity: 0; translate: 0 16px; } }

/* Desktop: a compact card in the bottom corner, on the page margin. */
@media (min-width: 769px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right { right: var(--gutter); bottom: var(--gutter); }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-left { left: var(--gutter); bottom: var(--gutter); }
}
/* Phones and tablets (Complianz makes it full width below 769px): a bottom sheet. */
@media (max-width: 768px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-center) {
    border-width: 1px 0 0;
    border-radius: calc(var(--radius) * 2) calc(var(--radius) * 2) 0 0;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link { text-underline-offset: 3px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link:hover { color: var(--accent); }

/* ------------------------------------------------------------------ buttons */
/* Accept | Deny side by side at the same width, Preferences / Save on their own row. Labels may wrap (long
   translations) instead of overflowing. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:not(.cmplz-accept):not(.cmplz-deny) { grid-column: 1 / -1; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  min-height: 46px;
  padding: .7em 1.2em;
  border-width: 1.5px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  transition: background-color .2s, color .2s, border-color .2s;
}
/* Hover swaps fill and outline (the same for Accept and Deny), keeping full contrast. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny):hover { background-color: transparent; color: var(--ink); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-view-preferences, .cmplz-save-preferences, .cmplz-manage-options):hover { background-color: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------ preferences */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: var(--radius);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-weight: 700; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------------------------ focus */
#cmplz-cookiebanner-container .cmplz-cookiebanner :focus-visible,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before { box-shadow: 0 0 0 3px var(--accent); }

/* ------------------------------------------------------------------ "manage consent" tab (desktop) */
#cmplz-manage-consent .cmplz-manage-consent {
  right: var(--gutter);
  font: 600 var(--step--2)/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--tp-cmplz-shadow);
}

@media (prefers-reduced-motion: reduce) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show { animation: none; }
}

/* ------------------------------------------------------------------ in-page consent ([cmplz-manage-consent]) */
/* The "manage preferences" page (and the cookie policy) show the categories inside the page: same look as the banner's
   preferences, switches for the categories, both themes. Complianz saves each switch as soon as it changes. */
:root #cmplz-manage-consent-container.cmplz-manage-consent-container {
  --cmplz_category_header_always_active_color: var(--muted);
  --cmplz_category_header_active_font_size: var(--step--2);
  max-width: 36em; margin: var(--space-s) 0 var(--space-m); color: var(--ink); font-size: var(--step--1);
}
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
  background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 8px; }
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
  background: none; padding: .75em 1em; grid-template-columns: 1fr auto 28px; gap: 12px;
}
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-category-title { font-weight: 700; color: var(--ink); }
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description { padding: 0 1em 1em; color: var(--muted); line-height: 1.55; }
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { color: var(--ink); }
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-icon svg { fill: currentColor; }
/* Switch: the real checkbox stays in place (focusable, clickable), drawn as a track with a knob. */
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-banner-checkbox { position: relative; width: 42px; height: 24px; }
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-banner-checkbox input.cmplz-consent-checkbox {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label { position: absolute; inset: 0; margin: 0; padding: 0; }
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--muted); transition: background-color .2s;
}
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-banner-checkbox .cmplz-label::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease);
}
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-banner-checkbox input:checked + .cmplz-label::before { background: var(--accent); }
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-banner-checkbox input:checked + .cmplz-label::after { transform: translateX(18px); }
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-banner-checkbox input:focus-visible + .cmplz-label::before { outline: 3px solid var(--accent); outline-offset: 2px; }
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-category-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  :root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-label::after, :root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-icon { transition: none; }
}
:root #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active .cmplz-banner-checkbox { display: none; } /* no switch for "always active" */