/* ============================================================================
   gbi-theme.css — GLOBAL brand re-skin layer for EXISTING (Bootstrap) pages
   ----------------------------------------------------------------------------
   Loaded site-wide (after style.css). This is the layer that turns the
   redesign into a FULL-SITE overhaul: it rebrands the appearance of the legacy
   Bootstrap pages (typography, buttons, cards, forms, tables) using the brand
   tokens from gbi-tokens.css — WITHOUT changing their layout/structure.

   Kept intentionally light in Phase 0 (only layout-safe touches below) so the
   Phase 0 goal — new header/footer live, existing page bodies unchanged — can
   be verified cleanly. Phase 4 populates the per-page-group overrides:
     - Store/courses .... modules/merchants/views/product_list, certificates/*,
                          masterclass/*, diplomas/*, bundles/*, details
     - Membership ....... merchants/views/membership*, gcbd_membership_tiers,
                          enterprise_training
     - Cart / checkout .. products/views/*, payment result pages
     - User portal ...... users/views/*, partial/user/{header,sidebar}
     - Events/Articles/Partnership/Resources/Contact

   NOTE: the legacy palette (style.css: --primary-color #051B43, --accent-violet
   #BA2F54, --btn-blue #4285F4) already matches the new brand, so existing pages
   are on-brand color-wise; Phase 4 focuses on type, spacing and component feel.
   ============================================================================ */

/* ---- layout-safe global touches ---- */

/* Brand text selection highlight. */
::selection{background:var(--crimson);color:#fff}

/* Brand focus ring for interactive elements (accessibility + polish). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ============================================================================
   Phase 4 — global brand re-skin of the existing Bootstrap pages.
   RULES OF ENGAGEMENT (to avoid breaking layout):
     - change font-family, radius, and focus ONLY;
     - do NOT set text/heading/link COLOR globally (dark .bg-primary sections
       rely on white text — forcing navy would make them invisible);
     - do NOT change font-size, width, margin or padding (no reflow surprises).
   Colours already match the brand (style.css: --primary-color #051B43,
   --accent-violet #BA2F54, --btn-blue #4285F4), so type + shape do the work.
   Loaded after style.css so these win the cascade. QA'd page-group by group.
   ============================================================================ */

/* Group 1: STORE / COURSES (product-list, certificates, diplomas, masterclass,
   bundles, details) — verified target classes: accordion, card, btn(+variants),
   badge, section-title, nav-pills. These rules are global; the store group is
   the first QA target. */

/* Brand typography (family only — never colour). */
body{font-family:var(--font-text)}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
.section-title .title,.section-title h2,.section-title h3{font-family:var(--font-title)}
.lead{font-family:var(--font-sub)}

/* Buttons: brand rounding + weight + body font. Colours stay as style.css sets
   them (btn-primary blue, btn-secondary/gradient crimson). */
.btn{border-radius:8px;font-family:var(--font-text);font-weight:600}
.btn-lg{border-radius:9px}

/* Cards + badges: brand rounding. */
.card{border-radius:12px}
.badge{font-weight:600}

/* Form controls + Nice Select: brand focus ring. */
.form-control:focus,
.form-select:focus,
.nice-select.open{border-color:var(--blue);box-shadow:0 0 0 .2rem rgba(66,133,244,.18)}

/* Accordion (course curriculum): keep the navy active state (style.css) and
   give the button a brand focus ring instead of Bootstrap's default blue glow. */
.accordion-button:focus{border-color:var(--line);box-shadow:0 0 0 .2rem rgba(66,133,244,.18)}
.accordion-button{border-radius:8px}