/* ==========================================================================
   Mount Carmel School — Premium Header
   Loaded AFTER bootstrap.min.css / style.css / responsive.css so it cascades
   last. Every rule is scoped under .mcs-site-header / .mcs-* classes, so no
   existing section, page or component styling is affected.
   Breakpoints: >=1400 roomy | >=1200 inline menu | >=768 topbar | <768 compact
   ========================================================================== */

/* ---------- Design tokens ---------- */
.mcs-site-header {
  --mcs-navy: #232a8f;
  --mcs-navy-deep: #1b2170;
  --mcs-indigo: #4a44c9;
  --mcs-heading: #373588;
  --mcs-gold: #f5c408;
  --mcs-red: #ee1c25;
  --mcs-ink: #20244a;
  --mcs-muted: #697089;
  --mcs-line: #e9ebf5;
  --mcs-soft: #f3f5fc;
  --mcs-white: #ffffff;
  --mcs-bar-h: 88px;
  --mcs-radius: 999px;
}

/* ---------- Base ---------- */
.mcs-site-header {
  position: relative;
  z-index: 1035;
  background: var(--mcs-white);
}
.mcs-site-header *,
.mcs-site-header *::before,
.mcs-site-header *::after { box-sizing: border-box; }
.mcs-site-header img { max-width: 100%; }

/* ==========================================================================
   TOP UTILITY BAR
   ========================================================================== */
.mcs-topbar {
  display: none;
  background: linear-gradient(90deg, var(--mcs-navy-deep) 0%, var(--mcs-navy) 55%, #33309b 100%);
  color: #fff;
  font-size: 12.5px;
}
.mcs-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  padding: 0 clamp(16px, 3vw, 50px);
}
.mcs-topbar-left,
.mcs-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.mcs-topbar-left span,
.mcs-topbar-left strong { white-space: nowrap; }
.mcs-topbar-icon { height: 18px; width: auto; display: block; }
.mcs-topbar-tag {
  color: var(--mcs-gold);
  font-weight: 600;
  letter-spacing: .02em;
}
.mcs-topbar-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .28);
  flex: none;
}
.mcs-topbar-right a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .25s ease;
}
.mcs-topbar-right a i { font-size: 11px; color: var(--mcs-gold); }
.mcs-topbar-right a:hover { color: var(--mcs-gold); }

@media (min-width: 768px) {
  .mcs-topbar { display: block; }
}

/* ==========================================================================
   MAIN NAVIGATION BAR (sticky)
   ========================================================================== */
.mcs-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--mcs-line);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.mcs-navbar.is-scrolled {
  box-shadow: 0 10px 30px rgba(27, 33, 112, .10);
  border-color: transparent;
}
.mcs-navbar-inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  min-height: var(--mcs-bar-h);
  padding: 8px clamp(16px, 3vw, 50px);
}

/* ---------- Brand ---------- */
.mcs-brand {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.mcs-brand img {
  height: 66px;
  width: auto;
  max-width: 270px;
  object-fit: contain;
}

/* ---------- Inline menu (desktop) ---------- */
.mcs-menu {
  display: none;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  align-items: center;
  flex-wrap: nowrap;
}
.mcs-menu .nav-link {
  position: relative;
  display: block;
  padding: 10px 2px;
  margin: 0 clamp(6px, .75vw, 11px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--mcs-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.mcs-menu .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mcs-gold), var(--mcs-red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.mcs-menu .nav-link:hover,
.mcs-menu .nav-link.active,
.mcs-menu .nav-link:focus-visible { color: var(--mcs-heading); }
.mcs-menu .nav-link:hover::after,
.mcs-menu .nav-link.active::after { transform: scaleX(1); }

@media (min-width: 1200px) {
  .mcs-menu { display: flex; }
}
@media (max-width: 1399.98px) {
  .mcs-menu .nav-link { font-size: 12.5px; margin: 0 6px; }
  .mcs-brand img { max-width: 240px; height: 60px; }
}

/* ---------- Actions ---------- */
.mcs-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: none;
}

/* Call chip */
.mcs-call {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--mcs-radius);
  background: var(--mcs-soft);
  border: 1px solid var(--mcs-line);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.mcs-call:hover {
  border-color: #cdd3ef;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(35, 42, 143, .10);
}
.mcs-call-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mcs-navy), var(--mcs-indigo));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: none;
}
.mcs-call-text { display: flex; flex-direction: column; line-height: 1.15; }
.mcs-call-text small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mcs-muted);
  font-weight: 600;
}
.mcs-call-text strong { font-size: 13.5px; color: var(--mcs-heading); font-weight: 700; }

@media (min-width: 1400px) {
  .mcs-call { display: inline-flex; }
}

/* CTA button */
.mcs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--mcs-radius);
  background: linear-gradient(135deg, var(--mcs-red) 0%, #ff5a3c 100%);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  border: none;
  box-shadow: 0 8px 20px rgba(238, 28, 37, .28);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  white-space: nowrap;
}
.mcs-cta i { font-size: 13px; }
.mcs-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(238, 28, 37, .36);
  filter: brightness(1.05);
  color: #fff;
}

/* Hamburger */
.mcs-toggler {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: none;
  background: var(--mcs-soft);
  border-radius: 12px;
  cursor: pointer;
  transition: background .25s ease;
}
.mcs-toggler .line {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--mcs-heading);
  transition: width .3s ease;
}
.mcs-toggler .line:nth-child(1) { width: 24px; }
.mcs-toggler .line:nth-child(2) { width: 17px; }
.mcs-toggler .line:nth-child(3) { width: 24px; }
.mcs-toggler:hover { background: #e9ecfb; }
.mcs-toggler:hover .line:nth-child(2) { width: 24px; }

@media (min-width: 1200px) {
  .mcs-toggler { display: none; }
}

/* ==========================================================================
   OFFCANVAS PANEL (tablet & mobile)
   ========================================================================== */
.offcanvas.mcs-offcanvas {
  --bs-offcanvas-width: min(400px, 92vw);
  background: var(--mcs-white);
  border-left: 1px solid var(--mcs-line);
}
.mcs-offcanvas .offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--mcs-line);
}
.mcs-offcanvas-brand { display: flex; align-items: center; text-decoration: none; }
.mcs-offcanvas-brand img { height: 52px; width: auto; max-width: 210px; object-fit: contain; }
.mcs-offcanvas .btn-close { opacity: .75; }
.mcs-offcanvas .offcanvas-body {
  padding: 10px 22px 26px;
  display: flex;
  flex-direction: column;
}
.mcs-offcanvas-nav {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.mcs-offcanvas-nav li { border-bottom: 1px dashed var(--mcs-line); }
.mcs-offcanvas-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mcs-ink);
  text-decoration: none;
  transition: color .25s ease, padding-left .25s ease;
}
.mcs-offcanvas-nav .nav-link i {
  font-size: 12px;
  color: #b9bfd8;
  transition: transform .25s ease, color .25s ease;
}
.mcs-offcanvas-nav .nav-link:hover,
.mcs-offcanvas-nav .nav-link.active {
  color: var(--mcs-heading);
  padding-left: 6px;
}
.mcs-offcanvas-nav .nav-link:hover i,
.mcs-offcanvas-nav .nav-link.active i {
  transform: translateX(4px);
  color: var(--mcs-red);
}

.mcs-offcanvas-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.mcs-offcanvas-cta .mcs-cta,
.mcs-offcanvas-cta .mcs-btn-outline { width: 100%; }

.mcs-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--mcs-radius);
  border: 1.5px solid var(--mcs-heading);
  color: var(--mcs-heading) !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.mcs-btn-outline:hover {
  background: var(--mcs-heading);
  color: #fff !important;
  transform: translateY(-1px);
}

.mcs-parent-login { margin-top: 18px; text-align: center; }
.mcs-parent-login a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--mcs-radius);
  background: var(--mcs-soft);
  border: 1px solid var(--mcs-line);
  color: var(--mcs-heading) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .25s ease;
}
.mcs-parent-login a:hover { border-color: #cdd3ef; }

.mcs-offcanvas-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.mcs-offcanvas-contact a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--mcs-radius);
  background: var(--mcs-navy);
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: filter .25s ease;
}
.mcs-offcanvas-contact a:hover { filter: brightness(1.12); }

/* ==========================================================================
   RESPONSIVE FINE-TUNING
   ========================================================================== */
@media (max-width: 767.98px) {
  .mcs-site-header { --mcs-bar-h: 72px; }
  .mcs-brand img { height: 52px; max-width: 215px; }
  .mcs-cta { padding: 10px 16px; font-size: 12.5px; }
  .mcs-actions { gap: 8px; }
  .mcs-toggler { width: 42px; height: 42px; }
}
@media (max-width: 400px) {
  .mcs-brand img { height: 46px; max-width: 185px; }
  .mcs-cta { padding: 9px 13px; font-size: 12px; gap: 6px; }
  .mcs-cta i { display: none; }
}

/* ---------- Accessibility ---------- */
.mcs-site-header a:focus-visible,
.mcs-site-header button:focus-visible {
  outline: 2px solid var(--mcs-navy);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .mcs-site-header *,
  .mcs-site-header *::before,
  .mcs-site-header *::after {
    transition: none !important;
    animation: none !important;
  }
}