/* Adlega brand theme for vanilla-cookieconsent v3.
   Load AFTER /vendor/cookieconsent.css — these :root declarations have equal
   specificity, so source order decides the winner.

   The library ships a neutral grey theme (#30363c) that reads as a third-party
   widget bolted onto the page. Values below mirror the tokens in landing.css
   (--indigo/--ink/--line/--mist), but are hardcoded on purpose: landing.css is
   only loaded on the static homepage, while the banner also renders on blog,
   compare, help and tool pages, which use wp-styles.css and never define them.
   If the brand palette moves in landing.css, mirror it here by hand.

   The library's dark theme is opt-in via a .cc--darkmode class that nothing on
   this site adds, so only the light palette needs overriding. */
:root {
  --cc-font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cc-bg: #ffffff;
  --cc-primary-color: #0a0e23;
  --cc-secondary-color: #494f6e;

  /* Accept: solid brand indigo. */
  --cc-btn-primary-bg: #4a54f5;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: #4a54f5;
  --cc-btn-primary-hover-bg: #3239d8;
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #3239d8;

  /* Reject: neutral grey fill, SAME size, SAME row, one click — a matched pair
     with Accept rather than a ghost next to a solid.
     GDPR/ePrivacy require refusing to be as easy as accepting (EDPB dark-pattern
     guidance, CNIL enforcement against Google and Meta). Do not shrink this, fade
     it out, colour it red as a "danger" action, move it behind a Configure /
     Manage-preferences step, or drop it from the first layer. Full-strength ink on
     a solid fill is the point: it has to read as a real, equal choice. */
  --cc-btn-secondary-bg: #eceef4;
  --cc-btn-secondary-color: #0a0e23;
  --cc-btn-secondary-border-color: #e0e3ee;
  --cc-btn-secondary-hover-bg: #e0e3ee;
  --cc-btn-secondary-hover-color: #0a0e23;
  --cc-btn-secondary-hover-border-color: #c9cee4;

  --cc-link-color: #4a54f5;
  --cc-separator-border-color: #e4e7f2;

  --cc-cookie-category-block-bg: #f4f5fb;
  --cc-cookie-category-block-border: #e4e7f2;
  --cc-cookie-category-block-hover-bg: #eceefe;
  --cc-cookie-category-block-hover-border: #d8dcfb;
  --cc-cookie-category-expanded-block-hover-bg: #e2e5fd;

  --cc-toggle-on-bg: #4a54f5;
  --cc-toggle-off-bg: #8e93ad;
  --cc-toggle-readonly-bg: #d5d8e6;

  --cc-footer-bg: #f4f5fb;
  --cc-footer-color: #494f6e;
  --cc-footer-border-color: #e4e7f2;

  --cc-overlay-bg: rgba(10, 14, 35, 0.6);

  --cc-modal-border-radius: 16px;
  --cc-btn-border-radius: 12px;

  /* Was 1rem, which clipped the card's bottom edge on wide screens.
     The library parks the card at `transform: translateY(1.6em)` as its hidden
     resting state, measured against #cc-main's fixed 16px font — a constant
     25.6px — while this margin is rem-based and therefore scales with the root
     font. landing.css lifts the root to 18px at ≥1800px and 20px at ≥2560px, so
     on a 4K display the margin (20px) was smaller than the 25.6px offset and the
     card hung ~6px below the viewport. 2rem clears it at every tier: 32px at a
     16px root, 40px at 20px. */
  --cc-modal-margin: 2rem;
}

/* Never let the card exceed the viewport, whatever the root font or content
   length does — short viewports (mobile landscape, a split window) would
   otherwise push the buttons out of reach. */
#cc-main .cm {
  max-height: calc(100vh - 2 * var(--cc-modal-margin) - 1.6em);
  overflow-y: auto;
}
@supports (height: 100dvh) {
  #cc-main .cm {
    max-height: calc(100dvh - 2 * var(--cc-modal-margin) - 1.6em);
  }
}

/* Match the card treatment used across the site (landing.css --shadow). */
#cc-main .cm,
#cc-main .pm {
  border: 1px solid #e4e7f2;
  box-shadow: 0 24px 60px -24px rgba(10, 14, 35, 0.28);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

#cc-main .cm__desc,
#cc-main .pm__body {
  line-height: 1.5;
}

/* The "Choose what to allow" control in the description is a real <button> so it
   is keyboard-reachable and announced correctly; style it to read as a link. */
#cc-main .cm__desc .cc__link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Both first-layer buttons share one row and one width so neither is visually
   privileged beyond the fill colour. */
#cc-main .cm__btn {
  font-weight: 600;
  padding: 12px 20px;
}

/* ⚠️ The library assigns `.cm__btn--secondary` to the PREFERENCES button, not to
   the reject button. We removed preferences from the first layer, so nothing on
   the banner carries that class and BOTH buttons inherit the primary fill —
   Accept and Reject rendered as two identical indigo blocks, which is the exact
   opposite of a clear choice.

   Style the reject button off `data-role`, which the library always sets, rather
   than off a modifier class it only sometimes adds. Keep the secondary tokens as
   the source of truth so light and dark stay in step. */
#cc-main .cm__btn[data-role="necessary"] {
  background: var(--cc-btn-secondary-bg);
  border-color: var(--cc-btn-secondary-border-color);
  color: var(--cc-btn-secondary-color);
}
#cc-main .cm__btn[data-role="necessary"]:hover {
  background: var(--cc-btn-secondary-hover-bg);
  border-color: var(--cc-btn-secondary-hover-border-color);
  color: var(--cc-btn-secondary-hover-color);
}

/* Side by side, equal width. Two full-width stacked bars read as a primary action
   with an afterthought under it; a row reads as two equal options, which is what
   they legally are. Stack again only when the card is genuinely too narrow. */
#cc-main .cm__btn-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
#cc-main .cm__btn-group .cm__btn {
  flex: 1 1 0;
  margin-top: 0;
}
@media (max-width: 480px) {
  #cc-main .cm__btn-group {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------
   Dark mode. The Astro surfaces (blog, compare, help, tools) flip on
   html[data-theme="dark"], set before paint by the no-flash script in
   BaseHead and defaulting to the visitor's OS preference. Blog alone is
   ~72% of all consent decisions, so without this the banner fires a
   bright white card at a reader on a dark page.

   The library ships its own .cc--darkmode class, but nothing on this site
   adds it, so key off the site's own attribute instead. Values mirror
   src/styles/dark.css (--dk-*), hardcoded for the same reason as above:
   that stylesheet is not loaded on the static homepage.

   public/index.html has no dark mode at all, so it never matches this and
   keeps the light palette.
   --------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --cc-bg: #171a21;
  --cc-primary-color: #e7e9f0;
  --cc-secondary-color: #9aa3b2;

  --cc-btn-primary-bg: #7c84ff;
  --cc-btn-primary-color: #0f1116;
  --cc-btn-primary-border-color: #7c84ff;
  --cc-btn-primary-hover-bg: #9aa0ff;
  --cc-btn-primary-hover-color: #0f1116;
  --cc-btn-primary-hover-border-color: #9aa0ff;

  --cc-btn-secondary-bg: #272c37;
  --cc-btn-secondary-color: #e7e9f0;
  --cc-btn-secondary-border-color: #333a47;
  --cc-btn-secondary-hover-bg: #323845;
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-hover-border-color: #3f4756;

  --cc-link-color: #9aa0ff;
  --cc-separator-border-color: #2b303b;

  --cc-cookie-category-block-bg: #1f232c;
  --cc-cookie-category-block-border: #2b303b;
  --cc-cookie-category-block-hover-bg: #262b36;
  --cc-cookie-category-block-hover-border: #3a4150;
  --cc-cookie-category-expanded-block-hover-bg: #2b303b;

  --cc-toggle-on-bg: #7c84ff;
  --cc-toggle-off-bg: #4a515f;
  --cc-toggle-on-knob-bg: #0f1116;
  --cc-toggle-off-knob-bg: #e7e9f0;
  --cc-toggle-readonly-bg: #2b303b;
  --cc-toggle-readonly-knob-bg: #9aa3b2;

  --cc-footer-bg: #1f232c;
  --cc-footer-color: #9aa3b2;
  --cc-footer-border-color: #2b303b;

  --cc-overlay-bg: rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] #cc-main .cm,
:root[data-theme="dark"] #cc-main .pm {
  border-color: #2b303b;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}