/* =====================================================================
   BRIGHT-BRIDGE SCHOOL COMPLEX — PUBLIC THEME
   ---------------------------------------------------------------------
   The palette is sampled straight out of the school crest:
     Indigo      #281670   trust, stability, academic authority
     Gold        #F7C100   achievement, optimism, energy
     White       #FFFFFF   clean space so real photography can breathe
     Light Grey  #F5F6FB   alternating sections and form areas
     Dark        #1A1A1A   body text

   The tokens are still named --bb-blue-*: the brand colour is a deep
   violet-leaning indigo rather than a true blue, but renaming a token
   used in three stylesheets and a hundred views buys nothing. Read
   "blue" as "the brand colour".

   A note on the indigo ramp. #281670 is very dark (14.6:1 on white), so
   the usual "darker on hover" move is all but invisible on it. The ramp
   is therefore named by role rather than by weight:

     --bb-blue-deep   below the brand; the darkest fields (topbar,
                      hero base, footer) so the brand sits in front
     --bb-blue-dark   one step under the brand; text that darkens on hover
     --bb-blue        the brand itself; buttons, chips, panels
     --bb-blue-lift   one step above the brand; button hover, so the
                      change is actually visible
     --bb-blue-link   links on white

   A note on the gold: at #F7C100 it reaches only 1.7:1 against white, so
   it is never used for text on a light background. It appears as a block
   fill with dark text on it, as a rule or underline, or as an icon on an
   indigo field. Where a gold *text* colour is genuinely needed,
   --bb-gold-ink (#876A00, 5.1:1 on white) is used instead.

   Every pairing in use was measured, not eyeballed:
     white on indigo 14.6  ·  gold on indigo 8.7  ·  indigo on gold 8.7
     indigo on white 14.6  ·  link on white 13.6  ·  gold-ink on white 5.1
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------ */
:root {
  /* Brand — see the note at the top of this file */
  --bb-blue:          #281670;
  --bb-blue-deep:     #10092D;
  --bb-blue-dark:     #20125C;
  --bb-blue-lift:     #361E97;
  --bb-blue-link:     #2D187E;
  --bb-blue-050:      #F2EEFE;
  --bb-blue-100:      #E2DCFC;
  --bb-blue-200:      #C5B9F6;

  --bb-gold:          #F7C100;
  --bb-gold-600:      #DEAD00;
  --bb-gold-ink:      #876A00;   /* readable gold-toned text on white */
  --bb-gold-050:      #FFFAE8;

  /* Neutrals */
  --bb-white:         #FFFFFF;
  --bb-ink:           #1A1A1A;
  --bb-ink-soft:      #4A4A55;
  --bb-ink-muted:     #6B6B78;
  --bb-line:          #E3E4EF;
  --bb-line-soft:     #EDEEF6;
  --bb-bg:            #F5F6FB;
  --bb-bg-deep:       #ECEEF7;

  /* Semantic */
  --bb-success:       #12805C;
  --bb-danger:        #C42D2D;
  --bb-warning:       #B26A00;

  /* Type */
  --bb-font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
             "Noto Sans", Roboto, Arial, sans-serif;
  --bb-font-display: var(--bb-font);

  /* Rhythm */
  --bb-radius:        14px;
  --bb-radius-lg:     22px;
  --bb-radius-pill:   999px;
  --bb-section:       clamp(3.5rem, 7vw, 6rem);
  --bb-gutter:        clamp(1rem, 4vw, 2rem);

  /* Elevation — soft and blue-tinted, never grey mush */
  --bb-shadow-sm:  0 1px 2px rgba(40, 22, 112, .06), 0 2px 6px rgba(40, 22, 112, .05);
  --bb-shadow:     0 2px 6px rgba(40, 22, 112, .06), 0 12px 28px rgba(40, 22, 112, .08);
  --bb-shadow-lg:  0 4px 12px rgba(40, 22, 112, .08), 0 24px 56px rgba(40, 22, 112, .13);

  --bb-transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* Bootstrap variable overrides so components inherit the brand */
:root {
  --bs-primary: #281670;
  --bs-primary-rgb: 40, 22, 112;
  --bs-body-color: #1A1A1A;
  --bs-body-font-family: var(--bb-font);
  --bs-border-color: #E3E4EF;
  --bs-link-color: #2D187E;
  --bs-link-hover-color: #20125C;
  --bs-border-radius: 14px;
}

/* ---------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--bb-font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bb-ink);
  background: var(--bb-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bb-font-display);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--bb-ink);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

/* Links.

   Underline is reserved for links inside running text, where it is the
   only thing distinguishing a link from the words around it. Navigation,
   cards, table rows, tiles and buttons are already obviously clickable
   and carry their own hover state, so underlining them on hover just
   makes the interface twitch. */
a {
  color: var(--bb-blue-link);
  text-decoration: none;
  transition: color var(--bb-transition);
}
a:hover { color: var(--bb-blue-dark); }

/* Running text: underlined at rest, so the link is visible before hover */
.rich-text a:not(.btn),
.prose a:not(.btn),
.alert a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.rich-text a:not(.btn):hover,
.prose a:not(.btn):hover,
.alert a:not(.btn):hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; }

/* Bootstrap's .container pads 12px a side, but a `g-5` row carries -24px
   margins — so on a phone every one of those rows pokes 12px past the
   container and the whole page scrolls sideways. Cap the gutter at the
   widths where it does not fit; from md up there is room for it. */
@media (max-width: 767.98px) {
  .row.g-5,
  .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

ul, ol { padding-left: 1.25rem; }

hr { border: 0; border-top: 1px solid var(--bb-line); margin: 2rem 0; opacity: 1; }

::selection { background: var(--bb-gold); color: var(--bb-ink); }

/* Visible focus for keyboard users, invisible for mouse users */
:focus-visible {
  outline: 3px solid var(--bb-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--bb-blue);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--bb-radius) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* Honeypot — off-screen but not display:none, which some bots detect */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------ */
.section { padding: var(--bb-section) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--grey { background: var(--bb-bg); }
.section--blue {
  background: var(--bb-blue);
  color: rgba(255, 255, 255, .9);
}
.section--blue h1,
.section--blue h2,
.section--blue h3,
.section--blue h4 { color: #fff; }
.section--deep { background: var(--bb-blue-deep); color: rgba(255, 255, 255, .88); }
.section--deep h2, .section--deep h3 { color: #fff; }

/* Section heading block */
.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p {
  font-size: 1.075rem;
  color: var(--bb-ink-soft);
  margin-bottom: 0;
}
.section--blue .sec-head p,
.section--deep .sec-head p { color: rgba(255, 255, 255, .82); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bb-blue-link);
  margin-bottom: .85rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--bb-gold);
}
/* On any navy field the eyebrow goes gold. The default (--bb-blue-link)
   sits at about 1.3:1 against #281670 — effectively invisible, which is
   what the CTA band was doing on every page. */
.section--blue .eyebrow,
.section--deep .eyebrow,
.cta-band .eyebrow,
.hero .eyebrow,
.side-panel--blue .eyebrow { color: var(--bb-gold); }
.sec-head--center .eyebrow::before { display: none; }

/* A gold rule under a heading */
.rule-gold {
  width: 62px;
  height: 4px;
  border-radius: 3px;
  background: var(--bb-gold);
  margin: 0 0 1.4rem;
}
.sec-head--center .rule-gold { margin-left: auto; margin-right: auto; }

.lead-text { font-size: 1.1rem; color: var(--bb-ink-soft); }

/* Rich text coming out of the CMS */
.rich-text { font-size: 1.03rem; color: var(--bb-ink-soft); }
.rich-text h2, .rich-text h3, .rich-text h4 { color: var(--bb-ink); margin-top: 2rem; }
.rich-text h2:first-child,
.rich-text h3:first-child { margin-top: 0; }
.rich-text ul, .rich-text ol { margin-bottom: 1.15rem; }
.rich-text li { margin-bottom: .45rem; }
.rich-text strong { color: var(--bb-ink); font-weight: 700; }
.rich-text img { border-radius: var(--bb-radius); margin: 1.5rem 0; }
.rich-text blockquote {
  border-left: 4px solid var(--bb-gold);
  background: var(--bb-blue-050);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--bb-radius) var(--bb-radius) 0;
  margin: 1.75rem 0;
  font-size: 1.08rem;
  color: var(--bb-ink);
}
.rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.rich-text th, .rich-text td {
  border: 1px solid var(--bb-line);
  padding: .7rem .9rem;
  text-align: left;
}
.rich-text th { background: var(--bb-bg); font-weight: 700; }

/* CMS rich text on a dark section.
   Every colour above is written for a light card. Dropped into a navy
   band the body text inherits correctly but <strong>, headings, quotes
   and tables keep their near-black ink, which is invisible — "Knowledge"
   and its six siblings on the About page were sitting at 1.1:1. */
.section--blue .rich-text,
.section--deep .rich-text,
.side-panel--blue .rich-text { color: rgba(255, 255, 255, .88); }

.section--blue .rich-text strong,
.section--deep .rich-text strong,
.side-panel--blue .rich-text strong,
.section--blue .rich-text h2, .section--blue .rich-text h3, .section--blue .rich-text h4,
.section--deep .rich-text h2, .section--deep .rich-text h3, .section--deep .rich-text h4,
.side-panel--blue .rich-text h2, .side-panel--blue .rich-text h3 { color: #fff; }

.section--blue .rich-text a:not(.btn),
.section--deep .rich-text a:not(.btn),
.side-panel--blue .rich-text a:not(.btn) { color: var(--bb-gold); }

.section--blue .rich-text blockquote,
.section--deep .rich-text blockquote,
.side-panel--blue .rich-text blockquote {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.section--blue .rich-text th, .section--deep .rich-text th {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}
.section--blue .rich-text th, .section--blue .rich-text td,
.section--deep .rich-text th, .section--deep .rich-text td {
  border-color: rgba(255, 255, 255, .22);
}

/* ---------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------ */
.btn {
  --bs-btn-border-radius: var(--bb-radius-pill);
  border-radius: var(--bb-radius-pill);
  font-weight: 700;
  letter-spacing: .01em;
  padding: .72rem 1.6rem;
  border: 2px solid transparent;
  transition: all var(--bb-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  text-decoration: none;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Primary — the brand blue, used for most actions */
.btn-brand {
  background: var(--bb-blue);
  border-color: var(--bb-blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(40, 22, 112, .28);
}
.btn-brand:hover,
.btn-brand:focus {
  background: var(--bb-blue-lift);
  border-color: var(--bb-blue-lift);
  color: #fff;
  box-shadow: 0 6px 20px rgba(40, 22, 112, .34);
}

/* Gold — reserved for the single highest-emphasis action on a screen,
   which on this site is almost always "Apply Now" */
.btn-gold {
  background: var(--bb-gold);
  border-color: var(--bb-gold);
  color: var(--bb-ink);
  box-shadow: 0 4px 14px rgba(200, 190, 0, .3);
}
.btn-gold:hover,
.btn-gold:focus {
  background: var(--bb-gold-600);
  border-color: var(--bb-gold-600);
  color: var(--bb-ink);
  box-shadow: 0 6px 20px rgba(200, 190, 0, .38);
}

.btn-outline-brand {
  background: transparent;
  border-color: var(--bb-blue);
  color: var(--bb-blue);
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background: var(--bb-blue);
  color: #fff;
}

/* On blue sections */
.btn-on-blue {
  background: #fff;
  border-color: #fff;
  color: var(--bb-blue);
}
.btn-on-blue:hover { background: var(--bb-blue-050); color: var(--bb-blue-dark); }

.btn-ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
  color: #fff;
}

.btn-whatsapp {
  background: #128C7E;
  border-color: #128C7E;
  color: #fff;
}
.btn-whatsapp:hover { background: #0d6d62; border-color: #0d6d62; color: #fff; }

.btn-sm  { padding: .48rem 1.1rem; font-size: .875rem; }
.btn-lg  { padding: .95rem 2.1rem; font-size: 1.06rem; }

/* Text link with a moving arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--bb-blue-link);
}
.link-arrow i { transition: transform var(--bb-transition); }
.link-arrow:hover { text-decoration: none; color: var(--bb-blue-dark); }
.link-arrow:hover i { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   5. HEADER & NAVIGATION
   ------------------------------------------------------------------ */
.topbar {
  background: var(--bb-blue-deep);
  color: rgba(255, 255, 255, .85);
  font-size: .84rem;
  padding: .45rem 0;
}
.topbar a { color: rgba(255, 255, 255, .85); }
.topbar a:hover { color: var(--bb-gold); text-decoration: none; }
.topbar .topbar-item { display: inline-flex; align-items: center; gap: .4rem; }
.topbar .topbar-sep { opacity: .35; margin: 0 .75rem; }

/* The header sits in its own wrapper rather than the page's .container.
   A 1320px grid is right for reading; it is not enough for a nine-section
   nav bar, and there is no reason the two have to agree. */
.header-wrap {
  width: 100%;
  max-width: 1660px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 1.6vw, 1.5rem);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--bb-line-soft);
  transition: box-shadow var(--bb-transition);
}
.site-header.is-stuck { box-shadow: var(--bb-shadow); }

.brand-lockup {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem 0;
  text-decoration: none;
  /* The nav is a flex sibling and will happily squeeze this down until
     the school's name wraps one word per line. It must not shrink. */
  flex: 0 0 auto;
}
.brand-lockup:hover { text-decoration: none; }
/* The crest carries the school's name and motto around its ring, so it
   needs real diameter to read as itself rather than as a smudge. These
   sizes were set by looking at it, not by picking round numbers. */
.brand-lockup img { height: 74px; width: auto; display: block; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name {
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--bb-blue);
  letter-spacing: -.015em;
  white-space: nowrap;
}
.brand-motto {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bb-ink-muted);
  white-space: nowrap;
}

/* Between the nav appearing (1200px) and there being room for everything,
   the lockup drops to the crest plus the name only. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .brand-lockup img { height: 62px; }
  .brand-name { font-size: .92rem; }
  .brand-motto { display: none; }
}

@media (max-width: 400px) {
  .brand-lockup img { height: 52px; }
  .brand-name { font-size: .82rem; }
  .brand-motto { font-size: .58rem; }
}

/* Main nav */
.main-nav .nav-link {
  font-weight: 700;
  font-size: .93rem;
  color: var(--bb-ink);
  padding: 1.5rem .8rem !important;
  position: relative;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.main-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: 1.05rem;
  height: 3px;
  border-radius: 2px;
  background: var(--bb-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--bb-transition);
}
.main-nav .nav-link:hover,
.main-nav .nav-item.active > .nav-link,
.main-nav .nav-link.active { color: var(--bb-blue); }
.main-nav .nav-link:hover::after,
.main-nav .nav-item.active > .nav-link::after,
.main-nav .nav-link.active::after { transform: scaleX(1); }

.main-nav .dropdown-toggle::after {
  margin-left: .35rem;
  border-top-color: currentColor;
  vertical-align: .1em;
}

/* Nine top-level sections plus two buttons are a lot of bar. Three things
   keep them on one line without spilling:
     1. the header gets its own wider wrapper (see .header-wrap above),
     2. below 1200px the whole nav becomes the hamburger (navbar-expand-xl),
     3. between 1200 and 1600 the bar tightens rather than overflowing —
        a school site wants its sections visible on a 1366-wide laptop.
   Measured at every common width from 1200 to 1920; nothing overflows. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .main-nav .nav-link {
    font-size: .78rem;
    padding: 1.5rem .42rem !important;
    letter-spacing: 0;
  }
  .main-nav .nav-link::after { left: .42rem; right: .42rem; }
  .main-nav .dropdown-toggle::after { margin-left: .18rem; }
  .header-actions { gap: .35rem; }
  .header-actions .btn { padding: .45rem .7rem; font-size: .78rem; }
  .brand-lockup { gap: .5rem; margin-right: .75rem; }
}

/* Above 1600 there is room for the full-size bar, but not for the padding
   it had when the header still sat in a 1320px container. */
@media (min-width: 1600px) {
  .main-nav .nav-link { padding: 1.5rem .62rem !important; }
  .main-nav .nav-link::after { left: .62rem; right: .62rem; }
}

/* The brand must never touch the first nav item */
@media (min-width: 1200px) {
  .brand-lockup { margin-right: 1.5rem; }
}

/* The "Portals" button is the first thing to go when space runs short —
   the portals are also linked from the Community menu and the footer. */
.header-portals { display: none; }
@media (min-width: 1500px) { .header-portals { display: inline-flex; } }

/* "Apply Now" is two words; it should never break across two lines */
.header-actions .btn { white-space: nowrap; }

.main-nav .dropdown-menu {
  border: 0;
  border-top: 3px solid var(--bb-gold);
  border-radius: 0 0 var(--bb-radius) var(--bb-radius);
  box-shadow: var(--bb-shadow-lg);
  padding: .6rem;
  min-width: 16rem;
  margin-top: 0;
}
.main-nav .dropdown-item {
  border-radius: 9px;
  padding: .58rem .8rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--bb-ink-soft);
  white-space: normal;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.main-nav .dropdown-item i { color: var(--bb-blue); font-size: 1rem; flex-shrink: 0; }
.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus {
  background: var(--bb-blue-050);
  color: var(--bb-blue-dark);
}
.main-nav .dropdown-header {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bb-ink-muted);
  padding: .6rem .8rem .3rem;
}
.main-nav .dropdown-divider { margin: .4rem .5rem; border-color: var(--bb-line-soft); }


/* Hover-open dropdowns on desktop only */
@media (min-width: 1200px) {
  .main-nav .dropdown:hover > .dropdown-menu { display: block; }
  .main-nav .dropdown > .dropdown-menu { margin-top: 0; }
}

/* A two-column dropdown, for the one menu that carries four sections.
   Declared AFTER the hover rule above, which also sets display on
   .dropdown-menu — at equal specificity the later rule is the one that
   applies, and this menu must be a grid, not a block. */
.main-nav .dropdown-menu--split {
  display: none;
  min-width: 34rem;
  gap: 0 .4rem;
}
.main-nav .dropdown-col { list-style: none; padding: 0; margin: 0; min-width: 0; }
.main-nav .dropdown-col + .dropdown-col {
  border-left: 1px solid var(--bb-line-soft);
  padding-left: .4rem;
}

@media (min-width: 1200px) {
  .main-nav .dropdown-menu--split.show,
  .main-nav .dropdown:hover > .dropdown-menu--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Community sits well to the right of centre, and a 34rem menu hung
     from its left edge runs off the screen. Hang it from the right
     instead. Only the hover path needs this — when Bootstrap opens the
     menu on a click it positions it itself, inline, and keeps it on
     screen; inline styles win over these. */
  .main-nav .dropdown-menu--split {
    left: auto;
    right: 0;
  }
}

/* Below the collapse point the nav is a stack, so the menu is one column
   and reads straight down in order. */
@media (max-width: 1199.98px) {
  .main-nav .dropdown-menu--split { min-width: 0; }
  .main-nav .dropdown-menu--split.show { display: grid; grid-template-columns: 1fr; }
  .main-nav .dropdown-col + .dropdown-col { border-left: 0; padding-left: 0; }
}

/* Header action buttons */
.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-actions .btn { padding: .5rem 1.1rem; font-size: .84rem; }

/* Mobile navigation — everything below the navbar-expand-xl collapse point */
@media (max-width: 1199.98px) {
  .main-nav { padding: .5rem 0 1rem; }
  .main-nav .nav-link { padding: .7rem .25rem !important; border-bottom: 1px solid var(--bb-line-soft); }
  .main-nav .nav-link::after { display: none; }
  .main-nav .dropdown-menu {
    border: 0;
    border-left: 3px solid var(--bb-blue-100);
    border-radius: 0;
    box-shadow: none;
    margin: .25rem 0 .5rem .5rem;
    padding: .25rem 0 .25rem .5rem;
    background: var(--bb-bg);
  }
  .header-actions { width: 100%; padding-top: .75rem; }
  .header-actions .btn { flex: 1; }
  .navbar-collapse { max-height: 78vh; overflow-y: auto; }
}

.navbar-toggler {
  border: 2px solid var(--bb-line);
  border-radius: 10px;
  padding: .4rem .6rem;
}
.navbar-toggler:focus { box-shadow: none; }

/* ---------------------------------------------------------------------
   6. HERO CAROUSEL
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--bb-blue-deep);
}
.hero .swiper { width: 100%; }

.hero-slide {
  position: relative;
  min-height: clamp(30rem, 78vh, 44rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img,
.hero-media video,
.hero-media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 4rem 0;
  color: #fff;
}
.hero-inner { max-width: 44rem; }
.hero-slide[data-align="center"] .hero-inner { margin: 0 auto; text-align: center; }
.hero-slide[data-align="right"]  .hero-inner { margin-left: auto; text-align: right; }

.hero-eyebrow {
  display: inline-block;
  background: var(--bb-gold);
  color: var(--bb-ink);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem .95rem;
  border-radius: var(--bb-radius-pill);
  margin-bottom: 1.25rem;
}
.hero-title {
  color: #fff;
  font-size: clamp(2.2rem, 6vw, 4.1rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: 1rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}
.hero-desc {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255, 255, 255, .93);
  max-width: 38rem;
  margin-bottom: 2rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.hero-slide[data-align="center"] .hero-desc { margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-slide[data-align="center"] .hero-actions { justify-content: center; }

/* Swiper chrome */
.hero .swiper-button-next,
.hero .swiper-button-prev {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: #fff;
  transition: all var(--bb-transition);
}
.hero .swiper-button-next:hover,
.hero .swiper-button-prev:hover { background: var(--bb-gold); border-color: var(--bb-gold); color: var(--bb-ink); }
.hero .swiper-button-next::after,
.hero .swiper-button-prev::after { font-size: 1.05rem; font-weight: 900; }

.hero .swiper-pagination { bottom: 1.75rem !important; }
.hero .swiper-pagination-bullet {
  width: 30px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .45);
  opacity: 1;
  transition: all var(--bb-transition);
}
.hero .swiper-pagination-bullet-active { background: var(--bb-gold); width: 46px; }

@media (max-width: 767.98px) {
  .hero .swiper-button-next,
  .hero .swiper-button-prev { display: none; }
  .hero-slide { min-height: 32rem; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------
   7. INNER PAGE HERO
   ------------------------------------------------------------------ */
.page-hero {
  position: relative;
  background: var(--bb-blue);
  color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.page-hero::after {
  /* A soft gold glow anchored to the corner, echoing the crest */
  content: "";
  position: absolute;
  right: -8%;
  top: -60%;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 193, 0, .22) 0%, rgba(247, 193, 0, 0) 68%);
  pointer-events: none;
}
.page-hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(32, 18, 92, .94) 0%, rgba(40, 22, 112, .82) 58%, rgba(40, 22, 112, .6) 100%);
  z-index: 1;
}
.page-hero--image {
  background-size: cover;
  background-position: center;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: .6rem; }
.page-hero p {
  color: rgba(255, 255, 255, .88);
  font-size: 1.1rem;
  max-width: 44rem;
  margin-bottom: 0;
}
.page-hero .eyebrow { color: var(--bb-gold); }

/* Breadcrumbs */
.bbsc-crumbs {
  background: var(--bb-bg);
  border-bottom: 1px solid var(--bb-line-soft);
  font-size: .875rem;
}
.bbsc-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .85rem 0;
}
.bbsc-crumbs li { display: inline-flex; align-items: center; gap: .45rem; color: var(--bb-ink-muted); }
.bbsc-crumbs li + li::before { content: "/"; color: var(--bb-line); }
.bbsc-crumbs a { color: var(--bb-ink-soft); font-weight: 600; }
.bbsc-crumbs a:hover { color: var(--bb-blue); }
.bbsc-crumbs [aria-current] { color: var(--bb-blue); font-weight: 700; }

/* ---------------------------------------------------------------------
   8. TRUST STATISTICS BAND
   ------------------------------------------------------------------ */
.trust-band {
  background: var(--bb-blue);
  color: #fff;
  position: relative;
}
.trust-band .trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .18);
}
.trust-item {
  background: var(--bb-blue);
  padding: 2.1rem 1.25rem;
  text-align: center;
}
.trust-item i {
  font-size: 1.6rem;
  color: var(--bb-gold);
  display: block;
  margin-bottom: .6rem;
}
.trust-value {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.15;
  margin-bottom: .2rem;
}
.trust-label {
  font-size: .84rem;
  color: rgba(255, 255, 255, .78);
  margin: 0;
}

@media (max-width: 767.98px) {
  .trust-band .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { padding: 1.5rem .75rem; }
}

/* ---------------------------------------------------------------------
   9. CARDS
   ------------------------------------------------------------------ */
/* A card is a plain block. It does NOT stretch to its parent by default:
   `height:100%` here resolved against whatever column it sat in, and a
   Bootstrap column is a stretched flex item, so a card placed above other
   content in a column grew to the full height of the row — pushing the rest
   of the column straight through the bottom of the page and over the footer
   (this is what broke /news). Cards that share a grid row and want equal
   heights say so themselves with `h-100`. */
.bb-card {
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--bb-transition), box-shadow var(--bb-transition), border-color var(--bb-transition);
}
a.bb-card { text-decoration: none; color: inherit; }
.bb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-shadow-lg);
  border-color: var(--bb-blue-200);
}
.bb-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bb-bg-deep);
  max-width: 100%;
}
.bb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
.bb-card:hover .bb-card__media img { transform: scale(1.05); }
.bb-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.bb-card__title {
  font-size: 1.16rem;
  font-weight: 800;
  margin-bottom: .55rem;
  color: var(--bb-ink);
  letter-spacing: -.015em;
}
a.bb-card:hover .bb-card__title { color: var(--bb-blue); }
.bb-card__text {
  color: var(--bb-ink-soft);
  font-size: .95rem;
  margin-bottom: 1rem;
  flex: 1;
}
.bb-card__foot {
  padding-top: .85rem;
  border-top: 1px solid var(--bb-line-soft);
  font-size: .85rem;
  color: var(--bb-ink-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Chip floating over card media */
.bb-card__chip {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  background: var(--bb-gold);
  color: var(--bb-ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .32rem .7rem;
  border-radius: var(--bb-radius-pill);
}
.bb-card__chip--blue { background: var(--bb-blue); color: #fff; }

/* Icon card — used for values, why-choose, approach */
.icon-card {
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  padding: 1.9rem 1.6rem;
  height: 100%;
  transition: all var(--bb-transition);
  position: relative;
  overflow: hidden;
}
.icon-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--bb-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--bb-transition);
}
.icon-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-shadow);
  border-color: var(--bb-blue-200);
}
.icon-card:hover::before { transform: scaleY(1); }
.icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--bb-blue-050);
  color: var(--bb-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
  transition: all var(--bb-transition);
}
.icon-card:hover .icon-badge { background: var(--bb-blue); color: #fff; }
.icon-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.icon-card p { color: var(--bb-ink-soft); font-size: .94rem; margin-bottom: 0; }

/* Gold variant for the accent row */
.icon-card--gold .icon-badge { background: var(--bb-gold-050); color: var(--bb-gold-ink); }
.icon-card--gold:hover .icon-badge { background: var(--bb-gold); color: var(--bb-ink); }

/* Icon card on a blue section */
.section--blue .icon-card,
.section--deep .icon-card {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}
.section--blue .icon-card p,
.section--deep .icon-card p { color: rgba(255, 255, 255, .82); }
.section--blue .icon-badge,
.section--deep .icon-badge { background: rgba(255, 255, 255, .12); color: var(--bb-gold); }
.section--blue .icon-card:hover .icon-badge,
.section--deep .icon-card:hover .icon-badge { background: var(--bb-gold); color: var(--bb-ink); }

/* ---------------------------------------------------------------------
   10. ACADEMIC LEVEL CARDS
   ------------------------------------------------------------------ */
.level-card {
  position: relative;
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  min-height: 24rem;
  display: flex;
  align-items: flex-end;
  background: var(--bb-blue-deep);
  text-decoration: none;
  isolation: isolate;
}
.level-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 500ms cubic-bezier(.4, 0, .2, 1);
}
.level-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(16, 9, 45, .95) 8%, rgba(32, 18, 92, .62) 45%, rgba(40, 22, 112, .18) 100%);
  transition: opacity var(--bb-transition);
}
.level-card:hover img { transform: scale(1.06); }
.level-card__body { position: relative; z-index: 2; padding: 1.9rem; width: 100%; }
.level-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--bb-gold);
  color: var(--bb-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: .9rem;
}
.level-card h3 { color: #fff; font-size: 1.5rem; margin-bottom: .35rem; }
.level-card__tag {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bb-gold);
  margin-bottom: .6rem;
}
.level-card p { color: rgba(255, 255, 255, .85); font-size: .94rem; margin-bottom: 1rem; }
.level-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
}
.level-card__cta i { transition: transform var(--bb-transition); }
.level-card:hover .level-card__cta i { transform: translateX(5px); }

/* ---------------------------------------------------------------------
   11. FEATURE / SPLIT SECTIONS
   ------------------------------------------------------------------ */
.split-media {
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--bb-shadow);
  aspect-ratio: 4 / 3;
  max-width: 100%;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* A gold corner accent for split imagery */
.split-media--accent::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 112px;
  height: 112px;
  border-right: 10px solid var(--bb-gold);
  border-bottom: 10px solid var(--bb-gold);
  border-bottom-right-radius: var(--bb-radius-lg);
  pointer-events: none;
}

/* Tick list */
.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  color: var(--bb-ink-soft);
  font-size: .98rem;
}
.tick-list li i {
  color: var(--bb-blue);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: .12rem;
}
.section--blue .tick-list li,
.section--deep .tick-list li { color: rgba(255, 255, 255, .88); }
.section--blue .tick-list li i,
.section--deep .tick-list li i { color: var(--bb-gold); }

.tick-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.5rem; }
@media (max-width: 575.98px) { .tick-list--2col { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   12. PROCESS STEPS
   ------------------------------------------------------------------ */
.steps { counter-reset: step; display: grid; gap: 1rem; }
.step {
  position: relative;
  display: flex;
  gap: 1.15rem;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  padding: 1.35rem 1.5rem;
  transition: all var(--bb-transition);
}
.step:hover { border-color: var(--bb-blue-200); box-shadow: var(--bb-shadow-sm); }
.step__num {
  counter-increment: step;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--bb-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.05rem;
}
.step__num::before { content: counter(step); }
.step h4 { margin-bottom: .25rem; font-size: 1.05rem; }
.step p { margin-bottom: 0; color: var(--bb-ink-soft); font-size: .94rem; }

/* ---------------------------------------------------------------------
   13. NEWS, EVENTS, GALLERY
   ------------------------------------------------------------------ */
.news-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--bb-ink-muted);
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
.cat-chip {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .24rem .6rem;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-blue-050);
  color: var(--bb-blue-lift);
}

/* Event card with a date tile */
.event-card {
  display: flex;
  gap: 1.15rem;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  padding: 1.35rem;
  height: 100%;
  transition: all var(--bb-transition);
  text-decoration: none;
}
.event-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bb-shadow);
  border-color: var(--bb-blue-200);
  text-decoration: none;
}
.date-tile {
  flex-shrink: 0;
  width: 66px;
  border-radius: var(--bb-radius);
  background: var(--bb-blue);
  color: #fff;
  text-align: center;
  padding: .65rem .35rem;
  align-self: flex-start;
}
.date-tile .d { display: block; font-size: 1.55rem; font-weight: 900; line-height: 1; }
.date-tile .m {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--bb-gold);
  margin-top: .2rem;
}
.date-tile .y { display: block; font-size: .66rem; color: rgba(255, 255, 255, .7); }
.event-card h4 { font-size: 1.05rem; margin-bottom: .35rem; color: var(--bb-ink); }
.event-card:hover h4 { color: var(--bb-blue); }
.event-card p { font-size: .9rem; color: var(--bb-ink-soft); margin-bottom: .5rem; }
.event-card .ev-meta { font-size: .82rem; color: var(--bb-ink-muted); display: flex; flex-wrap: wrap; gap: .75rem; }
.event-card .ev-meta span { display: inline-flex; align-items: center; gap: .3rem; }

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}
.gallery-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--bb-radius);
  overflow: hidden;
  background: var(--bb-bg-deep);
  max-width: 100%;
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms; }
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(32, 18, 92, .72), rgba(32, 18, 92, 0) 55%);
  opacity: 0;
  transition: opacity var(--bb-transition);
}
.gallery-tile:hover img { transform: scale(1.07); }
.gallery-tile:hover::after { opacity: 1; }
.gallery-tile__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: .9rem 1rem;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--bb-transition);
}
.gallery-tile:hover .gallery-tile__label { opacity: 1; transform: translateY(0); }
.gallery-tile__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.6rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   14. TESTIMONIALS
   ------------------------------------------------------------------ */
.quote-card {
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  padding: 2rem 1.75rem 1.6rem;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: .35rem;
  right: 1.4rem;
  font-size: 5rem;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--bb-gold);
  opacity: .45;
}
.quote-card__stars { color: var(--bb-gold-600); font-size: .92rem; margin-bottom: .8rem; letter-spacing: .1em; }
.quote-card__text {
  font-size: 1rem;
  color: var(--bb-ink-soft);
  flex: 1;
  margin-bottom: 1.4rem;
  position: relative;
  z-index: 1;
}
.quote-card__who { display: flex; align-items: center; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--bb-line-soft); }
.quote-card__name { font-weight: 800; font-size: .95rem; color: var(--bb-ink); line-height: 1.3; }
.quote-card__role { font-size: .82rem; color: var(--bb-ink-muted); }

.avatar-img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-initials {
  width: var(--avatar-size, 48px);
  height: var(--avatar-size, 48px);
  border-radius: 50%;
  background: var(--bb-blue-050);
  color: var(--bb-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: calc(var(--avatar-size, 48px) * .38);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   15. STAFF
   ------------------------------------------------------------------ */
/* A grid that fills the row whatever the staff count is, rather than a
   fixed column span that leaves a single card sitting alone on a line */
.staff-grid {
  display: grid;
  gap: 1.5rem;
  /* auto-fit, so a row of five stretches to fill rather than leaving an
     empty track; the card's own max-width stops a short list turning
     into billboards on a wide screen */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;
}
@media (max-width: 575.98px) {
  .staff-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
}

.staff-card {
  display: block;
  width: 100%;
  max-width: 320px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  height: 100%;
  text-align: center;
  transition: all var(--bb-transition);
}
.staff-card:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow); border-color: var(--bb-blue-200); }
.staff-card__photo {
  aspect-ratio: 1;
  background: var(--bb-blue-050);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
}
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-card__photo i { font-size: 3.5rem; color: var(--bb-blue-200); }
.staff-card__body { padding: 1.4rem 1.1rem; }
.staff-card__name { font-weight: 800; font-size: 1.05rem; margin-bottom: .2rem; }
.staff-card__role {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bb-blue);
  margin-bottom: .7rem;
}
.staff-card__bio { font-size: .89rem; color: var(--bb-ink-soft); margin: 0; }

/* ---------------------------------------------------------------------
   16. FORMS
   ------------------------------------------------------------------ */
.form-panel {
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: var(--bb-shadow-sm);
}

.form-label {
  font-weight: 700;
  font-size: .88rem;
  color: var(--bb-ink);
  margin-bottom: .4rem;
}
.form-label .req { color: var(--bb-danger); margin-left: .15rem; }

.form-control,
.form-select {
  border: 1.5px solid var(--bb-line);
  border-radius: 11px;
  padding: .72rem .95rem;
  font-size: .97rem;
  color: var(--bb-ink);
  background-color: #fff;
  transition: border-color var(--bb-transition), box-shadow var(--bb-transition);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bb-blue);
  box-shadow: 0 0 0 4px rgba(40, 22, 112, .12);
  outline: 0;
}
.form-control::placeholder { color: #A0A0B0; }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--bb-danger); }
.form-text { font-size: .82rem; color: var(--bb-ink-muted); }
textarea.form-control { min-height: 8rem; resize: vertical; }

.input-icon { position: relative; }
.input-icon i {
  position: absolute;
  left: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bb-ink-muted);
  pointer-events: none;
}
.input-icon .form-control { padding-left: 2.6rem; }

.field-error {
  display: block;
  color: var(--bb-danger);
  font-size: .82rem;
  font-weight: 600;
  margin-top: .3rem;
}

.form-check-input:checked { background-color: var(--bb-blue); border-color: var(--bb-blue); }
.form-check-input:focus { border-color: var(--bb-blue); box-shadow: 0 0 0 3px rgba(40, 22, 112, .15); }
.form-check-label { font-size: .93rem; color: var(--bb-ink-soft); }

/* Fieldset grouping inside long forms */
.form-fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.form-fieldset legend {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bb-blue);
  padding: 0 0 .5rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--bb-line-soft);
  width: 100%;
  float: none;
}

/* ---------------------------------------------------------------------
   17. ACCORDION (FAQs)
   ------------------------------------------------------------------ */
.accordion-item {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius) !important;
  margin-bottom: .75rem;
  overflow: hidden;
  background: #fff;
}
.accordion-button {
  font-weight: 700;
  font-size: 1rem;
  color: var(--bb-ink);
  padding: 1.1rem 1.35rem;
  background: #fff;
}
.accordion-button:not(.collapsed) {
  background: var(--bb-blue-050);
  color: var(--bb-blue-dark);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: var(--bb-blue-200); }
.accordion-button::after {
  background-image: none;
  content: "\F282";
  font-family: "bootstrap-icons";
  font-size: .9rem;
  width: auto;
  height: auto;
  color: var(--bb-blue);
  transition: transform var(--bb-transition);
}
.accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.accordion-body { padding: 0 1.35rem 1.3rem; color: var(--bb-ink-soft); font-size: .97rem; }

/* ---------------------------------------------------------------------
   18. CTA BAND
   ------------------------------------------------------------------ */
.cta-band {
  background: var(--bb-blue);
  color: #fff;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  left: -6%;
  bottom: -70%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 193, 0, .2) 0%, rgba(247, 193, 0, 0) 70%);
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: .6rem; }
.cta-band p { color: rgba(255, 255, 255, .88); font-size: 1.08rem; margin-bottom: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 767.98px) {
  .cta-actions { margin-top: 1.5rem; }
  .cta-actions .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------
   19. FOOTER
   ------------------------------------------------------------------ */
.site-footer {
  background: var(--bb-blue-deep);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: .93rem;
}
.site-footer h5 {
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  position: relative;
  padding-bottom: .65rem;
}
.site-footer h5::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--bb-gold);
}
.site-footer a { color: rgba(255, 255, 255, .72); }
.site-footer a:hover { color: var(--bb-gold); text-decoration: none; }

/* The crest is drawn for a white ground: its indigo ring and the white
   lettering inside it both vanish against the footer. Give it the white
   disc it was designed to sit on. */
.footer-brand img {
  height: 104px;
  width: 104px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 7px;
  margin-bottom: 1.1rem;
}
.footer-motto {
  color: var(--bb-gold);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { display: inline-flex; align-items: center; gap: .45rem; }
.footer-links a::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  font-size: .7rem;
  color: var(--bb-gold);
  opacity: .65;
  transition: transform var(--bb-transition);
}
.footer-links a:hover::before { transform: translateX(3px); }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: .7rem; margin-bottom: .9rem; align-items: flex-start; }
.footer-contact i { color: var(--bb-gold); font-size: 1rem; margin-top: .18rem; flex-shrink: 0; }

.social-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.social-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all var(--bb-transition);
}
.social-btn:hover { background: var(--bb-gold); color: var(--bb-ink); transform: translateY(-2px); }

.footer-news-item {
  display: flex;
  gap: .8rem;
  padding-bottom: .9rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-news-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.footer-news-item img { width: 62px; height: 52px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.footer-news-item strong { display: block; color: rgba(255, 255, 255, .9); font-size: .88rem; font-weight: 700; line-height: 1.35; }
.footer-news-item span { font-size: .78rem; color: rgba(255, 255, 255, .5); }

.newsletter-form { display: flex; gap: .5rem; margin-top: 1rem; }
.newsletter-form .form-control {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.newsletter-form .form-control::placeholder { color: rgba(255, 255, 255, .5); }
.newsletter-form .form-control:focus {
  background: rgba(255, 255, 255, .16);
  border-color: var(--bb-gold);
  box-shadow: none;
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 2.5rem;
  padding: 1.4rem 0;
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
}
.footer-bottom a { color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------------
   20. FLOATING WHATSAPP
   ------------------------------------------------------------------ */
.wa-float {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--bb-blue);
  color: #fff;
  padding: .8rem 1.1rem;
  border-radius: var(--bb-radius-pill);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 6px 24px rgba(40, 22, 112, .4);
  transition: all var(--bb-transition);
}
.wa-float:hover {
  background: var(--bb-blue-lift);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(40, 22, 112, .5);
  text-decoration: none;
}
.wa-float i { font-size: 1.35rem; }
.wa-float__label { display: inline; }

@media (max-width: 575.98px) {
  .wa-float { padding: .85rem; border-radius: 50%; right: .9rem; bottom: .9rem; }
  .wa-float__label { display: none; }
  .wa-float i { font-size: 1.5rem; }
}

/* Back to top */
.to-top {
  position: fixed;
  right: 1.15rem;
  bottom: 5.2rem;
  z-index: 1039;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--bb-line);
  background: #fff;
  color: var(--bb-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bb-shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--bb-transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--bb-blue); color: #fff; border-color: var(--bb-blue); }
@media (max-width: 575.98px) { .to-top { bottom: 4.6rem; right: .9rem; } }

/* ---------------------------------------------------------------------
   21. EMPTY STATES & NOTICES
   ------------------------------------------------------------------ */
.empty-state {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--bb-bg);
  border: 1px dashed var(--bb-line);
  border-radius: var(--bb-radius-lg);
}
.empty-state i { font-size: 2.6rem; color: var(--bb-blue-200); display: block; margin-bottom: .9rem; }
.empty-state h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.empty-state p { color: var(--bb-ink-muted); margin-bottom: 1.25rem; max-width: 30rem; margin-left: auto; margin-right: auto; }

.notice {
  display: flex;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--bb-radius);
  background: var(--bb-blue-050);
  border-left: 4px solid var(--bb-blue);
  color: var(--bb-ink-soft);
  font-size: .94rem;
}
.notice i { color: var(--bb-blue); font-size: 1.2rem; flex-shrink: 0; margin-top: .1rem; }
.notice--gold { background: var(--bb-gold-050); border-left-color: var(--bb-gold); }
.notice--gold i { color: var(--bb-gold-ink); }
.notice strong { color: var(--bb-ink); }

/* Contact strip */
.contact-tile {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  height: 100%;
  transition: all var(--bb-transition);
}
.contact-tile:hover { border-color: var(--bb-blue-200); box-shadow: var(--bb-shadow-sm); }
/* A long address must wrap inside the tile rather than run off it */
.contact-tile > div { min-width: 0; }
.contact-tile a,
.contact-tile span:not(.contact-tile__icon) { overflow-wrap: anywhere; }
.contact-tile__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--bb-blue-050);
  color: var(--bb-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.contact-tile h4 { font-size: .95rem; margin-bottom: .25rem; }
.contact-tile p, .contact-tile a { font-size: .93rem; color: var(--bb-ink-soft); margin-bottom: 0; }
.contact-tile a:hover { color: var(--bb-blue); }

.map-frame {
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bb-line);
  aspect-ratio: 16 / 9;
  max-width: 100%;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------------
   22. PAGINATION
   ------------------------------------------------------------------ */
.bb-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-top: 3rem;
  list-style: none;
  padding: 0;
}
.bb-pagination a,
.bb-pagination strong,
.bb-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .8rem;
  border-radius: 11px;
  border: 1.5px solid var(--bb-line);
  font-weight: 700;
  font-size: .93rem;
  color: var(--bb-ink-soft);
  background: #fff;
  transition: all var(--bb-transition);
}
.bb-pagination a:hover { border-color: var(--bb-blue); color: var(--bb-blue); text-decoration: none; }
.bb-pagination strong {
  background: var(--bb-blue);
  border-color: var(--bb-blue);
  color: #fff;
}

/* ---------------------------------------------------------------------
   23. SIDEBAR (news, policies)
   ------------------------------------------------------------------ */
.side-panel {
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.side-panel h4 {
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bb-blue);
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--bb-line-soft);
}
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { border-bottom: 1px solid var(--bb-line-soft); }
.side-list li:last-child { border-bottom: 0; }
.side-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .65rem 0;
  font-size: .93rem;
  font-weight: 600;
  color: var(--bb-ink-soft);
}
.side-list a:hover { color: var(--bb-blue); text-decoration: none; }
.side-list .count {
  font-size: .78rem;
  background: var(--bb-bg);
  border-radius: var(--bb-radius-pill);
  padding: .1rem .55rem;
  color: var(--bb-ink-muted);
}

.side-panel--blue { background: var(--bb-blue); border-color: var(--bb-blue); color: rgba(255,255,255,.88); }
.side-panel--blue h4 { color: var(--bb-gold); border-bottom-color: rgba(255,255,255,.18); }
.side-panel--blue p { color: rgba(255,255,255,.85); font-size: .93rem; }
.side-panel--blue h2, .side-panel--blue h3 { color: #fff; }
.side-panel--blue a:not(.btn) { color: var(--bb-gold); }
.side-panel--muted { background: var(--bb-bg); }

/* ---------------------------------------------------------------------
   24. ONLINE LIBRARY
   ------------------------------------------------------------------ */
.book-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
@media (max-width: 575.98px) {
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
}

.book-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  overflow: hidden;
  color: inherit;
  height: 100%;
  transition: transform var(--bb-transition), box-shadow var(--bb-transition), border-color var(--bb-transition);
}
.book-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-shadow);
  border-color: var(--bb-blue-200);
  text-decoration: none;
  color: inherit;
}

/* 3:4 is the shape of a book, and keeping every cover to it stops a
   grid of mixed uploads from turning into a ragged staircase */
.book-card__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bb-blue-050);
  overflow: hidden;
}
.book-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.book-card__flag {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(16, 9, 45, .84);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: var(--bb-radius-pill);
}
.book-card__flag--read { background: var(--bb-gold); color: var(--bb-ink); }

.book-card__body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.book-card__title {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  color: var(--bb-ink);
}
.book-card__author { font-size: .82rem; color: var(--bb-ink-muted); margin: 0; }
.book-card__meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }

/* Book detail */
.book-detail__cover {
  aspect-ratio: 3 / 4;
  background: var(--bb-blue-050);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
}
.book-detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.book-facts { margin: 1.25rem 0 0; font-size: .9rem; }
.book-facts dt {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bb-ink-muted);
  margin-top: .85rem;
}
.book-facts dt:first-child { margin-top: 0; }
.book-facts dd { margin: .1rem 0 0; color: var(--bb-ink); font-weight: 600; }

/* The in-page reader. Tall enough to actually read a page of A4 without
   scrolling the whole document, capped so it never exceeds the screen. */
.book-reader {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  overflow: hidden;
  background: var(--bb-bg);
  height: min(78vh, 900px);
  min-height: 420px;
}
.book-reader iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 767.98px) {
  .book-reader { height: 62vh; min-height: 320px; }
}

/* ---------------------------------------------------------------------
   24. UTILITIES
   ------------------------------------------------------------------ */
.text-brand   { color: var(--bb-blue) !important; }
.text-gold    { color: var(--bb-gold-ink) !important; }
.text-soft    { color: var(--bb-ink-soft) !important; }
.text-muted-2 { color: var(--bb-ink-muted) !important; }
.bg-brand     { background: var(--bb-blue) !important; }
.bg-gold      { background: var(--bb-gold) !important; color: var(--bb-ink) !important; }
.bg-soft      { background: var(--bb-bg) !important; }
.bg-brand-050 { background: var(--bb-blue-050) !important; }

.fw-black { font-weight: 900 !important; }
.rounded-bb { border-radius: var(--bb-radius) !important; }
.rounded-bb-lg { border-radius: var(--bb-radius-lg) !important; }
.shadow-bb { box-shadow: var(--bb-shadow) !important; }

.pill-dot {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 700;
  padding: .22rem .7rem .22rem .55rem;
  border-radius: var(--bb-radius-pill);
  background: color-mix(in srgb, var(--pill) 14%, white);
  color: color-mix(in srgb, var(--pill) 72%, black);
}
.pill-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pill);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pill-dot { background: var(--bb-bg); color: var(--bb-ink-soft); }
}

/* AOS animates a column in from off-screen, which for the length of the
   animation makes the page wider than the window and flashes a horizontal
   scrollbar. Clip the page body rather than the document: overflow on
   <body> would kill the sticky header, and `clip` (unlike `hidden`) does
   not turn this into a scroll container. */
#main-content { overflow-x: clip; }

/* AOS: keep content visible if the library fails to load */
[data-aos] { opacity: 1; }
.aos-init[data-aos] { opacity: 0; }
.aos-init[data-aos].aos-animate { opacity: 1; }

/* Print */
@media print {
  .site-header, .site-footer, .wa-float, .to-top,
  .cta-band, .topbar, .bbsc-crumbs { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* =====================================================================
   SCHOOL SHOP
   ---------------------------------------------------------------------
   The shop takes orders and no money, so nothing here is styled to look
   like a payment flow. The single strongest button on any shop page is
   "Add to basket"; "Place this order" is the only other one, and it says
   in words underneath that nothing is being charged.
   ================================================================== */

/* Search + basket bar, on every shop page */
.shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2rem;
}
.shop-bar__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  /* min-width:0 is what lets a flex item shrink past its content on a
     narrow phone; without it the bar is wider than the screen. */
  flex: 1 1 18rem;
  min-width: 0;
}
.shop-bar__search > i {
  position: absolute;
  left: .85rem;
  color: var(--bb-ink-muted);
  pointer-events: none;
  font-size: .95rem;
}
.shop-bar__search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-pill);
  padding: .6rem 1rem .6rem 2.4rem;
  font-size: .95rem;
  background: #fff;
  color: var(--bb-ink);
}
.shop-bar__search input:focus {
  outline: none;
  border-color: var(--bb-blue);
  box-shadow: 0 0 0 3px var(--bb-blue-050);
}
.shop-bar__basket {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.15rem;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-pill);
  background: #fff;
  font-weight: 700;
  font-size: .93rem;
  color: var(--bb-ink-soft);
  white-space: nowrap;
}
.shop-bar__basket:hover { color: var(--bb-blue); border-color: var(--bb-blue-200); text-decoration: none; }
.shop-bar__basket.has-items { border-color: var(--bb-blue); color: var(--bb-blue); }
.shop-bar__count {
  min-width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-blue);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  padding: 0 .35rem;
}

/* Product card */
.shop-card { display: flex; flex-direction: column; width: 100%; }
.shop-card .bb-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.shop-card .bb-card__title a { color: inherit; }
.shop-card .bb-card__title a:hover { color: var(--bb-blue); text-decoration: none; }
.shop-card form { margin-top: auto; }
.shop-card.is-sold-out .bb-card__media img { filter: grayscale(1); opacity: .62; }

.bb-card__chip--muted { background: var(--bb-ink-soft); color: #fff; }

.shop-price {
  font-weight: 900;
  color: var(--bb-blue);
  font-size: 1.05rem;
}
.shop-price--lg { font-size: 1.75rem; letter-spacing: -.02em; }

/* Item page */
.shop-figure {
  position: relative;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
}
.shop-figure img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.shop-buy { margin-bottom: .5rem; }

/* Basket table */
.shop-table th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--bb-ink-muted);
  font-weight: 800;
  border-bottom: 2px solid var(--bb-line);
}
.shop-table td { vertical-align: middle; }
.shop-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bb-bg);
  flex: 0 0 auto;
}
.shop-total { font-size: 2rem; font-weight: 900; color: var(--bb-gold); letter-spacing: -.02em; }
.side-panel--blue ol, .side-panel--blue ul, .side-panel--blue li { color: rgba(255,255,255,.88); }
.side-panel--blue li { margin-bottom: .4rem; }
.side-panel--blue li:last-child { margin-bottom: 0; }

/* Checkout summary */
.shop-summary { list-style: none; padding: 0; margin: 0 0 1rem; }
.shop-summary li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--bb-line-soft);
  font-size: .93rem;
}
.shop-summary__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding-top: .8rem;
  border-top: 2px solid var(--bb-blue);
  font-weight: 800;
}
.shop-summary__total strong { font-size: 1.3rem; color: var(--bb-blue); }

/* Hints under a field */
.form-hint {
  display: block;
  margin-top: .3rem;
  font-size: .82rem;
  color: var(--bb-ink-muted);
  line-height: 1.45;
}

/* Order received */
.order-done { text-align: center; }
.order-done__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--bb-gold);
  color: var(--bb-ink);
  font-size: 2rem;
}
.order-done__ref {
  display: inline-block;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--bb-blue);
  background: var(--bb-blue-050);
  border: 1px dashed var(--bb-blue-200);
  border-radius: var(--bb-radius-lg);
  padding: .6rem 1.4rem;
}

@media (max-width: 575.98px) {
  .shop-bar__basket { flex: 1 1 auto; justify-content: center; }
  .shop-price--lg { font-size: 1.45rem; }
  .shop-total { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------------
   19. VIDEO LESSONS
   ------------------------------------------------------------------ */

/* ---- A lesson card ------------------------------------------------ */
.lesson-card .bb-card__media { aspect-ratio: 16 / 9; }
.lesson-card .bb-card__media img { width: 100%; height: 100%; object-fit: cover; }

.lesson-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lesson-card__play i {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  /* Solid, not translucent: over a YouTube still the contrast of a
     see-through button is whatever the frame happens to be. */
  background: var(--bb-gold);
  color: var(--bb-blue-deep);
  box-shadow: 0 4px 16px rgba(16, 9, 45, .45);
  transition: transform var(--bb-transition), background var(--bb-transition);
}
.lesson-card:hover .lesson-card__play i { transform: scale(1.1); }

.lesson-card__time {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  padding: .12rem .45rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(16, 9, 45, .88);
  color: #fff;
}

.lesson-card .bb-card__foot { gap: .75rem; }
.lesson-card .bb-card__foot > span:first-child { min-width: 0; }

/* ---- The player --------------------------------------------------- */
.lesson-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--bb-radius-lg);
  overflow: hidden;
  background: var(--bb-blue-deep);
  box-shadow: var(--bb-shadow);
}
.lesson-player__still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lesson-player__frame { width: 100%; height: 100%; border: 0; display: block; }

.lesson-player__go {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  border: 0;
  cursor: pointer;
  /* A scrim under the whole button: the label has to stay readable over
     whatever frame YouTube chose for the thumbnail. */
  background: linear-gradient(180deg, rgba(16, 9, 45, .30), rgba(16, 9, 45, .68));
  color: #fff;
  transition: background var(--bb-transition);
}
.lesson-player__go:hover { background: linear-gradient(180deg, rgba(16, 9, 45, .42), rgba(16, 9, 45, .78)); }
.lesson-player__go:focus-visible { outline: 3px solid var(--bb-gold); outline-offset: -5px; }

.lesson-player__icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  font-size: 2.6rem;
  line-height: 1;
  background: var(--bb-gold);
  color: var(--bb-blue-deep);
  box-shadow: 0 6px 24px rgba(16, 9, 45, .5);
  transition: transform var(--bb-transition);
}
.lesson-player__go:hover .lesson-player__icon { transform: scale(1.07); }

.lesson-player__label {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .01em;
  text-shadow: 0 1px 6px rgba(16, 9, 45, .8);
}

/* ---- Who taught it ------------------------------------------------ */
.lesson-teacher {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  background: var(--bb-blue-050);
}
.lesson-teacher img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.lesson-teacher__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 1.6rem;
  background: var(--bb-blue);
  color: #fff;
}
.lesson-teacher a { color: var(--bb-blue-link); text-decoration: none; }
.lesson-teacher a:hover { text-decoration: underline; }

/* ---- Watch next --------------------------------------------------- */
.lesson-mini {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
.lesson-mini:hover strong { color: var(--bb-blue); }
.lesson-mini__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bb-blue-deep);
  line-height: 0;
}
.lesson-mini__thumb img { width: 96px; height: 72px; object-fit: cover; }
.lesson-mini__thumb i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(16, 9, 45, .85);
}

/* ---- A note to the reader ----------------------------------------- */
.note-panel {
  border: 1px solid var(--bb-line);
  border-left: 4px solid var(--bb-gold);
  border-radius: var(--bb-radius);
  background: var(--bb-bg);
  padding: 1.4rem 1.6rem;
}
.note-panel h3 { margin-bottom: .5rem; }
.note-panel p { color: var(--bb-ink-soft); }
.note-panel a { color: var(--bb-blue-link); }

@media (max-width: 575.98px) {
  .lesson-player__icon { width: 3.8rem; height: 3.8rem; font-size: 2rem; }
  .lesson-player__label { font-size: .95rem; }
  .lesson-teacher { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   20. DONATIONS
   ------------------------------------------------------------------ */

/* Donate in the utility bar. The header itself is full: nine sections
   and two buttons already, and a third button ran the navigation off the
   right edge at 1280px and below. */
.topbar-give {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .85rem;
  padding: .12rem .7rem;
  border-radius: var(--bb-radius-pill);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  background: var(--bb-gold);
  color: var(--bb-blue-deep);
  transition: background var(--bb-transition), transform var(--bb-transition);
}
.topbar-give:hover { background: #FFD23A; color: var(--bb-blue-deep); transform: translateY(-1px); }
.topbar-give i { font-size: .78rem; }

.cause-card--general { border-color: var(--bb-gold); }

/* ---- The giving form ---------------------------------------------- */
.give-box {
  position: sticky;
  top: 6.5rem;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-top: 4px solid var(--bb-gold);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow);
  padding: 1.75rem;
}

.amount-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.amount-chip {
  flex: 1 1 auto;
  min-width: 5.2rem;
  padding: .55rem .4rem;
  border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius);
  background: #fff;
  font-weight: 700;
  font-size: .92rem;
  color: var(--bb-ink);
  cursor: pointer;
  transition: border-color var(--bb-transition), background var(--bb-transition), color var(--bb-transition);
}
.amount-chip:hover { border-color: var(--bb-blue-200); background: var(--bb-blue-050); }
.amount-chip.is-on {
  border-color: var(--bb-blue);
  background: var(--bb-blue);
  color: #fff;
}
.amount-chip:focus-visible { outline: 3px solid var(--bb-gold); outline-offset: 2px; }

/* ---- After paying -------------------------------------------------- */
.give-result {
  text-align: center;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-lg);
  box-shadow: var(--bb-shadow);
  padding: 2.5rem 2rem;
}
.give-result--good { border-top: 4px solid var(--bb-gold); }

.give-result__mark {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  font-size: 2rem;
  /* Success is the school's own indigo rather than a generic green: the
     page already says "Thank you", and colour alone never carries the
     message. */
  background: var(--bb-blue);
  color: #fff;
}
.give-result__mark--wait { background: var(--bb-gold-050); color: var(--bb-gold-ink); }
.give-result__mark--stop { background: var(--bb-bg-deep); color: var(--bb-ink-soft); }

.give-result__ref {
  display: inline-block;
  margin: 1.25rem 0;
  padding: .7rem 1.6rem;
  border: 1px dashed var(--bb-blue-200);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-blue-050);
}
.give-result__ref strong {
  display: block;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--bb-blue);
}

@media (max-width: 991.98px) {
  .give-box { position: static; }
}
@media (max-width: 575.98px) {
  .give-box { padding: 1.25rem; }
  .give-result { padding: 1.75rem 1.1rem; }
  .give-result__ref strong { font-size: 1.05rem; }
}