/* ============================================================
   FGSC-MM — UNIFIED SITE NAVIGATION
   One consistent system used on every page:
     1. Fixed horizontal top bar with direct-click links (desktop)
        that becomes a horizontally-scrollable strip (mobile)
     2. A hamburger button that opens the full slide-in sidebar
        (kept, per request, as a secondary/complete menu)
   Loaded AFTER each page's own stylesheet so it always wins.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root{
  --brand-dark:#142a1c;
  --brand-mid:#1c3d28;
  --brand-accent:#6fcf87;
  --brand-gold:#d9a441;
  --brand-cream:#f8faf4;
}

/* ---------- TOP BAR ---------- */
.site-topbar{
  position:fixed; top:0; left:0; width:100%; z-index:9998;
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(90deg, var(--brand-dark), var(--brand-mid));
  box-shadow:0 2px 18px rgba(0,0,0,0.25);
  padding:0 18px 0 74px; /* left padding clears the hamburger button */
  height:64px;
  font-family:'DM Sans', sans-serif;
}

.site-topbar .topbar-logo{
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  text-decoration:none; color:#fff;
}
.site-topbar .topbar-logo img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid var(--brand-accent);
}
.site-topbar .topbar-logo span{
  font-family:'Cormorant Garamond', serif;
  font-weight:700; font-size:1.15rem; letter-spacing:0.03em;
  white-space:nowrap;
  display:none;
}
@media (min-width:560px){
  .site-topbar .topbar-logo span{ display:inline; }
}

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

.topbar-links{
  list-style:none; display:flex; align-items:center; gap:4px;
  margin:0 0 0 auto; padding:0;
  flex: 1 1 auto;
  min-width: 0; /* critical: lets this flex child shrink & scroll instead of overflowing the bar */
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  height:100%;
}
.topbar-links::-webkit-scrollbar{ display:none; }

.topbar-links li{ flex-shrink:0; height:100%; display:flex; align-items:center; }

.topbar-links li a{
  display:flex; align-items:center; height:100%;
  padding:0 11px;
  color:rgba(255,255,255,0.78);
  text-decoration:none;
  font-size:0.85rem; font-weight:500; letter-spacing:0.02em;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.topbar-links li a:hover{
  color:#fff;
  background:rgba(255,255,255,0.06);
}
.topbar-links li a.active{
  color:#fff;
  border-bottom-color:var(--brand-gold);
  font-weight:600;
}

/* push page content below the fixed top bar */
body{ padding-top:64px; }
/* full-bleed hero headers should sit under the bar, not be pushed further */
body > .header:first-of-type,
body > header.header:first-of-type{
  margin-top:-64px;
}

/* ---------- HAMBURGER (repositioned to sit on the top bar) ---------- */
.menu-btn{
  position:fixed !important;
  top:9px !important; left:14px !important;
  width:46px !important; height:46px !important;
  padding:0 !important;
  display:flex !important; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.25) !important;
  border-radius:10px !important;
  cursor:pointer;
  z-index:10001 !important;
  font-size:0 !important; /* hide any text content e.g. "MENU" */
  color:transparent !important;
  transition:background 0.25s ease, transform 0.25s ease;
}
.menu-btn:hover{
  background:rgba(255,255,255,0.16) !important;
  transform:scale(1.05);
}
.menu-btn::before{
  content:'';
  position:absolute; top:50%; left:50%;
  width:20px; height:2px;
  background:var(--brand-accent);
  box-shadow:0 -6px 0 var(--brand-accent), 0 6px 0 var(--brand-accent);
  transform:translate(-50%,-50%);
}

/* ---------- SIDEBAR (kept; bigger touch targets) ---------- */
.sidebar{
  position:fixed !important; top:0 !important; left:-300px !important;
  width:min(300px, 84vw) !important; height:100vh !important;
  background:linear-gradient(180deg, var(--brand-dark), #0f2016) !important;
  z-index:10000 !important;
  transition:left 0.35s cubic-bezier(0.4,0,0.2,1) !important;
  display:flex !important; flex-direction:column !important;
  box-shadow:6px 0 30px rgba(0,0,0,0.35);
}
.sidebar.active{ left:0 !important; }

.sidebar-overlay{
  position:fixed !important; inset:0 !important;
  background:rgba(0,0,0,0.5) !important;
  opacity:0 !important; visibility:hidden !important;
  transition:opacity 0.3s ease !important;
  z-index:9999 !important;
}
.sidebar-overlay.active{ opacity:1 !important; visibility:visible !important; }

.sidebar-header{
  display:flex; align-items:center; gap:12px;
  padding:22px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-logo{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:var(--brand-accent); color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-family:'Cormorant Garamond', serif; font-size:1.1rem;
}
.sidebar-title{ display:flex; flex-direction:column; line-height:1.3; }
.sidebar-title span:first-child{ color:#fff; font-weight:700; font-size:1rem; letter-spacing:0.05em; }
.sidebar-title span:last-child{ color:rgba(255,255,255,0.5); font-size:0.65rem; letter-spacing:0.15em; }
.sidebar-footer{ padding:14px 18px; border-top:1px solid rgba(255,255,255,0.08); }
.sidebar-footer p{ color:rgba(255,255,255,0.4); font-size:0.7rem; }

.sidebar .nav-links{
  list-style:none; padding:12px 12px 24px; margin:0;
  flex:1; overflow-y:auto;
}
.sidebar .nav-links li{ margin:3px 0; }
.sidebar .nav-links li a{
  display:flex !important; align-items:center !important;
  min-height:50px !important; /* comfortable touch target */
  padding:13px 16px !important;
  font-size:15px !important;
  color:rgba(255,255,255,0.82) !important;
  text-decoration:none;
  border-radius:10px;
  transition:background 0.2s ease, color 0.2s ease;
}
.sidebar .nav-links li a:hover,
.sidebar .nav-links li a.active{
  background:rgba(111,207,135,0.15) !important;
  color:#fff !important;
}

.close-btn{
  min-width:44px !important; min-height:44px !important;
  display:flex !important; align-items:center; justify-content:center;
  font-size:20px !important;
  cursor:pointer;
  color:#fff;
  margin:10px 10px 0 auto;
}

/* ---------- TOPBAR DROPDOWN ---------- */
.topbar-links li.has-dropdown { position: relative; }
.topbar-links li.has-dropdown > a { cursor: pointer; }
.topbar-links li.has-dropdown > a .caret { font-size: 0.65em; margin-left: 5px; }
.topbar-links li.has-dropdown.dd-active > a {
  color: #fff; border-bottom-color: var(--brand-gold); font-weight: 600;
}
.dropdown-menu {
  list-style: none; margin: 0; padding: 8px;
  position: fixed; top: 0; left: 0; /* actual top/left set via JS so it isn't clipped by .topbar-links' overflow */
  min-width: 210px;
  background: var(--brand-dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 10002;
}
.topbar-links li.has-dropdown:hover .dropdown-menu,
.topbar-links li.has-dropdown:focus-within .dropdown-menu,
.topbar-links li.has-dropdown.dd-open .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu li a {
  display: block; padding: 10px 14px; border-radius: 6px;
  color: rgba(255,255,255,0.85); text-decoration: none;
  font-size: 0.85rem; white-space: nowrap;
}
.dropdown-menu li a:hover { background: rgba(111,207,135,0.15); color: #fff; }

/* ---------- SIDEBAR SUBMENU ---------- */
.sidebar .nav-links li.has-submenu > a {
  display: flex !important; justify-content: space-between; align-items: center !important;
}
.sidebar .nav-links li.has-submenu.open > a {
  background: rgba(111,207,135,0.1) !important;
  color: #fff !important;
}
.submenu-caret { transition: transform 0.25s ease; font-size: 0.8em; }
.sidebar .nav-links li.has-submenu.open .submenu-caret { transform: rotate(180deg); }
.sub-nav-links {
  list-style: none; margin: 0; padding: 0 0 0 14px;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.sidebar .nav-links li.has-submenu.open .sub-nav-links { max-height: 220px; }
.sub-nav-links li a {
  min-height: 42px !important;
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.65) !important;
}

/* ---------- MOBILE ---------- */
@media (max-width:768px){
  .site-topbar{ padding-left:66px; height:58px; }
  body{ padding-top:58px; }
  body > .header:first-of-type,
  body > header.header:first-of-type{ margin-top:-58px; }
  .menu-btn{ top:7px !important; left:10px !important; width:44px !important; height:44px !important; }
  .topbar-links li a{ padding:0 11px; font-size:0.8rem; }
}

/* ============================================================
   CONSISTENCY LOCK — the top bar must look identical on every
   page, so page stylesheets (fonts, link colours, box sizing,
   resets) can never alter it.
   ============================================================ */
.site-topbar, .site-topbar *, .site-topbar *::before, .site-topbar *::after { box-sizing: border-box; }
.site-topbar { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: normal; }
.site-topbar .topbar-logo span { font-family: 'Cormorant Garamond', serif !important; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.03em; line-height: normal; color: #fff; }
.site-topbar .topbar-links, .site-topbar .topbar-links li { margin-top: 0; margin-bottom: 0; list-style: none; line-height: normal; }
.site-topbar .topbar-links li a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; line-height: normal;
  color: rgba(255,255,255,0.78); padding: 0 11px; text-transform: none;
}
.site-topbar .topbar-links li a:hover { color: #fff; }
.site-topbar .topbar-links li a.active { color: #fff; font-weight: 600; }
@media (max-width: 768px) { .site-topbar .topbar-links li a { font-size: 0.8rem; } }

/* Side menu + dropdown: same font and link colour on every page */
.sidebar .nav-links a, .sidebar .nav-links a span, .sidebar .nav-links button,
.site-topbar .dropdown-menu a { font-family: 'DM Sans', sans-serif !important; }
.sidebar .nav-links li > a:not(.active):not(:hover), .sidebar .nav-links .submenu-trigger:not(:hover) { color: rgba(255,255,255,0.82); }
.site-topbar .dropdown-menu a:not(.active):not(:hover) { color: rgba(255,255,255,0.78); }

/* Laptop screens: keep the whole menu visible instead of clipping the last links */
@media (min-width: 769px) and (max-width: 1500px) {
  .site-topbar { gap: 10px; }
  .site-topbar .topbar-logo span { display: none; }
}
@media (min-width: 769px) and (max-width: 1320px) {
  .site-topbar .topbar-links li a { padding: 0 8px; font-size: 0.82rem; }
}

/* ============================================================
   MOBILE / TABLET NAVIGATION  (v2 — Oct 2026)
   ≤1100px: the cut-off link strip is hidden. The bar shows the
   school name + one menu button on the right that opens a clean
   right-hand drawer. Desktop (>1100px) is unchanged apart from
   the drawer styling below, which applies at every width.
   ============================================================ */

/* ---------- Drawer: consistent on every page ---------- */
.sidebar{
  left:auto !important; right:0 !important;
  width:min(360px, 88vw) !important;
  height:100vh !important; height:100dvh !important;
  transform:translateX(105%);
  transition:transform 0.32s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.32s, box-shadow 0.2s ease !important;
  box-shadow:none !important; visibility:hidden;
  overflow:hidden !important;
  border:0 !important; border-radius:0 !important;
}
.sidebar.active{
  left:auto !important; transform:translateX(0); visibility:visible;
  box-shadow:-8px 0 30px rgba(0,0,0,0.35) !important;
  transition:transform 0.32s cubic-bezier(0.4,0,0.2,1), visibility 0s, box-shadow 0.2s ease !important;
}
.sidebar::before, .sidebar::after{ display:none !important; }

.sidebar .close-btn{ display:none !important; } /* the menu button becomes the X */

.sidebar .sidebar-header{
  display:flex !important; align-items:center !important; gap:12px !important;
  min-height:64px; padding:12px 72px 12px 18px !important; margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
  background:rgba(0,0,0,0.12);
}
.sidebar .sidebar-logo{
  width:42px !important; height:42px !important; flex-shrink:0;
  border-radius:50% !important; border:2px solid var(--brand-accent) !important;
  background:#fff url('images/logo.jpg') center/cover no-repeat !important;
  font-size:0 !important; color:transparent !important; box-shadow:none !important;
}
.sidebar .sidebar-title span:first-child{ color:#fff !important; font-size:1rem !important; font-weight:700 !important; letter-spacing:0.04em !important; font-family:'DM Sans',sans-serif !important; }
.sidebar .sidebar-title span:last-child{ color:var(--brand-gold) !important; font-size:0.66rem !important; letter-spacing:0.18em !important; font-family:'DM Sans',sans-serif !important; }

.sidebar .nav-links{
  padding:10px 12px 16px !important; margin:0 !important;
  flex:1 1 auto !important; overflow-y:auto !important; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.sidebar .nav-links li{ margin:2px 0 !important; padding:0 !important; list-style:none !important; }
.sidebar .nav-links li a{
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:14px !important; text-align:left !important;
  min-height:48px !important; padding:10px 14px !important;
  font-size:15px !important; font-weight:500 !important; letter-spacing:0.01em !important;
  color:rgba(255,255,255,0.86) !important; text-decoration:none !important;
  border:0 !important; border-radius:10px !important;
  background:transparent !important;
  -webkit-tap-highlight-color:transparent;
}
.sidebar .nav-links li a::before{ display:none !important; }
.sidebar .nav-links li a:hover,
.sidebar .nav-links li a:focus-visible{ background:rgba(255,255,255,0.06) !important; color:#fff !important; padding-left:14px !important; }
.sidebar .nav-links li a.active{
  background:rgba(111,207,135,0.16) !important; color:#fff !important; font-weight:600 !important;
  box-shadow:inset 3px 0 0 var(--brand-gold);
}
.sidebar .nav-links .nav-ico{
  width:20px; text-align:center; flex-shrink:0;
  color:var(--brand-accent); font-size:0.95em; opacity:0.9;
}
.sidebar .nav-links li a > span{ flex:1 1 auto; text-align:left !important; }

/* Submenus (accordion) — tall enough for every link */
.sidebar .nav-links li.has-submenu > a{ justify-content:flex-start !important; }
.sidebar .nav-links li.has-submenu > a .submenu-caret{ margin-left:auto; color:rgba(255,255,255,0.55); }
.sidebar .nav-links li.has-submenu.open > a{ background:rgba(255,255,255,0.05) !important; }
.sidebar .nav-links li.has-submenu.child-active > a{ color:#fff !important; font-weight:600 !important; }
.sidebar .sub-nav-links{
  margin:2px 0 6px 24px !important; padding:0 0 0 12px !important;
  border-left:1px solid rgba(111,207,135,0.25);
  max-height:0; overflow:hidden; transition:max-height 0.3s ease;
}
.sidebar .nav-links li.has-submenu.open .sub-nav-links{ max-height:600px !important; }
.sidebar .sub-nav-links li a{
  min-height:44px !important; font-size:14px !important;
  color:rgba(255,255,255,0.72) !important; padding:8px 12px !important;
}

/* Quick actions at the bottom of the drawer */
.sidebar .sidebar-footer{
  padding:12px 14px calc(14px + env(safe-area-inset-bottom)) !important; margin:0 !important;
  border-top:1px solid rgba(255,255,255,0.08) !important; background:rgba(0,0,0,0.15);
}
.sidebar .nav-quick{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.sidebar .nav-quick a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; border-radius:10px; text-decoration:none;
  font:600 14px 'DM Sans',sans-serif; letter-spacing:0.01em;
}
.sidebar .nav-quick .q-call{ background:var(--brand-gold); color:#1a1405; }
.sidebar .nav-quick .q-admit{ background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.18); }
.sidebar .sidebar-footer p{ margin:0 !important; text-align:center; color:rgba(255,255,255,0.4) !important; font-size:0.7rem !important; }

/* Lock the page behind the open drawer */
html.nav-locked, html.nav-locked body{ overflow:hidden !important; }
.sidebar-overlay{ backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }

/* Menu button: animates into an X while the drawer is open */
.menu-btn::before, .menu-btn::after{
  content:'' !important; position:absolute; left:50%; top:50%;
  width:20px; height:2px; border-radius:2px; background:var(--brand-accent);
  transition:transform 0.28s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.menu-btn::before{ transform:translate(-50%,-50%); box-shadow:0 -6px 0 var(--brand-accent), 0 6px 0 var(--brand-accent); }
.menu-btn::after{ transform:translate(-50%,-50%) scaleX(0); }
body.menu-open .menu-btn::before{ box-shadow:none; transform:translate(-50%,-50%) rotate(45deg); background:#fff; }
body.menu-open .menu-btn::after{ transform:translate(-50%,-50%) rotate(-45deg); background:#fff; }
.menu-btn:focus-visible{ outline:2px solid var(--brand-gold); outline-offset:2px; }
.menu-btn ~ .menu-btn{ display:none !important; } /* a page had two */
/* Button sits on the right at every width, next to where the drawer opens */
.menu-btn{ left:auto !important; right:14px !important; }
.site-topbar{ padding-left:18px !important; padding-right:74px !important; }

/* ---------- Phones & tablets ---------- */
@media (max-width:1100px){
  .site-topbar{ padding:0 72px 0 14px !important; gap:10px; }
  .site-topbar .topbar-links{ display:none !important; }
  .site-topbar .topbar-logo{ min-width:0; }
  .site-topbar .topbar-logo span{
    display:flex !important; flex-direction:column; line-height:1.05 !important;
    font-size:1.2rem !important; overflow:hidden;
  }
  .site-topbar .topbar-logo span::after{
    content:'Know Thyself'; font:500 0.6rem 'DM Sans',sans-serif; letter-spacing:0.2em;
    text-transform:uppercase; color:var(--brand-gold); margin-top:3px;
  }
  .menu-btn:hover{ transform:none; }
}
@media (min-width:769px) and (max-width:1100px){
  .menu-btn{ top:9px !important; }
}