/* ==========================================================================
   Topaz Art Academy — header.css (fixed ~140px header)
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--bg-light);
  border-bottom: 1px solid rgba(30, 42, 46, 0.07);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 var(--pad-x);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ---------- Logo lockup ---------- */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* the gem mark, cropped from the real stacked logo */
.logo-mark {
  width: 52px;
  height: auto;
  aspect-ratio: 976 / 807;
  object-fit: contain;
  flex-shrink: 0;
  color: var(--teal);
}

.logo-word {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-word .lw-line {
  font-family: var(--font-display);
  font-stretch: 62%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 20px;
  color: var(--ink);
}

.logo-word .lw-sub {
  margin-top: 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ---------- Navigation ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.6vw, 46px);
}

.nav a,
.nav .nav-item > .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 2px;
  transition: color 0.3s var(--ease-out);
}

/* "Home" reads slightly warmer/brand (carried over from the template) */
.nav a.active { color: var(--teal-deep); }

/* hairline underline draw-in */
.nav a::after,
.nav .nav-item > .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease-out);
}

.nav a:hover,
.nav .nav-item:hover > .nav-link { color: var(--teal-deep); }

.nav a:hover::after,
.nav .nav-item:hover > .nav-link::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Book Now — bordered CTA, with a ring that keeps pulsing around it */
.nav a.nav-book {
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  padding: 11px 24px;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
  background: transparent;
  transition:
    background 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

/* the always-playing halo: fade in, expand, and fade out in ONE
   continuous motion, then re-ripple. Both ends of the loop sit at
   opacity 0, so the ring never pops in — and because there is no
   flat hold keyframe, the expansion never stalls mid-cycle (an
   invisible pause that read as a hitch). */
@keyframes nav-book-pulse {
  0%   { opacity: 0;    transform: scale(1); }
  18%  { opacity: 0.85; transform: scale(1.02); }
  100% { opacity: 0;    transform: scale(1.18); }
}

.nav a.nav-book::after {
  content: "";
  position: absolute;
  inset: -4px;
  width: auto;
  height: auto;
  background: none;
  border: 1.5px solid var(--gold);
  border-radius: 5px;
  transform: none;
  /* The ring shares this ::after with the nav underline, whose rules set
     transform-origin to right (rest) / left (hover) for the scaleX draw.
     Pin it to center so the pulse scales symmetrically from the middle in
     both states — otherwise the halo leans left at rest and right on hover. */
  transform-origin: center center;
  opacity: 0;
  transition: none;
  animation: nav-book-pulse 2.6s var(--ease-soft) infinite;
  pointer-events: none;
}

.nav a.nav-book:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #F7F3EA;
}

/* ---------- Dropdown ---------- */
.nav-item.has-dropdown { position: relative; }

.nav-item .chev {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.35s var(--ease-out);
}

.nav-item.has-dropdown:hover .chev,
.nav-item.has-dropdown:focus-within .chev {
  transform: rotate(-135deg) translateY(-2px);
}

.dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 250px;
  background: var(--bg-lighter);
  border: 1px solid var(--rule-dark);
  padding: 22px 28px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    visibility 0.4s;
}

/* small pointer notch */
.dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--bg-lighter);
  border-left: 1px solid var(--rule-dark);
  border-top: 1px solid var(--rule-dark);
  transform: translateX(-50%) rotate(45deg);
}

/* invisible hover bridge over the 18px gap between "Programs" and the
   box, so a slow mouse moving down never leaves the hover area. Kept
   just tall enough to close the gap (not to cover the neighbouring
   nav links), and hidden with the box while the menu is closed. */
.dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown a {
  display: block;
  padding: 9px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease-out), padding-left 0.3s var(--ease-out);
}

.dropdown a + a { border-top: 1px solid rgba(30, 42, 46, 0.06); }
.dropdown a:hover { color: var(--teal-deep); padding-left: 6px; }

/* ---------- Mobile menu (hamburger + full-screen drawer) ----------
   Below the collapse width the 6-item nav (~560–620px wide) can't fit a
   phone viewport next to the ~220px wordmark, so the inline row is hidden
   and a Menu button opens the whole nav as a full-screen slide-down drawer.
   A full-screen panel can never clip off an edge. main.js builds the drawer
   contents from the live nav and moves the button into the header row. */

/* button + spacer live in the markup, but are only ever shown on phones */
.nav-toggle,
.nav-spacer { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  margin-left: auto; /* right-align once the nav is hidden */
  background: transparent;
  border: none;
  padding: 8px 2px 8px 10px;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
/* the three bars that morph into an X */
.nt-box { display: inline-flex; flex-direction: column; gap: 4px; }
.nt-bar {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease-out);
}
body.is-nav-open .nt-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.is-nav-open .nt-bar:nth-child(2) { opacity: 0; }
body.is-nav-open .nt-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nt-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* the drawer — a full-screen scrim with the menu sliding down over the page */
#nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(20, 30, 33, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
}
body.is-nav-open #nav-scrim { opacity: 1; visibility: visible; }

#mobile-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 0;
  z-index: 195;
  background: var(--bg-lighter);
  border-bottom: 1px solid var(--rule-dark);
  transform: translateY(-102%);
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: transform 0.55s var(--ease-out), visibility 0.55s var(--ease-out);
}
body.is-nav-open #mobile-nav {
  transform: translateY(0);
  visibility: visible;
}
.mn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--header-h) + 18px);
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--rule-dark);
}
.mn-head .mn-word {
  font-family: var(--font-display);
  font-stretch: 62%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 16px;
  color: var(--ink);
}
.mn-head button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px;
}
#mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 10px var(--pad-x) 10px;
}
#mobile-nav li { border-bottom: 1px solid rgba(30, 42, 46, 0.08); }
#mobile-nav li:last-child { border-bottom: none; }
#mobile-nav > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 2px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s var(--ease-out), padding-left 0.25s var(--ease-out);
}
#mobile-nav > ul > li > a:active { color: var(--teal-deep); padding-left: 8px; }
#mobile-nav > ul > li > a .chev {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
#mobile-nav li.sub { padding-left: 12px; display: none; }
#mobile-nav li.has-sub.expanded > li.sub { display: block; }
#mobile-nav li.sub a {
  display: block;
  padding: 11px 2px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
#mobile-nav li.sub a:active { color: var(--teal-deep); }
/* the gold CTA keeps its voice inside the menu */
#mobile-nav li.mn-cta a {
  justify-content: center;
  margin: 16px 0 8px;
  padding: 15px 24px;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* ---------- Header sizing per breakpoint ----------
   Lives here (not sections.css) so the funnel pages, which load only
   base + header + lead css, shrink their header on phones too. */
@media (max-width: 1180px) {
  :root { --header-h: 120px; }
  .logo-word .lw-line { font-size: 17px; letter-spacing: 0.16em; }
  .nav { gap: 20px; }
  .nav a, .nav .nav-link { font-size: 12px; letter-spacing: 0.12em; }
  .logo-mark { width: 44px; }
}

@media (max-width: 900px) {
  :root { --header-h: 108px; }
  .logo-word .lw-sub { display: none; }
  .logo-mark { width: 36px; }
  .logo-word .lw-line { font-size: 14px; letter-spacing: 0.14em; }
}

@media (max-width: 900px) {
  /* hide the row that can't fit; the button takes its right end */
  .nav { display: none !important; }
  .nav-toggle { display: inline-flex; }
  /* the spacer sits AFTER the toggle in the markup, so growing it parked
     the button beside the logo on tablets; the toggle's own auto margin
     already right-aligns it */
  .nav-spacer { display: none; }

  /* the funnel CTA is dropped from the row (it lives in the menu) */
  .nav a.nav-book { display: none; }
}

/* narrow phones (320–370px, e.g. iPhone SE 1st gen, small Androids):
   logo + wordmark + "Menu" don't fit one row, so the label is hidden
   visually (it still names the button for screen readers) and the
   wordmark tightens a little */
@media (max-width: 370px) {
  .logo { gap: 10px; }
  .logo-word .lw-line { font-size: 13px; letter-spacing: 0.12em; }
  .nt-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .nav-toggle { padding: 12px 4px 12px 12px; }
}