/* ============================================================
   PREMIUM.CSS — Final polish layer (loaded last)
   Fixes: navbar vertical centering · hero height + centering
          footer text size · contact label visibility
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1. NAVBAR — flex-centred, exactly 72px tall
   Problem: .container inside nav has auto height, so min-height
   creates empty space at the BOTTOM instead of centering items.
   Fix: make nav + its container both flex with align-items:center,
   remove vertical padding (centering handles the spacing instead).
   ══════════════════════════════════════════════════════════════ */

#mainNav {
  display: flex !important;
  align-items: center !important;
  min-height: 72px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The Bootstrap .container must also stretch + center */
#mainNav > .container,
#mainNav > .container-fluid {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 72px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Scrolled state: keep same 0 padding so items stay centred */
#mainNav.scrolled {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 64px !important;
}
#mainNav.scrolled > .container,
#mainNav.scrolled > .container-fluid {
  min-height: 64px !important;
}

/* Mobile: slightly shorter */
@media (max-width: 991.98px) {
  #mainNav,
  #mainNav > .container,
  #mainNav > .container-fluid {
    min-height: 64px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   2. HERO SECTION — comfortable height + proper vertical centre
   Problem: height:660px was too small + hero-row min-height:100vh
   clashes with the section cap, breaking flex centering.
   Fix: remove height cap, set only min-height as floor, reset
   hero-row padding so content has equal breathing room top+bottom.
   ══════════════════════════════════════════════════════════════ */

/* Desktop: tall but not full-viewport */
@media (min-width: 992px) {
  .hero-section {
    min-height: 760px !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
  }
  .hero-row {
    min-height: 0 !important;        /* remove 100vh override */
    padding-top: 7rem !important;    /* ~112px from top (navbar clears ~72px) */
    padding-bottom: 6rem !important; /* 96px breathing room at bottom */
    align-items: center !important;
  }
}

/* Wide screens: even more generous */
@media (min-width: 1400px) {
  .hero-section {
    min-height: 820px !important;
  }
  .hero-row {
    padding-top: 8rem !important;
    padding-bottom: 7rem !important;
  }
}

/* Tablet: keep auto height, trim padding */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-section {
    min-height: 600px !important;
    height: auto !important;
    max-height: none !important;
  }
  .hero-row {
    min-height: 0 !important;
    padding-top: 6rem !important;
    padding-bottom: 5rem !important;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .hero-section {
    min-height: 520px !important;
    height: auto !important;
    max-height: none !important;
  }
  .hero-row {
    min-height: 0 !important;
    padding-top: 5.5rem !important;
    padding-bottom: 4rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   3. FOOTER TITLES — 14px bold, clearly readable
   ══════════════════════════════════════════════════════════════ */

.footer-title {
  font-size: 0.9375rem !important;      /* 15px */
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #94A3B8 !important;
  margin-bottom: 1.25rem !important;
}

[data-theme="dark"] .footer-title {
  color: rgba(183, 210, 255, 0.85) !important;
}


/* ══════════════════════════════════════════════════════════════
   4. FOOTER CONTACT LABELS — visible, not invisible
   ══════════════════════════════════════════════════════════════ */

.ft-contact-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: rgba(160, 196, 245, 0.72) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.ft-contact-val {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: rgba(205, 226, 255, 0.85) !important;
}

.ft-contact-icon {
  width: 32px !important;
  height: 32px !important;
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .ft-contact-label {
  color: rgba(140, 176, 230, 0.62) !important;
}
[data-theme="dark"] .ft-contact-val {
  color: rgba(195, 220, 255, 0.82) !important;
}


/* ══════════════════════════════════════════════════════════════
   5. FOOTER NAV LINKS — 14.6px, comfortable line-height
   ══════════════════════════════════════════════════════════════ */

.footer-links a {
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: #CBD5E1 !important;
}
.footer-links a:hover {
  color: #FFFFFF !important;
}
.footer-links li {
  margin-bottom: 0.8rem !important;
}


/* ══════════════════════════════════════════════════════════════
   6. FOOTER BOTTOM BAR
   ══════════════════════════════════════════════════════════════ */

.ft-copy {
  font-size: 0.8125rem !important;
  color: #94A3B8 !important;
}
.footer-legal-link,
.ft-legal-nav .footer-legal-link {
  font-size: 0.8125rem !important;
  color: #64748B !important;
}
.footer-legal-link:hover {
  color: rgba(220, 240, 255, 0.92) !important;
}

@media (max-width: 575px) {
  .footer-bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   7. FOOTER LOGO + SOCIAL ICONS
   ══════════════════════════════════════════════════════════════ */

.footer-logo {
  height: 56px !important;
  opacity: 0.95 !important;
  margin-bottom: 1.1rem !important;
}

.social-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   8. PROGRAM CARDS — equal-height columns
   ══════════════════════════════════════════════════════════════ */

.prog-card {
  display: flex !important;
  flex-direction: column !important;
}
.prog-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.prog-card-desc {
  flex: 1 !important;
}


/* ══════════════════════════════════════════════════════════════
   9. EVENT CARDS — equal-height columns
   ══════════════════════════════════════════════════════════════ */

.section-events .row > [class*="col-"] {
  display: flex !important;
}
.event-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}
.event-card-body {
  flex: 1 !important;
}


/* ══════════════════════════════════════════════════════════════
   10. NEWS BOTTOM CARDS — uniform image heights
   ══════════════════════════════════════════════════════════════ */

.nu-card-media {
  height: 200px !important;
}
@media (max-width: 575px) {
  .nu-card-media { height: 170px !important; }
}