@charset "UTF-8";
/* ==========================================================================
   CIBET — theme-spectrum.css
   Colour system built from the CIBET Council logo.

   HOW TO USE
   Load after main.css and it wins on the cascade:

     <link rel="stylesheet" href="/assets/css/main.css">
     <link rel="stylesheet" href="/assets/css/theme-spectrum.css">

   Delete that one line to revert. Only tokens and a few component rules are
   overridden — every layout rule in main.css keeps working untouched.

   ---------------------------------------------------------------------------
   WHERE THESE VALUES COME FROM

   Every colour below was sampled directly from the supplied logo file by
   reading pixels around the arc at three-degree intervals, so the spectrum
   order matches the mark exactly rather than being approximated by eye.

   The arc runs blue → teal → yellow → orange → crimson → magenta → purple →
   violet → indigo, with the wordmark in navy. That gives one anchor colour
   and nine accents.

   ---------------------------------------------------------------------------
   THE RULE THAT KEEPS NINE COLOURS FROM LOOKING LIKE A TOY

   Nine accents is a lot. The discipline that makes it read as institutional
   rather than chaotic:

     1. Navy carries all structure — headers, footers, dark bands, body text.
        The spectrum never becomes a background for large areas.
     2. Each colour OWNS a section of the site. It is not decoration applied
        at random; a reader learns that teal means Education and crimson means
        Events, and the colour becomes wayfinding.
     3. Accents appear on edges, not fills: top rules on cards, left rules on
        panels, underlines, small marks, button faces.
     4. One accent per component. Never two accent colours in the same card.

   ---------------------------------------------------------------------------
   ACCESSIBILITY

   The raw brand values are fills and rules. Several are far too light for
   text — the logo yellow scores 1.67:1 on white, nowhere near the 4.5:1
   needed. So each colour has an "-ink" variant, darkened until it passes AA
   at body size, used wherever the colour appears as text or a small icon.
   Both sets are listed together below so the pairing stays obvious.
   ========================================================================== */

:root {

  /* ---- Anchor: the wordmark navy ------------------------------------- */
  --navy-900: #06224f;   /* deepest ground: footer, dark bands, body text */
  --navy-800: #0a2f68;   /* dark surfaces, navbar */
  --blue-700: #005fb8;   /* primary interactive — the logo's own blue */
  --blue-500: #1a7cd6;   /* hover, focus */

  /* ---- The spectrum, in arc order ------------------------------------ */
  /* -brand : fills, rules, edges, button faces
     -ink   : the same hue darkened to pass AA on white, for text
     -tint  : a near-white wash for hover states and soft panels          */

  --c-blue:        #005fb8;
  --c-blue-ink:    #005fb8;   /* 6.31:1 on white */
  --c-blue-tint:   #e9f4fe;

  --c-teal:        #10a8af;
  --c-teal-ink:    #0a7e84;   /* 4.85 on white, 4.56 on its own tint */
  --c-teal-tint:   #ebfbfc;

  --c-yellow:      #febe09;
  --c-yellow-ink:  #916b00;   /* 4.88 on white, 4.60 on tint. Raw yellow is 1.67 — never used as text */
  --c-yellow-tint: #fef8e9;

  --c-orange:      #fa6d00;
  --c-orange-ink:  #b95100;   /* 4.95 on white, 4.50 on tint */
  --c-orange-tint: #fef2e9;

  --c-crimson:     #de0135;
  --c-crimson-ink: #d90134;   /* 5.24 on white, 4.52 on tint */
  --c-crimson-tint:#fee9ee;

  --c-magenta:     #c60963;
  --c-magenta-ink: #c60963;   /* 5.80:1 */
  --c-magenta-tint:#fdeaf3;

  --c-purple:      #7f0072;
  --c-purple-ink:  #7f0072;   /* 9.79:1 */
  --c-purple-tint: #fee9fc;

  --c-violet:      #420776;
  --c-violet-ink:  #420776;   /* 13.78:1 */
  --c-violet-tint: #f4eafd;

  --c-indigo:      #28118f;
  --c-indigo-ink:  #28118f;   /* 13.40:1 */
  --c-indigo-tint: #eeebfc;

  /* ---- Gold tokens remapped -----------------------------------------
     main.css refers to --gold-* throughout. Rather than edit hundreds of
     rules, those names are repointed at the logo's yellow-to-orange end,
     so every existing gold accent becomes a spectrum accent automatically. */
  --gold-800: #7a5a00;
  --gold-700: #916b00;   /* AA on white and on --gold-100 */
  --gold-600: #c48c00;
  --gold-500: #febe09;   /* the logo yellow — fills and rules */
  --gold-400: #ffd24d;   /* on dark grounds */
  --gold-200: #ffe9a8;
  --gold-100: #fef8e9;

  /* ---- Neutrals ------------------------------------------------------ */
  --ink:      #10203f;
  --slate:    #4b5872;
  --slate-2:  #6a7690;
  --line:     #dde3ed;
  --line-2:   #eef1f7;
  --mist:     #f5f7fb;
  --warm:     #fef8e9;   /* the yellow wash, used as the warm section tint */
  --paper:    #ffffff;

  --on-dark:      #ffffff;
  --on-dark-soft: #bdcbe4;
  --line-dark:    rgba(255, 255, 255, .16);

  --ok:    #17734a;
  --error: #c1121f;
}

/* ==========================================================================
   SECTION OWNERSHIP
   Each area of the site is assigned one colour, set as --accent on a wrapper.
   Components inside inherit it, so a card, a rule and a button in the same
   section always agree without any of them naming a colour directly.
   ========================================================================== */

:root { --accent: var(--c-blue); --accent-ink: var(--c-blue-ink); --accent-tint: var(--c-blue-tint); }

body[data-section="about"]      { --accent: var(--c-indigo);  --accent-ink: var(--c-indigo-ink);  --accent-tint: var(--c-indigo-tint); }
body[data-section="councils"]   { --accent: var(--c-violet);  --accent-ink: var(--c-violet-ink);  --accent-tint: var(--c-violet-tint); }
body[data-section="membership"] { --accent: var(--c-blue);    --accent-ink: var(--c-blue-ink);    --accent-tint: var(--c-blue-tint); }
body[data-section="programmes"] { --accent: var(--c-teal);    --accent-ink: var(--c-teal-ink);    --accent-tint: var(--c-teal-tint); }
body[data-section="events"]     { --accent: var(--c-crimson); --accent-ink: var(--c-crimson-ink); --accent-tint: var(--c-crimson-tint); }
body[data-section="insights"]   { --accent: var(--c-magenta); --accent-ink: var(--c-magenta-ink); --accent-tint: var(--c-magenta-tint); }
body[data-section="chapters"]   { --accent: var(--c-purple);  --accent-ink: var(--c-purple-ink);  --accent-tint: var(--c-purple-tint); }
body[data-section="partner"]    { --accent: var(--c-orange);  --accent-ink: var(--c-orange-ink);  --accent-tint: var(--c-orange-tint); }
body[data-section="contact"]    { --accent: var(--c-orange);  --accent-ink: var(--c-orange-ink);  --accent-tint: var(--c-orange-tint); }

/* Per-council accents, matching the pillar colours used on the homepage. */
body[data-council="entrepreneurship"] { --accent: var(--c-orange);  --accent-ink: var(--c-orange-ink);  --accent-tint: var(--c-orange-tint); }
body[data-council="technology"]       { --accent: var(--c-blue);    --accent-ink: var(--c-blue-ink);    --accent-tint: var(--c-blue-tint); }
body[data-council="education"]        { --accent: var(--c-teal);    --accent-ink: var(--c-teal-ink);    --accent-tint: var(--c-teal-tint); }
body[data-council="innovation"]       { --accent: var(--c-magenta); --accent-ink: var(--c-magenta-ink); --accent-tint: var(--c-magenta-tint); }

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- Buttons: a colour per role ---------------------------------------- */

.btn--primary { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Secondary picks up the section accent, so "Fees" on a membership page is
   blue and "Past events" on an events page is crimson. */
.btn--gold {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--gold:hover { filter: brightness(1.12); color: #fff; }

/* Yellow, teal and orange are too light to carry white text: white on the
   logo orange is only 2.90:1. Navy on the same orange is 5.37:1, so the
   brand colour survives and the label stays legible. */
body[data-section="partner"] .btn--gold,
body[data-section="contact"] .btn--gold,
.btn--yellow { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--navy-900); }
body[data-section="programmes"] .btn--gold { color: var(--navy-900); }   /* teal */
body[data-section="partner"] .btn--gold:hover,
body[data-section="contact"] .btn--gold:hover,
.btn--yellow:hover { background: var(--c-orange); border-color: var(--c-orange); color: var(--navy-900); }

.btn--ghost { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn--ghost:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.btn--light { background: #fff; border-color: #fff; color: var(--navy-900); }
.btn--light:hover { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--navy-900); }
.btn--outline-light:hover { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--navy-900); }

/* Explicit single-colour buttons, for when a page needs to name one. */
.btn--blue    { background: var(--c-blue);    border-color: var(--c-blue);    color: #fff; }
.btn--teal    { background: var(--c-teal);    border-color: var(--c-teal);    color: var(--navy-900); }
.btn--orange  { background: var(--c-orange);  border-color: var(--c-orange);  color: var(--navy-900); }
.btn--crimson { background: var(--c-crimson); border-color: var(--c-crimson); color: #fff; }
.btn--magenta { background: var(--c-magenta); border-color: var(--c-magenta); color: #fff; }
.btn--purple  { background: var(--c-purple);  border-color: var(--c-purple);  color: #fff; }
.btn--violet  { background: var(--c-violet);  border-color: var(--c-violet);  color: #fff; }
.btn--indigo  { background: var(--c-indigo);  border-color: var(--c-indigo);  color: #fff; }
.btn--blue:hover, .btn--teal:hover, .btn--orange:hover, .btn--crimson:hover,
.btn--magenta:hover, .btn--purple:hover, .btn--violet:hover, .btn--indigo:hover { filter: brightness(1.12); }

/* ---- The spectrum bar: the mark's arc, flattened into a rule ----------- */
/* Used under the header and above the footer. Nine equal segments in arc
   order, so the device reads as the logo rather than as a generic gradient. */
.spectrum-bar {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--c-blue)    0 11.11%,
    var(--c-teal)    11.11% 22.22%,
    var(--c-yellow)  22.22% 33.33%,
    var(--c-orange)  33.33% 44.44%,
    var(--c-crimson) 44.44% 55.55%,
    var(--c-magenta) 55.55% 66.66%,
    var(--c-purple)  66.66% 77.77%,
    var(--c-violet)  77.77% 88.88%,
    var(--c-indigo)  88.88% 100%);
}

/* ---- Section headings: rule takes the section colour ------------------ */
.section-head::before { background: var(--accent); width: 3.5rem; height: 3px; }
.section--dark .section-head::before,
.section--deep .section-head::before { background: var(--c-yellow); }

.eyebrow { color: var(--accent-ink); }
.section--dark .eyebrow, .section--deep .eyebrow { color: var(--c-yellow); }

/* ---- Cards: coloured top edge ----------------------------------------- */
.card { border-top: 3px solid var(--pillar, var(--accent)); }
.card:hover { border-color: var(--accent); }

/* Cycle the spectrum across a run of cards, so a five-card row shows the
   mark's range rather than one colour repeated. */
.grid--5 > .card:nth-child(1),
.grid--3 > .card:nth-child(1) { --pillar: var(--c-blue); }
.grid--5 > .card:nth-child(2),
.grid--3 > .card:nth-child(2) { --pillar: var(--c-teal); }
.grid--5 > .card:nth-child(3),
.grid--3 > .card:nth-child(3) { --pillar: var(--c-orange); }
.grid--5 > .card:nth-child(4) { --pillar: var(--c-magenta); }
.grid--5 > .card:nth-child(5) { --pillar: var(--c-violet); }

/* ---- Answer blocks ---------------------------------------------------- */
.answer {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  padding: var(--s-4);
  border-radius: var(--radius);
}
.section--dark .answer, .section--deep .answer {
  background: rgba(255, 255, 255, .07);
  border-left-color: var(--c-yellow);
}

/* ---- Pillar band: one colour per pillar ------------------------------- */
.pillars { background: var(--navy-900); }
.pillar { border-left-color: rgba(255, 255, 255, .14); }
.pillar:nth-child(1) .pillar__code { background: var(--c-orange);  color: #fff; }
.pillar:nth-child(2) .pillar__code { background: var(--c-blue);    color: #fff; }
.pillar:nth-child(3) .pillar__code { background: var(--c-teal);    color: var(--navy-900); }
.pillar:nth-child(4) .pillar__code { background: var(--c-magenta); color: #fff; }
.pillar h3 a:hover { color: var(--c-yellow) !important; }

/* ---- Statistics: each figure a different colour ----------------------- */
.stat { background: var(--navy-900); border-top: 3px solid transparent; }
.stat:nth-child(1) { border-top-color: var(--c-blue); }
.stat:nth-child(2) { border-top-color: var(--c-teal); }
.stat:nth-child(3) { border-top-color: var(--c-yellow); }
.stat:nth-child(4) { border-top-color: var(--c-orange); }
.stat:nth-child(1) .stat__figure { color: #5eb0f5; }
.stat:nth-child(2) .stat__figure { color: #4fd4da; }
.stat:nth-child(3) .stat__figure { color: var(--c-yellow); }
.stat:nth-child(4) .stat__figure { color: #ff9a4d; }

/* ---- Index list: rotating left rule ----------------------------------- */
.index-item:hover { background: var(--accent-tint); border-left-color: var(--accent); }
.index-item:nth-child(1):hover { border-left-color: var(--c-blue); background: var(--c-blue-tint); }
.index-item:nth-child(2):hover { border-left-color: var(--c-teal); background: var(--c-teal-tint); }
.index-item:nth-child(3):hover { border-left-color: var(--c-yellow); background: var(--c-yellow-tint); }
.index-item:nth-child(4):hover { border-left-color: var(--c-orange); background: var(--c-orange-tint); }
.index-item:nth-child(5):hover { border-left-color: var(--c-crimson); background: var(--c-crimson-tint); }
.index-item:nth-child(6):hover { border-left-color: var(--c-magenta); background: var(--c-magenta-tint); }
.index-item:nth-child(7):hover { border-left-color: var(--c-purple); background: var(--c-purple-tint); }
.index-item__num { color: var(--accent-ink); }

/* ---- Benefits: numbered in rotating colour ---------------------------- */
.benefit:hover { background: var(--accent-tint); }
.benefit:nth-child(1) .benefit__num { color: var(--c-blue-ink); }
.benefit:nth-child(2) .benefit__num { color: var(--c-teal-ink); }
.benefit:nth-child(3) .benefit__num { color: var(--c-yellow-ink); }
.benefit:nth-child(4) .benefit__num { color: var(--c-orange-ink); }
.benefit:nth-child(5) .benefit__num { color: var(--c-crimson-ink); }
.benefit:nth-child(6) .benefit__num { color: var(--c-magenta-ink); }
.benefit:nth-child(7) .benefit__num { color: var(--c-purple-ink); }
.benefit:nth-child(8) .benefit__num { color: var(--c-violet-ink); }

/* ---- Events ----------------------------------------------------------- */
.event { border-top: 2px solid transparent; }
.event:hover { border-top-color: var(--c-crimson); border-color: var(--c-crimson); }
.event__day { color: var(--c-crimson-ink); }
.event__date { border-right-color: var(--c-crimson-tint); }

/* ---- Tags: outlined in their own colour ------------------------------- */
.tag {
  background: transparent;
  border-color: var(--pillar, var(--line));
  color: var(--slate);
}
.tag::before { background: var(--pillar, var(--accent)); }

/* ---- Chapters and directory ------------------------------------------- */
.region__name, .region-block__head { border-bottom-color: var(--c-purple); }
.chapter-table thead th { border-bottom-color: var(--c-purple); }
.chapter-table tbody tr:hover, .table tbody tr:hover { background: var(--c-purple-tint); }
.region-filter a[aria-current="true"] { background: var(--c-purple); border-color: var(--c-purple); color: #fff; }
.region-filter a:hover { background: var(--c-purple-tint); border-color: var(--c-purple); color: var(--c-purple-ink); }
.status--active  { color: var(--ok); }
.status--forming { color: var(--c-orange-ink); background: var(--c-orange-tint); border-color: var(--c-orange); }

/* ---- FAQ -------------------------------------------------------------- */
.faq__item > summary::after { color: var(--accent-ink); }
.faq__item[open] { background: var(--accent-tint); }
.faq__item[open] > summary { color: var(--accent-ink); }

/* ---- Quotes and testimonials ------------------------------------------ */
.quote, .member-quote { border-left-color: var(--accent); }
.quote::before, .member-quote::before { color: var(--accent); }

/* ---- Qualify panel on council pages ----------------------------------- */
.qualify { background: var(--accent-tint); border-top-color: var(--accent); }
.qualify li::before { color: var(--accent-ink); }

/* ---- Navbar and mega-menu --------------------------------------------- */
.navbar {
  background: var(--navy-900);
  border-top: 0;
}
.navbar .nav__link::after { background: var(--c-yellow); }

/* Each top-level item takes its own section colour on hover, previewing
   where the link leads. */
.navbar .nav__item:nth-child(1) .nav__link::after { background: var(--c-indigo); }
.navbar .nav__item:nth-child(2) .nav__link::after { background: var(--c-violet); }
.navbar .nav__item:nth-child(3) .nav__link::after { background: var(--c-blue); }
.navbar .nav__item:nth-child(4) .nav__link::after { background: var(--c-teal); }
.navbar .nav__item:nth-child(5) .nav__link::after { background: var(--c-crimson); }
.navbar .nav__item:nth-child(6) .nav__link::after { background: var(--c-magenta); }
.navbar .nav__item:nth-child(7) .nav__link::after { background: var(--c-orange); }

.megamenu { border-top: 3px solid var(--accent); }
.navbar .nav__item:nth-child(1) .megamenu { border-top-color: var(--c-indigo); }
.navbar .nav__item:nth-child(2) .megamenu { border-top-color: var(--c-violet); }
.navbar .nav__item:nth-child(3) .megamenu { border-top-color: var(--c-blue); }
.navbar .nav__item:nth-child(4) .megamenu { border-top-color: var(--c-teal); }
.navbar .nav__item:nth-child(5) .megamenu { border-top-color: var(--c-crimson); }
.navbar .nav__item:nth-child(6) .megamenu { border-top-color: var(--c-magenta); }

.megamenu__list a:hover, .megamenu__list a:focus-visible {
  background: var(--mist);
  border-left-color: var(--accent);
}
.megamenu__feature { background: var(--mist); }
.megamenu__eyebrow { color: var(--accent-ink); }
.megamenu__cta { border-bottom-color: var(--accent); }

/* Topbar */
.topbar__links a::after { background: var(--accent); }
.social a:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.social li:nth-child(2) a:hover { background: var(--c-magenta); border-color: var(--c-magenta); }
.social li:nth-child(3) a:hover { background: var(--c-crimson); border-color: var(--c-crimson); }
.topbar__cta { background: var(--c-orange); border-color: var(--c-orange); color: var(--navy-900); }
.topbar__cta:hover { background: var(--c-crimson); border-color: var(--c-crimson); color: #fff; }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  background: linear-gradient(155deg, var(--navy-900) 0%, #0a2f68 60%, #0d3a80 100%);
  border-top: 0;
}
.hero::after {
  background: radial-gradient(circle, rgba(0, 95, 184, .35) 0%, transparent 66%);
}
.hero__panel { border-top-color: var(--c-yellow); }
.hero__steps b { color: var(--c-yellow); }

.council-hero::after {
  background: linear-gradient(100deg, rgba(6, 34, 79, .94) 0%, rgba(10, 47, 104, .86) 55%, rgba(10, 47, 104, .68) 100%);
}
.council-hero__badge { background: var(--accent); color: #fff; }
body[data-council="education"] .council-hero__badge,
body[data-council="entrepreneurship"] .council-hero__badge { color: var(--navy-900); }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { background: var(--navy-900); border-top: 0; }
.footer-col:nth-child(2) h2 { color: var(--c-blue);    filter: brightness(1.6); }
.footer-col:nth-child(3) h2 { color: var(--c-teal); }
.footer-col:nth-child(4) h2 { color: var(--c-yellow); }
.footer-col:nth-child(5) h2 { color: var(--c-orange); }
.footer-col a:hover { color: var(--c-yellow); }

/* ---- CTA panels -------------------------------------------------------- */
.cta-panel:first-child { background: var(--c-blue-tint); }
.cta-panel:last-child  { background: var(--c-orange-tint); }

/* ---- Image placeholders ------------------------------------------------ */
.imgslot__badge { background: var(--accent); color: #fff; }
body[data-section="partner"] .imgslot__badge,
body[data-section="contact"] .imgslot__badge { color: var(--navy-900); }
.imgslot__alt { color: var(--accent-ink); }
.portrait__ph { background: var(--navy-800); }

/* ---- Links and focus --------------------------------------------------- */
.prose a { text-decoration-color: var(--accent); }
.link-arrow:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
:focus-visible { outline-color: var(--c-blue); }
.section--dark :focus-visible, .section--deep :focus-visible,
.hero :focus-visible, .navbar :focus-visible { outline-color: var(--c-yellow); }

/* ---- Council cards: one colour each ------------------------------------ */
.grid--2 > .council-card:nth-child(1) { --pillar: var(--c-orange); }
.grid--2 > .council-card:nth-child(2) { --pillar: var(--c-blue); }
.grid--2 > .council-card:nth-child(3) { --pillar: var(--c-teal); }
.grid--2 > .council-card:nth-child(4) { --pillar: var(--c-magenta); }
.council-card { border-top-width: 4px; }

/* ---- Story cards ------------------------------------------------------- */
.story { border-top: 3px solid transparent; }
.grid--3 > .story:nth-child(1) { border-top-color: var(--c-blue); }
.grid--3 > .story:nth-child(2) { border-top-color: var(--c-teal); }
.grid--3 > .story:nth-child(4) { border-top-color: var(--c-orange); }
.grid--3 > .story:nth-child(5) { border-top-color: var(--c-crimson); }
.grid--3 > .story:nth-child(6) { border-top-color: var(--c-magenta); }
.grid--3 > .story:nth-child(7) { border-top-color: var(--c-violet); }
.story--featured { border-top: 4px solid var(--c-blue); }
.story-cta { background: var(--navy-800); }

@media (forced-colors: active) {
  .spectrum-bar { display: none; }
}