/* Load Montserrat for the consent banner + preferences modal titles.
 * Without this @import the font-family: 'Montserrat' declarations on
 * .cm__title and .pm__title silently fall back to system-ui, and the
 * two titles render in whichever system font is on the device instead
 * of the brand typeface. Weights 400/600/700/800 cover body, buttons,
 * and the bold title bars. `display=swap` means text renders in the
 * fallback first and re-paints when Montserrat arrives, so a slow
 * font download never blocks the banner from showing. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

/**
 * FireFly brand override for CookieConsent v3
 *
 * Approximates FireFly's existing palette from the EE learning system.
 * Mirrors documents/poc/cookieconsent-v3/firefly-brand.css and the local WP
 * copy at wp-content/themes/flatsome-child/css/firefly-brand.css — keep all
 * three in sync. WP-only rules below (#cc-main z-index, .ff-gpc-indicator)
 * are intentionally NOT in the POC copy.
 *
 * ─────────────────────────────────────────────────────────────────────
 * CHANGELOG — colors locked to FireFly corporate palette (2026-05-19)
 * ─────────────────────────────────────────────────────────────────────
 *   Primary (Accept All) button
 *     bg         #f59e0b  →  #005cb9   (corporate blue)
 *     text       #0f172a  →  #ffffff   (white on blue)
 *     hover bg   #d97706  →  #004a96   (~10% darker blue)
 *
 *   Secondary (Manage Cookies / Reject All) button
 *     bg         #e5e7eb  →  #9da1aa   (corporate gray)
 *     text       #0f172a  →  #ffffff   (white on gray for contrast)
 *     hover bg   #d1d5db  →  #828893   (~10% darker gray)
 *
 *   Category toggle switches
 *     off        #cbd5e1  →  #9da1aa   (corporate gray)
 *     on         #f59e0b  →  #005cb9   (corporate blue)
 *
 *   Radius (banner, preferences modal, and all buttons)
 *     modal      12px     →  6px
 *     button     8px      →  6px
 *
 *   Intentionally NOT changed (structural — not "gray buttons"):
 *     --cc-secondary-color  (#475569, muted body text — keeps WCAG AA)
 *     --cc-section-border   (#e2e8f0, hairline borders inside modal)
 *     --cc-cookie-category-block-bg(-hover)  (very pale panel shading)
 * ─────────────────────────────────────────────────────────────────────
 */

:root {
  /* FireFly palette (matches EE banner styling) */
  --cc-bg: #ffffff;
  --cc-primary-color: #0f172a;
  --cc-secondary-color: #475569;
  --cc-btn-primary-bg: #005cb9; /* FireFly corporate blue */
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-hover-bg: #004a96;
  --cc-btn-secondary-bg: #9da1aa; /* FireFly corporate gray */
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-hover-bg: #828893;
  --cc-toggle-bg-off: #9da1aa;
  --cc-toggle-bg-on: #005cb9;
  --cc-toggle-knob-bg: #ffffff;
  --cc-cookie-category-block-bg: #f8fafc;
  --cc-cookie-category-block-bg-hover: #f1f5f9;
  --cc-section-border: #e2e8f0;
  --cc-block-text: #1e293b;

  /* Banner geometry — corporate 6px radius across banner, modal, buttons */
  --cc-modal-border-radius: 6px;
  --cc-btn-border-radius: 6px;
  --cc-modal-margin: 20px;
}

#cc-main .cc--box {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
  border: 1px solid #e2e8f0;
}

#cc-main {
  z-index: 2147483645;
}

#cc-main .ff-gpc-indicator {
  display: inline-block;
  background: #0a7c00;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 6px;
}

#cc-main .pm__btn,
#cc-main .cm__btn {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────────────────
 * 6px radius — forced overrides (2026-05-19)
 *
 * Flatsome's parent theme injects border-radius: 99px on generic
 * button selectors. Even with v3's all:initial reset, those rules
 * occasionally bleed through and pill-shape the consent buttons.
 * High-specificity + !important so this isn't fragile to theme bumps.
 * ───────────────────────────────────────────────────────────────────── */
#cc-main .cm__btn,
#cc-main .pm__btn,
#cc-main button.cm__btn,
#cc-main button.pm__btn {
  border-radius: 6px !important;
}

#cc-main .cm,
#cc-main .pm {
  border-radius: 6px !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Banner footer link strip — corporate gray band with white links
 *
 * The "Privacy / SMS Terms / Your Privacy Rights" row sits in
 * .cm__links at the bottom of the consent banner. v3 inherits the
 * link color from --cc-primary-color (#0f172a, dark navy), which
 * reads as gray/dark on the white modal. Painting the band corporate
 * gray (matching the Manage Cookies button) + white text keeps the
 * links readable without competing with the blue Accept All button.
 * ───────────────────────────────────────────────────────────────────── */
#cc-main .cm__links {
  background: #9da1aa;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  /* v3 ships .cm__links as display:flex; row, default justify-content
   * is flex-start, which left-aligns the children. Forcing center +
   * gap (instead of the   separators that used to live in the JS
   * config) eliminates anonymous-flex-item ambiguity and guarantees
   * the three links sit dead-center in the band. */
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.6em !important;
}

#cc-main .cm__links a,
#cc-main .cm__links a:hover {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Banner header bar — corporate blue strip with white centered title
 * (2026-05-19, updated to blue)
 *
 * The "Your privacy choice" heading sits in .cm__title. v3 leaves it
 * as plain text on the white modal. Painting that section as a
 * corporate-BLUE bar (matching the Accept All primary button) gives
 * the modal a strong branded header. The bottom .cm__links band stays
 * corporate gray so the modal reads top-down as blue (action / brand)
 * → white (content) → gray (utility links).
 *
 *   - min-height 42px to match the .cm__btn thickness below
 *   - Top-left + top-right corners 6px, bottom corners square
 *   - White Montserrat text, centered
 *   - Subtle 1px bottom hairline into the white body
 * ───────────────────────────────────────────────────────────────────── */
#cc-main .cm__texts { padding-top: 0; }

#cc-main .cm__title {
  background: #005cb9;
  color: #ffffff !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0 1.3rem;
  margin: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

#cc-main .cm__title + .cm__desc { margin-top: 1.1em; }

/* ─────────────────────────────────────────────────────────────────────
 * Preferences modal header — match the consent banner header treatment
 * (2026-05-19)
 *
 * The "Manage cookie preferences" heading sits in .pm__title inside a
 * .pm__header flex row with space-between layout (title on the left,
 * X close button on the right). To keep the modal visually consistent
 * with the consent banner's blue header bar, paint .pm__header blue
 * and restyle .pm__title to white Montserrat / weight 800 / capitalize
 * / letter-spacing 0.02em — same recipe as #cc-main .cm__title above.
 *
 * Title stays left-aligned (the X needs the right side); the 6px top
 * corners come for free because .pm already has overflow:hidden and
 * border-radius:6px from the modal-corners override further up.
 *
 * The existing gray X close button (--cc-btn-secondary-bg + white
 * stroke) reads cleanly on the blue bar, so the close affordance is
 * preserved.
 * ───────────────────────────────────────────────────────────────────── */
#cc-main .pm__header {
  background: #005cb9;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

#cc-main .pm__title {
  color: #ffffff !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

/* Remove the 1px hairline v3 draws between description and button row,
 * plus the top padding on both action rows. The 25%-smaller body copy
 * + gray header/footer bars already give the sections enough visual
 * separation, and zeroing the top padding makes the vertical rhythm
 * (description → buttons → links) feel evenly spaced and shrinks the
 * overall popup another few pixels. */
#cc-main .cm__btns,
#cc-main .cm__links {
  padding-top: 0 !important;
}

#cc-main .cm__btns {
  border-top: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Body copy — 25% smaller (2026-05-19)
 *
 * v3 ships .cm__desc at font-size: 0.9em. Reducing that by 25% to
 * 0.675em shrinks the "We and certain third parties..." paragraph,
 * which is the dominant vertical block in the banner, so the overall
 * popup gets noticeably shorter without changing the modal width or
 * the header/footer bar heights.
 * ───────────────────────────────────────────────────────────────────── */
#cc-main .cm__desc {
  font-size: 0.675em;
}

/* ─────────────────────────────────────────────────────────────────────
 * Mobile — consent banner + preferences modal fit viewport (2026-05-19)
 * Prevents footer link strip and modal box from clipping on ~390px phones.
 * ───────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 48em) {
  #cc-main {
    --cc-modal-margin: 10px;
  }

  #cc-main .cm,
  #cc-main .pm {
    max-width: calc(100vw - 20px) !important;
    width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
  }

  #cc-main .cm__links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.35rem 0.85rem !important;
    padding: 0.55rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  #cc-main .cm__links a {
    white-space: nowrap;
  }

  #cc-main .cm__title {
    font-size: 0.95rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  #cc-main .cm__btns {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  #cc-main .cm__btn {
    font-size: 0.85rem !important;
  }
}