/* =====================================================================
   EHF — Public BOLD / MAXIMALIST layer  (public.css)
   Loaded LAST on every public page (after theme.css, motion.css and any
   per-page sheet) so it can amplify the shared chrome + page heroes without
   touching the admin side. Token-only (violet #743485 + gold #dcc52d),
   light/dark safe, fully disabled under reduced motion.

   It never changes information — only presence: bigger type, a living
   aurora backdrop, kinetic buttons, dramatic cards, gradient hero
   wordmarks, scroll-reveal, and a giant footer signature.
   ===================================================================== */

/* =====================================================================
   0 · VIBRANT PALETTE  — brighter, more saturated accents for the public
   site (admin keeps the brand tokens since this sheet isn't loaded there).
   Overrides theme.css :root.
   ===================================================================== */
:root {
    --accent:        #8b5cf6;            /* vivid violet */
    --accent-bright: #c084fc;            /* bright purple — accent text/glow on dark */
    --accent-rgb:    139, 92, 246;
    --accent-glow:   rgba(139, 92, 246, .55);
    --accent-2:      #e879f9;            /* electric fuchsia */
    --accent-2-rgb:  232, 121, 249;
    --gold:          #fbbf24;            /* vivid amber */
    --gold-rgb:      251, 191, 36;
}
:root[data-theme="light"] {
    --accent:        #7c3aed;
    --accent-bright: #7e22ce;            /* readable (~5.7:1) on the light canvas */
    --accent-rgb:    124, 58, 237;
    --accent-glow:   rgba(124, 58, 237, .30);
    --accent-2:      #c026d3;
    --accent-2-rgb:  192, 38, 211;
    --gold:          #d97706;            /* amber-600 — holds contrast on near-white */
    --gold-rgb:      217, 119, 6;
}
/* Recolour the base canvas glows with the vibrant tokens. */
body {
    background-image:
        radial-gradient(60rem 60rem at 12% -10%, rgba(var(--accent-rgb), .28), transparent 60%),
        radial-gradient(50rem 50rem at 110% 0%,  rgba(var(--gold-rgb), .15), transparent 55%),
        radial-gradient(60rem 60rem at 50% 120%, rgba(var(--accent-2-rgb), .24), transparent 60%);
}
:root[data-theme="light"] body {
    background-image:
        radial-gradient(60rem 60rem at 12% -10%, rgba(var(--accent-rgb), .18), transparent 60%),
        radial-gradient(50rem 50rem at 110% 0%,  rgba(var(--gold-rgb), .14), transparent 55%),
        radial-gradient(60rem 60rem at 50% 120%, rgba(var(--accent-2-rgb), .16), transparent 60%);
}

/* =====================================================================
   1 · LIVING AURORA BACKDROP  (public pages only — this sheet isn't on admin)
   A slow-drifting violet/fuchsia/amber/cyan field behind everything, plus a
   faint perspective grid. Sits below all content (z-index:-1).
   ===================================================================== */
body::before {
    content: "";
    position: fixed; inset: -18%;
    z-index: -1; pointer-events: none;
    background:
        radial-gradient(38% 42% at 18% 16%, rgba(var(--accent-rgb), .52), transparent 62%),
        radial-gradient(34% 40% at 84% 12%, rgba(var(--gold-rgb), .34), transparent 60%),
        radial-gradient(46% 50% at 72% 82%, rgba(var(--accent-2-rgb), .50), transparent 64%),
        radial-gradient(40% 44% at 26% 88%, rgba(34, 211, 238, .32), transparent 62%);
    filter: blur(22px) saturate(145%);
    opacity: 1;
    will-change: transform;
    animation: aurora-drift 26s ease-in-out infinite alternate;
}
body::after {
    content: "";
    position: fixed; inset: 0;
    z-index: -1; pointer-events: none; opacity: .35;
    background-image:
        linear-gradient(var(--glass-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--glass-border) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(120% 90% at 50% -10%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% -10%, #000 35%, transparent 78%);
    animation: grid-pan 40s linear infinite;
}
:root[data-theme="light"] body::before { opacity: .72; filter: blur(26px) saturate(138%); }
:root[data-theme="light"] body::after  { opacity: .5; }

@keyframes aurora-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg)   scale(1);    }
    50%  { transform: translate3d(2.5%, -2%, 0) rotate(6deg) scale(1.08); }
    100% { transform: translate3d(-2%, 2.5%, 0) rotate(-5deg) scale(1.05); }
}
@keyframes grid-pan { to { background-position: 64px 64px; } }

/* =====================================================================
   2 · KICKER / EYEBROW  — bold tag with a gold lead bar
   ===================================================================== */
.eyebrow, .home-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 800;
}
.eyebrow::before, .home-eyebrow::before {
    content: ""; width: 26px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--accent-bright));
    box-shadow: 0 0 14px rgba(var(--gold-rgb), .55);
}
/* centred heroes shouldn't shove the eyebrow off-centre */
.spon-hero .eyebrow, .home-hero .home-eyebrow,
.home-theme-band .home-eyebrow, .home-cta-band .home-eyebrow { justify-content: center; }

/* =====================================================================
   3 · HERO TYPE  — oversized, heavier, with a shimmering gradient wordmark.
   Targets the shared page heroes (.spk-hero / .agenda-hero / .spon-hero)
   and their `.glow` spans, plus the homepage title.
   ===================================================================== */
.spk-hero, .agenda-hero, .spon-hero { position: relative; }
.spk-hero h1, .agenda-hero h1 {
    font-size: clamp(36px, 6.5vw, 68px); font-weight: 900; letter-spacing: -.025em; line-height: 1.0;
}
.spon-hero h1 { font-size: clamp(32px, 5.2vw, 58px); font-weight: 900; letter-spacing: -.02em; line-height: 1.04; }

/* Shimmering violet→gold gradient text for the highlighted words. */
.spk-hero h1 .glow, .agenda-hero h1 .glow, .spon-hero h1 .glow, .home-title.is-grad {
    background: linear-gradient(100deg, var(--accent-bright) 0%, var(--gold) 42%, var(--accent-2) 70%, var(--accent-bright) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    animation: glow-shift 7s linear infinite;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .spk-hero h1 .glow, .agenda-hero h1 .glow, .spon-hero h1 .glow, .home-title.is-grad {
        color: var(--accent-bright); -webkit-text-fill-color: currentColor;
    }
}
@keyframes glow-shift { to { background-position: 220% center; } }

/* Big soft halo behind centred heroes for depth. */
.spon-hero::before, .home-hero .home-eyebrow ~ * { }
.spon-hero::before {
    content: ""; position: absolute; left: 50%; top: -10%; transform: translateX(-50%);
    width: min(680px, 90%); height: 240px; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 60% at 50% 50%, rgba(var(--accent-rgb), .28), transparent 70%);
    filter: blur(20px);
}

/* =====================================================================
   4 · HOMEPAGE FLAGSHIP amplifiers
   ===================================================================== */
.home-title { font-size: clamp(32px, 4vw, 40px); font-weight: 900; letter-spacing: -.02em; }
.home-hero { padding-top: clamp(40px, 6vw, 78px); }
/* a wider, brighter hero wash */
.home-hero::before {
    background:
        radial-gradient(64% 52% at 50% -4%, rgba(var(--accent-rgb), .44), transparent 60%),
        radial-gradient(40% 46% at 10% 16%, rgba(var(--gold-rgb), .26), transparent 60%),
        radial-gradient(44% 48% at 90% 12%, rgba(var(--accent-2-rgb), .34), transparent 60%);
}
.home-tagline { font-size: clamp(19px, 2.9vw, 28px); font-weight: 500; }

/* --- Kinetic keyword marquee (bold ticker under the hero) --- */
.home-marquee {
    position: relative; overflow: hidden; margin-top: 6px;
    border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .08), rgba(var(--gold-rgb), .06));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.home-marquee-track {
    display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
    padding: 16px 0; will-change: transform;
    animation: marquee 38s linear infinite;
}
.home-marquee:hover .home-marquee-track { animation-play-state: paused; }
.home-marquee-item {
    font-family: var(--font-display); font-weight: 900; letter-spacing: .01em;
    font-size: clamp(18px, 2.6vw, 30px); text-transform: uppercase;
    color: var(--text); padding: 0 26px; opacity: .92;
}
.home-marquee-item::after {
    content: "✦"; margin-left: 52px; color: var(--gold);
    font-size: .7em; vertical-align: middle; -webkit-text-fill-color: var(--gold);
}
.home-marquee-item.is-ghost {
    color: transparent; -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.4px rgba(var(--accent-rgb), .55);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Punchy stat numbers + a gradient sheen. Size is capped so the longest
   value ("2,000+") fits its card; nowrap + tight tracking keep it on one line. */
.home-stat .n { font-size: clamp(26px, 3vw, 38px); font-weight: 900;
    letter-spacing: -.02em; white-space: nowrap;
    background: linear-gradient(160deg, var(--accent-bright), var(--gold));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.home-stat-countdown .n { background: none; -webkit-text-fill-color: var(--text); color: var(--text); }
.home-stat { border-width: 1px; }
.home-stat:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 22px 50px rgba(0,0,0,.4); }

/* Section heads: oversized, tighter */
.home-band-head .t-h2, .t-h2 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 900; letter-spacing: -.02em; }
.home-theme-title, .home-cta-title { font-weight: 900; letter-spacing: -.02em; }

/* =====================================================================
   5 · KINETIC BUTTONS  — bigger, with a light-sweep shine
   ===================================================================== */
.btn { font-weight: 700; letter-spacing: .005em; position: relative; overflow: hidden; }
.btn::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    transform: skewX(-18deg); pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transition: left .55s var(--spring-snappy, ease);
}
.btn:hover::after { left: 140%; }
.btn-neon {
    border-color: rgba(var(--accent-rgb), .6);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .2), 0 10px 30px rgba(var(--accent-rgb), .32);
}
.btn-neon:hover { color: #fff; box-shadow: 0 0 34px var(--accent-glow), 0 12px 34px rgba(var(--accent-rgb), .5); }
:root[data-theme="light"] .btn-neon:hover { color: #fff; }
.home-cta .btn, .home-cta-band .btn { padding: 15px 30px; font-size: 16px; font-weight: 800; }

/* =====================================================================
   6 · DRAMATIC CARDS  — accent top-hairline + stronger lift/glow
   Applies to the shared public card families.
   ===================================================================== */
.spk-card, .session-card, .spon-card, .info-card, .home-pillar, .home-exp,
.home-stat, .home-spk-card, .home-sponsor, .home-floor-teaser {
    position: relative; isolation: isolate;
}
.spk-card::after, .session-card::after, .spon-card::after, .info-card::after,
.home-pillar::after, .home-exp::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
    border-radius: 2px 2px 0 0; opacity: 0; transition: opacity .22s ease;
    background: linear-gradient(90deg, var(--accent-bright), var(--gold));
}
.spk-card:hover::after, .session-card:hover::after, .spon-card:hover::after,
.info-card:hover::after, .home-pillar:hover::after, .home-exp:hover::after { opacity: 1; }
.home-pillar:hover, .home-exp:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(0,0,0,.42); }
.info-card { transition: transform .18s ease, border-color .2s ease, box-shadow .22s ease; }
.info-card:hover { transform: translateY(-4px); border-color: var(--glass-border-hi); box-shadow: 0 20px 46px rgba(0,0,0,.34); }
.home-pillar-n { font-size: 32px; -webkit-text-fill-color: var(--gold); }

/* =====================================================================
   7 · SCROLL-REVEAL  (non-homepage heroes + cards; homepage keeps m-pop)
   Gated on html.rv-on (set synchronously in <head>) so nothing is ever
   hidden when JS is off. A 3s CSS failsafe reveals everything even if the
   observer never fires. Disabled under reduced motion.
   ===================================================================== */
.rv-on .spk-hero, .rv-on .agenda-hero, .rv-on .spon-hero, .rv-on .sched-head,
.rv-on .spk-card, .rv-on .session-card, .rv-on .spon-card, .rv-on .info-card,
.rv-on .talk-row, .rv-on .tl-card, .rv-on .auth-card, .rv-on .vote-card {
    opacity: 0; transform: translateY(26px);
    transition: opacity .6s var(--spring-gentle, ease), transform .6s var(--spring-gentle, ease);
    transition-delay: calc(var(--rvi, 0) * 55ms);
    animation: rv-failsafe .01s linear 3s forwards;
}
.rv-on .rv-seen { opacity: 1; transform: none; }
@keyframes rv-failsafe { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
    .home-marquee-track { animation: none; }
    .spk-hero h1 .glow, .agenda-hero h1 .glow, .spon-hero h1 .glow, .home-title.is-grad, .home-stat .n { animation: none; }
    .rv-on .spk-hero, .rv-on .agenda-hero, .rv-on .spon-hero, .rv-on .sched-head,
    .rv-on .spk-card, .rv-on .session-card, .rv-on .spon-card, .rv-on .info-card,
    .rv-on .talk-row, .rv-on .tl-card, .rv-on .auth-card, .rv-on .vote-card {
        opacity: 1; transform: none; animation: none;
    }
}

/* =====================================================================
   8 · BOLD CHROME  — nav underline thickened, gold register pill,
   giant footer signature wordmark.
   ===================================================================== */
.topbar-pub { border-bottom-width: 1px; }
.topnav-link::after { height: 3px; background: linear-gradient(90deg, var(--accent-bright), var(--gold)); }

.public-foot { position: relative; overflow: hidden; }
.public-foot::before {
    content: "East African Health Federation"; position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 18px; text-align: center;
    font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; line-height: .9;
    font-size: clamp(30px, 8.5vw, 104px); pointer-events: none; z-index: 0;
    color: transparent; -webkit-text-stroke: 1.4px rgba(var(--accent-rgb), .14);
    opacity: .85;
}
.public-foot .foot-cols, .public-foot .foot-legal { position: relative; z-index: 1; }

/* =====================================================================
   9 · RESPONSIVE
   ===================================================================== */
@media (max-width: 640px) {
    body::before { inset: -10%; }
    .home-marquee-item { font-size: 18px; padding: 0 16px; }
    .home-marquee-item::after { margin-left: 28px; }
}

/* =====================================================================
   10 · BATCH ADDITIONS — edition badge, prominent Register, auto-scroll
   stats, mobile Register button, mobile gold logo.
   ===================================================================== */

/* --- "13th Annual Conference" edition badge --- */
.home-edition {
    display: inline-block; margin: 0 0 14px;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(16px, 1.5vw, 15px); letter-spacing: .05em;
    color: var(--gold); padding: 7px 16px; border-radius: 999px;
    background: rgba(var(--gold-rgb), .14); border: 1px solid rgba(var(--gold-rgb), .42);
    box-shadow: 0 0 22px rgba(var(--gold-rgb), .18);
}

/* --- Register: the dominant primary CTA --- */
.home-cta .btn.home-reg { padding: 16px 36px; font-size: 16.5px; font-weight: 800; }

/* --- Auto-scrolling "by the numbers" stats (full-bleed marquee) --- */
.home-stats-scroll {
    position: relative; overflow: hidden; margin-top: 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.home-stats-track {
    display: flex; gap: 14px; width: max-content; padding: 8px 0;
    will-change: transform; animation: stats-scroll 46s linear infinite;
}
.home-stats-scroll:hover .home-stats-track { animation-play-state: paused; }
.home-stats-track .home-stat { flex: 0 0 auto; width: 190px; }
@keyframes stats-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reduced motion: stop the scroll, wrap the originals, drop the duplicate set. */
@media (prefers-reduced-motion: reduce) {
    .home-stats-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .home-stat-dup { display: none; }
}

/* --- Mobile Register button in the top bar (keeps Register reachable when
       the nav collapses behind the burger) --- */
.topbar-register { display: none; }
@media (max-width: 860px) {
    .topbar-pub .topbar-register {
        display: inline-flex; flex: 0 0 auto;
        padding: 9px 16px; font-size: 16px; margin-left: auto;
    }
}

@media (max-width: 640px) {
    .home-edition { font-size: 16px; }
}

/* =====================================================================
   11 · VIBRANT & COOL — cursor spotlight, animated-gradient buttons,
   colour-glow card hovers, animated navbar seam, accent selection.
   ===================================================================== */

/* Cursor spotlight — a soft colour that trails the pointer (fine pointers
   only; the element is injected by public.js). Sits behind content and
   glows through the glass cards. */
.cursor-glow {
    position: fixed; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px;
    border-radius: 50%; pointer-events: none; z-index: -1; will-change: transform;
    transform: translate3d(var(--gx, -600px), var(--gy, -600px), 0);
    background: radial-gradient(circle, rgba(var(--accent-2-rgb), .20), rgba(var(--accent-rgb), .12) 38%, transparent 66%);
    filter: blur(30px); opacity: 0; transition: opacity .35s ease;
}
.cursor-glow.is-on { opacity: 1; }
:root[data-theme="light"] .cursor-glow {
    background: radial-gradient(circle, rgba(var(--accent-2-rgb), .14), rgba(var(--accent-rgb), .08) 38%, transparent 66%);
}

/* Animated-gradient primary buttons (deep stops keep white text ≥4.5:1). */
.btn-neon {
    color: #fff; border-color: transparent;
    background: linear-gradient(120deg, #6d28d9, #a21caf, #7c3aed, #6d28d9);
    background-size: 220% auto; animation: btn-grad 7s linear infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
    box-shadow: 0 8px 26px rgba(var(--accent-rgb), .38);
}
.btn-neon:hover {
    color: #fff;
    box-shadow: 0 0 30px rgba(var(--accent-2-rgb), .5), 0 12px 32px rgba(var(--accent-rgb), .5);
}
@keyframes btn-grad { to { background-position: 220% center; } }

/* Colour-tinted glow + vivid border on card hover. */
.home-stat:hover, .home-pillar:hover, .home-exp:hover, .home-why-item:hover,
.home-spk-card:hover, .home-sponsor:hover, .home-floor-teaser:hover,
.spk-card:hover, .session-card:hover, .spon-card:hover, .info-card:hover {
    border-color: rgba(var(--accent-rgb), .5);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .30), 0 0 34px rgba(var(--accent-2-rgb), .22);
}
:root[data-theme="light"] .home-stat:hover, :root[data-theme="light"] .home-pillar:hover,
:root[data-theme="light"] .home-exp:hover, :root[data-theme="light"] .home-why-item:hover,
:root[data-theme="light"] .home-spk-card:hover, :root[data-theme="light"] .home-sponsor:hover,
:root[data-theme="light"] .home-floor-teaser:hover, :root[data-theme="light"] .spk-card:hover,
:root[data-theme="light"] .session-card:hover, :root[data-theme="light"] .spon-card:hover,
:root[data-theme="light"] .info-card:hover {
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12), 0 0 30px rgba(var(--accent-2-rgb), .20);
}

/* Animated gradient seam under the top bar (every public page). */
.topbar-pub { border-bottom-color: transparent; }
.topbar-pub::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb)), var(--accent-2), var(--gold), transparent);
    background-size: 220% auto; animation: btn-grad 9s linear infinite; opacity: .75;
}

/* Accent text selection. */
::selection { background: rgba(var(--accent-2-rgb), .30); }

@media (prefers-reduced-motion: reduce) {
    .btn-neon, .topbar-pub::after { animation: none; }
    .cursor-glow { display: none; }
}


/* =====================================================================
   12 · READABILITY FLOOR — no text below 1em (16px) on public pages.
   public.css is public-only, so the admin side (dense tables/forms) is
   untouched. Raises the shared-chrome classes defined in theme.css.
   ===================================================================== */
.topnav-link, .brand-year, .btn, .pill, .pill .pill-sub, .gselect, .input,
.field > label, .field .hint, .field-error, .chk, .alert, .toast,
.public-foot .foot-col h4, .public-foot .foot-link, .public-foot .foot-blurb, .public-foot .foot-legal,
.result-count, .muted { font-size: 16px; }