/* ════════════════════════════════
   DESIGN TOKENS
════════════════════════════════ */
:root {
  --navy:    #001F5B;
  --navy2:   #002F8C;
  --blue:    #0057C8;
  --sky:     #009FD4;
  --sky-lt:  #E8F6FB;
  --gold:    #C9922A;
  --white:   #FFFFFF;
  --offwhite:#F5F6FA;
  --stone:   #ECEDF3;
  --ink:     #12141D;
  --mid:     #4B5069;
  --muted:   #8A8FA8;
  --border:  #D9DBE8;
  --shadow:  0 4px 32px rgba(0,31,91,.10);
  --shadow2: 0 12px 48px rgba(0,31,91,.14);
  --radius:  10px;
}
/* ════════════════════════════════
   RESET & BASE
════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:17px; }
body {
  font-family:'Sora', sans-serif;
  background:var(--white);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a  { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
ul  { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
/* ════════════════════════════════
   UTILITY / SHARED
════════════════════════════════ */
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
/* Section wrappers */
.section       { padding:80px 0; }
.section.bg-off   { background:var(--offwhite); }
.section.bg-navy  { background:var(--navy); }
.section.bg-stone { background:var(--stone); }
/* Section labels */
.sec-label { display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; }
.sec-label-bar { width:24px; height:3px; background:var(--sky); border-radius:2px; }
.sec-label-text {
  font-size:.74rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue);
}
/* Section titles */
.sec-title {
  font-family:'Sora', serif;
  font-size:clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight:700; line-height:1.18; color:var(--ink);
}
.sec-title em  { font-style:normal; color:var(--navy); }
.sec-title.light { color:#fff; }
.sec-title.light em { color:var(--sky); }
.sec-desc {
  font-size:1.02rem; color:var(--mid);
  line-height:1.8; max-width:560px; margin-top:12px;
}
.sec-desc.light { color:rgba(255,255,255,.6); }
/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:7px;
  background:var(--blue); color:#fff;
  font-size:.93rem; font-weight:800; letter-spacing:.02em;
  transition:all .22s;
}
.btn-primary:hover { background:var(--navy2); transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,87,200,.28); }
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:7px;
  border:2px solid var(--navy); color:var(--navy);
  font-size:.93rem; font-weight:800; transition:all .22s;
}
.btn-secondary:hover { background:var(--navy); color:#fff; }
.btn-sky {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:7px;
  background:var(--sky); color:var(--navy);
  font-size:.93rem; font-weight:800; transition:all .22s;
}
.btn-sky:hover { background:#00C4FF; transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,159,212,.32); }
.btn-white-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:7px;
  border:2px solid rgba(255,255,255,.3); color:#fff;
  font-size:.93rem; font-weight:700; transition:all .22s;
}
.btn-white-ghost:hover { border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); }
/* Scroll reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
/* ════════════════════════════════
   TOPBAR
════════════════════════════════ */
.topbar {
  background:var(--navy);
  font-size:.77rem;
  color:rgba(255,255,255,.52);
  letter-spacing:.03em;
}
.topbar .inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; align-items:center;
  height:36px; gap:12px;
}
.topbar-left, .topbar-right { display:flex; align-items:center; gap:14px; }
.topbar a { color:var(--sky); transition:opacity .2s; }
.topbar a:hover { opacity:.75; }
.topbar .sep { width:1px; height:11px; background:rgba(255,255,255,.18); }
/* ════════════════════════════════
   HEADER
════════════════════════════════ */
.site-header {
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:900;
  box-shadow:var(--shadow);
}
.header-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:70px; gap:16px;
}
/* Brand */
.brand-logo-img {
  height: 48px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
/* Nav */
.nav-menu { display:flex; align-items:stretch; }
.nav-menu > li { position:relative; display:flex; align-items:stretch; }
.nav-menu > li > a, .nav-menu > li > button {
  display:flex; align-items:center; gap:5px;
  padding:0 15px; height:70px;
  font-size:.87rem; font-weight:700; color:var(--ink);
  letter-spacing:.02em; transition:color .2s, background .2s; white-space:nowrap;
}
.nav-menu > li > a:hover,
.nav-menu > li > button:hover { color:var(--blue); background:var(--offwhite); }
.nav-menu > li.active > a,
.nav-menu > li.active > button { color:var(--blue); }
.chevron { font-size:.58rem; opacity:.5; transition:transform .22s; }
.nav-menu > li:hover .chevron { transform:rotate(180deg); }
/* Dropdown */
.dropdown {
  position:absolute; top:100%; left:0;
  background:var(--white);
  border-top:3px solid var(--sky);
  border-radius:0 0 8px 8px;
  box-shadow:var(--shadow2);
  min-width:210px;
  max-height: calc(100vh - 70px - 20px); /* 70px = header height, 20px = breathing room */
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:10000;
}
/* nicer thin scrollbar for the dropdown, optional */
.dropdown::-webkit-scrollbar { width:6px; }
.dropdown::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.dropdown::-webkit-scrollbar-track { background:transparent; }
.nav-menu > li:hover .dropdown,
.nav-menu > li:focus-within .dropdown {
  opacity:1; visibility:visible; pointer-events:all; transform:translateY(0);
}
.dropdown a {
  display:block; padding:8px 18px;
  font-size:.81rem; font-weight:600; color:var(--mid);
  border-left:3px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
}
.dropdown a:hover { background:var(--sky-lt); color:var(--blue); border-color:var(--sky); }
.dropdown-divider { height:1px; background:var(--border); margin:5px 0; }
.dropdown-label {
  padding:9px 18px 3px;
  font-size:.68rem; font-weight:800; color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase;
}
/* Header actions */
.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-nav-fill {
  padding:9px 18px; font-size:.83rem; font-weight:800;
  background:var(--blue); color:#fff; border-radius:6px;
  transition:all .2s; white-space:nowrap; letter-spacing:.02em;
}
.btn-nav-fill:hover { background:var(--navy2); box-shadow:0 6px 20px rgba(0,87,200,.28); }
/* Hamburger */
.hamburger {
  display:none; flex-direction:column; justify-content:center;
  align-items:center; gap:5px; width:40px; height:40px;
  border-radius:6px; transition:background .2s;
}
.hamburger:hover { background:var(--offwhite); }
.hamburger span { width:21px; height:2px; background:var(--ink); border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* Mobile drawer */
.mobile-drawer {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:var(--white); z-index:850; overflow-y:auto;
  padding:78px 24px 40px;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.mobile-drawer.open { transform:translateX(0); }
.drawer-close {
  position:absolute; top:16px; right:18px;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--mid); background:var(--stone); transition:background .2s;
}
.drawer-close:hover { background:var(--border); }
.mob-nav { display:flex; flex-direction:column; gap:2px; }
.mob-section-title {
  font-size:.68rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding:16px 0 7px;
}
.mob-link {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; font-size:1rem; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--stone); transition:color .2s;
}
.mob-link:hover { color:var(--blue); }
.mob-link .indicator { font-size:.75rem; color:var(--muted); }
.mob-sub { padding-left:14px; margin-top:2px; display:none; }
.mob-sub.open { display:block; }
.mob-sub a {
  display:block; padding:9px 0;
  font-size:.9rem; font-weight:600; color:var(--mid);
  border-bottom:1px solid var(--stone); transition:color .2s;
}
.mob-sub a:hover { color:var(--blue); }
.mob-actions {
  display:flex; flex-direction:column; gap:11px;
  margin-top:28px; padding-top:22px; border-top:2px solid var(--stone);
}
.mob-btn-fill {
  display:block; text-align:center;
  padding:13px; font-size:.97rem; font-weight:800;
  background:var(--blue); color:#fff; border-radius:7px;
}
/* Nested flyout submenu — for grouped items like Leadership Messages */
.dropdown .has-submenu { position:relative; }
.dropdown .has-submenu > a {
  display:flex; align-items:center; justify-content:space-between;
}
.dropdown .has-submenu > a .sub-chevron {
  font-size:.6rem; opacity:.5; transform:rotate(-90deg); margin-left:8px; flex-shrink:0;
}
.dropdown .has-submenu:hover > a .sub-chevron,
.dropdown .has-submenu:focus-within > a .sub-chevron { opacity:.85; }
.dropdown-submenu {
  position:absolute;
  top:-3px; /* aligns with parent dropdown's top border offset */
  left:100%;
  background:var(--white);
  border-top:3px solid var(--sky);
  border-radius:0 8px 8px 8px;
  box-shadow:var(--shadow2);
  min-width:240px;
  max-height:calc(100vh - 70px - 20px);
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(6px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:10001;
}
.dropdown-submenu::-webkit-scrollbar { width:6px; }
.dropdown-submenu::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.dropdown-submenu::-webkit-scrollbar-track { background:transparent; }
.dropdown .has-submenu:hover > .dropdown-submenu,
.dropdown .has-submenu:focus-within > .dropdown-submenu {
  opacity:1; visibility:visible; pointer-events:all; transform:translateX(0);
}
.dropdown-submenu a {
  display:block; padding:8px 18px;
  font-size:.81rem; font-weight:600; color:var(--mid);
  border-left:3px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
}
.dropdown-submenu a:hover { background:var(--sky-lt); color:var(--blue); border-color:var(--sky); }
/* Flip the flyout to the left when the parent dropdown is near the right edge of the viewport */
.dropdown .has-submenu.flip-left > .dropdown-submenu {
  left:auto; right:100%;
  border-radius:8px 0 8px 8px;
  transform:translateX(-6px);
}
.dropdown .has-submenu.flip-left:hover > .dropdown-submenu,
.dropdown .has-submenu.flip-left:focus-within > .dropdown-submenu {
  transform:translateX(0);
}
/* Mega dropdown variant — for long multi-section menus like Academics */
.dropdown.mega {
  min-width: 640px;
  max-width: 90vw;
  padding: 10px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8px;
  max-height: none;   /* no scroll needed once it's columns */
  overflow: visible;
}
.dropdown.mega .dropdown-label {
  padding: 9px 14px 3px;
}
.dropdown.mega a {
  padding: 8px 14px;
}
.dropdown.mega .dropdown-divider {
  display: none; /* columns replace dividers as the section separator */
}
/* Narrower mega variant — for shorter 3-column menus like About Us */
.dropdown.mega.about-mega {
  min-width: 650px;
  grid-template-columns: repeat(3, 1fr);
}
.dropdown.mega.about-mega a {
  white-space: normal; /* allow longer labels like "Message from Medical Superintendent" to wrap */
  line-height: 1.35;
}
/* ════════════════════════════════
   TICKER
════════════════════════════════ */
.ticker {
  background:var(--navy2); height:36px;
  overflow:hidden; display:flex; align-items:center;
}
.ticker-label {
  flex-shrink:0; background:var(--sky); color:#fff;
  font-size:.7rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:0 16px; height:100%;
  display:flex; align-items:center;
}
.ticker-track-wrap { flex:1; overflow:hidden; }
.ticker-track {
  display:flex; gap:48px; width:max-content;
  animation:tick 38s linear infinite;
}
.tick-item {
  font-size:.8rem; font-weight:600;
  color:rgba(255,255,255,.72); white-space:nowrap;
}
.tick-item::before { content:'◆'; font-size:.48rem; color:var(--sky); margin-right:9px; vertical-align:middle; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.site-footer {
  background:var(--navy);
  color:rgba(255,255,255,.55);
  padding:28px 0;
  text-align:center;
  border-top:3px solid var(--sky);
}
.site-footer .footer-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.site-footer .footer-name {
  font-family:'Sora', serif;
  font-size:1rem; font-weight:700; color:#fff;
}
.site-footer .footer-address {
  font-size:.82rem; line-height:1.7; color:rgba(255,255,255,.55);
}
.site-footer .footer-contact {
  font-size:.82rem; display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
}
.site-footer .footer-contact a { color:var(--sky); }
.site-footer .footer-contact a:hover { text-decoration:underline; }
.site-footer .footer-copy {
  font-size:.75rem; color:rgba(255,255,255,.32); margin-top:4px;
}
.site-footer .footer-divider {
  width:40px; height:2px; background:rgba(255,255,255,.12); border-radius:2px;
}
/* ════════════════════════════════
   FORM STYLES (shared)
════════════════════════════════ */
.form-grid      { display:grid; gap:20px; margin-top:24px; }
.form-grid.two-col { grid-template-columns:1fr 1fr; }
.form-group     { display:flex; flex-direction:column; gap:7px; }
.form-group.full-width { grid-column:1 / -1; }
.form-label {
  font-size:.84rem; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:4px;
}
.form-label .required { color:#e74c3c; font-size:.9rem; }
.form-input, .form-select, .form-textarea {
  padding:11px 15px; border:2px solid var(--border); border-radius:7px;
  font-family:inherit; font-size:.9rem; color:var(--ink);
  transition:border-color .2s, box-shadow .2s; background:var(--white);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,87,200,.1);
}
.form-textarea { resize:vertical; min-height:100px; }
.file-upload-wrapper {
  position:relative; border:2px dashed var(--border);
  border-radius:7px; padding:22px; text-align:center;
  transition:border-color .2s, background .2s; cursor:pointer;
}
.file-upload-wrapper:hover { border-color:var(--blue); background:var(--sky-lt); }
.file-upload-wrapper input[type="file"] {
  position:absolute; opacity:0; width:100%; height:100%; top:0; left:0; cursor:pointer;
}
.file-upload-label {
  display:flex; flex-direction:column; align-items:center; gap:7px; pointer-events:none;
}
.file-upload-icon { font-size:1.9rem; }
.file-upload-text { font-size:.84rem; color:var(--mid); }
.file-upload-text strong { color:var(--blue); font-weight:700; }
.file-name-display { margin-top:7px; font-size:.78rem; color:var(--blue); font-weight:600; }
.form-help { font-size:.77rem; color:var(--muted); }
.form-submit {
  width:100%; padding:15px 32px; border-radius:7px;
  background:var(--blue); color:#fff;
  font-size:.97rem; font-weight:800; letter-spacing:.03em;
  border:none; cursor:pointer; transition:all .22s; margin-top:6px;
}
.form-submit:hover { background:var(--navy2); transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,87,200,.28); }
.form-submit:disabled { background:var(--muted); cursor:not-allowed; transform:none; }
.form-message {
  padding:14px; border-radius:7px; margin-top:14px;
  font-size:.88rem; font-weight:600; text-align:center;
}
.form-message.success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.form-message.error   { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width:1024px) {
  .form-grid.two-col { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  html { font-size:15px; }
  .topbar { display:none; }
  .header-inner { height:60px; }
  .nav-menu { display:none; }
  .header-actions { display:none; }
  .hamburger { display:flex; }
  .mobile-drawer { display:block; }
  .section { padding:56px 0; }
  .site-footer .footer-contact { flex-direction:column; gap:6px; }
}
@media (max-width:480px) {
  html { font-size:14.5px; }
}
/* ════════════════════════════
   JMCH EMERGENCY BAR
════════════════════════════ */
.jmch-eb-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #c0392b;
  border-top: 3px solid #e74c3c;
  z-index: 9999;
}
.jmch-eb-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  height: 52px;
  gap: 0;
}
/* brand label */
.jmch-eb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 20px;
  border-right: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jmch-eb-pulse-icon {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: jmchEbPulse 1.8s ease-in-out infinite;
}
@keyframes jmchEbPulse {
  0%, 100% { transform: scale(1);    opacity: 1;  }
  50%       { transform: scale(1.18); opacity: .75; }
}
/* contact items */
.jmch-eb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,.2);
  text-decoration: none;
  color: rgba(255,255,255,.65);
  transition: background .15s;
}
.jmch-eb-item:hover { background: rgba(255,255,255,.1); }
.jmch-eb-item > svg { flex-shrink: 0; }
.jmch-eb-item > div { display: flex; flex-direction: column; gap: 1px; }
.jmch-eb-lbl {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255,255,255,.6);
}
.jmch-eb-num {
  font-family: 'Sora', sans-serif;
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}
/* 24/7 badge */
.jmch-eb-247 {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: 16px;
  font-size: .62rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jmch-eb-247::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fff7f;
  margin-right: 6px;
  animation: jmchEbBlink 1.2s ease-in-out infinite;
}
@keyframes jmchEbBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}
/* mobile */
@media (max-width: 767px) {
  .jmch-eb-inner {
    padding: 0 12px;
    height: auto;
    flex-wrap: wrap;
    gap: 0;
  }
  .jmch-eb-brand { display: none; }
  .jmch-eb-email { display: none; }
  .jmch-eb-item {
    flex: 1;
    padding: 10px 12px;
    border-right: 1px solid rgba(255,255,255,.2);
    border-top: none;
    justify-content: center;
  }
  .jmch-eb-247 {
    width: 100%;
    justify-content: center;
    padding: 5px 0;
    border-top: 1px solid rgba(255,255,255,.2);
    font-size: .6rem;
  }
  .jmch-eb-num { font-size: .78rem; }
}
/* ════════════════════════════
   PAGE HERO
════════════════════════════ */
.page-hero {
  background: var(--navy);
  padding: 56px 0 48px;
  border-bottom: 3px solid var(--sky);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('https://placehold.co/1440x400/0a1f44/0a1f44') center/cover no-repeat;
  opacity: .08;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.page-hero .eyebrow-bar { width: 24px; height: 3px; background: var(--gold); border-radius: 2px; }
.page-hero .eyebrow-text {
  font-size: .73rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.page-hero h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 12px;
}
.page-hero h1 em { font-style: normal; color: var(--sky); }
.page-hero p { font-size: 1rem; color: rgba(255,255,255,.6); line-height: 1.75; max-width: 580px; }