/* ==========================================================================
   Navigation disclosure

   Kept in its own file rather than in components.css so the two can be worked
   on independently. Loaded after it, so anything here wins.

   Reads semantic tokens only. No hex value belongs in this file.
   ========================================================================== */

@layer components {

/* ==========================================================================
   The Build one button

   Sits at the end of the bar, outside the navigation list, styled as the
   primary action rather than as a link. It stays visible on a phone, where
   every other link folds into the menu, because it is the one thing a reader
   who has decided should be able to reach without opening anything.
   ========================================================================== */
.nav-cta {
  display: inline-flex;
  align-items: center;
  flex: none;
  order: 99;
  min-height: 2.375rem;
  padding: var(--step-2) var(--step-5);
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--color-page);
  background: var(--color-accent);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-spring),
              box-shadow var(--dur) var(--ease-spring),
              transform var(--dur) var(--ease-spring);
}

.nav-cta:hover {
  color: var(--color-page);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px var(--color-glow-strong);
}

/* On its own page it stops shouting and becomes an outline, so the bar is not
   inviting you somewhere you already are. */
.nav-cta.is-current {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.nav-cta.is-current:hover { color: var(--color-accent); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-cta:hover { transform: none; }
}

/* The hamburger must sit after the button, not before it. */
@media (max-width: 65.999rem) {
  .nav-toggle { order: 100; }
  .nav-cta { padding-inline: var(--step-4); font-size: var(--size-xs); }
}

/* At the narrowest widths the bar carries the wordmark, the online count and
   this button. The count's label is already hidden there; this keeps the
   button's own padding from pushing the row over. */
@media (max-width: 25rem) {
  .nav-cta { padding-inline: var(--step-3); }
}

.nav-group { position: relative; }

/* The bar must not wrap. With the disclosure added, the row grew just past the
   space available at some widths and the last link dropped onto a second line
   that the fixed-height masthead then clipped. Nothing here is optional
   content, so the row stays on one line and the gap tightens instead. */
@media (min-width: 66rem) {
  .nav-list {
    flex-wrap: nowrap;
    gap: var(--step-4);
  }
  /* The margin reset is load-bearing, not tidiness. Content list items carry a
     bottom margin, and the last-child rule that removes it left the final nav
     item as the only one without one. In a centred flex row an item's margin is
     centred with it, so every other link sat half that margin higher and the
     last one looked misaligned. */
  .nav-list > li { display: flex; align-items: center; margin: 0; }
  .nav-list a { white-space: nowrap; }
}

.nav-details > summary {
  display: flex;
  align-items: center;
  gap: var(--step-2);
  /* The marker is replaced by the chevron below. list-style on the summary is
     what Firefox uses; ::-webkit-details-marker is what Safari uses. Both have
     to go or the triangle sits next to the chevron. */
  list-style: none;
  cursor: pointer;
  user-select: none;
  min-height: 2.75rem;
  color: var(--color-text-muted);
  font-size: var(--size-sm);
  transition: color var(--dur) var(--ease);
}

.nav-details > summary::-webkit-details-marker { display: none; }

.nav-details > summary:hover,
.nav-details[open] > summary { color: var(--color-text); }

/* The trail marker. The panel no longer opens itself on the pages inside it, so
   this is the only thing that tells a reader which group they are standing in.
   It borrows the flat items' current-page treatment exactly: the accent
   underline on a wide screen, the accent colour on a phone. */
@media (min-width: 66rem) {
  .nav-details > summary { position: relative; white-space: nowrap; }
  .nav-details > summary.is-current { color: var(--color-text); }
  .nav-details > summary.is-current::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    right: calc(12px + var(--step-2));
    height: 1.5px;
    background: var(--color-accent);
  }
}

@media (max-width: 65.999rem) {
  .nav-details > summary.is-current { color: var(--color-accent); }
}

.nav-chev {
  flex: none;
  opacity: 0.6;
  transition: transform var(--dur) var(--ease);
}

.nav-details[open] .nav-chev { transform: rotate(180deg); }

.nav-panel a {
  display: block;
  padding: var(--step-2) var(--step-3);
  border-radius: var(--radius-input);
  color: var(--color-text);
  transition: background-color var(--dur) var(--ease);
}

.nav-panel a:hover { background: var(--color-wash); text-decoration: none; }

.nav-panel a[aria-current='page'] { background: var(--color-wash-strong); }

.nav-panel-label { display: block; font-size: var(--size-sm); font-weight: 600; }

/* The one-line note is what makes this navigation rather than a list of names.
   "Dexcom" only helps a reader who already knows what this site is; "G6 and G7,
   through Share" tells them whether it is their page. */
.nav-panel-note {
  display: block;
  font-size: var(--size-xs);
  color: var(--color-text-muted);
}

.nav-panel li + li { margin-top: var(--step-1); }

/* --------------------------------------------------------------------------
   Desktop: the panel floats under the bar.
   -------------------------------------------------------------------------- */
@media (min-width: 66rem) {
  .nav-panel {
    position: absolute;
    top: calc(100% + var(--step-3));
    left: 0;
    z-index: 60;
    width: max-content;
    max-width: min(22rem, 90vw);
    padding: var(--step-4);
    background: var(--color-surface-high);
    border: var(--hairline) solid var(--color-border-strong);
    border-radius: var(--radius-card);
  }
}

/* --------------------------------------------------------------------------
   Mobile: the panel expands inline inside the stacked menu, because a floating
   panel inside an already-floating menu is a trap on a small screen.
   -------------------------------------------------------------------------- */
@media (max-width: 65.999rem) {
  /* The panel is fixed to the top of the viewport, so with the disclosure open
     its content ran past the bottom of the screen with nothing to scroll: the
     last items were simply unreachable. Capping it against the viewport and
     letting it scroll inside itself is what makes an expanded menu usable on a
     phone. The dynamic viewport unit matters here, because the browser's own
     toolbars appear and disappear while you scroll. */
  .nav-list[data-open='true'] {
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(var(--step-6), env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .nav-group { border-bottom: var(--hairline) solid var(--color-border); }

  .nav-details > summary {
    justify-content: space-between;
    padding-block: var(--step-3);
    font-size: var(--size-base);
    color: var(--color-text);
  }

  .nav-panel {
    padding: var(--step-2) 0 var(--step-4) var(--step-3);
    border-left: var(--hairline) solid var(--color-border);
    margin-left: var(--step-1);
  }

  .nav-panel a { padding-block: var(--step-3); }
}

} /* @layer components */