/* NPDev Labs site-wide masthead.
 *
 * One brand bar for the homepage/About pages, News, FinPulse, Art, Trends,
 * Sports, Cards and Accounts. Every service serves these exact bytes from its own
 * origin under its own asset prefix (content-addressed by digest), so nothing
 * here is a cross-origin asset and no service needs a second CSS pipeline.
 *
 * The bar is the top edge of the Neon Pixel skin: a deep blue-black surface with
 * a neon rule under it, a slightly lighter strip for the product's second level,
 * and every destination drawn as a square-cut chip. The wordmark is the site's
 * neon cyan; the destination you are on is filled cyan, hover is filled amber,
 * and both take ink-dark text. Colour, not motion, carries the state.
 *
 * No JavaScript and no inline style attribute is used anywhere: the mobile layout
 * is a responsive grid of the same links, which keeps every destination visible
 * and every target at least 44px tall with scripting disabled.
 *
 * Selectors are deliberately two classes deep (`.np-masthead .np-global-nav a`)
 * so this file overrides the framework's own element-level `nav a`/`header`
 * rules (Pico on News, Tailwind/Basecoat preflight elsewhere) without needing
 * `!important` or a load-order guarantee. `font-family` is declared on
 * `.np-masthead` alone and nowhere deeper, so a product can still restyle the
 * whole bar's typography with one two-class rule of its own — News does that
 * with its own heading/body pairing.
 *
 * Everything drawn here is a flat fill, a border, a gradient or an offset shadow:
 * no image request, no embedded asset and nothing to fetch, which leaves the
 * public pages' strict image policy untouched.
 */

.np-masthead {
  /* The surface the bar is printed on, and the two inks that sit on it. */
  --np-surface: #08121c;
  --np-surface-deep: #0b1a27;
  --np-ink: #e9f5ff;
  --np-ink-soft: #a3c2da;
  /* The brand accent: the wordmark and the destination you are on. */
  --np-brand: #56e6ff;
  /* The second accent: hover. */
  --np-accent: #ffcf5c;
  --np-accent-ink: #04141c;
  --np-line: #1b3a52;
  /* One drawn edge, one hard drop, and square corners: the site's pixel cut. */
  --np-edge: 2px;
  --np-drop: 4px;
  --np-corner: 0;
  display: block;
  margin: 0;
  padding: 0;
  background: var(--np-surface);
  color: var(--np-ink);
  border-bottom: var(--np-edge) solid var(--np-line);
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
}

/* The inner row follows the width of the page's own column. `--np-masthead-width`
   is read with a fallback rather than declared on `.np-masthead`: a service whose
   column is narrower (Accounts is 880px) sets the variable once on `:root` in its
   own stylesheet, and declaring it here would win over that inherited value. */
.np-masthead .np-masthead-inner {
  width: min(var(--np-masthead-width, 1180px), calc(100% - 2rem));
  margin-inline: auto;
  min-width: 0;
}

/* Row 1: the mark and wordmark, then the global site navigation. */
.np-masthead .np-masthead-bar { background: var(--np-surface); }
.np-masthead .np-masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  padding: .625rem 0;
}
.np-masthead a { color: var(--np-ink); text-decoration: none; }

.np-masthead .np-brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 3rem;
  color: var(--np-ink);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.015em;
  white-space: nowrap;
}
/* The mark is drawn in `currentColor`, so it takes the bar's own ink — and any
   product that re-inks its bar gets a matching mark for free. */
.np-masthead .np-mark { display: block; flex: 0 0 auto; width: auto; height: 2rem; color: var(--np-ink); }
.np-masthead .np-brand-word { color: var(--np-brand); text-shadow: 0 0 18px rgb(86 230 255 / .45); }
.np-masthead .np-brand-word em { color: var(--np-ink-soft); font-style: normal; font-weight: 500; }
.np-masthead .np-brand:hover .np-brand-word,
.np-masthead .np-brand:focus-visible .np-brand-word { color: var(--np-ink); text-shadow: none; }
/* The homepage owns no global entry, so it marks the wordmark instead: a marker
   swipe under it, the same device the hub's own headings use. */
.np-masthead .np-brand[aria-current="page"] .np-brand-word { box-shadow: inset 0 -.375rem 0 var(--np-accent); }

/* The global destinations: one sticker each, inked, with a hard drop on the one
   you are on and on the one you are pointing at. */
.np-masthead .np-global-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
}
.np-masthead .np-global-nav .masthead-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .375rem .625rem;
  border: var(--np-edge) solid var(--np-line);
  border-radius: var(--np-corner);
  background: transparent;
  color: var(--np-ink);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, translate .15s ease;
}
.np-masthead .np-global-nav .masthead-link:hover,
.np-masthead .np-global-nav .masthead-link:focus-visible {
  background: var(--np-accent);
  border-color: var(--np-accent);
  color: var(--np-accent-ink);
  box-shadow: var(--np-drop) var(--np-drop) 0 var(--np-ink);
  translate: -1px -1px;
}
.np-masthead .np-global-nav .masthead-link[aria-current="page"] {
  background: var(--np-brand);
  border-color: var(--np-brand);
  color: var(--np-accent-ink);
  box-shadow: var(--np-drop) var(--np-drop) 0 var(--np-ink);
}

/* Row 2: the product's own sub-navigation, separate from the global list — its
   own deeper stock, its own ink rule and its own current marker. */
.np-masthead .np-masthead-sub { background: var(--np-surface-deep); border-top: 1px solid var(--np-line); }
.np-masthead .np-masthead-subrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .375rem 1.25rem;
  padding: .5rem 0;
}
.np-masthead .np-kicker { margin: 0; color: var(--np-ink-soft); font-size: .8125rem; letter-spacing: .01em; }
.np-masthead .np-kicker b { color: var(--np-ink); font-weight: 700; }
.np-masthead .np-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-masthead .np-subnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .3125rem .6875rem;
  border: var(--np-edge) solid var(--np-line);
  border-radius: var(--np-corner);
  background: transparent;
  color: var(--np-ink);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, translate .15s ease;
}
.np-masthead .np-subnav a:hover,
.np-masthead .np-subnav a:focus-visible {
  background: var(--np-accent);
  border-color: var(--np-accent);
  color: var(--np-accent-ink);
  box-shadow: var(--np-drop) var(--np-drop) 0 var(--np-ink);
  translate: -1px -1px;
}
.np-masthead .np-subnav a[aria-current="page"] {
  background: var(--np-brand);
  border-color: var(--np-brand);
  color: var(--np-accent-ink);
  font-weight: 700;
  box-shadow: var(--np-drop) var(--np-drop) 0 var(--np-ink);
}

/* The brand's own focus ring: the brand navy on the cream bar. Longhands, not the
   `outline` shorthand: a shorthand whose custom-property colour is invalidated at
   computed-value time leaves each longhand to another rule, which is how a
   framework rule can win the colour while this rule keeps the width. */
.np-masthead a:focus-visible {
  outline-color: var(--np-brand);
  outline-style: solid;
  outline-width: .1875rem;
  outline-offset: .125rem;
}

/* Phones: the two levels become grids rather than one squeezed row, so every
   destination keeps an unbroken label and a 44px target. */
@media (max-width: 760px) {
  .np-masthead .np-masthead-row {
    flex-direction: column;
    align-items: stretch;
    gap: .375rem;
    padding: .5rem 0 .625rem;
  }
  .np-masthead .np-brand { min-height: 2.75rem; }
  /* Three destinations abreast, on a six-track grid so the two that would
     otherwise leave an empty slot in the last row sit centred under the others
     instead of ragged against the left edge. */
  .np-masthead .np-global-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .25rem;
  }
  .np-masthead .np-global-nav .masthead-link {
    width: 100%;
    grid-column: span 2;
    padding: .25rem .375rem;
    font-size: .9375rem;
  }
  .np-masthead .np-global-nav .masthead-link:nth-child(7) { grid-column: 2 / span 2; }
  .np-masthead .np-global-nav .masthead-link:nth-child(8) { grid-column: 4 / span 2; }
  .np-masthead .np-masthead-subrow {
    flex-direction: column;
    align-items: stretch;
    gap: .375rem;
    padding: .5rem 0 .625rem;
  }
  .np-masthead .np-subnav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
  }
  .np-masthead .np-subnav a { width: 100%; padding: .25rem .5rem; }
}

@media (max-width: 300px) {
  .np-masthead .np-global-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-masthead .np-global-nav .masthead-link,
  .np-masthead .np-global-nav .masthead-link:nth-child(7),
  .np-masthead .np-global-nav .masthead-link:nth-child(8) { grid-column: auto; }
}

@media (max-width: 600px) {
  .np-masthead .np-masthead-inner { width: min(var(--np-masthead-width, 1180px), calc(100% - 1.5rem)); }
}

/* A reader who asks for more contrast gets the brightest ink and edges. */
@media (prefers-contrast: more) {
  .np-masthead .np-global-nav .masthead-link,
  .np-masthead .np-subnav a { border-color: #fff; color: #fff; }
  .np-masthead .np-brand-word,
  .np-masthead .np-kicker { color: #fff; }
}