/* ==========================================================================
   Site nav bar · page/chrome (Figma 1819:24471, mobile 1863:25913)
   The approved nav from /stores/, shared by the compare, feature and article
   pages. Markup: <header class="sp-nav" data-sp-nav> (copy it from any of those
   pages). Toggle script: scripts/site-nav.js. stores.css still carries its own
   copy of the page/chrome rules.

   Self-contained: the state pages (native-check.css) have no main.css or
   sec-identify.css, so the drawer, 1440 column and hidden-label rules the nav
   needs are restated here, scoped to .sp-nav, with main.css's values. On
   main.css pages they resolve to exactly what main.css + sec-identify.css give.
   ========================================================================== */

/* ── Base the nav needs on any stylesheet ───────────────────────────────── */
.sp-nav, .sp-nav * { box-sizing: border-box; }
.sp-nav .drawer { background: var(--mustard, #dba605); color: var(--ink, #281207); border-bottom: 1px solid rgba(41, 18, 8, 0.18); }
.sp-nav .drawer .wrap {
  display: flex; justify-content: space-between; gap: 16px; padding-block: 8px;
  font-size: 11px; text-transform: uppercase; color: var(--ink, #281207);
}
.sp-nav .hp-wrap { width: 100%; max-width: calc(1440px + clamp(20px, 5vw, 80px) * 2); margin-inline: auto; padding-inline: clamp(20px, 5vw, 80px); }
.sp-nav a { text-decoration: none; }
.sp-nav img { display: block; }
.sp-nav .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── page/chrome · nav bar (1819:24471) ─────────────────────────────────── */
.sp-nav .drawer .wrap { font-family: var(--f-serif, 'Source Serif 4', Georgia, 'Times New Roman', serif); font-weight: 400; letter-spacing: 0.12em; }
.sp-nav .drawer__r { font-weight: 500; opacity: 1; }
.sp-nav__row { display: flex; align-items: center; gap: 56px; padding-top: 52px; padding-bottom: 20px; }
.sp-nav__logo { display: block; flex: none; }
.sp-nav__logo img { display: block; width: 142px; height: auto; }
.sp-nav__toggle { display: none; }
.sp-nav__links { display: flex; align-items: baseline; gap: var(--s6, 32px); margin: 0; padding: 0; list-style: none; }
/* page/nav-link: "§ 010" in Citation (Serif Medium 12) beside the label in
   Table note (Serif 14 / 155%). A current link (none on this page) takes a
   2px mustard rule 4 below, absolutely placed so the baseline never moves. */
.sp-nav__link { position: relative; display: inline-flex; align-items: baseline; gap: var(--s2, 8px); color: var(--ink, #281207); white-space: nowrap; }
.sp-nav__no { font-family: var(--f-serif, 'Source Serif 4', Georgia, serif); font-weight: 500; font-size: 12px; }
.sp-nav__label { font-family: var(--f-serif, 'Source Serif 4', Georgia, serif); font-size: 14px; line-height: 1.55; }
.sp-nav__link:hover { text-decoration: none; }
.sp-nav__link:hover .sp-nav__label { text-decoration: underline; text-underline-offset: 3px; }
.sp-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--mustard, #dba605);
}

@media (max-width: 720px) {
  /* page/chrome · nav bar · mobile (1863:25913): mustard drawer (left text
     only), logo + the wave menu button, a hairline under the row. */
  .sp-nav .drawer .wrap { font-size: 11px; letter-spacing: 0.12em; line-height: normal; padding: 7px 16px; }
  .sp-nav .drawer__suffix, .sp-nav .drawer__r { display: none; }
  .sp-nav .sp-nav__row { position: relative; justify-content: space-between; gap: 0; padding: 16px 16px 12px; border-bottom: 1px solid var(--hairline, #c5b49f); }  /* .sp-nav .hp-wrap (base, above) would otherwise win the side padding back. */

  .sp-nav__logo img { width: 118px; }
  .sp-nav__toggle {
    display: block; position: relative; width: 28px; height: 28px; margin: 0; padding: 0;
    background: none; border: 0; cursor: pointer; color: var(--ink, #281207);
  }
  .sp-nav__toggle::before { content: ""; position: absolute; inset: -8px; }   /* 44 tap target */
  .sp-nav__icon { display: block; width: 28px; height: 28px; }
  .sp-nav__icon--close { display: none; }
  .sp-nav.is-open .sp-nav__icon--open { display: none; }
  .sp-nav.is-open .sp-nav__icon--close { display: block; }
  .sp-nav__menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    padding: var(--s5, 24px) 16px var(--s6, 32px); background: var(--paper, #faf6ec); border-bottom: 1px solid var(--hairline, #c5b49f);
  }
  .sp-nav.is-open .sp-nav__menu { display: block; }
  .sp-nav__links { flex-direction: column; align-items: flex-start; gap: var(--s5, 24px); }
}