/* 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;
}

/* Sign In and the language switch on the phone bar
   (nse/partials/guest-signin, nse/partials/lang-bar). Hidden on a wide
   window, whose nav row already shows both. */
.nav-signin,
.nav-lang-bar {
  display: none;
}

.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;
  }

  /* A group is one row - the caret's triangle, then its name - with its
     items folded underneath until the triangle is tapped (owner,
     2026-10-28: "collapse all the main selectors"). The name stays a
     link to its own page. */
  nav ul.open .nav-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  nav ul.open .nav-group > a,
  nav ul.open .nav-group > .nav-account-name {
    flex: 1 1 0;
    min-width: 0;
  }

  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;
  }

  /* One left edge for the whole drawer. The desktop row centres its
     items, and in a column that centred each item on its own while a
     group's heading sat at the left of a box as wide as its longest
     item - so every heading started somewhere different (owner,
     2026-10-26, a phone screenshot). Headings flush left, their items
     indented under them. */
  nav ul.open,
  nav ul.open .nav-group > ul {
    align-items: stretch;
  }

  nav ul.open li {
    text-align: left;
  }

  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: none;
    flex-basis: 100%;
    position: static;
    min-width: 0;
    padding: 0 0 0.3rem 1rem;
    background: none;
    border: none;
    border-radius: 0;
  }

  nav ul.open .nav-group.open > ul {
    display: flex;
  }

  /* The triangle before the name, a full finger wide. */
  nav ul.open .nav-caret {
    order: -1;
    width: 36px;
    min-height: 44px;
    margin-left: -10px;
    padding: 0;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  nav ul.open .nav-caret::before {
    content: "";
    border-left: 8px solid var(--seafoam);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transition: transform 0.15s;
  }

  nav ul.open .nav-group.open > .nav-caret::before {
    transform: rotate(90deg);
  }

  /* A row with nothing to fold gets the same left edge as one with. */
  nav ul.open > li:not(.nav-group):not(.nav-guest):not(.nav-join) {
    padding-left: 26px;
  }

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

  .nav-toggle {
    display: block;
  }

  /* margin-left: auto pushes it against the menu button; the nav beside
     it is empty here because its list is hidden. */
  /* Three controls share the bar on a phone - Sign In, the language and
     the menu button - so the gap between them is tighter than the wide
     row's. The nav between the logo and them is empty here. */
  .nav-inner {
    gap: 0.6rem;
  }

  .nav-signin {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-left: auto;
    padding: 0 1.1rem;
    border-radius: 20px;
    background: var(--seafoam);
    color: var(--teal-abyss);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
  }

  /* margin-left: auto when it is the first control (a member, with no
     Sign In); right after Sign In it sits beside it. */
  .nav-lang-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 40px;
    margin-left: auto;
    padding: 0 0.7rem;
    border: 1px solid rgba(201, 168, 112, 0.45);
    border-radius: 20px;
    color: var(--seafoam);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
  }

  .nav-signin + .nav-lang-bar {
    margin-left: 0;
  }

  /* In the drawer a visitor's Sign In comes FIRST, not after every
     group. Join (home page, .nav-join) stays below the groups (owner,
     2026-10-28). */
  nav ul.open .nav-guest {
    order: -1;
  }

  /* Join keeps its pill in the drawer: the drawer's link rule above
     zeroes the side padding and stretches it, which left a full-width
     bar with the word against its left edge. */
  nav ul.open li a.nav-cta {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    margin: 0.3rem 0 0.5rem;
  }

  /* Sign In in the drawer is the same gold button as on the bar (owner,
     2026-10-28: "not a button now"). */
  nav ul.open li.nav-guest a:not(.nav-cta) {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    margin: 0.3rem 0;
    border-radius: 20px;
    background: var(--seafoam);
    color: var(--teal-abyss);
    font-weight: 600;
  }
}

/* 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);
  }
}