/* ─────────────────────────────────────────────────────────────────────────
   Shared site navigation for standalone pages (Jobs, Job detail).

   Why this exists rather than reusing index.html's <nav class="main-nav">:
   that navbar needs jQuery + js/all.js (~145KB) to open at all, and its
   dropdown styling lives in an inline <style> block inside index.html rather
   than a stylesheet. Pulling all of that onto a page whose whole point is to
   load fast was the wrong trade.

   So this is a deliberate lightweight twin: same links, same typography and
   palette, driven by js/site-nav.js in ~70 lines of vanilla JS. If the real
   navbar's links change, change them here too.

   Behaviour matches the site's `transparent light-after-scroll` navbar —
   transparent over a dark hero, solid white once scrolled.
   ───────────────────────────────────────────────────────────────────────── */

.sn-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 40px;
  transition: background-color .28s ease, box-shadow .28s ease, padding .28s ease;
}
/* Solid once the hero is behind us. */
.sn-nav.is-scrolled {
  background: #fff;
  box-shadow: 0 1px 0 rgba(17, 17, 17, .08), 0 6px 24px rgba(17, 17, 17, .05);
  padding-top: 11px;
  padding-bottom: 11px;
}

/* ── Logo: white over the hero, navy once scrolled ── */
.sn-logo { display: flex; align-items: center; flex-shrink: 0; }
.sn-logo img { height: 34px; width: auto; display: block; transition: opacity .28s ease; }
.sn-logo .sn-logo-dark { display: none; }
.sn-nav.is-scrolled .sn-logo .sn-logo-light { display: none; }
.sn-nav.is-scrolled .sn-logo .sn-logo-dark { display: block; }

/* ── Links ── */
.sn-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sn-menu > li { position: relative; }
.sn-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.sn-menu > li > a:hover,
.sn-menu > li > a:focus-visible { color: #fff; background: rgba(255, 255, 255, .12); }
.sn-menu > li.is-current > a { color: #fff; font-weight: 600; }

.sn-nav.is-scrolled .sn-menu > li > a { color: #4a4a4a; }
.sn-nav.is-scrolled .sn-menu > li > a:hover,
.sn-nav.is-scrolled .sn-menu > li > a:focus-visible { color: #111; background: rgba(17, 17, 17, .05); }
.sn-nav.is-scrolled .sn-menu > li.is-current > a { color: #111; }

/* ── Dropdown ── */
.sn-caret { font-size: 10px; line-height: 1; opacity: .7; transition: transform .18s ease; }
.sn-has-sub.is-open > a .sn-caret { transform: rotate(180deg); }

.sn-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 262px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(17, 17, 17, .08);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(17, 17, 17, .16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
/* Bridges the gap so the menu survives the cursor travelling to it. */
.sn-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.sn-has-sub:hover > .sn-sub,
.sn-has-sub:focus-within > .sn-sub,
.sn-has-sub.is-open > .sn-sub {
  visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
}
.sn-sub a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 9px;
  text-decoration: none;
  color: #2c2c2c;
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color .15s ease;
}
.sn-sub a:hover, .sn-sub a:focus-visible { background: rgba(17, 17, 17, .055); color: #111; }
.sn-sub svg { width: 17px; height: 17px; fill: #6b6b6b; flex-shrink: 0; }
.sn-sub a:hover svg { fill: #111; }

/*
 * ── CTA ──
 * Black/white rather than the mint-green accent this used to carry, for
 * consistency with the rest of the site's buttons. This nav sits over a dark
 * hero before scrolling and a solid white bar after, so the border keeps it
 * defined on the dark state without needing a different style per state.
 */
.sn-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease;
}
.sn-cta:hover { background: #171717; color: #fff; }
.sn-nav.is-scrolled .sn-cta { border-color: rgba(17, 17, 17, .18); }

.sn-right { display: flex; align-items: center; gap: 14px; }

/* ── Mobile toggle ── */
.sn-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  padding: 0;
}
.sn-toggle svg { width: 24px; height: 24px; fill: #fff; }
.sn-nav.is-scrolled .sn-toggle svg { fill: #111; }
.sn-toggle:hover { background: rgba(255, 255, 255, .12); }
.sn-nav.is-scrolled .sn-toggle:hover { background: rgba(17, 17, 17, .05); }

/* ── Mobile layout ── */
@media (max-width: 1024px) {
  .sn-nav { padding: 12px 18px; }
  .sn-toggle { display: inline-flex; }

  /* Panel is always solid white, whatever is behind the bar. */
  .sn-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(17, 17, 17, .13);
    transition: max-height .3s ease, padding .3s ease;
  }
  .sn-nav.is-open .sn-menu {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    padding: 10px 12px 16px;
  }
  .sn-menu > li > a,
  .sn-nav.is-scrolled .sn-menu > li > a { color: #2c2c2c; padding: 12px 12px; font-size: 15px; }
  .sn-menu > li.is-current > a,
  .sn-nav.is-scrolled .sn-menu > li.is-current > a { color: #111; }

  /* The desktop hover rule turns links white for a dark hero, and it outranks
     the colour above (0,2,2 vs 0,1,2). On the white mobile panel that made a
     tapped item — "Tools" especially, since the tap sticks — white on white
     and apparently vanish. Restate hover/focus for the panel. */
  .sn-menu > li > a:hover,
  .sn-menu > li > a:focus-visible,
  .sn-nav.is-scrolled .sn-menu > li > a:hover,
  .sn-nav.is-scrolled .sn-menu > li > a:focus-visible {
    color: #111;
    background: rgba(17, 17, 17, .05);
  }

  /* In flow rather than floating, so it pushes the list instead of covering it. */
  .sn-sub {
    position: static;
    transform: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    display: none;
    min-width: 0;
    margin: 0 0 4px 10px;
    box-shadow: none;
    border: 0;
    border-left: 2px solid rgba(17, 17, 17, .09);
    border-radius: 0;
    background: transparent;
    padding: 2px 0 2px 8px;
  }
  /* Only the explicit tap opens it. The desktop :hover rules above change
     visibility/opacity, not display, so `display: none` here already keeps
     hover from revealing anything on touch — an extra :hover override was
     more specific than .is-open and stopped the tap working at all. */
  .sn-has-sub.is-open > .sn-sub { display: block; }

  /* Those same desktop rules also set transform: translate(-50%, 0) at a
     higher specificity than the plain `.sn-sub { transform: none }` above, so
     the open submenu was being dragged half its width off the left edge.
     Reset it at matching specificity. */
  .sn-has-sub:hover > .sn-sub,
  .sn-has-sub:focus-within > .sn-sub,
  .sn-has-sub.is-open > .sn-sub { transform: none; }

  .sn-right .sn-cta { display: none; }
}

@media (max-width: 380px) {
  .sn-logo img { height: 28px; }
}

/* Respect reduced-motion: keep the states, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .sn-nav, .sn-menu, .sn-sub, .sn-logo img, .sn-caret { transition: none; }
}