/* Section sub-navigation (T39). Tokens only. On the section theme's ground (the theme class on the nav).
   Phones first: below 700 px a disclosure button opens the list as 44 px rows; from 700 px one row that wraps. */

.section-subnav {
  position: relative;
  z-index: 2;
  padding-block: var(--space-2);
  font-size: var(--fs-body);
  line-height: var(--lh-label);
}
/* The page starts with a hero, so there is no spacer under the floating header pill: the bar makes the room. */
.section-subnav--under-pill { padding-top: calc(var(--space-24) + var(--space-3)); }
@media (max-width: 999.98px) {
  /* Without script the pill sits in the page (T41), so no room is needed. */
  .no-js .section-subnav--under-pill { padding-top: var(--space-2); }
}

.section-subnav__inner {
  max-width: calc(var(--container-wide) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section-subnav__list,
.section-subnav__extras {
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-subnav__item { margin: 0; }

.section-subnav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: var(--color-text);
  text-decoration: none;
  text-underline-offset: 6px;
}
.section-subnav__link:hover {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
}
/* Current page (and the item holding it): an underline, not colour alone. */
.section-subnav__link[aria-current] {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-heavy);
}
.section-subnav__out { flex: none; }

/* The small pill for contact actions (as designed). Colours are the theme's first button. */
.section-subnav__pill.btn {
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-label);
}

/* ── Phones: disclosure button ─────────────────────────────────────────── */
.section-subnav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-heading);
  font: inherit;
  font-weight: var(--fw-bold);
  text-align: left;
  cursor: pointer;
}
.section-subnav__toggle[hidden] { display: none; }
.section-subnav__toggle-current { font-weight: var(--fw-regular); }
.section-subnav__chevron { flex: none; transition: transform var(--duration-reveal, 0s) var(--ease-brand, ease); }
.section-subnav__toggle[aria-expanded="true"] .section-subnav__chevron { transform: rotate(180deg); }

@media (max-width: 699.98px) {
  /* Collapsed only while the script's button is showing; without script the list stays open. */
  .section-subnav__toggle:not([hidden])[aria-expanded="false"] + .section-subnav__panel { display: none; }
  .section-subnav__toggle:not([hidden]) + .section-subnav__panel { padding-bottom: var(--space-2); }
  .section-subnav__list > .section-subnav__item + .section-subnav__item,
  .section-subnav__extras > .section-subnav__item { border-top: var(--border-width) solid var(--color-hairline); }
  /* The divider before the extra links. */
  .section-subnav__extras {
    margin-top: var(--space-2);
    border-top: var(--border-width) solid var(--color-hairline);
  }
  .section-subnav__extras > .section-subnav__item:first-child { border-top: 0; }
  .section-subnav__extras .section-subnav__pill { margin-block: var(--space-2); }
}

/* ── 700 px and up: one row that wraps ─────────────────────────────────── */
@media (min-width: 700px) {
  .section-subnav__toggle { display: none; }
  .section-subnav__panel,
  .section-subnav__list,
  .section-subnav__extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-6);
  }
  .section-subnav__panel { row-gap: var(--space-1); }
  /* The visible divider: a hairline between the section's pages and the extra links. */
  .section-subnav__extras {
    padding-left: var(--space-6);
    border-left: var(--border-width) solid var(--color-hairline);
    column-gap: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-subnav__chevron { transition: none; }
}