/* Q-A Studio — consent banner theme (CookieConsent v3 variable overrides).
   Loaded AFTER /vendor/cookieconsent.css so these win. Maps the library to the
   brand ink/off-white system + mono CTAs, cohesive with the language banner
   (spec 0006) and restrained per the brand. Brand tokens (--ink/--bg/fonts)
   come from styles.css :root, already loaded site-wide. Spec 0007. */
#cc-main {
  --cc-font-family: var(--font-sans);

  --cc-bg: var(--ink);                 /* bar + modal surface = ink */
  --cc-primary-color: var(--bg);       /* primary text = off-white */
  --cc-secondary-color: rgba(244, 244, 242, .72);
  --cc-link-color: var(--bg);

  /* Accept (primary): solid off-white, ink text */
  --cc-btn-primary-bg: var(--bg);
  --cc-btn-primary-color: var(--ink);
  --cc-btn-primary-border-color: var(--bg);
  --cc-btn-primary-hover-bg: #ffffff;
  --cc-btn-primary-hover-color: var(--ink);
  --cc-btn-primary-hover-border-color: #ffffff;

  /* Decline / Manage / Save (secondary): hairline outline on ink */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--bg);
  --cc-btn-secondary-border-color: rgba(244, 244, 242, .5);
  --cc-btn-secondary-hover-bg: rgba(244, 244, 242, .10);
  --cc-btn-secondary-hover-color: var(--bg);
  --cc-btn-secondary-hover-border-color: var(--bg);

  --cc-btn-border-radius: 0;           /* squared — brand restraint */
  --cc-modal-border-radius: 0;
  --cc-pm-toggle-border-radius: 1rem;

  --cc-separator-border-color: rgba(244, 244, 242, .16);
  --cc-section-category-border: rgba(244, 244, 242, .16);

  --cc-cookie-category-block-bg: rgba(244, 244, 242, .04);
  --cc-cookie-category-block-border: rgba(244, 244, 242, .12);
  --cc-cookie-category-block-hover-bg: rgba(244, 244, 242, .08);
  --cc-cookie-category-block-hover-border: rgba(244, 244, 242, .22);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: rgba(244, 244, 242, .08);

  --cc-toggle-on-bg: var(--bg);
  --cc-toggle-on-knob-bg: var(--ink);
  --cc-toggle-off-bg: rgba(244, 244, 242, .25);
  --cc-toggle-off-knob-bg: var(--bg);
  --cc-toggle-enabled-icon-color: var(--ink);
  --cc-toggle-disabled-icon-color: var(--bg);
  --cc-toggle-readonly-bg: rgba(244, 244, 242, .18);
  --cc-toggle-readonly-knob-bg: var(--bg);
  --cc-toggle-readonly-knob-icon-color: rgba(244, 244, 242, .5);

  --cc-footer-bg: var(--ink);
  --cc-footer-color: var(--bg);
  --cc-footer-border-color: rgba(244, 244, 242, .16);

  --cc-overlay-bg: rgba(21, 23, 26, .6);
  --cc-webkit-scrollbar-bg: rgba(244, 244, 242, .25);
  --cc-webkit-scrollbar-hover-bg: rgba(244, 244, 242, .45);
}

/* Mono, uppercase, letter-spaced buttons — matches the brand CTA treatment. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 500;
}

/* Title in the brand display register; body stays sans. */
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--font-sans);
  letter-spacing: -.01em;
}

/* "Manage preferences" — a subtle text link below the two equal Accept/Decline
   buttons. NOT a button: the Accept<->Decline parity the Garante/EDPB require
   runs between those two only; the granular-settings entry point is allowed to
   be quieter. Deliberately understated, never down-weighting Decline. */
#cc-main .cm__manage-link {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .78);   /* legible enough that the granular path is discoverable, still subordinate to the filled CTAs */
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#cc-main .cm__manage-link:hover,
#cc-main .cm__manage-link:focus-visible {
  color: var(--bg);
}

/* ============================================================================
   V3 — consent UX + compliance fixes (spec 0007, approved Option A = full-width
   bottom bar). These override CookieConsent v3 defaults; this sheet loads after
   /vendor/cookieconsent.css so they win. Verified on real desktop + iPhone
   viewports (EN + IT) and against EDPB 03/2022 + the Cookie Banner Taskforce.
   ============================================================================ */

/* (#4 mobile width) The bar defaults to width:100vw — the scrollbar gutter pushes
   it past the right edge on mobile. left/right:0 already size it; drop the 100vw. */
#cc-main .cm--bar { width: auto; }

/* COMPLIANCE — Accept ↔ Decline equal weight in EVERY layout. v3's stacked
   layouts give the Decline button a `--secondary` outline; force it to the same
   filled treatment as Accept so neither is down-weighted. Scoped to the first
   layer (.cm__btn) only — the prefs Save button (.pm__btn--secondary) keeps its
   distinct outline. Safety net for narrow/stacked widths. */
#cc-main .cm__btn--secondary {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-color);
  border-color: var(--cc-btn-primary-border-color);
}
#cc-main .cm__btn--secondary:hover {
  background: var(--cc-btn-primary-hover-bg);
  color: var(--cc-btn-primary-hover-color);
  border-color: var(--cc-btn-primary-hover-border-color);
}

/* (#1 Customize proximity) De-strip the footer so the Customize link reads as
   part of the button cluster, and tuck it to the right directly under the
   buttons. Keep a little bottom room (+ device safe-area) so it never hugs the
   edge. The buttons bottom-align in the (2-line) body row so the link sits just
   beneath them. */
#cc-main .cm__footer { background: transparent; border-top: 0; padding: 0; }
#cc-main .cm__links { padding-top: 0; padding-bottom: calc(.6em + env(safe-area-inset-bottom)); justify-content: flex-end; }
#cc-main .cm__link-group { justify-content: flex-end; }
#cc-main .cm--bar.cm--inline .cm__btns { justify-content: flex-end; }
#cc-main .cm--bar .cm__body { padding-bottom: .35em; }
/* Cap the inner content so copy + buttons read as one composed unit rather than
   two clusters separated by a wide void on large desktops. */
#cc-main .cm--bar.cm--inline .cm__body,
#cc-main .cm--bar.cm--inline .cm__links { max-width: 60em; }

/* When the preferences modal is open (e.g. via Customize), hide the first-layer
   bar behind it so it doesn't bleed through the scrim. Must match the vendor's
   own `.show--consent #cc-main .cc--anim .cm { visibility:visible!important }`
   specificity + !important and win on source order (this sheet loads later). */
.show--preferences #cc-main .cc--anim .cm { visibility: hidden !important; }

/* (#2 Essential reads as LOCKED) The read-only `necessary` category renders a
   :disabled input. Replace its on-looking switch with a static "Always on" lock
   lozenge so it can't be mistaken for an editable toggle; the Analytics switch
   (not :disabled) stays the only thing that looks toggleable. :has() is
   universally supported; where unsupported it degrades to the default toggle. */
#cc-main .pm__section--toggle:has(.section__toggle:disabled) .toggle__icon { display: none; }
#cc-main .pm__section--toggle:has(.section__toggle:disabled) .section__toggle-wrapper {
  width: auto; right: 18px; pointer-events: none; cursor: default;
  display: inline-flex; align-items: center; gap: .45em;
  padding: .34em .6em .34em .58em;
  border: 1px solid rgba(244, 244, 242, .22);
  border-radius: 999px;
  background: rgba(244, 244, 242, .05);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .07em; font-size: 10px;
  color: rgba(244, 244, 242, .62);
}
#cc-main .pm__section--toggle:has(.section__toggle:disabled) .section__toggle-wrapper::before {
  content: ""; width: 11px; height: 11px; flex: 0 0 auto;
  background: rgba(244, 244, 242, .62);
  --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  -webkit-mask: var(--lock) center / contain no-repeat;
          mask: var(--lock) center / contain no-repeat;
}
#cc-main .pm__section--toggle:has(.section__toggle:disabled) .section__toggle-wrapper::after { content: "Always on"; }
html[lang="it"] #cc-main .pm__section--toggle:has(.section__toggle:disabled) .section__toggle-wrapper::after { content: "Sempre attivo"; }
/* keep the locked title clear of the wider pill */
#cc-main .pm__section--toggle:has(.section__toggle:disabled) .pm__section-title { padding-right: 9.5em; }

/* (#3 Save preferences always visible) Size the prefs modal to its content (the
   library forces near-full height, leaving a void) and pin header + footer while
   the body scrolls between them, so the footer is never cropped. */
#cc-main .pm--box { height: auto; max-height: 90vh; }
#cc-main .pm__header, #cc-main .pm__footer { flex: 0 0 auto; }
#cc-main .pm__body { min-height: 0; }