/* static/public/css/public.css
   ──────────────────────────────────────────────────────────────────
   The Kenya Software & AI Summit — public site theme.

   This is a full rebuild of the public site styling, built around the
   exact CSS variable block supplied for the project (see the :root
   block immediately below — untouched from what was provided). The
   previous version of this file only had the small set of classes the
   bare placeholder homepage used; this version restores the visual
   richness of the original BootstrapMade-based design (hero with a
   working countdown, schedule timeline, chief-guest card, tiered
   partners grid, gallery hover effects, stat counters) re-implemented
   cleanly on top of the new variables, rather than copy-pasted from
   the old theme's CSS verbatim.
   ────────────────────────────────────────────────────────────────── */

@charset "UTF-8";

:root {
  --nav-color: #ffffff;
  --nav-hover-color: #CE171C;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #40372e;
  --nav-dropdown-hover-color: #CE171C;

  --primary-color: #CE171C;
  --secondary-color: #cd5155ff;
  --accent-color: #CE171C;
  --success-color: #027437ff;
  --warning-color: #d69e2e;
  --danger-color: #e53e3e;
  --info-color: #CE171C;
  --light-bg: #f7fafc;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --primary-red: #CE171C;
  --primary-green: #01873F;
  --primary-blue: rgba(2, 52, 79, 0.8);
  --primary-dark: #1C1C18;
  --gradient-primary: linear-gradient(135deg, #CE171C 0%, #01873F 100%);
  --gradient-secondary: linear-gradient(135deg, #01873F 0%, #1C1C18 100%);

  /* Bootstrap primary override */
  --bs-primary: var(--accent-color);
  --bs-primary-rgb: 206, 23, 28;

  /* Page-level tokens derived from the palette above, used throughout
     this file. Kept separate from the supplied block so that block
     can be swapped/updated independently without hunting through
     every rule below. */
  --background-color: #ffffff;
  --default-color: #40372e;
  --heading-color: #281a0c;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
  --muted-color: #79705f;
  --hairline-color: rgba(28, 28, 24, 0.08);
}

/* ────────────────────────────────────────────────────────────────
   Base
   ──────────────────────────────────────────────────────────────── */

body.public-page {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--default-color);
  background-color: var(--background-color);
  /* Sticky-footer layout: the page is a full-height column so the
     footer always sits at the bottom of the viewport on short pages
     (e.g. accommodation/venue with little content) instead of riding
     up under the content. .public-main grows to fill the space. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.public-main {
  flex: 1 0 auto;   /* grow to push the footer down; never shrink */
}
.public-footer {
  flex-shrink: 0;   /* footer keeps its natural height */
}

.public-page h1, .public-page h2, .public-page h3,
.public-page h4, .public-page h5, .public-page h6 {
  font-family: "Sora", sans-serif;
  color: var(--heading-color);
}

/* Deliberately the LOWEST possible specificity (bare tag selector,
   no class) for the default link color inside the public site.
   Scoped with a single ancestor class only so it doesn't leak
   outside public_base.html pages.

   This replaces an earlier version that used ".public-page a"
   (class + tag = specificity 0,1,1), which is MORE specific than a
   plain single-class component rule like ".btn-kenya-primary"
   (specificity 0,1,0 — one class, no tag) — that earlier version
   silently won over every button's white-text rule regardless of
   source order, producing red text on a red background, confirmed by
   actually rendering it rather than assuming from the class names
   alone.

   The fix: every affected component selector below now includes the
   `a` tag itself (e.g. "a.btn-kenya-primary"), which raises ITS
   specificity to 0,1,1 — equal to ".public-page a" — and at equal
   specificity, the rule appearing LATER in the file wins. Since these
   component rules are defined later in this file than the bare link
   rule directly below, they now correctly win. This was verified with
   an isolated two-rule test in an actual browser before being applied
   here, not assumed from specificity arithmetic alone — a previous
   attempt at this exact fix (adding a `color: inherit` override) was
   tried and confirmed NOT to work for the same reason. */
.public-page a { color: var(--accent-color); text-decoration: none; transition: 0.3s; }
.public-page a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); }

.public-page img { max-width: 100%; }

/* ────────────────────────────────────────────────────────────────
   Header / nav
   ──────────────────────────────────────────────────────────────── */


/* Match Bootstrap container right-edge at each breakpoint */
@media (min-width: 576px)  { .public-navmenu { right: 12px; } }
@media (min-width: 768px)  { .public-navmenu { right: 12px; } }
@media (min-width: 992px)  { .public-navmenu { right: 12px; } }
@media (min-width: 1200px) { .public-navmenu { right: calc((100vw - 1140px) / 2); } }
@media (min-width: 1400px) { .public-navmenu { right: calc((100vw - 1320px) / 2); } }


/* 2. On mobile the nav is no longer inside the header, so reset it to
      normal flow so it doesn't interfere with layout. The <ul> panel
      keeps its own position:fixed from the existing mobile media query. */
@media (max-width: 1199.98px) {
  .public-navmenu {
    position: static;
    height: auto;
    right: auto;
    top: auto;
    display: block;
  }
}

.public-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 997;
  padding: 14px 0;
  background: rgba(28, 28, 24, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: padding 0.3s, background 0.3s;
}

.public-header.scrolled {
  padding: 8px 0;
  background: rgba(28, 28, 24, 0.85);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.public-header.scrolled ~ .public-navmenu {
  height: 74px;
}

.public-header .logo img { max-height: 56px; }
.public-header .logo span {
  color: #fff;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}

.public-header .logo-divider {
    height: 50px;
  }


.public-header .logo-divider {
  width: 3px;
  height: 50px;
  background: linear-gradient(to bottom,
    #000000 0%,     /* Top color: Black */
    #000000  28%,
    #FFFFFF 28%, /* transparent 28%,    /* Gap 1 */
    #FFFFFF 34%, /* transparent 34%, */
    #BD272F 34%, /* Middle color: Red */
    #BD272F 62%,
    #FFFFFF 62%, /* transparent 62%,    /* Gap 2 */
    #FFFFFF 68%, /* transparent 68%, */
    #136B38 68%, /* Bottom color: Green */
    #136B38 100%
  );
  margin: 0 12px;
}

.public-navmenu {
  position: fixed;
  top: 0;
  right: 12px;                 /* Bootstrap container gutter: base */
  z-index: 998;                /* one above header's 997 */
  height: 98px;                /* header padding-top 14 + logo max 70 + 14 bottom */
  display: flex;
  align-items: center;
  transition: height 0.3s;     /* mirrors header's padding transition */
}

.public-navmenu ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.public-navmenu a {
  color: var(--nav-color);
  padding: 10px 14px;
  font-weight: 500;
  font-size: 0.92rem;
  display: block;
  white-space: nowrap;
}

.public-navmenu a:hover, .public-navmenu .active { color: var(--nav-hover-color); }

.public-navmenu a.btn-primary {
  background: var(--primary-red);
  border-color: var(--primary-red);
  color: #fff;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 600;
}
.public-navmenu a.btn-primary:hover {
  background: color-mix(in srgb, var(--primary-red), black 12%);
  border-color: color-mix(in srgb, var(--primary-red), black 12%);
  color: #fff;
}

/* Per-item icons (added to support the mobile dropdown polish below)
   are hidden on desktop — the existing single-line text nav already
   worked and wasn't part of what needed fixing, so this keeps it
   pixel-identical to before rather than introducing icon clutter into
   a row that was already tight on horizontal space. The search link
   is the one exception: its icon is the desktop link itself (no
   visible text), same as before this round — only the new <span>
   label added for the mobile row is hidden here. */
.public-navmenu > ul > li > a > i { display: none; }
.public-navmenu-search a > i { display: inline; }
.public-navmenu-search a span { display: none; }

/* ────────────────────────────────────────────────────────────────
   Hero (homepage)
   ──────────────────────────────────────────────────────────────── */

.hero-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(28, 28, 24, 0.86), rgba(2, 52, 79, 0.78)),
    radial-gradient(circle at 15% 20%, rgba(206, 23, 28, 0.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(1, 135, 63, 0.35), transparent 45%),
    var(--primary-dark);
}

/* Subtle animated grain/dot texture so the hero isn't a flat gradient —
   pure CSS, no image asset required. */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}

/* Hero slider — sits behind the gradient overlay above (which stays
   on top via z-index so the eyebrow/title/countdown/CTAs are always
   legible regardless of what's playing underneath) and behind the
   ::before grain texture too, since both are positioned absolutely
   over the whole section already. Only rendered when hero_slides
   exist; the .hero-section gradient background above is what shows
   on its own when there are no slides.

   Full-bleed (top: 0, not below the header) — the slider's imagery
   runs underneath the fixed header by design, with the header itself
   kept translucent (see .public-header below) so the image reads
   through rather than being hidden behind a solid bar.

   Every rule below sets explicit height (not just 100%) and absolute
   positioning on .swiper/.swiper-wrapper/.swiper-slide rather than
   relying on percentage-height inheritance through that chain — so
   the slider degrades to "first slide visible, full height" if
   Swiper's JS is ever slow, blocked, or fails to load, instead of a
   tall blank gap (the old version's actual failure mode: percentage
   heights only resolve once every ancestor in the chain has its own
   resolved height, and .hero-section only declares min-height, not
   height, so that chain could come up empty). Once Swiper's JS runs,
   it takes over transforms/visibility as normal — these rules are
   strictly the no-JS-yet/no-JS-at-all fallback. */
.hero-slider,
.hero-slider .swiper-wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-slider .swiper-slide {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.hero-slider .swiper-slide:first-child { opacity: 1; }
/* Swiper adds this class to the JS-selected current slide once it
   initializes — once present, trust Swiper's own opacity/transform
   handling (the fade effect module sets opacity via inline style)
   instead of this fallback rule. */
.hero-slider.swiper-initialized .swiper-slide { opacity: 0; }
.hero-slider.swiper-initialized .swiper-slide-active { opacity: 1; }
.hero-slider .swiper-slide img,
.hero-slider .swiper-slide video,
.hero-slider .swiper-slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
/* Darkens each slide so light photos/video don't wash out the white
   hero text — independent of the .hero-section gradient overlay
   rendered above it. Heavier top/bottom (where the eyebrow/heading/
   countdown/CTA actually sit) and a touch lighter through the
   vertical middle so the image is still clearly visible there. No
   blur — the photo stays crisp, contrast does the work instead. */
.hero-slider .swiper-slide::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 16, 0.65) 0%,
    rgba(10, 12, 16, 0.45) 35%,
    rgba(10, 12, 16, 0.5) 65%,
    rgba(10, 12, 16, 0.7) 100%
  );
}
.hero-section > .container { z-index: 1; }

.hero-slider .swiper-pagination {
  bottom: 18px !important;
}
.hero-slider .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
.hero-slider .swiper-pagination-bullet-active {
  background: var(--primary-green, #01873F);
  width: 24px;
  border-radius: 5px;
}
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  backdrop-filter: blur(3px);
  color: #fff;
}
.hero-slider .swiper-button-next:after,
.hero-slider .swiper-button-prev:after {
  font-size: 1rem;
}
.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 575.98px) {
  .hero-slider .swiper-button-next,
  .hero-slider .swiper-button-prev { display: none; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(1, 135, 63, 0.25);
}

.hero-section h1 { color: #fff; }
.hero-section .lead { color: rgba(255, 255, 255, 0.85); }

.hero-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}
.hero-event-meta .meta-item { display: flex; align-items: center; gap: 8px; }
.hero-event-meta i { color: var(--primary-red); }

/* Countdown */
.countdown-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.countdown-unit {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 16px 20px;
  min-width: 86px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.countdown-number {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
}
.countdown-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 50px;
  background: var(--primary-red);
  color: #fff;
  font-weight: 600;
}
.countdown-live-badge .pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
  animation: pulse-dot 1.6s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ────────────────────────────────────────────────────────────────
   Stats strip
   ──────────────────────────────────────────────────────────────── */

.stats-strip {
  background: var(--primary-dark);
  padding: 36px 0;
}
.stats-strip .stat-number {
  font-family: "Sora", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.stats-strip .stat-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

/* ────────────────────────────────────────────────────────────────
   Page title / hero band for non-home pages
   ──────────────────────────────────────────────────────────────── */

.public-page-title {
  padding: 150px 0 70px;
  text-align: center;
  background: linear-gradient(135deg, var(--primary-dark), #2c2c25);
  color: #fff;
}
.public-page-title h1 { color: #fff; font-size: 2.2rem; margin-bottom: 8px; }
.public-page-title p { color: rgba(255, 255, 255, 0.75); margin: 0; }

/* ────────────────────────────────────────────────────────────────
   Generic section spacing / titles
   ──────────────────────────────────────────────────────────────── */

.public-section { padding: 70px 0; }
.public-section.light { background: #fbfaf8; }
.public-section.dark { background: var(--primary-dark); color: rgba(255, 255, 255, 0.85); }
.public-section.dark h2 { color: #fff; }

.public-section-title { text-align: center; padding-bottom: 50px; }
.public-section-title .eyebrow {
  display: inline-block;
  color: var(--primary-red);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.public-section-title h2 { font-size: 1.9rem; font-weight: 700; margin-bottom: 14px; }
.public-section-title h2::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  background: var(--accent-color);
  margin: 14px auto 0;
}
.public-section-title p { color: var(--muted-color); max-width: 640px; margin: 0 auto; }

/* ────────────────────────────────────────────────────────────────
   Buttons
   ──────────────────────────────────────────────────────────────── */

a.btn-kenya-primary {
  background: var(--primary-red);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-block;
}
a.btn-kenya-primary:hover {
  background: color-mix(in srgb, var(--primary-red), black 12%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(206, 23, 28, 0.25);
}


a.btn-kenya-outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 50px;
  padding: 10px 26px;
  font-weight: 600;
  display: inline-block;
}
a.btn-kenya-outline:hover { background: #fff; color: var(--primary-dark); }

a.btn-kenya-outline-dark {
  background: transparent;
  border: 2px solid var(--primary-dark);
  color: var(--primary-dark);
  border-radius: 50px;
  padding: 10px 26px;
  font-weight: 600;
  display: inline-block;
}
a.btn-kenya-outline-dark:hover { background: var(--primary-dark); color: #fff; }

/* ────────────────────────────────────────────────────────────────
   Generic cards
   ──────────────────────────────────────────────────────────────── */

.public-card {
  background: var(--surface-color);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  /* No height: 100% here on purpose. .public-card is reused both for
     standalone/stacked cards (lookup form + result, venue "on
     arrival", accommodation "things to plan around") and for
     equal-height grid cards (accommodation listings, search results).
     A blanket height: 100% only makes sense for the grid case, and
     those templates already opt in explicitly with Bootstrap's .h-100
     utility (see accommodation.html, search/results.html) — so it
     doesn't need to be forced here.

     Forcing it here was actively harmful for the standalone/stacked
     case: a lone .col-* in a .row defaults to align-items: stretch,
     which gives the column a definite height equal to its own content
     height (Bootstrap 5's .row is a flex container). Any
     height: 100% child of that column then resolves against that
     *whole-column* height rather than its own content — so when two
     cards stack in one column (e.g. the lookup page's form card
     followed by the result card once a lookup succeeds), each card
     tried to stretch to the combined height of both, ballooning the
     card and pushing/overflowing its visible content past where the
     sticky-footer flex layout expected .public-main to end, so the
     footer painted over the tail end of it. Letting cards size to
     their own content (the default) removes that feedback loop. */
}
.public-card:hover { box-shadow: var(--card-hover-shadow); }

.feature-pill-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 16px;
}

/* ────────────────────────────────────────────────────────────────
   About section — photo/video frame + floating date badge
   ──────────────────────────────────────────────────────────────── */

.about-visual-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--light-bg);
}
.about-visual-frame img,
.about-visual-frame video,
.about-visual-frame iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.about-visual-badge {
  position: absolute;
  bottom: -16px;
  left: 24px;
  background: #fff;
  border-radius: 50px;
  padding: 10px 20px;
  box-shadow: var(--card-hover-shadow);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--heading-color);
}
.about-visual-badge i { color: var(--primary-red); }

/* Default visual shown in the About section when no admin-uploaded
   photo/video exists yet (AboutSection.media_type == "none") — a
   branded gradient panel with a big icon and the same
   speaker/partner/day counts used in the stats strip above, rather
   than leaving this column blank. Swapped out automatically for the
   real photo/video frame the moment an admin sets one. */
.about-visual-placeholder {
  position: relative;
  border-radius: 16px;
  padding: 48px 32px 36px;
  background: var(--gradient-secondary, linear-gradient(135deg, #01873F 0%, #1C1C18 100%));
  box-shadow: var(--card-shadow);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.about-visual-placeholder::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.6;
  pointer-events: none;
}
.about-visual-placeholder-icon {
  position: relative;
  z-index: 1;
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: #fff;
}
.about-visual-placeholder .row { position: relative; z-index: 1; }
.about-stat-number {
  font-family: "Sora", sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}
.about-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}

/* ────────────────────────────────────────────────────────────────
   Activities grid
   ──────────────────────────────────────────────────────────────── */

.activity-card {
  position: relative;
  background: var(--surface-color);
  border-radius: 16px;
  border-top: 5px solid var(--primary-red);
  padding: 32px 26px;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.activity-card:hover { transform: translateY(-4px); box-shadow: var(--card-hover-shadow); }
.activity-icon {
  font-size: 1.9rem;
  margin-bottom: 14px;
}
.activity-card h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.activity-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 50px;
}

/* ================================================================
   CHIEF GUEST
   ================================================================ */

.chief-guest-section {
    padding-top: 70px;
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 5px;
}

.chief-guest-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.chief-guest-image-wrapper {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    margin: 0 auto 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.chief-guest-image {
    display: block;
    width: 350px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 350px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 0 !important;
}

/* Name */
.chief-guest-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--heading-color);
}

/* Position */
.chief-guest-role {
    font-size: 1rem;
    color: var(--muted-color);
    margin: 0;
}


/* ================================================================
   CHIEF GUEST — MOBILE
   ================================================================ */

@media (max-width: 767.98px) {

    .chief-guest-section {
        padding: 50px 0;
    }

    .chief-guest-card {
        padding: 25px 15px;
    }

    .chief-guest-image {
        width: 100% !important;
        max-width: 450px !important;
        max-height: 450px;
    }

    .chief-guest-name {
        font-size: 1.2rem;
    }

    .chief-guest-role {
        font-size: 0.9rem;
    }
}

/* ────────────────────────────────────────────────────────────────
   Schedule / program preview timeline
   ──────────────────────────────────────────────────────────────── */

.schedule-tabs .nav-link {
  border-radius: 50px;
  font-weight: 600;
  padding: 10px 22px;
  border: 2px solid transparent;
  color: var(--default-color);
  background: #f1efe9;
  transition: all 0.25s ease;
}
.schedule-tabs .nav-link.active {
  background: var(--primary-red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(206, 23, 28, 0.25);
}

/* Connected vertical timeline rail — a continuous line running down
   the left edge with a dot per time slot, rather than disconnected
   rows that each float independently. Reads more like an actual
   schedule/itinerary at a glance. */
.schedule-timeline { position: relative; padding-left: 8px; }
.schedule-timeline::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: 138px;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary-red), var(--primary-green));
  opacity: 0.25;
}

.schedule-time-slot {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  margin-bottom: 28px;
}
.schedule-time-slot::before {
  /* The dot marking this slot's position on the rail — positioned in
     the GAP between the 130px time-label column and the rail line
     above (138px), not inside the label column itself. The label
     column is text-align: right, so its text runs right up to the
     130px boundary; placing the dot at 116px (inside that column)
     caused it to visually collide with the time text, confirmed by
     an actual rendered screenshot showing "10:00 A[dot]" instead of
     a clean "10:00 AM" with the dot beside it, not on top of it. */
  content: "";
  position: absolute;
  left: 133px; top: 16px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary-red);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(206, 23, 28, 0.3);
  z-index: 1;
}
.schedule-time-slot.is-break-slot::before { background: #9a9488; box-shadow: 0 0 0 1px rgba(154, 148, 136, 0.3); }

.schedule-time-label { text-align: right; padding-top: 10px; padding-right: 4px; }
.schedule-time-label .time { display: block; font-weight: 700; color: var(--heading-color); font-size: 0.96rem; }
.schedule-time-label .duration { display: block; font-size: 0.78rem; color: var(--muted-color); margin-top: 2px; }

/* When a slot has exactly one session, let it use the full available
   width instead of being squeezed into a 1-of-3 grid column with two
   empty siblings — this was the flattest-looking part of the
   previous layout. The "single" variant is applied by the template
   based on session count for that slot. */
.schedule-sessions-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.schedule-sessions-row.single-session { grid-template-columns: 1fr; }
.schedule-sessions-row.single-session .schedule-session-card { padding: 24px 28px; }
.schedule-sessions-row.single-session h4 { font-size: 1.15rem; }

.schedule-session-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--card-shadow);
  border-left: 4px solid var(--primary-green);
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.schedule-session-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }
.schedule-session-card.session-keynote {
  border-left-color: var(--warning-color);
  background: linear-gradient(135deg, #fffaf0, #fff);
}
.schedule-session-card.session-break {
  border-left-color: #9a9488;
  background: #f7f7f6;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.schedule-session-card.session-break h4 { margin-bottom: 0; font-size: 0.92rem; color: var(--muted-color); font-weight: 600; }
.schedule-session-card.session-break .session-type { margin-bottom: 0; }

.schedule-session-card .session-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--primary-red); margin-bottom: 8px;
}
.schedule-session-card.session-keynote .session-type { color: var(--warning-color); }
.schedule-session-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.schedule-session-card p { font-size: 0.86rem; color: var(--muted-color); margin-bottom: 8px; }
.schedule-session-card .venue {
  font-size: 0.76rem; color: var(--muted-color);
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--light-bg); padding: 3px 10px; border-radius: 50px;
}

.schedule-panelist { padding: 7px 0; border-top: 1px dashed var(--hairline-color); font-size: 0.82rem; }
.schedule-panelist:first-child { border-top: none; }
.schedule-panelist .role { font-weight: 600; color: var(--primary-dark); }
.schedule-panelist .name { color: var(--muted-color); }

@media (max-width: 767px) {
  .schedule-timeline::before { left: 56px; }
  .schedule-time-slot { grid-template-columns: 70px 1fr; gap: 14px; }
  .schedule-time-slot::before { left: 51px; }
  .schedule-time-label { text-align: left; }
  .schedule-time-label .time { font-size: 0.84rem; }
}

/* ────────────────────────────────────────────────────────────────
   Speaker cards
   ──────────────────────────────────────────────────────────────── */

.speaker-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.speaker-card:hover { transform: translateY(-6px); box-shadow: var(--card-hover-shadow); }
.speaker-photo-wrap { position: relative; aspect-ratio: 1 / 1; background: var(--light-bg); }
.speaker-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.speaker-photo-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; color: #c7c1b3;
}
.speaker-card .speaker-body { padding: 18px; }
.speaker-card .speaker-name { font-weight: 700; margin-bottom: 2px; font-size: 0.98rem; }
.speaker-card .speaker-role { font-size: 0.8rem; color: var(--muted-color); }

/* ────────────────────────────────────────────────────────────────
   Partners (tiered grid)
   ──────────────────────────────────────────────────────────────── */

.partner-tier-label {
  text-align: center;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted-color);
  margin-bottom: 24px;
}
.partner-logo-card {
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  height: 140px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}
.partner-logo-card img {
  max-height: 88px;
  max-width: 100%;
  filter: grayscale(15%);
  opacity: 0.88;
  transition: all 0.3s;
}
.partner-logo-card:hover img { filter: none; opacity: 1; }
.partner-logo-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-3px); transition: all 0.25s ease; }

/* ────────────────────────────────────────────────────────────────
   Gallery
   ──────────────────────────────────────────────────────────────── */

/* Shared by both the full /gallery/ page and the homepage gallery
   teaser — one definition so the two never drift apart visually.
   aspect-ratio (not a fixed pixel height) keeps tiles consistent
   across a 4-up homepage teaser and a denser full-page grid alike. */
.gallery-item { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .gallery-overlay,
.gallery-links {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(28, 28, 24, 0.55);
  opacity: 0; transition: opacity 0.3s;
  display: flex; align-items: center; justify-content: center;
}
.gallery-item:hover .gallery-overlay,
.gallery-item:hover .gallery-links { opacity: 1; }
/* .gallery-links a (not .gallery-links > a) so this stays at least as
   specific as the scoped global link rule even if that rule's :not()
   clause changes shape later — verified against an actual rendered
   page that this wins, not assumed from specificity arithmetic alone
   (see the developer guide's note on this file's own history of a
   specificity bug for why that verification step matters here). */
.public-page .gallery-links a,
.public-page .gallery-overlay i { color: #fff; font-size: 1.4rem; }

/* Homepage gallery teaser used a fixed square aspect-ratio in an
   earlier version of this page so that 4 images of differing source
   ratios formed a clean, even grid even with the old fixed-height
   .gallery-item. Now that .gallery-item itself uses aspect-ratio
   (above), the teaser uses the exact same 4:3 tile as the full
   gallery page instead — this class is kept only for any old markup
   that still references it, and is a no-op alongside the shared rule.
.gallery-item-square { aspect-ratio: 1 / 1; }
.gallery-item-square img { height: 100%; }

a.gallery-view-more-overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(28, 28, 24, 0.72);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; text-decoration: none;
  transition: background 0.3s;
}
a.gallery-view-more-overlay:hover { background: rgba(206, 23, 28, 0.82); color: #fff; }
.gallery-view-more-overlay span { font-size: 1.6rem; font-weight: 700; font-family: "Sora", sans-serif; }
.gallery-view-more-overlay small { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

/* ────────────────────────────────────────────────────────────────
   FAQ accordion (lightweight override of Bootstrap defaults)
   ──────────────────────────────────────────────────────────────── */

.public-page .accordion-button {
  font-weight: 600;
  color: var(--heading-color);
  background: #fff;
}
.public-page .accordion-button:not(.collapsed) {
  color: var(--primary-red);
  background: #fff5f5;
}
.public-page .accordion-button:focus { box-shadow: none; border-color: var(--hairline-color); }
.public-page .accordion-item { border-color: var(--hairline-color); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }

/* ────────────────────────────────────────────────────────────────
   Footer
   ──────────────────────────────────────────────────────────────── */

/* Final CTA band — solid brand red, distinct from the dark footer
   background that follows it (see the comment in
   templates/public/home.html for why this exists as its own class
   rather than reusing .public-section.dark). Previously a red→green
   gradient; switched to a single flat color per request. */
.cta-band {
  background: var(--primary-red);
  position: relative;
}
a.btn-kenya-cta-on-color {
  background: #fff;
  color: var(--primary-red);
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 700;
  display: inline-block;
  transition: all 0.3s ease;
}
a.btn-kenya-cta-on-color:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.public-footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.75);
  padding-top: 60px;
  /* Defensive seam: guarantees a visible boundary between the footer
     and WHATEVER section precedes it, even if a future section above
     it also happens to use a dark background — not relying solely on
     the preceding section choosing a different color. */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -12px 24px -12px rgba(0, 0, 0, 0.35) inset;
}
.public-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.public-footer a { color: rgba(255, 255, 255, 0.65); }
.public-footer a:hover { color: var(--primary-red); }
.public-footer .social-links { display: flex; gap: 10px; margin-top: 16px; }
.public-footer .social-links a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
}
.public-footer .social-links a:hover { background: var(--primary-red); color: #fff; }
.public-footer .copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 0;
  margin-top: 30px;
  text-align: center;
  font-size: 0.85rem;
}

.public-footer .logo-divider {
    height: 50px;
  }

.public-footer .logo-divider {
  width: 3px;
  height: 50px;
  background: linear-gradient(to bottom,
    #000000 0%,     /* Top color: Black */
    #000000  28%,
    #FFFFFF 28%, /* transparent 28%,    /* Gap 1 */
    #FFFFFF 34%, /* transparent 34%, */
    #BD272F 34%, /* Middle color: Red */
    #BD272F 62%,
    #FFFFFF 62%, /* transparent 62%,    /* Gap 2 */
    #FFFFFF 68%, /* transparent 68%, */
    #136B38 68%, /* Bottom color: Green */
    #136B38 100%
  );
  margin: 0 12px;
}

/* ────────────────────────────────────────────────────────────────
   Mobile nav
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
  .public-mobile-nav-toggle {
    color: #fff;
    font-size: 36px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
  }
  .public-navmenu ul {
    display: none;
    position: fixed;
    top: 70px; right: 16px; bottom: 16px; left: 16px;
    width: auto;
    background: var(--primary-dark);
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    z-index: 998;
    gap: 2px;
  }
  .public-mobile-nav-active .public-navmenu ul { display: flex; }

  .public-navmenu ul a > i {
    display: inline-flex !important;
    width: 20px;
    flex-shrink: 0;
    font-size: 1.05rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
  }

  .public-navmenu ul li { width: 100%; }
  .public-navmenu ul li a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 12px;
    border-radius: 9px;
    white-space: normal;
  }
  .public-navmenu ul li:not(:first-child):not(.public-navmenu-search):not(.public-navmenu-staff) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .public-navmenu ul li a:active,
  .public-navmenu ul li a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
  }
  .public-navmenu ul li a.active {
    background: rgba(206, 23, 28, 0.16);
    color: #fff;
  }
  .public-navmenu ul li a.active i { color: var(--primary-red); }
  .public-navmenu ul li a.active::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary-red);
  }
  .public-navmenu ul li a { position: relative; }

  .public-navmenu-search { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 8px; }
  .public-navmenu-search a span { display: inline; color: rgba(255, 255, 255, 0.55); font-size: 0.86rem; }

  .public-navmenu-staff {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .public-navmenu-staff a.btn-primary {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    font-size: 0.92rem;
  }
}

@media (max-width: 767px) {
  .hero-section { min-height: auto !important; padding-top: 130px !important; padding-bottom: 60px; }
  .countdown-unit { min-width: 70px; padding: 12px 14px; }
  .countdown-number { font-size: 1.5rem; }
  .schedule-time-slot { grid-template-columns: 1fr; gap: 8px; }
  .schedule-time-label { text-align: left; }
}

/* ────────────────────────────────────────────────────────────────
   Scroll-to-top
   ──────────────────────────────────────────────────────────────── */

a.scroll-top {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 42px; height: 42px;
  border-radius: 8px;
  background: var(--primary-red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all 0.3s;
  z-index: 999;
}
.scroll-top.active { opacity: 1; visibility: visible; }

/* ────────────────────────────────────────────────────────────────
   Reduced motion
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow .dot, .countdown-live-badge .pulse { animation: none; }
  .gallery-item img, .speaker-card { transition: none; }
}


/* ADD this block to static/public/css/public.css — insert it right
   after the existing .public-card / .public-card:hover rules (the
   block starts with the .form-card hover-override comment below).
   This is the ONLY new CSS for this round; nothing else in
   public.css changed. Covers: registrations/register.html,
   sponsors/apply.html, exhibitors/apply.html. */


/* Forms reuse .public-card for the same surface/shadow/radius
   treatment, but a form shouldn't visually "lift" on hover the way a
   clickable preview card does — nothing about hovering over a form is
   a click target, so that motion just reads as a glitch. */
.public-card.form-card { transition: none; }
.public-card.form-card:hover { box-shadow: var(--card-shadow); }

/* Public-site equivalent of the admin shell's .status-badge classes
   (static/assets/css/main.css, loaded by base.html). That stylesheet
   isn't loaded on public_base.html pages at all, so a public page
   using those same class names (e.g. the registration lookup result)
   would render completely unstyled — confirmed by checking exactly
   which stylesheet public_base.html actually loads before assuming
   the classes were simply missing everywhere. This is a deliberately
   separate, self-contained version using this file's own existing
   --primary-green/--warning-color/--muted-color variables rather than
   the admin shell's --success-color-light-style tokens, which don't
   exist in this file's :root block. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
}
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}
.status-badge-active {
  background-color: rgba(1, 135, 63, 0.12);
  color: var(--primary-green);
}
.status-badge-inactive {
  background-color: var(--light-bg);
  color: var(--muted-color);
}
.status-badge-pending {
  background-color: rgba(214, 158, 46, 0.14);
  color: var(--warning-color);
}

/* ────────────────────────────────────────────────────────────────
   Public-facing forms (registration, exhibitor/sponsor applications)
   ──────────────────────────────────────────────────────────────── */

.form-card { padding: 36px 40px; }
@media (max-width: 576px) { .form-card { padding: 24px 20px; } }

/* Section headers inside a long form — replaces a bare <h5> with a
   numbered-step treatment so a long multi-part form (registration,
   exhibitor application) reads as a sequence of clear stages rather
   than one undifferentiated wall of fields. */
.form-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-color);
}
.form-section-header:first-child { margin-top: 0; }
.form-section-header .step-number {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-red);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.form-section-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--heading-color);
}
.form-section-header .optional-tag {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--light-bg);
  padding: 3px 10px;
  border-radius: 50px;
  margin-left: auto;
}
.form-section-intro {
  font-size: 0.86rem;
  color: var(--muted-color);
  margin: -8px 0 18px;
}

/* Labels and inputs — Bootstrap defaults are fine structurally, this
   only restyles color/weight/focus state to match the brand instead
   of Bootstrap's default blue. */
.public-page .form-label {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--heading-color);
  margin-bottom: 6px;
}
.public-page .form-label .text-muted { font-weight: 400; }

.public-page .form-control,
.public-page .form-select {
  border-radius: 10px;
  border: 1.5px solid var(--hairline-color);
  padding: 10px 14px;
  font-size: 0.92rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.public-page .form-control:focus,
.public-page .form-select:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px rgba(206, 23, 28, 0.12);
}
.public-page .form-control.is-invalid,
.public-page .form-select.is-invalid {
  border-color: var(--danger-color);
}
.public-page .form-control.is-invalid:focus,
.public-page .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12);
}
.public-page .invalid-feedback { font-size: 0.8rem; }

/* File inputs get a slightly distinct treatment (dashed border,
   light background) so they read as "upload a document" rather than
   looking identical to a text field, which is easy to misread at a
   glance on a form with this many fields. */
.public-page input[type="file"].form-control {
  border-style: dashed;
  background: var(--light-bg);
  padding: 9px 14px;
  font-size: 0.86rem;
}
.public-page input[type="file"].form-control::file-selector-button {
  border: none;
  border-radius: 6px;
  background: var(--primary-dark);
  color: #fff;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-right: 10px;
  cursor: pointer;
}

/* Checkbox/radio groups (interests, sponsorship areas, attendance
   days) — light card framing per option so a grid of checkboxes
   reads as a set of selectable tiles rather than a dense list of
   bare checkbox+label pairs. */
.public-page .form-check {
  background: var(--light-bg);
  border-radius: 10px;
  padding: 10px 14px 10px 38px;
  margin-bottom: 0;
  transition: background 0.2s;
}
.public-page .form-check:has(.form-check-input:checked) {
  background: rgba(206, 23, 28, 0.07);
}
.public-page .form-check-input { margin-left: -24px; margin-top: 0.2em; }
.public-page .form-check-input:checked { background-color: var(--primary-red); border-color: var(--primary-red); }
.public-page .form-check-input:focus { box-shadow: 0 0 0 3px rgba(206, 23, 28, 0.12); border-color: var(--primary-red); }
.public-page .form-check-label { font-size: 0.88rem; }

/* Consent/agreement checkboxes (privacy policy, terms) get a
   slightly stronger visual frame since agreeing to them is a real
   gating step before submission, not just an optional preference. */
.form-consent-check {
  background: var(--light-bg);
  border: 1px solid var(--hairline-color);
  border-radius: 10px;
  padding: 14px 16px 14px 42px;
}

/* Dynamic repeatable rows (beneficial owners) */
.owner-row {
  background: var(--light-bg);
  border-radius: 10px;
  padding: 12px 12px 4px;
  margin-bottom: 10px !important;
  position: relative;
}

/* The submit button — buttons (not <a> tags) need their own rule
   here. Earlier rounds of this redesign fixed every <a>-based button
   (Register as a Delegate, View Gallery, etc.) by adding the `a` tag
   to each selector so its specificity matches ".public-page a" — but
   that fix only ever covered anchor tags. These three forms' submit
   buttons are real <button> elements, which ".public-page a" never
   applied to in the first place, so they were never affected by that
   bug — but they also never picked up any of the .btn-kenya-primary
   styling either, since that rule was equally anchor-only. Giving
   the submit button its own explicit, tag-correct rule here closes
   that gap for buttons rather than assuming the anchor fix already
   covered it. */
.public-page button.btn-kenya-primary,
.public-page button[type="submit"].btn-kenya-primary {
  background: var(--primary-red);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 32px;
  font-weight: 600;
  font-size: 0.96rem;
  transition: all 0.3s ease;
}
.public-page button.btn-kenya-primary:hover {
  background: color-mix(in srgb, var(--primary-red), black 12%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(206, 23, 28, 0.25);
}
.public-page button.btn-kenya-primary:disabled {
  background: #c7c1b3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.form-submit-row {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-color);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}


/* =========================================================
   Summit Mobile App
   ========================================================= */

.mobile-app-section {
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(206, 17, 38, 0.08),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(0, 122, 61, 0.08),
      transparent 35%
    ),
    #f8f9fa;
  overflow: hidden;
}

.mobile-app-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 70px 65px;
  background: linear-gradient(
    135deg,
    #111827 0%,
    #18212f 55%,
    #101820 100%
  );
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.16);
  color: #fff;
}

.mobile-app-card::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  top: -220px;
  right: -120px;
  background: rgba(206, 17, 38, 0.16);
  pointer-events: none;
}

.mobile-app-card::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  bottom: -180px;
  left: -120px;
  background: rgba(0, 122, 61, 0.12);
  pointer-events: none;
}

.mobile-app-card > .row {
  position: relative;
  z-index: 2;
}

.mobile-app-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #ff4d63;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mobile-app-eyebrow i {
  font-size: 1rem;
}

.mobile-app-title {
  max-width: 620px;
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.mobile-app-title span {
  color: #ff4d63;
}

.mobile-app-description {
  max-width: 620px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  line-height: 1.75;
}

.mobile-app-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 30px;
  max-width: 700px;
  margin-bottom: 34px;
}

.mobile-app-feature {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.mobile-app-feature-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
  color: #ff4d63;
  font-size: 1.1rem;
}

.mobile-app-feature strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.9rem;
  color: #fff;
}

.mobile-app-feature span {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
  line-height: 1.5;
}

.mobile-app-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}

.mobile-app-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 285px;
  padding: 13px 17px;
  border-radius: 14px;
  background: #ce1126;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(206, 17, 38, 0.28);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.mobile-app-download-btn:hover {
  color: #fff;
  background: #b90f22;
  transform: translateY(-3px);
  box-shadow: 0 17px 35px rgba(206, 17, 38, 0.38);
}

.mobile-app-download-btn > i {
  font-size: 2rem;
}

.mobile-app-download-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.2;
}

.mobile-app-download-text small {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
}

.mobile-app-download-text strong {
  font-size: 0.98rem;
}

.mobile-app-size {
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.7rem;
  font-weight: 700;
}

.mobile-app-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
}

.mobile-app-note i {
  color: #1f9d55;
}


/* Phone visual */

.mobile-app-visual {
  position: relative;
  min-height: 510px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-app-glow {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(206, 17, 38, 0.32) 0%,
    rgba(206, 17, 38, 0.08) 45%,
    transparent 72%
  );
  filter: blur(2px);
}

.mobile-app-phone {
  position: relative;
  width: 245px;
  height: 485px;
  padding: 8px;
  border-radius: 38px;
  background: #080b10;
  border: 2px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 35px 70px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transform: rotate(3deg);
  z-index: 3;
}

.mobile-app-phone-notch {
  position: absolute;
  z-index: 5;
  top: 15px;
  left: 50%;
  width: 92px;
  height: 24px;
  border-radius: 0 0 15px 15px;
  background: #080b10;
  transform: translateX(-50%);
}

.mobile-app-phone-screen {
  height: 100%;
  overflow: hidden;
  padding: 43px 17px 20px;
  border-radius: 31px;
  background:
    linear-gradient(
      160deg,
      rgba(206, 17, 38, 0.22),
      transparent 34%
    ),
    #f8f9fa;
  color: #111827;
}

.mobile-app-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 23px;
  color: #111827;
  font-size: 0.65rem;
  font-weight: 800;
}

.mobile-app-screen-header i {
  color: #ce1126;
}

.mobile-app-screen-logo {
  width: 53px;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
  border-radius: 15px;
  background: #ce1126;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 8px 20px rgba(206, 17, 38, 0.25);
}

.mobile-app-phone-screen h4 {
  margin-bottom: 5px;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
}

.mobile-app-phone-screen > p {
  margin-bottom: 20px;
  color: #6b7280;
  font-size: 0.65rem;
}

.mobile-app-screen-card {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.mobile-app-screen-card > i {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 29px;
  border-radius: 8px;
  background: rgba(206, 17, 38, 0.09);
  color: #ce1126;
  font-size: 0.8rem;
}

.mobile-app-screen-card small {
  display: block;
  margin-bottom: 2px;
  color: #9ca3af;
  font-size: 0.5rem;
}

.mobile-app-screen-card strong {
  display: block;
  color: #111827;
  font-size: 0.62rem;
}

/* =========================================================
   Floating App Badges
   ========================================================= */

.mobile-app-floating-badge {
  position: absolute;
  z-index: 10;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.96);
  color: #111827;

  font-size: 0.72rem;
  font-weight: 800;

  text-decoration: none;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* Download button */
.mobile-app-badge-top {
  top: 70px;
  right: 10px;
}

.mobile-app-badge-top:hover {
  color: #111827;
  background: #ffffff;

  transform: translateY(-4px);

  box-shadow:
    0 17px 35px rgba(0, 0, 0, 0.30);
}

.mobile-app-badge-top i {
  color: #ce1126;
  font-size: 1rem;
}

/* Android badge */
.mobile-app-badge-bottom {
  bottom: 48px;
  left: 0;
}

.mobile-app-badge-bottom i {
  color: #3ddc84;
  font-size: 1rem;
}


/* Responsive */

@media (max-width: 991.98px) {
  .mobile-app-card {
    padding: 55px 40px;
  }

  .mobile-app-visual {
    min-height: 480px;
    margin-top: 15px;
  }
}

@media (max-width: 767.98px) {
  .mobile-app-card {
    padding: 42px 25px;
    border-radius: 22px;
  }

  .mobile-app-title {
    font-size: 2.25rem;
  }

  .mobile-app-description {
    font-size: 0.95rem;
  }

  .mobile-app-features {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .mobile-app-download-btn {
    width: 100%;
    min-width: 0;
  }

  .mobile-app-visual {
    min-height: 430px;
    margin-top: 10px;
  }

  .mobile-app-phone {
    width: 215px;
    height: 425px;
  }

  .mobile-app-badge-top {
    right: 0;
    top: 40px;
  }

  .mobile-app-badge-bottom {
    left: 0;
    bottom: 35px;
  }
}

@media (max-width: 420px) {
  .mobile-app-card {
    padding: 35px 20px;
  }

  .mobile-app-title {
    font-size: 2rem;
  }

  .mobile-app-visual {
    transform: scale(0.9);
    margin-top: -10px;
    margin-bottom: -25px;
  }
}

/* ────────────────────────────────────────────────────────────────
   Sponsorship & Exhibition packages
   ──────────────────────────────────────────────────────────────── */

.package-group-label {
  text-align: center;
  color: var(--primary-red);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.package-card {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
}
.package-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
}

.package-card--featured {
  border: 2px solid var(--primary-red);
}
.package-card--featured::before {
  content: "Most Popular";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
  white-space: nowrap;
}

.package-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.package-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading-color);
}

.package-price-section {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--primary-red);
}

.package-benefit-check { color: var(--primary-green); }

a.btn-kenya-primary.btn-kenya-primary--sm {
  padding: 8px 20px;
  font-size: 0.85rem;
}