/* ==========================================================================
   BOODA SUNDAY ADEYEMO (BSA) — OGBOMOSO SOUTH CAMPAIGN
   Design tokens + core styles. Loaded AFTER Bootstrap 5 CSS.
   ========================================================================== */

:root{
  /* -- Color: named, not generic -- */
  --clr-primary:      #070141; /* Ogbomoso Green   */
  --clr-primary-dark: #000a2e;
  --clr-primary-tint: #E7F0EA;
  --clr-gold:          #E8A33D; /* Harvest Gold — CTA / energy */
  --clr-gold-dark:      #C97F1E;
  --clr-rust:           #B23A2E; /* urgency accent: countdown, live badge */
  --clr-ink:            #1B1F1C;
  --clr-ink-soft:       #4B5450;
  --clr-parchment:      #F7F3EA;
  --clr-white:          #FFFFFF;
  --clr-border:         #E1DACB;

  /* -- Type -- */
  --font-display: 'poppins', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, Segoe UI, sans-serif;

  /* -- Layout -- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --shadow-card: 0 10px 30px -12px rgba(14,75,51,0.25);
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

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

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--clr-ink);
  background: var(--clr-parchment);
  line-height: 1.6;
  overflow-x:hidden;
}

h1, h2, h3, h4, .display-font{
  font-family: var(--font-display);
  color: var(--clr-primary-dark);
  letter-spacing: -0.01em;
}

p{ max-width: 65ch; }

a{ color: var(--clr-primary); }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--clr-gold);
  outline-offset: 2px;
}

/* -- Route / movement motif: used as a divider and connector, not decoration -- */
.route-line{
  border: none;
  height: 0;
  border-top: 3px dashed var(--clr-gold-dark);
  opacity: .55;
  margin: 0;
}
.route-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--clr-gold-dark);
  flex: 0 0 auto;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.bsa-navbar{
  background: var(--clr-parchment);
  border-bottom: 1px solid var(--clr-border);
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.bsa-navbar .navbar-brand{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--clr-primary-dark);
}
.bsa-navbar .navbar-brand span{ color: var(--clr-gold-dark); }
.bsa-navbar .nav-link{
  font-weight: 500;
  color: var(--clr-ink);
  position: relative;
  margin: 0 .35rem;
}
.bsa-navbar .nav-link.active{ color: var(--clr-primary-dark); }
.bsa-navbar .nav-link.active::after{
  content: "";
  position: absolute;
  left: .1rem; right: .1rem; bottom: -2px;
  height: 2px;
  background: var(--clr-gold-dark);
}
.btn-join{
  background: var(--clr-gold);
  border: none;
  color: var(--clr-primary-dark);
  font-weight: 600;
  padding: .55rem 1.3rem;
  border-radius: 999px;
  transition: transform var(--transition), background var(--transition);
}
.btn-join:hover{ background: var(--clr-gold-dark); transform: translateY(-1px); color: var(--clr-white); }

/* ==========================================================================
   BUTTONS (shared)
   ========================================================================== */
.btn-bsa-primary{
  background: var(--clr-gold);
  color: var(--clr-primary-dark);
  border: none;
  font-weight: 600;
  padding: .75rem 1.6rem;
  border-radius: 999px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-bsa-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(201,127,30,.55); color: var(--clr-primary-dark); }

.btn-bsa-outline{
  background: transparent;
  border: 2px solid var(--clr-parchment);
  color: var(--clr-parchment);
  font-weight: 600;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  transition: background var(--transition), color var(--transition);
}
.btn-bsa-outline:hover{ background: var(--clr-parchment); color: var(--clr-primary-dark); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background: var(--clr-primary);
  background-image:
    radial-gradient(circle at 85% 20%, rgba(232,163,61,.18), transparent 45%),
    linear-gradient(180deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
  color: var(--clr-parchment);
  padding: 4.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero .eyebrow-tag{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--clr-gold);
  background: rgba(232,163,61,.12);
  border: 1px solid rgba(232,163,61,.4);
  padding: .35rem .85rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.hero h1{
  color: var(--clr-white);
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
}
.hero h1 em{
  font-style: italic;
  color: var(--clr-gold);
}
.hero .lead{
  color: #D9E6DE;
  font-size: 1.15rem;
  max-width: 42ch;
}

/* Hero load-in: ONE orchestrated sequence, not per-element scroll effects */
.hero-anim > *{
  opacity: 0;
  transform: translateY(16px);
  animation: heroRise .7s ease forwards;
}
.hero-anim > *:nth-child(1){ animation-delay: .05s; }
.hero-anim > *:nth-child(2){ animation-delay: .18s; }
.hero-anim > *:nth-child(3){ animation-delay: .3s; }
.hero-anim > *:nth-child(4){ animation-delay: .42s; }
@keyframes heroRise{ to{ opacity: 1; transform: translateY(0); } }

/* Media card — deliberately off-grid, not a centered stock hero image */
.hero-media{
  position: relative;
  transform: rotate(2deg);
  animation: heroRise .8s ease forwards .3s;
  opacity: 0;
}
.hero-media .media-frame{
  background: var(--clr-parchment);
  border-radius: var(--radius-md);
  padding: .6rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
.hero-media .media-inner{
  position: relative;
  border-radius: calc(var(--radius-md) - 6px);
  overflow: hidden;
  background: #0000;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #0000 0%, #0000 100%);
}
.hero-media video, .hero-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bio-video{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: #000;
  box-shadow: 0 18px 36px -18px rgba(0,0,0,.35);
}
.play-btn{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,25,20,.28);
  border: none;
  cursor: pointer;
  transition: background var(--transition);
}
.play-btn:hover{ background: rgba(11,25,20,.42); }
.play-btn .play-circle{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--clr-gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.5);
}
.play-btn .play-circle::before{
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--clr-primary-dark);
  margin-left: 3px;
}

/* -- Countdown -- */
.countdown{
  display: flex;
  gap: .9rem;
  margin-top: 1.9rem;
}
.countdown .unit{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  padding: .6rem .5rem;
  min-width: 68px;
  text-align: center;
}
.countdown .unit strong{
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--clr-white);
  line-height: 1;
}
.countdown .unit span{
  font-size: .68rem;
  text-transform: lowercase;
  color: #B9CBBF;
  letter-spacing: .03em;
}
.countdown.is-live .unit strong{ color: var(--clr-rust); }

/* ==========================================================================
   NEWS TICKER — styled like a broadcast lower-third, not a Bootstrap carousel
   ========================================================================== */
.news-ticker{
  background: var(--clr-ink);
  color: var(--clr-parchment);
  overflow: hidden;
  position: relative;
}
.news-ticker .ticker-label{
  background: var(--clr-rust);
  color: var(--clr-white);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  padding: .55rem 1rem;
  white-space: nowrap;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.news-ticker .ticker-label .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clr-white);
  animation: pulseDot 1.4s infinite;
}
@keyframes pulseDot{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
.ticker-viewport{
  overflow: hidden;
  flex: 1 1 auto;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker-track{
  display: flex;
  gap: 3.5rem;
  white-space: nowrap;
  padding: .6rem 0;
  animation: tickerScroll 32s linear infinite;
}
.news-ticker:hover .ticker-track,
.news-ticker .ticker-track.is-paused{ animation-play-state: paused; }
@keyframes tickerScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.ticker-track .item{ font-size: .9rem; opacity: .92; }
.ticker-track .item strong{ color: var(--clr-gold); }

/* ==========================================================================
   SECTIONS / PILLARS
   ========================================================================== */
.section-heading{
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}
.section-heading h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0; }
.section-heading .route-line{ flex: 1 1 auto; }

.pillar-card{
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  height: 100%;
  transition: border-color var(--transition), transform var(--transition);
}
.pillar-card:hover{ border-color: var(--clr-gold-dark); transform: translateY(-3px); }
.pillar-card .pillar-icon{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--clr-primary-tint);
  color: var(--clr-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* ==========================================================================
   MANIFESTO — milestones connected along a route, not identical SaaS cards
   ========================================================================== */
.milestone-path{
  position: relative;
  padding-left: 2.4rem;
  border-left: 3px dashed var(--clr-gold-dark);
  margin-left: .6rem;
}
.milestone{
  position: relative;
  margin-bottom: 1.1rem;
}
.milestone::before{
  content: "";
  position: absolute;
  left: -2.75rem;
  top: 1.4rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--clr-gold);
  border: 3px solid var(--clr-parchment);
  box-shadow: 0 0 0 3px var(--clr-gold-dark);
}
.milestone .accordion-button{
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--clr-white);
  border-radius: var(--radius-md) !important;
  color: var(--clr-primary-dark);
}
.milestone .accordion-button:not(.collapsed){
  background: var(--clr-primary-tint);
  color: var(--clr-primary-dark);
  box-shadow: none;
}
.milestone .accordion-button:focus{ box-shadow: 0 0 0 3px rgba(232,163,61,.5); }
.milestone .accordion-body{ background: var(--clr-white); border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* ==========================================================================
   PROJECT TRACKER (tabs)
   ========================================================================== */
.tracker-tabs .nav-link{
  border-radius: 999px;
  font-weight: 600;
  color: var(--clr-ink-soft);
  padding: .5rem 1.25rem;
  border: 1px solid var(--clr-border);
  margin-right: .5rem;
}
.tracker-tabs .nav-link.active{
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
}
.tracker-card{
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  height: 100%;
}
.tracker-card .status-pill{
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}
.status-completed{ background: var(--clr-primary-tint); color: var(--clr-primary-dark); }
.status-ongoing{ background: #FCEFD9; color: var(--clr-gold-dark); }
.status-planned{ background: #F1E9E9; color: var(--clr-rust); }
.progress{ height: 8px; border-radius: 999px; background: var(--clr-parchment); }
.progress-bar{ background: var(--clr-gold); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.gallery-grid .g-item{
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1/1;
  cursor: pointer;
}
.gallery-grid .g-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-grid .g-item:hover img{ transform: scale(1.06); }
.gallery-grid .g-item .g-cap{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(11,25,20,.85));
  color: var(--clr-white);
  font-size: .78rem;
  padding: .4rem .6rem .5rem;
}
.gallery-grid .g-item.tall{ grid-row: span 2; }
@media (max-width: 767.98px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .g-item.tall{ grid-row: span 1; }
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.bsa-form .form-control, .bsa-form .form-select{
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  padding: .7rem .9rem;
}
.bsa-form .form-control:focus, .bsa-form .form-select:focus{
  border-color: var(--clr-gold-dark);
  box-shadow: 0 0 0 3px rgba(232,163,61,.25);
}
.bsa-form label{ font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.form-feedback{ font-size: .85rem; margin-top: .25rem; }
.form-feedback.error{ color: var(--clr-rust); }
.form-feedback.ok{ color: var(--clr-primary); }
.alert-bsa-success{ background: var(--clr-primary-tint); color: var(--clr-primary-dark); border: 1px solid var(--clr-primary); border-radius: var(--radius-sm); }
.alert-bsa-error{ background: #F6E7E5; color: var(--clr-rust); border: 1px solid var(--clr-rust); border-radius: var(--radius-sm); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.bsa-footer{
  background: var(--clr-primary-dark);
  color: #C9D9CE;
  padding: 3rem 0 1.5rem;
}
.bsa-footer h5{ color: var(--clr-white); font-family: var(--font-display); }
.bsa-footer a{ color: #C9D9CE; text-decoration: none; }
.bsa-footer a:hover{ color: var(--clr-gold); }
.bsa-footer .socials a{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: .5rem;
}

/* Mobile nav offcanvas tweaks */
@media (max-width: 991.98px){
  .bsa-navbar .navbar-collapse{
    background: var(--clr-parchment);
  }
  .bsa-navbar .nav-link{ padding: .6rem 0; margin: 0; }
}

/* Utility */
.text-gold{ color: var(--clr-gold-dark) !important; }
.bg-parchment{ background: var(--clr-parchment) !important; }
.section{ padding: 4.5rem 0; }