/* SPDX-License-Identifier: MIT
 *
 * Copied from hire4real/static/css/components/nav-dropdown.css (MIT, same author), 2026-10-04, 297
 * lines. Colour tokens replaced per doctrine 8.
 *
 * Here it is the header nav: its items, its links, its dropdown panels (templates/base.html).
 * Their class names, geometry, transitions and breakpoints are kept as they are; their header and
 * notes follow this one unchanged, except that a colour value a note quotes is elided as [colour]
 * (doctrine 8 reaches comments too).
 *
 * DIVERGES FROM hire4real/static/css/components/nav-dropdown.css: the mobile rule that hides
 *   .site-nav__items behind a hamburger (at 768 px and below) is not ported (4 lines): this site
 *   has no drawer, so its seven links stay in the bar and stay operable at 390 (SL_05D-9), and the
 *   bottom nav carries four of them.
 */
/* Nav dropdown component styles */

.site-nav {
  position: relative;
}

.site-nav__items {
  flex: 1;
  justify-content: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: color 100ms, background 100ms;
}

/* ============================================================
 * NIGHT_85G — nav hover surface + active pill + hover-open dropdown.
 * This sheet loads AFTER output.css (base.html:68->69) but BEFORE
 * theme-light.css (base.html:98). So any light-theme property theme-light.css
 * also sets is beaten only by strictly higher specificity or !important
 * (see run DECISIONS D3/D4). data-theme is ALWAYS explicit (FOUC guard,
 * default "dark"), so [data-theme="dark"] reliably matches.
 * ============================================================ */

/* R2 — hover surface (tint only, no shape change). Both rules are scoped
 * `[data-theme] .site-nav .nav-link:hover` = specificity 0,4,0 so they outrank
 * the LATER-loading theme-light-supplements.css (base.html:102), whose NIGHT_85H
 * rule `[data-theme="light"] .hover\:bg-neutral-800\/60:hover` (0,3,0) otherwise
 * paints the hover [colour] ~= [colour] — darker than the target
 * and the medium-grey the operator flagged. No !important is needed here: the
 * active-pill rule below keeps its !important and so still beats these on an
 * active+hovered item. Light hover = [colour] (neutral-100). */
[data-theme="light"] .site-nav .nav-link:hover {
  background-color: var(--surface-2);
  color: var(--ink);              /* neutral-900 — MAX contrast on light hover */
  text-decoration: none;
}
/* Dark hover = [colour] (neutral-800 SOLID, alpha stripped so it doesn't read
 * "wet" over neutral-950). Beats output.css hover:bg-neutral-800/60 (0,2,0). */
[data-theme="dark"] .site-nav .nav-link:hover {
  background-color: var(--surface-2);
  color: var(--ink);              /* neutral-100 — MAX contrast on dark hover */
  text-decoration: none;
}

/* R1 — active nav item pill: solid brand green + white letter on BOTH themes.
 * NIGHT_2026-07-22 green-unification (operator ruling A): background-color
 * moved from raw [colour] → var(--color-brand-primary) so the pill computes to
 * the same emerald as .brand-cta (Sign up button) at all times, dark AND light.
 * Recipe stays NIGHT_85C Rule 2 active-tab. Text stays [colour] — dark
 * byte-identical to the pre-hotfix pill.
 * !important is REQUIRED: on light, [data-theme="light"] .text-neutral-400
 * ([colour], spec 0,2,0, loaded later) would otherwise beat a plain
 * .nav-link--active color; and the dark hover rule above (0,3,0) would
 * otherwise repaint an active+hovered pill grey. theme-light.css / output.css
 * use no !important on these, so this always wins, dark and light alike —
 * no separate [data-theme] pill rule needed. */
/* R71 (2026-08-29) — LOCATION STATE, AND IT IS NO LONGER GREEN.
 *
 * SUPERSEDES the NIGHT_2026-07-22 green-unification ruling FOR THIS ELEMENT,
 * recorded rather than quietly reversed. That ruling made the active pill
 * compute to the same emerald as `.brand-cta` on purpose, and it was coherent
 * at the time. Two later rulings make it wrong now:
 *
 *   R57  green belongs to the SUBMIT, one green element per viewport. A green
 *        pill in the bar plus a green submit in the hero is two claims on one
 *        eye, on one screen.
 *   R60  retired the tinted Scan pill for exactly that reason. An active pill
 *        painted the same way would reintroduce the treatment R60 removed,
 *        wearing a different name.
 *
 * And the two states MEAN different things, which is the deeper reason:
 * `.brand-cta` is an ACTION a reader may take, the active item is WHERE THEY
 * ARE. Painting a location like a call to action tells them to click the page
 * they are already on. R71 asks for a soft tint, and the tint is NEUTRAL --
 * borrowing the brand hue would put the promo colour back in the bar with a
 * lower alpha.
 *
 * `!important` is kept, and still for the reason the old comment gives:
 * `[data-theme="light"] .text-neutral-400` (0,2,0, loaded later) would beat a
 * plain `.nav-link--active` colour, and the dark hover rule (0,3,0) would
 * repaint an active+hovered item. Both themes resolve through tokens, so there
 * is one rule rather than a per-theme pair.
 *
 * FULL-STRENGTH TEXT ON A SUBTLE SURFACE: contrast comes from the type, not
 * from the fill, so the pill stays quiet while the label stays the most
 * readable in the bar -- which is the right way round for "you are here".
 */
/* R114 — THE ACTIVE NAV ITEM WEARS THE SELECTED TINT. It was a grey fill
   (`--color-border`), which is the same charcoal the disabled pager step
   uses: "you are here" and "you cannot press this" rendered identically.
   One selected-state treatment across nav, chips, pager and chart toggles. */
.nav-link--active,
.nav-link--active:hover {
  background-color: var(--surface) !important;
  color: var(--earth) !important;
  font-weight: 600;
}
.nav-link--active .nav-chevron {
  color: var(--earth) !important;
  opacity: 0.9;
}

/* R1b — Brand CTA (Sign up button). Same token as the active pill so that
 * `computed .brand-cta background == computed .nav-link--active background`
 * in BOTH themes, per the operator's unification test.
 * WCAG: white on emerald-500 (dark) = 4.36:1, AA large-text at font-weight:600
 * (the button has font-semibold). White on emerald-700 (light per NIGHT_109
 * ruling) = 5.48:1, normal-text AA with 22% cushion. */
.brand-cta {
  background-color: var(--earth);
  color: var(--ink);
  transition: filter 100ms, background-color 100ms;
}
.brand-cta:hover {
  filter: brightness(1.08);
}
.brand-cta:focus-visible {
  outline: 2px solid var(--earth);
  outline-offset: 2px;
}

/* R3 — hover-open dropdown. Pointer hover AND keyboard focus (:focus-within)
 * both reveal the menu. The trigger button is a child of the <li>, so focusing
 * it (Tab) satisfies :focus-within and opens the menu — which is what makes the
 * (until-then display:none) items focusable; no deadlock. */
.nav-item--has-dropdown:hover > .nav-dropdown,
.nav-item--has-dropdown:focus-within > .nav-dropdown {
  display: flex;
}
/* The dropdown carries the [hidden] attribute (.nav-dropdown[hidden] forces
 * display:none). Re-assert display on hover/focus-open; !important guarantees
 * the win over [hidden] across browsers. */
.nav-item--has-dropdown:hover > .nav-dropdown[hidden],
.nav-item--has-dropdown:focus-within > .nav-dropdown[hidden] {
  display: flex !important;
}
/* Chevron rotates on hover-open (replaces the old data-open="true" trigger the
 * removed click handler used to set). */
.nav-item--has-dropdown:hover .nav-chevron,
.nav-item--has-dropdown:focus-within .nav-chevron {
  transform: rotate(180deg);
}

/* "Chase the mouse" bridge: the dropdown is mt-2 (8px) below the trigger, so the
 * pointer crosses an 8px dead zone travelling button -> menu. An invisible 12px
 * ::after keeps :hover alive across the gap. */
.nav-item--has-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  background: transparent;
  pointer-events: auto;
}

.nav-chevron {
  opacity: 0.6;
  transition: transform 150ms;
}

.nav-item--has-dropdown[data-open="true"] .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown[hidden] {
  display: none;
}

.nav-dropdown__item {
  text-decoration: none;
  transition: background 100ms;
}

.nav-dropdown__title {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.nav-dropdown__hint {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.site-nav__actions {
  display: flex;
  align-items: center;
}

.nav-hamburger {
  display: none;
}

@media (max-width: 768px) {
  .nav-hamburger {
    display: flex;
  }

  .nav-dropdown {
    position: static;
    box-shadow: none;
    border: none;
  }

  /* NIGHT_85G — hover-open collapses on mobile (mobile uses the hamburger
   * drawer, not a hover menu). The parent .site-nav__items is
   * display:none !important on mobile, so the desktop dropdown never renders;
   * this is defense-in-depth. */
  .nav-item--has-dropdown:hover > .nav-dropdown,
  .nav-item--has-dropdown:focus-within > .nav-dropdown {
    display: none;
  }
}


/* U6 (2026-08-22) — the mobile bar is LOGO + hamburger, nothing else.
   .site-nav__actions is defined in THIS file, which loads after Tailwind, so
   its display:flex outranked the `hidden` utility on the element. The fix has
   to live here for the same reason the bug did: whoever wins the cascade owns
   the behaviour. */
@media (max-width: 768px) {
  .site-nav__actions { display: none !important; }
}


/* R60 — THE ONE NAV HIGHLIGHT IS RETIRED. `.nav-link--accent` is DELETED, not
 * left unreferenced: a rule kept "in case" is a rule the next hand re-attaches,
 * and this file has already watched a retired treatment come back.
 *
 * R53b was right that a bar with two emphasised items has no emphasis. It was
 * wrong about where the emphasis belonged. The hero capsule carries Scan's
 * prominence now, and R57's one-green-per-viewport binds the bar as well --
 * a tinted pill up here plus a green submit in the hero is two claims on one
 * eye, on one screen.
 *
 * The album flipped with it: it asserted exactly ONE visible
 * `[data-nav-highlight]`, and now asserts ZERO across the whole document. An
 * assertion that merely stopped being run would have let the pill return
 * unmeasured, which is the failure this pair of edits exists to prevent.
 */

/* ======================================================================
   R124 — THE BAR COLLAPSES AT 1024px, NOT 768px.
   Measured: at 900px `site-nav__actions` and `.brand-cta` ran to 972px on a
   900px viewport, so EVERY page carried a horizontal scrollbar -- confirmed
   pre-existing against prod at the same width, where the employer page was
   worse still (1187px). The bar's boundary was `md:` (768px) and it simply
   does not fit between 768 and 1023.

   Written HERE rather than by switching the markup to `lg:`: Tailwind's
   output.css is built inside the Docker image, `lg:flex` was absent from the
   built file, and swapping the class made the nav permanently hidden locally
   while it would have worked on prod. A rule that behaves differently in the
   two environments cannot be verified before shipping. This file is served
   as-authored in both.

   The drawer already carries every control the ruling names -- theme toggle,
   Simple/Technical, GitHub, Watchlist, Sign in -- so this moves a boundary
   rather than building a second menu.
   ====================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* The desktop bar stands down... */
  .site-nav__items,
  .site-nav__actions,
  .site-nav__actions .terminology-toggle,
  .site-nav__actions .nav-icon-btn { display: none; }

  /* ...and the drawer's trigger takes over. `.nav-hamburger` carries
     Tailwind's `md:hidden`, which is `display:none` at this width, so this
     needs the extra specificity of two classes to win on merit. */
  .site-nav .nav-hamburger,
  header .nav-hamburger { display: flex; }
}