/* ------------------------------------------------------------------------------
   CBF Giving Season - shared tokens and primitives
   Ported from the SWAT prototype CBF-landing-full.0.26.

   Everything is scoped under .cbf-gs so the microsite's visual language (gold,
   22px card radius, non-uppercase buttons) cannot leak into the rest of the site.
   Decision Q8. --violet already matches the skin's --cbf-purple-1000 exactly.

   Registered by every CBFGS* module via ClientResourceManager, which de-duplicates
   by path, so it loads once no matter how many modules are on the page.
   ------------------------------------------------------------------------------ */

.cbf-gs {
    --violet: #9844ba;
    --violet-hover: #6f2f8c;
    --violet-deep: #2e1a47;
    --gold: #f5a623;
    --gold-hover: #e0940f;
    --ink: #1c1526;
    --ink-soft: #5b5468;
    --cream: #faf6ef;
    --lavender: #f3edf8;
    --track: #ece6dd;
    --line: #e7ded2;
    --white: #fff;
    --ok: #2f8c5a;
    --radius: 16px;
    --shadow: 0 10px 30px -12px rgba(46, 26, 71, .28);

    font-family: "Roboto", system-ui, sans-serif;
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.cbf-gs *,
.cbf-gs *:before,
.cbf-gs *:after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Typography reset.

   The CB skin styles base elements with !important - h1-h6 font-family/size/weight
   (skin.css ~395-460) and every anchor's colour (248-254). A scoped rule with higher
   specificity still loses to !important, so the microsite has to restate its own
   typography the same way. All of it is confined to .cbf-gs; nothing outside changes.

   COLOUR IS DELIBERATELY *NOT* !important here. The skin only forces colour on
   anchors (248-254) and on `body` (51-53); its `p` rule (472-479) and every h1-h6
   rule set colour with normal weight or not at all, so a scoped `.cbf-gs p`
   (specificity 0,1,1) already beats them. Marking these !important made the reset
   outrank the modules' own rules, which flattened every coloured paragraph in the
   microsite to the band colour - the gold hero eyebrow, the cream hero story, the
   gold urgency lines and the violet section eyebrows all rendered plain white or
   plain ink. `color: inherit` on its own is what the dark bands need; the modules
   then override it on specificity, exactly as the spec's own cascade does.
   --------------------------------------------------------------------------- */
.cbf-gs h1, .cbf-gs h2, .cbf-gs h3,
.cbf-gs h4, .cbf-gs h5, .cbf-gs h6, .cbf-gs .display {
    font-family: "Montserrat", sans-serif !important;
    letter-spacing: -.01em;
    color: inherit;
    line-height: 1.15 !important;
    margin: 0;
    text-transform: none !important;
}
.cbf-gs p { color: inherit; }

.cbf-gs .hand { font-family: "Kalam", cursive; }
.cbf-gs button { font-family: inherit; cursor: pointer; }
.cbf-gs .gold { color: var(--gold); }

/* The CB skin forces every anchor black and un-underlined with !important
   (Skins/CB/skin.css lines 248-254). Scoped rules cannot win against that on
   specificity alone, so anchors inside .cbf-gs are reset here and each module
   then sets its own colour, also with !important. Confined to .cbf-gs - the rest
   of the site is untouched. */
.cbf-gs a { color: inherit !important; text-decoration: none !important; }

@media (prefers-reduced-motion: reduce) {
    .cbf-gs * { transition: none !important; animation: none !important; }
}

/* ---- layout ---- */
.cbf-gs .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.cbf-gs .head { padding: 44px 0 8px; text-align: center; }
.cbf-gs .eyebrow {
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--violet); font-weight: 700; margin: 0 0 10px;
}
.cbf-gs .head h2 {
    font-size: clamp(28px, 4.5vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin: 0;
}
.cbf-gs .head p { max-width: 560px; margin: 14px auto 0; color: var(--ink-soft); }

/* ---- badges ---- */
.cbf-gs .badge {
    display: inline-flex; align-items: center; gap: 5px; line-height: 1;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .9); color: var(--ink);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.cbf-gs .badge svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; }
.cbf-gs .flag {
    width: 15px; height: 15px; border-radius: 50%; object-fit: cover; flex: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.cbf-gs .pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cbf-gs .pill-row .badge {
    background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cbf-gs .pill-row .badge.cat {
    background: var(--lavender); border: 1px solid transparent; color: var(--violet-deep);
}
.cbf-gs .badges {
    position: absolute; top: 12px; right: 12px;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}

/* ---- progress bar ---- */
.cbf-gs .prog { margin-top: 2px; }
.cbf-gs .prog .row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; margin-bottom: 6px;
}
.cbf-gs .prog .pct { font-weight: 700; }
.cbf-gs .prog .togo { color: var(--ink-soft); }
.cbf-gs .prog .togo b { color: var(--ink); font-weight: 700; }
.cbf-gs .bar {
    height: 9px; border-radius: 999px; background: var(--track);
    overflow: hidden; display: flex;
}
.cbf-gs .bar .raised { background: var(--gold); height: 100%; }
.cbf-gs .bar .gift { background: var(--violet); height: 100%; width: 0; transition: width .25s; }
.cbf-gs .bar.finish .gift { background: var(--ok); }

/* ---- buttons ----
   The skin's own `.btn` (Skins/CB/skin.css 644-655) forces padding, a 3px border,
   'Roboto Condensed' 20px/20px and uppercase with !important, and adds min-height:50px.
   That is the site's global button, not the microsite's - left alone it gives every card
   CTA a white 3px ring (border-color falls back to currentColor) and oversized uppercase
   text. The spec's button is restated here at the same weight, scoped to .cbf-gs. */
.cbf-gs .btn {
    border: 0 !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 11px 16px !important;
    min-height: 0;
    width: 100%; transition: .15s; text-transform: none;
}
.cbf-gs .btn-violet { background: var(--violet); color: #fff; }
.cbf-gs .btn-violet:hover { background: var(--violet-hover); }
.cbf-gs .btn-gold { background: var(--gold); color: var(--ink); }
.cbf-gs .btn-gold:hover { background: var(--gold-hover); }
.cbf-gs .btn-ghost { background: #fff; border: 1.5px solid var(--line); color: var(--ink); }
.cbf-gs .btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
.cbf-gs .btn[disabled] { opacity: .45; cursor: default; }

.cbf-gs .linklike {
    background: none; border: 0; color: var(--violet); font-weight: 700; font-size: 13px;
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
    padding: 0; margin-top: 6px; font-family: inherit; text-transform: none;
}

/* ---- large buttons, spec 203-205 ---- */
.cbf-gs .btn-lg {
    border: 0; border-radius: 12px; font-weight: 800; font-size: 16px;
    padding: 15px 26px; cursor: pointer; transition: .15s;
    font-family: inherit; text-transform: none; width: auto;
}
.cbf-gs .btn-lg.gold { background: var(--gold); color: var(--ink); }
.cbf-gs .btn-lg.gold:hover { background: var(--gold-hover); }
.cbf-gs .btn-lg.ghost {
    background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55);
}
.cbf-gs .btn-lg.ghost:hover { background: rgba(255, 255, 255, .22); }

/* ---- pill CTA used by header and footer, spec 178-179 ---- */
.cbf-gs .nav-cta {
    border: 0; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 14px;
    padding: 10px 18px; border-radius: 999px; cursor: pointer;
    text-transform: none; font-family: inherit; width: auto;
}
.cbf-gs .nav-cta:hover { background: var(--gold-hover); }

/* ---- content bands, spec 216-231 ---- */
.cbf-gs.band, .cbf-gs .band { padding: 74px 0; }
.cbf-gs.band > .in, .cbf-gs .band .in { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.cbf-gs.band.ink { background: var(--ink); color: #efe9f5; }
.cbf-gs.band.violet { background: linear-gradient(160deg, #3a2260, #241242); color: #fff; }
.cbf-gs.band.cream { background: var(--cream); }

.cbf-gs .sec-eyebrow {
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 700; margin: 0 0 12px; color: var(--violet);
}
.cbf-gs.band.ink .sec-eyebrow, .cbf-gs.band.violet .sec-eyebrow { color: #f2c98a; }
.cbf-gs .sec-h2 {
    font-weight: 800 !important;
    font-size: clamp(26px, 4vw, 40px) !important;
    line-height: 1.1 !important;
    margin: 0;
}
.cbf-gs .sec-lead { font-size: 16px; line-height: 1.65; margin: 16px 0 0; opacity: .92; max-width: 62ch; }
.cbf-gs .band-cta { margin-top: 26px; }

/* ---- tick items, shared by the trust strip and the stats band badge row, spec 213-214 ---- */
.cbf-gs .ti { display: inline-flex; align-items: center; }
/* The badge text is wrapped so it is ONE flex item rather than several.
   Left directly in the flex container, "<b>Imagine Canada</b> accredited" splits into two
   anonymous items and the space between them is dropped - which is why editors were having to
   type &nbsp; to get a space back. Inside .tt it is ordinary inline text and spaces behave. */
.cbf-gs .ti .tt { min-width: 0; }
.cbf-gs .ck { color: var(--gold); font-weight: 800; margin-right: 7px; font-size: 12px; line-height: 1; }

/* ---- screen-reader-only text ----
   For labels and status text that has to be announced but must not be seen - the payment
   spinner's "Processing payment" is the first of these. Clipped rather than display:none,
   which would take it out of the accessibility tree along with the layout. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- focus ring, spec 258. Deliberately kept: the spec makes this explicit ---- */
.cbf-gs button:focus-visible,
.cbf-gs a:focus-visible,
.cbf-gs input:focus-visible,
.cbf-gs [data-scroll]:focus-visible,
.cbf-gs [data-goto]:focus-visible {
    outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}