/* ============================================================
   Meridian Academy — BP-C04
   Custom styles supplementing Tailwind CDN
   Palette: navy #1e3a6e (brand-700) · gold #e2b13c (gold-400)
   ============================================================ */

/* ---- BASE ---- */
/* Keep anchor jumps and focused fields clear of the fixed navbar (70px) */
html { scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
main:focus { outline: none; } /* skip-link target */

/* Visible keyboard focus everywhere; gold on the dark bands where navy would vanish */
:focus-visible { outline: 2px solid #2f5391; outline-offset: 2px; }
.bg-brand-700 :focus-visible,
.bg-brand-800 :focus-visible,
.bg-brand-900 :focus-visible,
.bg-brand-950 :focus-visible,
#announcementBar :focus-visible { outline-color: #ecc65a; }

/* ---- SKIP LINK ---- */
.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: .5rem;
  background: #1e3a6e;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

/* ---- ANNOUNCEMENT BAR ---- */
/* Static on purpose: auto-scrolling text can't be paused by keyboard users. */
#announcementBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45; /* below #navbar (50): the navbar slides over the bar on scroll */
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 0 1rem;
  white-space: nowrap;
  overflow: hidden;
  background: #102244; /* brand-900 */
  color: #dce6f6;      /* brand-100 */
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
}
#announcementBar p { overflow: hidden; text-overflow: ellipsis; }
#announcementBar a {
  flex-shrink: 0;
  padding: .5rem 0;
  color: #ecc65a; /* gold-300 */
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}
#announcementBar a:hover { color: #fff; }

/* ---- NAVBAR ---- */
#navbar {
  position: fixed;
  top: 36px; /* sits below the announcement bar */
  left: 0;
  right: 0;
  z-index: 50;
  height: 70px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: top .3s ease, box-shadow .3s ease;
}
/* once the page is scrolled past the bar */
#navbar.compact {
  top: 0;
  box-shadow: 0 2px 16px rgba(0,0,0,.10);
}

#mobileMenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  box-shadow: 0 12px 24px rgba(16,34,68,.12);
}
#mobileMenu.open { display: flex; }

/* Active nav link */
a.nav-link.active { color: #1e3a6e; font-weight: 700; }

/* ---- SCROLL REVEAL ---- */
/* Only hidden once JS has flagged <html class="js">, so content is never
   stuck invisible without it. :where() keeps specificity at the original
   level so card hover transitions below still win. */
:where(.js) [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
:where(.js) [data-reveal][data-delay="1"] { transition-delay: .10s; }
:where(.js) [data-reveal][data-delay="2"] { transition-delay: .20s; }
:where(.js) [data-reveal][data-delay="3"] { transition-delay: .30s; }
:where(.js) [data-reveal][data-delay="4"] { transition-delay: .40s; }
:where(.js) [data-reveal].revealed       { opacity: 1; transform: none; }

/* ---- STAT NUMBERS ---- */
.stat-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- PROGRAM / DIVISION CARD ---- */
.prog-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(30,58,110,.14);
  border-color: #4a6fb2;
}
.prog-icon {
  transition: background .22s ease, color .22s ease;
}
.prog-card:hover .prog-icon {
  background: #1e3a6e !important;
  color: #fff !important;
}

/* ---- FACULTY CARD ---- */
.faculty-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.faculty-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(30,58,110,.16);
}
.fac-photo {
  transition: transform .4s ease;
}
.faculty-card:hover .fac-photo { transform: scale(1.04); }

/* ---- FILTER TABS ---- */
/* Single scrolling row on phones so the sticky bar stays slim */
.filter-scroll { scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display: none; }
/* Filtered blocks (program sections / faculty cards) stop below navbar + filter bar */
.filterable { scroll-margin-top: 3.75rem; }

.filter-tab {
  flex-shrink: 0;
  padding: .45rem 1.1rem;
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  background: #fff;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.filter-tab:hover  { border-color: #4a6fb2; color: #1e3a6e; }
.filter-tab.active { background: #1e3a6e; border-color: #1e3a6e; color: #fff; }

/* ---- ADMISSION STEPS ---- */
.adm-step {
  position: relative;
}
.adm-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.375rem;
  top: 2.75rem;
  bottom: -1.5rem;
  width: 2px;
  background: #bccfec;
}
.step-num {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: #eef3fb;
  border: 2px solid #92b0dd;
  color: #1e3a6e;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ---- FAQ ---- */
/* Collapsed only when JS is running; main.js sets max-height to the
   panel's real height, and visibility drops closed answers out of the
   tab order / accessibility tree. */
:where(.js) .faq-answer {
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  visibility: hidden;
  transition: max-height .35s ease, padding-bottom .35s ease, visibility 0s linear .35s;
}
:where(.js) .faq-item.open .faq-answer {
  padding-bottom: 1.2rem;
  visibility: visible;
  transition-delay: 0s;
}
.faq-icon { transition: transform .25s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ---- FORM ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  outline: none;
  border: 1.5px solid #cbd5e1;
  border-radius: .5rem;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder,
textarea::placeholder { color: #64748b; opacity: 1; } /* slate-500, 4.7:1 on white */
input:focus, select:focus, textarea:focus {
  border-color: #2f5391;
  box-shadow: 0 0 0 3px rgba(47,83,145,.28);
}
input[type="checkbox"] { accent-color: #1e3a6e; }
input[type="checkbox"]:focus-visible { outline: 2px solid #2f5391; outline-offset: 2px; }
.field-error { border-color: #dc2626 !important; }
.form-error  { font-size: .75rem; color: #b91c1c; margin-top: .3rem; display: none; }
.field-error ~ .form-error { display: block; }
#formSuccess:focus { outline: none; } /* focused on submit for screen readers only */

/* ---- NEWS / EVENT CARD ---- */
.news-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(30,58,110,.12);
}

/* ---- LEVEL BADGE ---- */
.level-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 9999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---- PAGE HERO offset (announcement bar + navbar) ---- */
.page-hero-padding { padding-top: calc(36px + 70px + 2rem); }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  :where(.js) [data-reveal] { opacity: 1; transform: none; }
}

/* ---- PRINT ---- */
@media print {
  #announcementBar, #navbar, .skip-link { display: none !important; }
  .page-hero-padding { padding-top: 1rem; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .faq-answer { max-height: none !important; visibility: visible !important; }
}