/* The NSE site header: palette, nav chrome, drop-downs, phone drawer and
 * language switcher. Split out of nse.css so the legacy pages
 * (layout/header.blade.php - /train, the calculators) can wear the same
 * header on the NSE domain WITHOUT nse.css's global reset, which would
 * strip the margins and padding their Bootstrap content relies on.
 *
 * Every NSE page loads this beside nse.css; a legacy page loads only this.
 */

:root {
  --teal:        #2A6B6B;
  --teal-dark:   #1E4E4E;
  --teal-abyss:  #0F2E2E;
  --teal-mist:   #E8F4F4;
  --seafoam:     #C9A870;
  --ink:         #2E2E2E;
  --slate:       #888E8E;
  --cloud:       #F7F8F8;
  --white:       #ffffff;
  --error:       #B23A3A;
  --success:     #2A6B54;
  --warning:     #8a6d2f;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* The reset nse.css applies to the whole page, applied here to the
 * header alone - a legacy page has no such reset, and its Bootstrap
 * margins (ul, button) would otherwise leak into the nav. */
/* `body > header`, NEVER a bare `header`.
 *
 * <header> is the right element for the top of any block, and these
 * rules claim a background, a sticky position and a margin/padding reset
 * for EVERY one of them on the page. The member front page's own
 * `<header class="mj-head">` - the member's name, today's task and the
 * badges - was painted with the nav's near-black bar behind text
 * coloured for a light page, so the name and the eyebrow above it were
 * all but invisible, and the block stuck to the top of the window when
 * scrolled. Every nav on this site is a direct child of <body> (the
 * layout renders @section('header') there), so the child combinator
 * fences these rules to the one <header> they were written for. */
body > header {
  font-family: var(--font-sans);
  line-height: 1.7;
}

body > header *, body > header *::before, body > header *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── SHARED HEADER / NAV CHROME ──
 * Structural markup, colours AND the responsive collapse. The collapse
 * used to be opt-in per page, because a page that hid the nav without
 * shipping the toggle would have stranded it - and only the home page
 * ever opted in. The shared layout renders the button now, so the rules
 * belong here with it, once, for every page that uses this header.
 */
body > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #071A1A;
  border-bottom: 1px solid rgba(201, 168, 112, 0.2);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 0 2rem;
  height: 80px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Logo sizing lives here, not on the <img height/width> attributes - this
   rule overrides them, so the 72 on nse/home.blade.php's markup was never
   what actually rendered. Change this one value to resize the logo in both
   navs; editing the attributes alone does nothing. */
.nav-logo img, .nav-logo svg {
  height: 64px;
  width: 64px;
}

.nav-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-wordmark span:first-child {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 1px;
}

.nav-wordmark span:last-child {
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--slate);
  text-transform: uppercase;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  align-items: center;
}

nav a {
  white-space: nowrap;
  text-decoration: none;
  color: var(--seafoam);
  font-size: 14px;
  letter-spacing: 0.5px;
}

nav a:hover {
  color: var(--teal);
}

/* The signed-in member's drop-down (nse/partials/account-nav.blade.php).
   The name is a label, not a link - there is no NSE account page for it
   to lead to - so it is styled to read as a nav item on its own. */
.nav-account-name {
  color: var(--seafoam);
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nav-cta {
  background: var(--teal);
  color: var(--white) !important;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px !important;
  letter-spacing: 1px;
}

.nav-cta:hover {
  background: var(--teal-dark) !important;
  color: var(--white) !important;
}

/* Drop-downs, the first in this member-facing nav. The parent stays a
 * real link to its own shelf, so a tap gets somewhere useful without
 * needing the menu to open first - the sub-items are shortcuts, never the
 * only way in.
 *
 * Shown on focus-within as well as hover so the keyboard reaches them.
 */
.nav-group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-group > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: -0.9rem;
  min-width: 220px;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0;
  background: #071A1A;
  border: 1px solid rgba(201, 168, 112, 0.2);
  border-radius: 10px;
  list-style: none;
  z-index: 60;
}

.nav-caret {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--seafoam);
  font-size: 11px;
  line-height: 1;
  padding: 4px 2px 4px 4px;
}

.nav-caret:hover {
  color: var(--teal);
}

/* Open on hover for a mouse, on focus for a keyboard, and on the caret
   for a finger. The class is what a touch device gets, and it is set by
   the script in the layout. */
/* Second from the right edge, so its panel opens leftwards rather than
   past the edge of a narrow window. */
.nav-account > ul {
  left: auto;
  right: -0.9rem;
}

.nav-group:hover > ul,
.nav-group:focus-within > ul,
.nav-group.open > ul {
  display: flex;
}

.nav-group > ul a {
  display: block;
  padding: 0.5rem 1.1rem;
  font-size: 13px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--seafoam);
  margin: 5px 0;
  border-radius: 2px;
}

/* The phone header. Below this width (960px - the full signed-in row
 * needs it, not only phones) the nav row cannot fit beside the logo, and an overflowing page is not merely a header problem on
 * Android: the browser answers it by zooming the whole page out to fit.
 *
 * `top: 80px` is .nav-inner's fixed height, so the drawer opens flush
 * under the header on every page that uses it.
 */
/* Between the drawer and a wide window the full signed-in row (ten
   items, four carets) only fits with tighter spacing. Measured on the
   mirror by specs/program-tips.spec.ts: at the default 2rem it overflows
   below ~1030px. */
@media (max-width: 1180px) {
  .nav-inner {
    gap: 1.5rem;
  }

  nav ul {
    gap: 1.1rem;
  }
}

@media (max-width: 960px) {
  nav ul {
    display: none;
  }

  /* The signup and checkout pages carry a bare header - logo and the
     language switch, no menu button to open a drawer - so hiding their
     list hid the language switch with nothing to bring it back. */
  nav ul.nav-bare {
    display: flex;
  }

  nav ul.open .nav-group {
    display: block;
  }

  nav ul.open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: #071A1A;
    border-bottom: 1px solid rgba(201, 168, 112, 0.2);
    padding: 1rem 2rem 1.5rem;
    /* The drawer hangs off a STICKY header, so anything past the fold
       was unreachable rather than merely below: an absolutely
       positioned box adds nothing to the document height, and the
       header it is pinned to never scrolls away, so the page had
       nothing to scroll to. Reported on a real iPhone - the menu
       stopped part-way and the language switch, which renders last,
       was simply gone.
       Bounded to the viewport and scrolled instead. The dvh line comes
       SECOND so it wins wherever it is understood: on iOS Safari 100vh
       is the LARGE viewport, measured as though the browser toolbar
       were hidden, so a vh-only cap still overflows by the height of
       that toolbar - which is about one menu row, i.e. exactly the
       symptom being fixed.
       overscroll-behavior stops a flick at the end of the list
       scrolling the page underneath instead. */
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  nav ul.open li a {
    padding: 0.7rem 0;
    display: block;
    font-size: 15px;
  }

  /* The account name is a <span>, not an <a>, so the rule above misses
     it and it would sit flush against its own items in the drawer. */
  nav ul.open .nav-account-name {
    display: block;
    padding: 0.7rem 0;
    font-size: 15px;
  }

  /* No hovering on a phone, and a tap on the parent should follow its
     link - so the sub-items are simply always open inside the drawer,
     indented under their parent. */
  nav ul.open .nav-group > ul {
    display: flex;
    position: static;
    min-width: 0;
    padding: 0 0 0.3rem 1rem;
    background: none;
    border: none;
    border-radius: 0;
  }

  nav ul.open .nav-caret {
    display: none;
  }

  nav ul.open .nav-group > ul a {
    padding: 0.5rem 0;
    font-size: 14px;
    color: var(--slate);
  }

  .nav-toggle {
    display: block;
  }
}

/* Language switcher (nse/partials/lang-switch.blade.php).
   Sits rightmost in both navs. Deliberately quieter than the other nav
   links - it is a utility control, not a destination - so it inherits the
   nav link colour but drops a step in weight and gains the globe glyph as
   a wordless cue for a reader who cannot read the current page's language. */
.nav-lang a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.nav-lang-globe {
  font-size: 15px;
  line-height: 1;
}

/* The phone tab bar (nse/partials/tab-bar.blade.php, App\Support\TabBar).
   Hidden until the nav collapses into the drawer - the same 960px - and
   BELOW the header in the stacking order, so the open drawer covers it
   rather than losing its last rows behind it (the drawer's bottom is the
   bottom of the screen; see the max-height rule above).

   --tab-bar-h is set on the body only while the bar is showing, so a
   page that pins something to the bottom of the screen can sit on top of
   the bar with bottom: var(--tab-bar-h, 0px) and be unchanged anywhere
   else. The body is padded by the same amount: a fixed bar adds nothing
   to the page's height, and without it the last thing on a page would
   sit under the bar with nowhere to scroll to. */
.tab-bar {
  display: none;
}

@media (max-width: 960px) {
  body.has-tab-bar {
    --tab-bar-h: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--tab-bar-h);
  }

  .tab-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    height: var(--tab-bar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #071A1A;
    border-top: 1px solid rgba(201, 168, 112, 0.2);
  }

  .tab-bar-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 2px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
  }

  .tab-bar-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab-bar-item svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }

  .tab-bar-item.is-active {
    color: var(--seafoam);
  }
}