/* ==========================================================================
   Greenhills — Hierarchical navigation
   Replaces the flat 11-link bar with 8 categories + dropdowns. Same markup
   serves both modes: a hover/click dropdown on desktop, a tap accordion
   below 1100px (the breakpoint where styles.css already collapses the nav).

   Parent categories are <button>, never <a>. A link that also expands is the
   classic mobile trap — you tap to open a section and get navigated away.
   Each submenu therefore leads with its own overview link ("Our School",
   "Admissions Overview"), so nothing becomes unreachable.
   ========================================================================== */

.main-nav .nav-list {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav .nav-item { position: relative; }

/* Top-level links and triggers share one look so the row reads evenly. */
.main-nav .nav-list > li > a,
.main-nav .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .6rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: var(--lh-ui);
  cursor: pointer;
  opacity: .9;
  white-space: nowrap;
  transition: opacity .15s, color .15s, background .15s;
}
.main-nav .nav-list > li > a:hover,
.main-nav .nav-trigger:hover { color: var(--accent); opacity: 1; }
.main-nav .nav-list > li > a:focus-visible,
.main-nav .nav-trigger:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

.nav-caret {
  flex: none;
  width: .55rem;
  height: .55rem;
  margin-top: .1rem;
  transition: transform .2s ease;
}
.nav-item.open > .nav-trigger { color: var(--accent); opacity: 1; }
.nav-item.open > .nav-trigger .nav-caret { transform: rotate(180deg); }

/* ── Desktop dropdown ─────────────────────────────────────────────────── */
@media (min-width: 1101px) {
  .nav-sub {
    position: absolute;
    top: calc(100% + .55rem);
    left: 50%;
    z-index: 30;
    min-width: 14rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(8, 27, 49, .16);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-item.open > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  /* Bridges the gap between trigger and panel so a diagonal mouse path
     doesn't cross dead space and close the menu mid-move. */
  .nav-sub::before {
    content: "";
    position: absolute;
    inset: -.6rem 0 auto 0;
    height: .6rem;
  }
  .nav-sub ul { list-style: none; margin: 0; padding: 0; }
  .nav-sub a {
    display: block;
    padding: .6rem .75rem;
    border-radius: 6px;
    color: var(--navy-850);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    opacity: 1;
  }
  .nav-sub a:hover { background: var(--blue-100); color: var(--navy-950); }
  .nav-sub a:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
  .nav-sub a[aria-current="page"] { background: var(--blue-100); color: var(--accent-hover); }

  /* Admissions carries a conversion CTA — it is the one section where a
     slightly richer panel earns its space. */
  .nav-sub-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin: .4rem .25rem .25rem;
    padding: .65rem .75rem;
    border-radius: 6px;
    background: var(--accent);
    color: #fff !important;
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
  }
  .nav-sub-cta:hover { background: var(--accent-hover) !important; }
}

/* Small-laptop band. Between the 1100px hamburger breakpoint and roughly
   1280px, brand + 8 categories + both header CTAs are wider than the viewport
   and the "Inquire Now" button gets clipped off the right edge. Tighten the
   row and drop the secondary "Call" button — the number stays one tap away in
   the footer, and the primary CTA is what must survive. */
@media (min-width: 1101px) and (max-width: 1280px) {
  .site-header { padding-left: 1rem; padding-right: 1rem; gap: .5rem; }
  .main-nav .nav-list { gap: 0; }
  .main-nav .nav-list > li > a,
  .main-nav .nav-trigger { padding: .5rem .38rem; font-size: .88rem; }
  .nav-caret { width: .5rem; height: .5rem; }
  .header-actions .ghost-button { display: none; }
  .header-actions .primary-button { padding: .7rem .85rem; font-size: .88rem; }
  .brand small { display: none; }
}

/* Comfortable but still compact through to large desktop. */
@media (min-width: 1281px) and (max-width: 1420px) {
  .main-nav .nav-list { gap: .15rem; }
  .main-nav .nav-list > li > a,
  .main-nav .nav-trigger { padding: .5rem .5rem; }
}

/* ── Mobile / tablet accordion ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .main-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .main-nav .nav-item { width: 100%; }

  /* styles.css gives every .main-nav a a full-width row + divider; match it
     on the triggers so the two kinds of item are visually identical. */
  .main-nav .nav-list > li > a,
  .main-nav .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: .9rem 1rem;
    border-radius: 6px;
    border-bottom: 1px solid rgba(8, 27, 49, .08);
    font-size: 1rem;
    min-height: 48px;          /* comfortable tap target */
    opacity: 1;
  }
  .main-nav .nav-list > li:last-child > a { border-bottom: 0; }
  .main-nav .nav-trigger:hover { background: var(--blue-100); color: var(--navy-850); }

  .nav-caret { width: .6rem; height: .6rem; }

  .nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .24s ease;
  }
  .nav-item.open > .nav-sub { grid-template-rows: 1fr; }
  .nav-sub > * { min-height: 0; }
  .nav-sub ul {
    list-style: none;
    margin: 0;
    padding: .25rem 0 .5rem;
    background: var(--mist);
    border-radius: 6px;
  }
  .nav-sub a {
    display: block;
    padding: .8rem 1rem .8rem 1.75rem;
    border-bottom: 0;
    color: var(--navy-850);
    font-size: .95rem;
    font-weight: 600;
    min-height: 44px;
    opacity: 1;
  }
  .nav-sub a:hover { background: var(--blue-100); }
  .nav-sub a[aria-current="page"] { color: var(--accent-hover); }
  .nav-sub-cta {
    display: block;
    margin: .35rem 1rem .25rem;
    padding: .8rem 1rem !important;
    border-radius: 6px;
    background: var(--accent);
    color: #fff !important;
    font-weight: 700;
    text-align: center;
  }

  /* The header CTAs are hidden below 1100px in styles.css, which left mobile
     users with no Call/Enquire action. Re-expose them at the end of the menu. */
  .nav-mobile-actions {
    display: grid;
    gap: .5rem;
    padding: .75rem .25rem .25rem;
    border-top: 1px solid rgba(8, 27, 49, .1);
    margin-top: .4rem;
  }
  .nav-mobile-actions a { width: 100%; }
}

@media (min-width: 1101px) {
  .nav-mobile-actions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-sub, .nav-caret { transition: none; }
}

/* ── Open mobile menu: stacking + scroll lock ─────────────────────────── */
@media (max-width: 1100px) {
  /* The header is z-10, but the social rail is z-40, the announcement bar
     z-60 and the WhatsApp FAB z-75 — all painted over the open menu. Lift
     the header above them for the duration, and take the floating widgets
     out of the way entirely so they cannot intercept taps. */
  .site-header.open { z-index: 90; }

  body.nav-locked .social-sidebar,
  body.nav-locked .gh-fab,
  body.nav-locked .gh-announce { display: none; }

  /* A dimmed backdrop makes the menu read as a layer over the page and gives
     a large, obvious tap target to dismiss it. */
  .site-header.open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(6, 22, 37, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  /* Fully opaque. The previous .97 alpha let hero text show through the
     panel, which is what made the menu look broken on the phone. */
  .site-header.open .main-nav {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(8, 27, 49, .28);
    overscroll-behavior: contain;   /* menu scroll never chains to the page */
  }
}

/* The lock sets position:fixed on <body>; without this the fixed header
   would still be measured against the pre-lock layout on some engines. */
body.nav-locked { overflow: hidden; }

/* The lead-capture / achievement popups sit at z-1000 and would open on top
   of the mobile menu. Suppress them while the menu is open — they re-appear
   on the next eligible trigger once it is closed. */
body.nav-locked .lc-backdrop,
body.nav-locked .ach-backdrop { display: none !important; }