/* assets/css/style.css */

:root {
  --deep-navy: #0d1b3e;
  --gold: #f5c518;
}

/* Custom utility classes */
.bg-deep-navy { background-color: var(--deep-navy); }
.text-deep-navy { color: var(--deep-navy); }

.bg-gold { background-color: var(--gold); }
.text-gold { color: var(--gold); }

.border-gold\/60 {
  border-color: rgba(245, 197, 24, 0.6);
}

/* Gradients */
.from-deep-navy\/75 { --tw-gradient-from: rgba(13, 27, 62, 0.75); }
.via-deep-navy\/55 { --tw-gradient-via: rgba(13, 27, 62, 0.55); }
.to-deep-navy\/80 { --tw-gradient-to: rgba(13, 27, 62, 0.8); }

/* Mobile menu */
#mobileMenu {
  transition: max-height 0.3s ease-in-out, opacity 0.2s;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

#mobileMenu.open {
  max-height: 400px;
  opacity: 1;
}

/* Timeline number style */
.timeline-number {
  background: #0d1b3e;
  color: #f5c518;
}

/* =========================
   HERO BACKGROUNDS (ONLINE)
   Ensure each hero container has a minimum height (e.g., min-h-[400px] in HTML)
   to make the background visible.
========================= */

.hero-bg-home {
  background-image: url('hom.png');
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */ /* Optional: remove if you want simpler mobile behavior */
}

.hero-bg-about {
  background-image: url('about.ng');
  background-size: cover;
  background-position: center;
}

.hero-bg-programs {
  background-image: url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1920');
  background-size: cover;
  background-position: center;
}

.hero-bg-stories {
  background-image: url('rogram.png');
  background-size: cover;
  background-position: center;
}

.hero-bg-apply {
  background-image: url('apply.png');
  background-size: cover;
  background-position: center;
}

.hero-bg-support {
  background-image: url('supprt.png');
  background-size: cover;
  background-position: center;
}

.hero-bg-contact {
  background-image: url('https://iges.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1920');
  background-size: cover;
  background-position: center;
}

/* Text balance */
.text-balance {
  text-wrap: balance;
}

/* Navbar dynamic colors */
#mainNav a:not(.btn) {
  color: white;
  transition: color 0.3s ease;
}

#mainNav.scrolled a:not(.btn) {
  color: var(--deep-navy);
}

#mainNav.scrolled .mobile-toggle {
  border-color: var(--deep-navy);
  color: var(--deep-navy);
}

#mainNav.scrolled {
  background-color: rgba(255, 255, 255, 0.95); /* fixed syntax */
  border-color: rgba(13, 27, 62, 0.2);
}