/* ============================================================
   TMA SITE NAV — shared cross-page navigation for v5 flagship pages
   Loads AFTER tma-styles.css (uses its :root vars + .nav shell).
   Desktop: horizontal menu with "Become A Student" dropdown.
   <=1180px: collapses to a hamburger + slide-in drawer (accordion).
   ============================================================ */

/* ---------- desktop menu ---------- */
.nav-menu{
  display:flex; align-items:center; gap:30px;
  margin:0 auto 0 36px;            /* sit left of the nav-end CTA cluster */
}
.nav-menu > a,
.nav-dd-toggle{
  font-family:var(--sans);
  font-size:14px; letter-spacing:.04em; font-weight:500;
  color:var(--mut); background:none; border:0; cursor:pointer;
  padding:0; line-height:1; white-space:nowrap;
  transition:color .15s;
}
.nav-menu > a:hover,
.nav-dd-toggle:hover,
.nav-dd.open > .nav-dd-toggle{ color:var(--gold-3); }
.nav-menu a[aria-current="page"]{ color:var(--gold-3); }

.nav-dd{ position:relative; display:flex; align-items:center; }
.nav-dd-toggle{ display:inline-flex; align-items:center; gap:8px; }
/* gold circular badge so it clearly reads as "expand for more" */
.nav-caret{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; font-size:14px; line-height:1;
  color:var(--gold-3); background:rgba(214,164,77,.14);
  border:1px solid rgba(214,164,77,.45);
  transition:transform .2s, background .15s, border-color .15s;
  animation:navCaretHint 2.6s ease-in-out 1s 3;
}
.nav-dd-toggle:hover .nav-caret,
.nav-dd.open .nav-caret{ background:rgba(214,164,77,.28); border-color:var(--gold-3); }
.nav-dd.open .nav-caret{ transform:rotate(180deg); animation:none; }
@keyframes navCaretHint{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(2px); }
}
.nav-star{ color:var(--gold-2); }

/* ---------- CTA cluster: smaller Apply so the phone sits right ---------- */
.nav .wrap{ flex-wrap:nowrap; }
.nav .nav-end{ gap:18px; flex:none; align-items:center; }
/* the logo must never shrink in the nowrap header (was getting squashed on mobile) */
.nav .brand{ flex:none; }
.nav-phone{ font-size:14px; letter-spacing:.02em; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.nav-phone::before{
  content:""; width:14px; height:14px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.nav-phone:hover{ color:var(--gold); }
.nav .nav-end .btn{ padding:10px 18px; font-size:13px; letter-spacing:.02em; white-space:nowrap; }

/* phones: show the phone icon only (hide the number) and drop the header CTA button
   so the header stops crowding and the hamburger has room to render cleanly.
   Tel link still works; primary CTAs live in the hero + drawer menu. */
@media (max-width:600px){
  .nav-phone{ font-size:13px; gap:6px; }           /* keep the NUMBER visible beside the icon */
  .nav-phone::before{ width:18px; height:18px; }
  .nav .nav-end{ gap:8px; }
  .nav .nav-end .btn{ display:none; }              /* hide Apply/CTA on phones to declutter the header */
}

/* dropdown panel */
.nav-dd-menu{
  position:absolute; top:calc(100% + 14px); left:-14px;
  min-width:248px; padding:8px;
  display:flex; flex-direction:column;
  background:rgba(16,8,30,.97);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s, transform .18s, visibility .18s;
  z-index:60;
}
.nav-dd-menu a{
  display:block; padding:11px 14px; border-radius:9px;
  font-size:14px; letter-spacing:.02em; color:var(--mut);
  white-space:nowrap; transition:background .15s, color .15s;
}
.nav-dd-menu a:hover,
.nav-dd-menu a:focus-visible{ background:rgba(255,255,255,.06); color:var(--gold-3); }

/* open via hover (desktop pointers) or JS .open (click/keyboard/touch) */
@media (hover:hover) and (min-width:1181px){
  .nav-dd:hover .nav-dd-menu{ opacity:1; visibility:visible; transform:none; }
}
.nav-dd.open .nav-dd-menu{ opacity:1; visibility:visible; transform:none; }

/* ---------- hamburger (hidden on desktop) ---------- */
.nav-burger{
  display:none; flex:0 0 auto;                /* never shrink — a squeezed button collapses the bars into dots */
  flex-direction:column; justify-content:center; align-items:stretch; gap:5px;
  width:44px; height:44px; padding:10px; margin-left:4px;
  background:none; border:0; cursor:pointer;
}
.nav-burger span{
  display:block; height:2px; width:100%; min-width:22px; border-radius:2px;
  background:var(--ink); transition:transform .25s, opacity .2s;
}
.nav-backdrop{
  position:fixed; inset:0; z-index:55;
  background:rgba(4,2,10,.55);
  opacity:0; transition:opacity .25s;
}

/* ============================================================
   <=1180px — collapse to drawer
   ============================================================ */
@media (max-width:1180px){
  .nav-burger{ display:flex; }
  /* lift the burger above the drawer (z-index:60) so the open "X" is visible and tappable to close */
  .nav.open .nav-burger{ position:relative; z-index:65; }
  .nav.open .nav-burger span{ background:#fff; }
  .nav.open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2){ opacity:0; }
  .nav.open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* drawer */
  .nav-menu{
    position:fixed; top:0; right:0; z-index:60;
    width:min(86vw,360px); height:100vh; height:100dvh;
    margin:0; gap:0;
    flex-direction:column; align-items:stretch;
    padding:88px 24px 32px;
    background:rgba(10,6,20,.98);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-left:1px solid var(--line);
    box-shadow:-20px 0 60px rgba(0,0,0,.5);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .nav.open .nav-menu{ transform:none; }

  .nav-menu > a,
  .nav-dd-toggle{
    display:block; width:100%; font-size:16px;
    padding:15px 4px; border-bottom:1px solid var(--line);
  }
  .nav-dd{ display:block; border-bottom:1px solid var(--line); }
  .nav-dd-toggle{ justify-content:space-between; border-bottom:0; }

  /* dropdown becomes an in-flow accordion */
  .nav-dd-menu{
    position:static; min-width:0; padding:0 0 6px;
    background:none; border:0; box-shadow:none; backdrop-filter:none;
    opacity:1; visibility:visible; transform:none;
    max-height:0; overflow:hidden;
    transition:max-height .28s ease;
  }
  .nav-dd.open .nav-dd-menu{ max-height:480px; }
  .nav-dd-menu a{ padding-left:18px; opacity:.92; }

  .nav-backdrop[hidden]{ display:none; }
  .nav.open .nav-backdrop{ opacity:1; }
}

/* lock background scroll while drawer is open */
body.nav-locked{ overflow:hidden; }

/* ============================================================
   UTILITY BAR — slim purple band below the nav row.
   Opt in per page with <header class="nav has-util">.
   Carries campus + quick actions (Book Online / Student Login).
   ============================================================ */
.nav-util{
  margin-top:14px;
  margin-bottom:-18px;             /* cancel the header's bottom padding so the band is flush below the nav row */
  background:linear-gradient(90deg,rgba(58,31,115,.96),rgba(36,21,72,.96));
  border-top:1px solid rgba(168,85,247,.3);
  box-shadow:0 6px 18px rgba(18,10,40,.35);
  transition:margin-bottom .3s;
}
.nav.scrolled .nav-util{ margin-bottom:-12px; }   /* match the scrolled header padding */
.nav-util-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 0; }
.nav-util-left{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-left:15px; }
.nu-campus{ font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:#e7ddf7; }
.nu-campus b{ color:var(--gold-3); font-weight:700; }
.nav-util-right{ display:flex; align-items:center; gap:9px; }
.nu-btn{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 15px; border-radius:8px; line-height:1; white-space:nowrap;
  background:linear-gradient(180deg,#fff2c4 0%,var(--gold-3) 30%,var(--gold) 60%,var(--gold-2) 100%);
  color:#2a1a07; border:1px solid rgba(255,255,255,.22);
  transition:transform .15s, box-shadow .15s, background .15s; }
.nu-btn:hover{ transform:translateY(-1px); box-shadow:0 5px 16px rgba(230,200,120,.32); }
.nu-btn-ghost{ background:transparent; color:#ece3fb; border:1px solid rgba(168,85,247,.6); }
.nu-btn-ghost:hover{ background:rgba(168,85,247,.2); color:#fff; box-shadow:none; }

/* bar pages drop the header CTA, so keep the phone NUMBER beside its icon at every width */
.nav.has-util .nav-phone{ font-size:14px; gap:7px; padding:0; color:var(--gold-3); }

/* the taller header (nav row + util bar) — push the page's first hero down so it clears the bar */
.nav.has-util ~ main .cam-hero{ padding-top:184px; }
.nav.has-util ~ main .spa-hero{ padding-top:204px; }
.nav.has-util ~ main .hero-static{ padding-top:174px; }

@media (max-width:760px){
  .nav-util-inner{ flex-wrap:wrap; justify-content:center; gap:7px 16px; padding:7px 0; }
  .nu-campus{ font-size:11px; }
  .nav-util-right{ width:100%; justify-content:center; }
  .nu-btn{ flex:1; max-width:180px; text-align:center; padding:8px 12px; }
}
@media (max-width:768px){
  .nav.has-util ~ main .cam-hero{ padding-top:198px; }
  .nav.has-util ~ main .spa-hero{ padding-top:202px; }
  .nav.has-util ~ main .hero-static{ padding-top:178px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .nav-menu, .nav-dd-menu, .nav-caret, .nav-burger span, .nav-backdrop{
    transition:none !important;
  }
  .nav-caret{ animation:none !important; }
  .nu-btn{ transition:none !important; }
  .nu-btn:hover{ transform:none !important; }
}