/* site-nav.css — the shared part of the header contract.
 *
 * Every page carries identical header markup (see tools/unify-chrome.cjs) and
 * the same menu behaviour (js/site-nav.js). What differs between pages is the
 * skin: some headers sit over a photo hero in white, others on a light bar.
 * Colours and heights stay with each page stylesheet; only the bits that must
 * behave the same everywhere live here, so the current section is marked on
 * every page rather than on the few whose stylesheet happened to define it.
 */

.site-header #site-nav a[aria-current="page"],
.site-header #site-nav a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

/* The section bar under the header on articles and guides. It is generated as
 * static markup by tools/unify-chrome.cjs, so its styling belongs here with the
 * rest of the shared chrome rather than in articles.css — the ice-climbing guide
 * never loads that stylesheet. */
.articles-subnav {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
  min-height: 52px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  background: #dbe4df;
  /* On the articles hub the bar sits on the same green as the hero, so a hair
   * line is what tells you the bar ends and the page begins. */
  border-bottom: 1px solid rgba(11, 31, 58, 0.12);
  overflow-x: auto;
}

.articles-subnav a {
  flex: 0 0 auto;
  color: var(--ink, #0b1f3a);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.articles-subnav a:hover,
.articles-subnav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* The hub link keeps the accent colour it has always had. */
.articles-subnav a:first-child {
  color: var(--signal, #b5371b);
}

@media (max-width: 600px) {
  .articles-subnav {
    gap: 1rem;
    min-height: 48px;
    padding: 0 5vw;
    /* Four short labels do not quite fit at 390px. The bar scrolls; the fade is
     * what makes the clipped last label read as "more this way" rather than a
     * layout bug. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent);
  }

  .articles-subnav a {
    font-size: 0.8rem;
  }
}

/* On narrow screens the menu drops under the bar; keep the current section
 * readable as a list item rather than an underlined word. */
@media (max-width: 900px) {
  .site-header #site-nav a[aria-current="page"] {
    text-underline-offset: 0.3em;
  }
}