@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
/* ===== JKA brand tokens — single source of truth for color ===== */
/* Gold matches style.a6129.css's #9c8354 (already sitewide on buttons/links/hovers) —
   everything else (loader, footer, any future component) must read from these vars
   instead of hardcoding a slightly-different gold, or the site drifts out of sync. */
:root {
    --jka-black:      #000000;
    --jka-ink:         #0d0d0d;
    --jka-gold-light: #e4d1b0;
    --jka-gold:        #9c8354;
    --jka-gold-rgb:    156,131,84; /* same value as --jka-gold, for rgba() glows */
    --jka-gold-dark:  #6e4d2e;
    /* Vivid gold — used only as the shine-fill base (buttons/badges/pills),
       not a replacement for --jka-gold (which stays the logo-sampled tone
       everywhere else: text, borders, hover states). The muted logo mid-tone
       read as flat/dark on small solid badges instead of shiny, so buttons
       get this richer gold instead. */
    --jka-gold-vivid: #c9a227;
    --jka-gold-vivid-rgb: 201,162,39; /* same value as --jka-gold-vivid, for rgba() glows on dark surfaces */
    /* Red/green/black corrected to match the actual Kenyan flag (the
       reference image), not the site's earlier muted brick-red/forest-green
       approximations — those read as dull next to the real flag. */
    --jka-red-light:  #e2565c;
    --jka-red:         #bb0000;
    --jka-red-rgb:     187,0,0; /* same value as --jka-red, for rgba() glows */
    --jka-red-dark:   #7a0000;
    --jka-green-light: #2e9e2e;
    --jka-green:       #006600;
    --jka-green-rgb:   0,102,0; /* same value as --jka-green, for rgba() glows */
    --jka-green-dark: #003d00;
    --jka-black-light: #2c2c2c;
    /* Blue — not part of the flag/logo, but explicitly greenlit for things
       like poll type/category badges that need a 4th distinguishable hue
       beyond gold/red/green (those three already carry other meanings —
       tier/accent/vote-bar colors — so a 4th badge sharing one of them
       reads as a coincidence, not a real category difference). */
    --jka-blue-light: #4f83e0;
    --jka-blue:        #1d4fb0;
    --jka-blue-rgb:    29,79,176;
    --jka-blue-dark:   #123374;
    /* Yellow/purple/orange — same non-brand "extra badge hue" role as
       blue, for whenever more than 4 distinguishable categories/types
       need their own color at once. */
    --jka-yellow-light: #f9de6b;
    --jka-yellow:        #eab308;
    --jka-yellow-rgb:    234,179,8;
    --jka-yellow-dark:   #92650a;
    --jka-purple-light: #a78bfa;
    --jka-purple:        #7c3aed;
    --jka-purple-rgb:    124,58,237;
    --jka-purple-dark:   #4c1d95;
    --jka-orange-light: #fb923c;
    --jka-orange:        #ea580c;
    --jka-orange-rgb:    234,88,12;
    --jka-orange-dark:   #9a3412;

    /* Shine — a glossy light reflection laid over the REAL solid brand color,
       exactly like the painted-flag reference (solid black/red/green fabric
       with a satin highlight streak, not a color-to-color gradient). The base
       stays a true flat color; only a soft white streak near the top-left
       corner (35-50% opacity fading to 0) sits on top, so most of the
       surface still reads as pure solid color. Used on solid-fill
       interactive surfaces (buttons, badges, pills, avatars, bar-fills) —
       never on large section/page backgrounds or on text, which stay flat
       so long-form content stays legible. */
    --jka-gold-shine:  linear-gradient(120deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 55%), var(--jka-gold-vivid);
    --jka-red-shine:   linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.07) 30%, rgba(255,255,255,0) 55%), var(--jka-red);
    --jka-green-shine: linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.07) 30%, rgba(255,255,255,0) 55%), var(--jka-green);
    --jka-black-shine: linear-gradient(120deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 55%), var(--jka-black);
    --jka-blue-shine:  linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.07) 30%, rgba(255,255,255,0) 55%), var(--jka-blue);
    --jka-yellow-shine: linear-gradient(120deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 55%), var(--jka-yellow);
    --jka-purple-shine: linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.07) 30%, rgba(255,255,255,0) 55%), var(--jka-purple);
    --jka-orange-shine: linear-gradient(120deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 55%), var(--jka-orange);
    --jka-white:       #ffffff;
    /* Neutral off-white for soft section backgrounds (about/programs/tickets/
       gallery/etc.) — single source so these never drift into a warm cream
       tint the way scattered #f7f6f3/#faf9f6/#fafaf7-style hex values would. */
    --jka-offwhite:    #F7F7F8;
    --jka-offwhite-border: #ECECEE;
    --jka-text:        #cfc8ba;
    --jka-text-muted: #8d8578;
    --jka-text-faint: #7c7568;
    --jka-border:      rgba(226,211,172,.14);
    --jka-border-soft: rgba(226,211,172,.08);
    --jka-border-strong: rgba(228,209,172,.25);
}

/* Native smooth-scroll for anchor links (#section jumps, back-to-top) —
   replaces the vendor's smoothscroll.8e7d8.js, a pre-2015 wheel-hijacking
   polyfill that called preventDefault() on every mousewheel tick. Modern
   Chrome defaults wheel listeners to passive:true, so that call was being
   silently ignored on every single scroll (hundreds of console warnings)
   while the script's own JS-driven scroll animation fought the browser's
   native one — that fight was the actual cause of the janky/slow scroll. */
html {
    scroll-behavior: smooth;
    /* The welcome modal sets body{overflow:hidden} to scroll-lock while
       open — without this, removing the scrollbar widens the viewport by
       its width and reflows every already-rendered element on the page,
       which is what was driving the homepage's CLS score to ~1.0. */
    scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Vendor's "featured" pricing card uses a gold→purple linear-gradient — swap
   it for the real brand shine gradient instead of the vendor's arbitrary one. */
.ts-pricing-box.pricing-featured {
    background: var(--jka-gold-shine) !important;
}

/* Sitewide button shine — every vendor .btn-primary (style.a6129.css) is a
   flat #9c8354 with no highlight/shadow at all. Wins on selector + source
   order alone (this file loads after style.a6129.css), no !important
   needed. This is the "shiny like the logo" treatment applied at its one
   real choke point instead of touching every vendor rule individually. */
.btn.btn-primary,
.btn-primary:hover,
.btn-dark:hover,
.btn-white.btn-primary:hover,
.btn-border:hover {
    background: var(--jka-gold-shine);
    /* Vendor's global `a { color: #9c8354; }` was leaking through here since
       .btn.btn-primary never set its own text color -- gold text on a gold
       button, nearly invisible. */
    color: var(--jka-white);
}

/* ===== Inner-page breadcrumb banner ===== */
/* Vendor .page-banner-area has no darkening treatment at all — title/breadcrumb
   legibility depended entirely on the photo being dark enough on its own. Add a
   dark gradient overlay (readability, not a flat-color-rule violation — same
   exception as the homepage hero) so text stays readable on any photo. */
.page-banner-area {
    display: flex;
    align-items: center;
}
.page-banner-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.7) 100%);
    z-index: 0;
}
.page-banner-title { position: relative; z-index: 1; margin-top: 0 !important; }
.page-banner-title .breadcrumb {
    justify-content: center;
    margin-bottom: 10px;
}
.page-banner-title .breadcrumb a { color: var(--jka-gold-light); }
.page-banner-title .breadcrumb .active { color: var(--jka-white); }

/* ===== Pill breadcrumb banner (africa-ai pattern) ===== */
/* Dark blurred pill badge above an eyebrow + title, instead of the vendor's
   plain breadcrumb list under a huge H2 — matches the recipe used across
   the other Tuqio sibling sites. */
.jka-pill-banner { display: block !important; padding: 0 !important; }
.jka-pill-banner::before { background: linear-gradient(135deg, rgba(13,12,9,.55) 0%, rgba(13,12,9,.4) 50%, rgba(13,12,9,.6) 100%); }
.jka-pill-banner-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    /* Extra top padding clears the floating transparent nav (~130px tall with its
       logo/menu row) — without it the pill breadcrumb sat directly under/behind
       the nav instead of below it, like it does on africa-ai's own page. */
    padding: 150px 24px 64px;
    text-align: center;
}
.jka-pill-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--jka-gold-rgb), .35);
    border-radius: 100px;
    padding: 8px 18px;
    font-size: 13px;
    margin-bottom: 24px;
}
.jka-pill-breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .15s ease; }
.jka-pill-breadcrumb a:hover { color: var(--jka-gold-light); }
.jka-pill-breadcrumb i { font-size: 10px; color: rgba(255,255,255,.35); }
.jka-pill-breadcrumb span { color: var(--jka-gold-light); font-weight: 600; }
.jka-pill-title {
    /* Fluid clamp sizing + weight/letter-spacing matched to africa-ai's own
       hero H1 (event.php) so page-title treatment feels consistent site-to-site. */
    font-size: clamp(30px, 5vw, 50px);
    font-weight: 900;
    letter-spacing: -.025em;
    color: var(--jka-white);
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
    margin: 0;
}

@media (max-width: 767px) {
    .jka-pill-banner { height: auto !important; min-height: 0 !important; background-size: cover !important; background-position: center !important; }
    .jka-pill-banner-inner { padding: 110px 20px 40px; }
}

@media (max-width: 767px) {
    /* Vendor forces background-size:contain + top-left position at only 220px tall
       on mobile — that's what caused the cropped/squished banner photo. Match the
       same cover-fit treatment used everywhere else on the site instead. */
    .page-banner-area {
        min-height: 300px !important;
        height: 300px !important;
        background-size: cover !important;
        background-position: center !important;
    }
    /* Vendor's H2 stays at its 60px desktop size on mobile with no override, which
       left no room for the breadcrumb underneath inside the shorter mobile banner —
       shrink the title so the breadcrumb has space and reads clearly. */
    .page-banner-title h2 { font-size: 32px !important; margin-bottom: 4px; }
    .page-banner-title .breadcrumb { font-size: 14px !important; }
}

/* Static (non-scrolling) real-partner-logo grid — used where a full marquee
   would be too small/subtle, e.g. tickets.php's sponsor section. Kept compact
   (not full-width hero tiles) so a 9-logo grid reads as a trust strip, not
   the main content of the page. */
.jka-static-partners { margin-top: 30px; }
.jka-static-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--jka-white);
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 14px;
    height: 76px;
    margin-bottom: 20px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.jka-static-partner-logo:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    transform: translateY(-3px);
}
.jka-static-partner-logo img {
    max-height: 38px;
    max-width: 100%;
    width: auto;
}

/* Reusable gold outline pill — same look as the homepage hero's eyebrow badge
   ("ENTERTAINMENT / MUSIC" etc.), promoted here so any page can reuse it. */
.jka-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jka-gold-light);
    background: transparent;
    border: 1px solid rgba(var(--jka-gold-rgb), .5);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

/* ===== Standard section-title pattern ===== */
/* Applies wherever the vendor's .section-title/.section-sub-title combo is used
   (every homepage section, plus a few About pages) — replaces the vendor's flat,
   mixed-case 18px eyebrow + plain 36px heading with the same eyebrow+heading
   language already proven elsewhere on the site (.jka-eyebrow's uppercase/
   letter-spaced treatment, .jka-rigor-title's bold/tight-tracking heading), so
   every section header across the site finally reads as one consistent system
   instead of two different type treatments fighting each other. */
.section-title,
.intro-title {
    /* Bootstrap 5's .row (the usual parent, via "row text-center") is a flex
       container — a flex item's display gets blockified, so inline-block
       alone silently becomes block and stretches full-width. width:fit-content
       + auto margins sidesteps that and centers it either way. */
    display: block;
    width: fit-content;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--jka-gold-dark);
    background: rgba(var(--jka-gold-rgb), .1);
    border: 1px solid rgba(var(--jka-gold-rgb), .35);
    border-radius: 20px;
    padding: 7px 18px;
    margin: 0 auto 18px;
}
.jka-hs-dark .section-title, .jka-hs-dark .intro-title,
.jka-hs-photo .section-title, .jka-hs-photo .intro-title {
    color: var(--jka-gold-light);
    background: rgba(var(--jka-gold-rgb), .14);
    border-color: rgba(var(--jka-gold-rgb), .4);
}
.section-sub-title,
.intro-sub-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--jka-ink);
    margin: 0 0 48px;
}
.section-sub-title::before,
.section-sub-title::after {
    content: "";
    height: 1px;
    width: 32px;
    flex-shrink: 0;
    background: rgba(var(--jka-gold-rgb), .5);
}
.section-title.title-white,
.section-sub-title.title-white {
    color: #fff;
}
@media (max-width: 575px) {
    .section-sub-title { gap: 10px; margin-bottom: 36px; }
    .section-sub-title::before,
    .section-sub-title::after { width: 18px; }
}

/* JKA site-wide fonts: Sora (headings) + DM Sans (body) — the pairing from the
   event pages redesign. The Google Fonts @import lives on line 1 of this file:
   an @import anywhere else in a stylesheet is ignored by browsers (that's why
   the old mid-file Outfit import never actually loaded). */
body {
    font-family: "DM Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Sora", sans-serif;
}

/* Icon fonts must keep their own glyph font — never inherit the text font */
.fa, [class^="fa-"], [class*=" fa-"] {
    font-family: FontAwesome !important;
}
.flaticon, [class^="flaticon-"], [class*=" flaticon-"] {
    font-family: flaticon !important;
}

/* ===== Bold nav links ===== */
/* Vendor sets font-weight:500 on nav links — too thin at 13px against a photo
   background, even with the dark bar behind it. Bumping to a real bold weight,
   like ikwa's nav, so it stays legible without relying on the backdrop alone. */
ul.navbar-nav > li > a {
    font-weight: 700 !important;
    letter-spacing: .03em;
}

/* ===== Sticky nav ===== */
/* Vendor .header-transparent is `position:absolute` — only meant to overlay a hero
   banner, so it scrolls away with the page. jka-sticky (toggled by nav.php's scroll
   listener) switches it to fixed with a solid ground once you scroll past the hero. */
.header.header-transparent {
    transition: background .25s ease, box-shadow .25s ease, top .25s ease;
}
.header.header-transparent.jka-sticky {
    position: fixed !important;
    top: 0;
    background: var(--jka-black) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.4);
    z-index: 999;
}

@media (max-width: 767px) {
    /* Vendor's own responsive.a6129.css force-sets .logo img { width:180px !important }
       which, combined with a fixed height, squished/distorted the mark — pin both
       dimensions here so it stays proportional instead of stretched. */
    .header.header-transparent .logo img {
        height: 60px !important;
        width: 60px !important;
        object-fit: contain;
    }
    .header.header-transparent .navbar-toggler { background: var(--jka-gold-shine); }
}

/* ===== Bootstrap 5 header row layout ===== */
/* .navbar-header and .site-nav-inner were never real Bootstrap grid columns
   (no col-* class) — under BS3 that just meant "plain divs inside .row",
   which wasn't a flex container, so they laid out predictably via the
   vendor's own floats. BS5's .row is display:flex unconditionally, which
   turns both into flex items with only content-based sizing and lets them
   wrap onto separate lines — that's what broke the logo/hamburger split.
   Give this specific header row an explicit, deterministic flex layout
   instead of relying on Bootstrap's grid-column sizing rules. */
.header .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
.header .navbar-header {
    /* BS5's own .row > * rule sets width:100%/max-width:100% on every direct
       row child regardless of col-* class — flex-basis:auto defers to an
       explicit width, so without this override that 100% wins and the flex
       shorthand below has no visible effect. */
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.header .site-nav-inner {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ===== Bootstrap 5 navbar collapse threshold ===== */
/* This header was never wrapped in a BS5 .navbar-expand-* container, so BS5's
   core CSS has no rule to auto-show .navbar-collapse or hide .navbar-toggler
   at any width — BS3's own core CSS used to do exactly this for free. Vendor's
   responsive.a6129.css already forces mobile-toggle mode for 768-991px, so
   this recreates the >=992px "full inline nav" threshold BS3 gave by default. */
@media (min-width: 992px) {
    .header .navbar-toggler { display: none; }
    .header .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
    }
    /* .jka-mobile-close/-blurb/-socials live inside this same .navbar-collapse
       element (added for the mobile off-canvas panel) — since that element is
       forced permanently visible above, without this they show up stacked
       below the real inline desktop menu instead of staying mobile-only. The
       desktop equivalents live in the separate .jka-desktop-panel instead. */
    .header .navbar-collapse .jka-mobile-close,
    .header .navbar-collapse .jka-mobile-blurb,
    .header .navbar-collapse .jka-mobile-socials {
        display: none !important;
    }

    /* BS5's OWN core CSS sets .navbar-nav .dropdown-menu{position:static} by
       default — dropdowns only get position:absolute back once Popper.js has
       attached a data-bs-popper attribute to them. Our desktop dropdowns open
       via the vendor's plain CSS :hover rule (not a JS click), so Popper never
       runs and that attribute never appears — meaning without this, the menu
       renders in-flow (pushing the whole <li> taller) instead of floating
       over the page like the classic vendor dropdown design. data-bs-display=
       "static" (added so mobile's click-driven dropdowns skip Popper inside
       the fixed panel) makes this worse, not better, at desktop widths — so
       explicitly restore floating position here regardless of Popper. */
    .header .navbar-nav .dropdown-menu {
        position: absolute !important;
    }
}

/* ===== Desktop quick-access panel trigger ===== */
/* Extra hamburger button that sits next to the full inline desktop menu (it
   doesn't replace it) and opens the same right-side slide-in panel pattern
   used on mobile — matches africa-ai's extra hamburger affordance. Hidden
   below 992px since the real mobile toggler already covers that case. */
.jka-desktop-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.25);
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    margin-left: 14px;
    cursor: pointer;
}
.jka-desktop-menu-btn .icon-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--jka-white);
}
@media (min-width: 992px) {
    /* Renders before the <nav> menu in the DOM (needed for flex layout when
       hidden on mobile) — order:3 pushes it after the full inline menu/
       Tickets button instead, matching "hamburger at the end" placement. */
    .jka-desktop-menu-btn { display: flex; order: 3; }
    .header .navbar-collapse.collapse { order: 2; }
}

.jka-desktop-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(88vw, 340px);
    max-width: 340px;
    height: 100vh;
    margin: 0;
    background: var(--jka-black);
    box-shadow: -8px 0 48px rgba(0,0,0,.4);
    z-index: 1050;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px 32px;
    transition: none !important;
}
.jka-desktop-panel:not(.show):not(.collapsing) { display: none; }
.jka-desktop-panel.show,
.jka-desktop-panel.collapsing {
    display: flex !important;
}
.jka-desktop-panel-links {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}
.jka-desktop-panel-links li {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.jka-desktop-panel-links a {
    display: block;
    padding: 14px 2px;
    color: var(--jka-white);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: color .15s ease;
}
.jka-desktop-panel-links a:hover {
    color: var(--jka-gold);
}
.jka-desktop-panel-links .jka-desktop-panel-cta {
    color: var(--jka-gold);
}

.jka-desktop-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    z-index: 1040;
}
.site-nav-inner:has(.jka-desktop-panel.show) .jka-desktop-panel-overlay {
    display: block;
}

/* ===== Mobile nav: right-side slide-in panel ===== */
/* Matches africa-ai's mobile menu pattern (fixed right panel + dark overlay +
   close button) instead of the vendor's default "dropdown below the header"
   — same interaction model, restyled in JKA's own black/gold brand instead of
   africa-ai's white/cream. Reuses Bootstrap 5's existing collapse JS (already
   wired via data-bs-toggle/data-bs-target on nav.php's toggler/close button/
   overlay) rather than adding a separate custom JS toggle. */
/* Close button only exists for the mobile off-canvas panel — without this it
   inherits the vendor's default nav-item display on desktop and shows up as
   a stray X floating in the middle of the inline menu. The max-width:991px
   block below re-enables it for the mobile panel via source-order override. */
.jka-mobile-close { display: none; }

/* Shared panel-content styling — used by both the mobile off-canvas panel
   (.navbar-collapse) and the desktop quick-access panel (.jka-desktop-panel),
   so these live outside the max-width:991px block rather than duplicated. */
.jka-mobile-close {
    align-self: flex-end;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: var(--jka-white);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.jka-mobile-blurb {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.jka-mobile-blurb-eyebrow,
.jka-mobile-socials-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--jka-gold);
    margin-bottom: 10px;
}
.jka-mobile-blurb p {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.6);
    margin: 0;
}
.jka-mobile-socials {
    margin-top: auto;
    padding-top: 24px;
}
.jka-mobile-socials-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.jka-mobile-socials-row a {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.jka-mobile-socials-row img {
    width: 18px;
    height: 18px;
    display: block;
}

@media (max-width: 991px) {
    /* Anchored on .navbar-collapse (always present) rather than .collapse —
       Bootstrap 5's JS actually REMOVES the .collapse class and replaces it
       with .collapsing for the duration of the open/close transition, only
       restoring .collapse once the animation ends. A selector requiring both
       classes at once (.collapse.collapsing) silently never matches during
       that window, which is why the panel briefly rendered as a plain
       in-flow, default-width block animating open before snapping to the
       real fixed/right/340px panel — the real styling simply wasn't applied
       yet for that whole phase. */
    .header .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(88vw, 340px) !important;
        max-width: 340px;
        height: 100vh !important;
        margin: 0;
        background: var(--jka-black);
        box-shadow: -8px 0 48px rgba(0,0,0,.4);
        z-index: 1050;
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 20px 24px 32px;
        /* BS5's .collapsing rule sets transition:height .35s ease on this
           same element — override so open/close is a clean hard cut like
           africa-ai's own toggle, not an animated grow-from-a-sliver. */
        transition: none !important;
    }
    .header .navbar-collapse:not(.show):not(.collapsing) { display: none; }
    .header .navbar-collapse.show,
    .header .navbar-collapse.collapsing {
        display: flex !important;
    }

    .jka-mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(2px);
        z-index: 1040;
    }
    .site-nav-inner:has(.navbar-collapse.show) .jka-mobile-overlay {
        display: block;
    }
}

/* ===== Bootstrap 5 dropdown caret ===== */
/* BS5's own .dropdown-toggle adds a CSS ::after caret by default — the vendor
   theme already renders its own fa-angle-down icon next to each nav label, so
   without this the two carets would stack. */
ul.navbar-nav .dropdown-toggle::after {
    display: none;
}

/* ===== JKA Footer ("Kenya Flame") ===== */
.jka-footer {
    background: var(--jka-black);
    color: var(--jka-text);
    position: relative;
    overflow: hidden;
    padding: 0;
    text-align: left;
}
.jka-footer::before {
    /* Kenya-flag spine, echoing the torch handle in the logo */
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--jka-black) 0 33%, var(--jka-red) 33% 66%, var(--jka-green) 66% 100%);
    z-index: 2;
}
/* Ambient gold glow blobs — soft atmosphere behind the content, same idea as
   ikwa-main-site's footer bubbles, in JKA's own gold instead of borrowed colors. */
.jka-footer-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(var(--jka-gold-rgb),0.16) 0%, rgba(var(--jka-gold-rgb),0) 70%);
}
.jka-footer-glow-1 { width: 480px; height: 480px; top: -220px; left: -120px; }
.jka-footer-glow-2 { width: 420px; height: 420px; bottom: -200px; right: -100px; }
.jka-footer-inner, .jka-footer::before { z-index: 2; }
.jka-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 84px 32px 0 40px;
}
.jka-footer-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
    gap: 48px;
    padding-bottom: 60px;
}
.jka-footer-brand .jka-f-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.jka-footer-brand .jka-f-logo img { height: 40px; width: auto; }
.jka-footer-brand .jka-f-logo span {
    font-size: 15px;
    font-weight: 600;
    color: var(--jka-gold-light);
    letter-spacing: .02em;
}
.jka-footer-brand p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--jka-text-muted);
    max-width: 34ch;
    margin: 0 0 20px;
}
.jka-footer-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.jka-footer-socials a {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--jka-white);
    border: 1px solid var(--jka-border-strong);
    border-radius: 50%;
    transition: transform .15s ease, box-shadow .15s ease;
}
.jka-footer-socials a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.jka-footer-socials img { width: 20px; height: 20px; display: block; }

.jka-footer-col h4 {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--jka-gold);
    font-weight: 600;
    margin: 0 0 18px;
}
.jka-footer-col ul { list-style: none; margin: 0; padding: 0; }
.jka-footer-col li { margin-bottom: 11px; }
.jka-footer-col a {
    font-size: 13.5px;
    color: var(--jka-text);
    transition: color .15s ease, padding-left .15s ease;
}
.jka-footer-col a:hover { color: var(--jka-gold-light); padding-left: 3px; }

.jka-arrow-links a { display: inline-flex; align-items: center; gap: 6px; }
.jka-arrow-links .arrow {
    color: var(--jka-gold);
    transition: transform .15s ease;
}
.jka-arrow-links a:hover .arrow { transform: translateX(3px); }
.jka-arrow-links a:hover { padding-left: 0; }

.jka-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--jka-text);
    line-height: 1.55;
    margin-bottom: 16px;
}
.jka-footer-contact li svg {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 2px;
    color: var(--jka-gold);
}
.jka-footer-contact .k {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--jka-text-faint);
    margin-bottom: 3px;
}
.jka-footer-contact a { color: var(--jka-text); }
.jka-footer-contact a:hover { color: var(--jka-gold-light); }

.jka-footer-partners {
    border-top: 1px solid var(--jka-border);
    padding: 38px 0;
}
.jka-footer-partners .lbl {
    display: block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--jka-gold);
    font-weight: 600;
    margin-bottom: 20px;
}
/* Auto-scrolling marquee — logo list is rendered twice in the DOM (see footer.php)
   so translateX(-50%) always lines the second copy up exactly where the first
   started, giving a seamless loop with no jump/reset. */
.jka-marquee {
    overflow: hidden;
    padding: 28px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.jka-marquee-track {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    animation: jka-marquee-scroll 28s linear infinite;
}
.jka-marquee:hover .jka-marquee-track {
    animation-play-state: paused;
}
@keyframes jka-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.jka-marquee-track a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--jka-white);
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 10px 22px;
    height: 60px;
    flex: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.jka-marquee-track a:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--jka-gold-rgb), .5);
    box-shadow: 0 10px 24px rgba(var(--jka-gold-rgb), .18);
}
.jka-marquee-track img {
    max-height: 34px;
    max-width: 110px;
    width: auto;
    display: block;
}
@media (prefers-reduced-motion: reduce) {
    .jka-marquee-track { animation: none; }
}

.jka-footer-bottom {
    border-top: 1px solid var(--jka-border);
    padding: 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--jka-text-faint);
}
.jka-footer-bottom .flag-bar {
    display: inline-flex;
    height: 3px;
    width: 40px;
    border-radius: 2px;
    overflow: hidden;
}
.jka-footer-bottom .flag-bar span { flex: 1; }
.jka-footer-bottom .flag-bar span:nth-child(1) { background: var(--jka-ink); }
.jka-footer-bottom .flag-bar span:nth-child(2) { background: var(--jka-red-shine); }
.jka-footer-bottom .flag-bar span:nth-child(3) { background: var(--jka-green-shine); }

#jka-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--jka-gold-shine);
    color: var(--jka-black);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 500;
}
#jka-back-to-top.jka-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .jka-footer-top { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}
@media (max-width: 640px) {
    .jka-footer-inner { padding: 56px 20px 0; }
    .jka-footer-top {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }
    /* Left-aligned on mobile (matches ikwa's footer convention) — force it on the
       actual leaf boxes since block-level divs/uls don't shrink-to-fit on their
       own, so inheriting the ancestor's text-align alone isn't reliable. */
    .jka-footer-top, .jka-footer-top * {
        text-align: left !important;
    }
    .jka-footer-brand, .jka-footer-col { width: 100%; }
    .jka-footer-brand .jka-f-logo { justify-content: flex-start !important; }
    .jka-footer-brand p { margin-left: 0 !important; margin-right: 0 !important; }
    .jka-footer-socials { justify-content: flex-start !important; }
    .jka-footer-col ul { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
    .jka-footer-col li { display: flex; justify-content: flex-start; }
    .jka-footer-contact li { justify-content: flex-start !important; }
    .jka-footer-contact li > span { text-align: left; }
    .jka-marquee { -webkit-mask-image: none; mask-image: none; }
    .jka-footer-partners { text-align: left !important; }
    .jka-footer-partners .lbl { text-align: left !important; }
    .jka-footer-bottom { flex-direction: column; align-items: flex-start; text-align: left !important; }
    .jka-footer::before { width: 100%; height: 4px; top: 0; left: 0;
        background: linear-gradient(90deg, var(--jka-black) 0 33%, var(--jka-red) 33% 66%, var(--jka-green) 66% 100%); }
    .jka-footer-glow-1 { width: 300px; height: 300px; top: -140px; left: -140px; }
    .jka-footer-glow-2 { width: 260px; height: 260px; bottom: -120px; right: -120px; }
}

/* ===== Homepage welcome modal (index.php) — same open/close rules as the
   reference site's own welcome modal: no dismissal memory (shows every
   visit), opens automatically ~900ms after load, closes on the X, the
   backdrop, or any CTA click. Poster reuses $spotBanner, which the page's
   own event-spotlight section further down already loads, so opening the
   modal costs no extra image request. ===== */
.jka-welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.jka-welcome-modal.jka-welcome-open { opacity: 1; visibility: visible; }
.jka-welcome-card {
    background: var(--jka-white);
    border-radius: 20px;
    max-width: 780px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    transform: translateY(16px);
    transition: transform .3s ease;
}
.jka-welcome-modal.jka-welcome-open .jka-welcome-card { transform: translateY(0); }
.jka-welcome-media { position: relative; background: var(--jka-black); min-height: 220px; }
.jka-welcome-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 20px 0 0 20px; }
.jka-welcome-media-fallback {
    width: 100%; height: 100%; min-height: 220px;
    display: flex; align-items: center; justify-content: center;
    color: var(--jka-gold); font-size: 48px;
}
.jka-welcome-body { padding: 34px 30px; position: relative; display: flex; flex-direction: column; justify-content: center; }
.jka-welcome-close {
    position: absolute; top: 16px; right: 16px;
    z-index: 2; /* .jka-welcome-body is also position:relative and paints
        after this button in DOM order, so without an explicit stack it
        silently sits on top and swallows the click. */
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--jka-offwhite); border: 1px solid var(--jka-offwhite-border);
    cursor: pointer; font-size: 14px; color: var(--jka-black);
    display: flex; align-items: center; justify-content: center;
}
.jka-welcome-title { font-size: 26px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 10px; color: var(--jka-black); }
.jka-welcome-desc { color: #4a4a4a; font-size: 14.5px; line-height: 1.65; margin-bottom: 18px; }
.jka-welcome-meta { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.jka-welcome-meta-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #3a382f; }
.jka-welcome-meta-row i { color: var(--jka-gold); width: 16px; text-align: center; }
.jka-welcome-ctas { display: flex; flex-direction: column; gap: 9px; }
.jka-welcome-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    text-align: center; text-decoration: none;
    font-weight: 700; font-size: 14.5px; padding: 12px; border-radius: 11px;
    border: 1.5px solid var(--jka-offwhite-border); background: var(--jka-white); color: var(--jka-black);
    transition: border-color .2s ease, color .2s ease;
}
.jka-welcome-btn:hover { border-color: var(--jka-gold); color: var(--jka-gold-dark); text-decoration: none; }
.jka-welcome-btn-primary {
    border: none; background: var(--jka-gold-shine); color: var(--jka-white); padding: 13px;
}
.jka-welcome-btn-primary:hover { color: var(--jka-white); opacity: .9; }

/* Each secondary CTA gets its own real brand color instead of all five
   buttons reading as identical white/outline boxes. */
.jka-welcome-btn-black   { border: none; background: var(--jka-black);      color: var(--jka-white); }
.jka-welcome-btn-green   { border: none; background: var(--jka-green-shine); color: var(--jka-white); }
.jka-welcome-btn-red     { border: none; background: var(--jka-red-shine);   color: var(--jka-white); }
.jka-welcome-btn-golddark{ border: none; background: var(--jka-gold-dark);   color: var(--jka-white); }
.jka-welcome-btn-black:hover,
.jka-welcome-btn-green:hover,
.jka-welcome-btn-red:hover,
.jka-welcome-btn-golddark:hover { color: var(--jka-white); opacity: .88; text-decoration: none; }

@media (max-width: 640px) {
    .jka-welcome-card { grid-template-columns: 1fr; }
    .jka-welcome-media { min-height: 160px; }
    .jka-welcome-media img { border-radius: 20px 20px 0 0; }
    .jka-welcome-body { padding: 26px 22px; }
}