/* =====================================================================
   ThirdEye Consulting — CookieConsent v3 brand theme
   ---------------------------------------------------------------------
   The library exposes ~45 CSS custom properties under #cc-main that
   drive every colour, radius and font in the banner + preferences
   modal. We override them here using our brand tokens from style.css
   (--primary, --coral, --bg-warm, etc) so the consent UI matches the
   rest of the site without forking the vendor CSS.

   Load AFTER /css/vendor/cookieconsent.css so these overrides win.

   Mapping decisions:
     • Backgrounds → warm cream (--bg-warm) instead of stark white
     • Primary buttons (Accept all) → brand dark green (--primary)
     • Secondary buttons (Reject / Manage) → coral tints — soft at
       rest, full coral on hover. Replaces the library's grey palette.
     • Dividers / category-block tints → coral-flavoured rgba()s for
       warmth (the library defaults are cold blue-greys)
     • Toggles → brand green ON, soft slate OFF (clearly distinct), and
       coral for the read-only "Necessary" toggle (signals it's locked
       but on — without looking like a regular off state)
     • Buttons → 60px radius + League Spartan, matching .btn site-wide
   ===================================================================== */

#cc-main {
    /* ---------- Type & shape ---------- */
    --cc-font-family: var(--font);
    --cc-modal-border-radius: var(--radius-sm, 10px);
    --cc-btn-border-radius: 60px;            /* matches .btn (style.css L181) */
    --cc-pm-toggle-border-radius: 999px;      /* pill toggle */

    /* ---------- Surfaces ---------- */
    --cc-bg: var(--bg-warm);                  /* main modal background */
    --cc-overlay-bg: rgba(var(--primary-rgb), 0.55);  /* dim behind preferences modal */

    /* ---------- Text ---------- */
    --cc-primary-color: var(--text-heading);  /* headings, strong text */
    --cc-secondary-color: var(--text-body);   /* body copy */
    --cc-link-color: var(--primary);          /* "Privacy policy" etc. */

    /* ---------- Primary buttons (Accept all) ---------- */
    --cc-btn-primary-bg: var(--primary);
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: var(--primary);
    --cc-btn-primary-hover-bg: var(--primary-light);
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: var(--primary-light);

    /* ---------- Secondary buttons (Reject all / Manage) ---------- */
    /* Soft coral at rest, full coral on hover. Text stays brand green
       so it reads at AA contrast on both states. */
    --cc-btn-secondary-bg: var(--coral-light);
    --cc-btn-secondary-color: var(--text-heading);
    --cc-btn-secondary-border-color: var(--coral-light);
    --cc-btn-secondary-hover-bg: var(--coral);
    --cc-btn-secondary-hover-color: var(--text-heading);
    --cc-btn-secondary-hover-border-color: var(--coral);

    /* ---------- Toggles ---------- */
    --cc-toggle-on-bg: var(--primary);
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-bg: #cbd5e0;              /* light slate — clearly "off" */
    --cc-toggle-off-knob-bg: #ffffff;
    --cc-toggle-readonly-bg: var(--coral);    /* "Necessary" forced-on toggle */
    --cc-toggle-readonly-knob-bg: #ffffff;
    --cc-toggle-readonly-knob-icon-color: var(--coral-dark);
    --cc-toggle-enabled-icon-color: var(--primary);
    --cc-toggle-disabled-icon-color: #cbd5e0;

    /* ---------- Category blocks (the collapsible rows) ---------- */
    /* Very soft coral wash — readable on the warm cream background,
       lifts slightly on hover, lifts again when expanded. */
    --cc-cookie-category-block-bg: rgba(246, 171, 147, 0.08);
    --cc-cookie-category-block-border: rgba(246, 171, 147, 0.25);
    --cc-cookie-category-block-hover-bg: rgba(246, 171, 147, 0.14);
    --cc-cookie-category-block-hover-border: rgba(246, 171, 147, 0.35);
    --cc-cookie-category-expanded-block-bg: rgba(246, 171, 147, 0.10);
    --cc-cookie-category-expanded-block-hover-bg: rgba(246, 171, 147, 0.16);

    /* ---------- Dividers ---------- */
    --cc-separator-border-color: rgba(246, 171, 147, 0.30);
    --cc-section-category-border: rgba(246, 171, 147, 0.30);

    /* ---------- Footer strip ("Privacy policy" link row) ---------- */
    --cc-footer-bg: var(--bg-warm);
    --cc-footer-color: var(--text-body);
    --cc-footer-border-color: rgba(246, 171, 147, 0.30);

    /* ---------- Scrollbars (preferences modal interior) ---------- */
    --cc-webkit-scrollbar-bg: var(--coral-light);
    --cc-webkit-scrollbar-hover-bg: var(--coral);
}

/* ---------------------------------------------------------------------
   Small visual polish — site-style hover lift on the primary CTA.
   Mirrors .btn--primary:hover (translateY(-2px) + green-tinted shadow).
   Targeting the inner button class the library renders.
   --------------------------------------------------------------------- */
#cc-main .pm__btn,
#cc-main .cm__btn {
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#cc-main .pm__btn[data-role="accept-all"]:hover,
#cc-main .cm__btn[data-role="accept-all"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.25);
}
#cc-main .pm__btn[data-role="accept-necessary"]:hover,
#cc-main .cm__btn[data-role="accept-necessary"]:hover,
#cc-main .pm__btn[data-role="save"]:hover,
#cc-main .cm__btn[data-role="show"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(246, 171, 147, 0.35);
}

/* ---------------------------------------------------------------------
   Text sizing — the library is 16px-base with everything else in em,
   so a single base bump lifts every text element proportionally.
   Tom: "all text is too small" → 16 → 18 (12.5% larger), then a few
   selectors get specific bumps because their em values are too quiet
   for our brand voice (e.g. buttons at 0.82em ≈ 13px → too thin).
   --------------------------------------------------------------------- */

#cc-main {
    font-size: 18px;
}

/* Body copy in both modals — bumps 0.9em (16.2px) → 1em (18px) */
#cc-main .cm__desc,
#cc-main .pm__section-desc-wrapper,
#cc-main .pm__section-table {
    font-size: 1em;
}

/* Buttons — library default 0.82em (14.76px after the base bump) is
   still a bit thin. Push to 0.95em so CTAs read as substantial. */
#cc-main .cm__btn,
#cc-main .pm__btn {
    font-size: 0.95em;
}

/* Section title bars + service titles — 0.95em → 1em for hierarchy */
#cc-main .pm__section-title,
#cc-main .pm__service-title {
    font-size: 1em;
}

/* The "Privacy policy" link row at the bottom of the banner — 0.8em
   was almost unreadable. Lifts to 0.9em (16.2px). */
#cc-main .cm__link-group {
    font-size: 0.9em;
}

/* ---------------------------------------------------------------------
   Section panels — Tom: "needs the curvature removing — looks silly".
   Cause: .pm__section reads `border-radius: var(--cc-btn-border-radius)`
   which we set to 60px for pill buttons. Same variable, two contexts.
   Override the panel selectors (NOT the button selectors) to square
   them off. The button styles above keep their 60px pill shape.
   --------------------------------------------------------------------- */
#cc-main .pm__section,
#cc-main .pm__section--toggle,
#cc-main .pm__section-title,
#cc-main .pm__section-desc-wrapper,
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
    border-radius: 0;
}