/* Header and navigation (library site part, T41): utility bar, glass pill, phone and tablet drawer.
   Mobile first: phone, then the utility bar from 700 px, then the full menu from 1000 px.
   Tokens only (css/base/tokens.css). Focus ring: white on the Deep Blue utility bar (B6), Mid Blue on the glass. */

/* The layout's <header> (banner) holds the utility bar, the sticky pill and the spacer. display: contents lets the
   pill stick to the top of the viewport for the whole page while the utility bar scrolls away; the element stays
   in the accessibility tree as the banner landmark. */
.site-header { display: contents; }

.site-header ul { margin: 0; padding: 0; list-style: none; }
.site-header li { margin: 0; }
.site-header li a { text-decoration: none; }

/* ── Utility bar (700 px and wider; below that it is inside the drawer) ─────────────── */
.site-utility {
  display: none;
  background: var(--c-deep-blue);
  color: var(--c-white);
  --color-focus: var(--color-focus-inverse);
}
@media (min-width: 700px) {
  .site-utility { display: block; }
}
.site-utility__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1) var(--space-6);
  max-width: calc(var(--container-wide) + 2 * var(--page-gutter));
  min-height: 38px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-label);
}
.site-utility__group,
.site-utility__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-5);
  min-width: 0;
}
.site-utility__label { color: var(--c-white-a72); }
.site-utility .site-utility__link {
  display: inline-block;
  padding: 10px 0 8px;
  border-bottom: var(--border-width) solid transparent;
  color: var(--c-white);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-utility .site-utility__link:hover { color: var(--c-light-blue); text-decoration: none; }
/* The links fill the bar's height, so the ring is drawn inside the link (a little side padding keeps it off the text). */
.site-utility .site-utility__link {
  margin-inline: calc(-1 * var(--space-1));
  padding-inline: var(--space-1);
}
.site-utility .site-utility__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.site-utility .site-utility__link[aria-current] { border-bottom-color: var(--c-light-blue); }

/* ── Main navigation: the floating glass pill ──────────────────────────────────── */
/* The pill's 14px top gap plus its height: master's gated download panel (LC-1) lands below it, using this offset. */
:root { --site-sticky-header-height: 76px; }
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 0;
}
.site-nav__inner {
  max-width: calc(var(--container-wide) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding: 14px var(--page-gutter) 0;
}
/* The pill reaches slightly past the page gutter, as designed. */
.site-nav__pill,
.site-drawer {
  margin-inline: calc(-1 * min(28px, var(--page-gutter) - 8px));
}
.site-nav__pill {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) clamp(18px, 2vw, 28px);
  color: var(--c-deep-blue);
}
.site-nav__logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: var(--tap-min);
  margin-right: auto;
  border-radius: var(--radius-sm);
  color: var(--c-deep-blue);
  text-decoration: none;
}
.site-nav__logo:hover { text-decoration: none; }
.site-nav__logo-img,
.site-nav__logo img {
  width: auto;
  max-width: none;
  height: clamp(24px, 2.2vw, 30px);
}
.site-nav__logo-text { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

/* Section links: from 1000 px. Long labels wrap rather than push the pill wider. */
.site-nav__sections { display: none; }
@media (min-width: 1000px) {
  .site-nav__logo { margin-right: 0; }
  .site-nav__sections {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }
  .site-nav__sections > li { flex: 0 1 auto; min-width: 0; }
}
.site-nav .site-nav__section {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 10px clamp(3px, 0.5vw, 14px);
  border-radius: var(--radius-pill);
  color: var(--c-deep-blue);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-tight);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-nav .site-nav__section:hover { background: var(--c-ink-a10); color: var(--c-deep-blue); text-decoration: none; }
/* Current section: an underline, not colour alone. */
.site-nav .site-nav__section[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-heavy);
  text-underline-offset: 4px;
}

.site-nav__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}
.site-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-deep-blue);
  cursor: pointer;
  transition: var(--transition-control);
}
.site-nav__icon:hover { background: var(--c-ink-a10); color: var(--c-deep-blue); }
.site-nav__icon svg { width: 18px; height: 18px; }
.site-nav__menu-button svg { width: 20px; height: 20px; }

/* The header button keeps the default (white page) button colours whatever section the page is in. */
.site-nav__button {
  display: none;
  --btn-1-bg: var(--btn-primary-bg);
  --btn-1-fg: var(--btn-primary-fg);
  --btn-1-border: var(--btn-primary-border);
}
.site-nav__button .btn {
  padding: 9px 20px;
  font-size: clamp(13px, 1.05vw, 15px);
}
@media (min-width: 1000px) {
  .site-nav__button { display: block; }
}

/* Menu button: below 1000 px, and only when script can open the drawer. */
.site-nav__menu-button { display: none; }
.js .site-nav__menu-button { display: inline-flex; }
.site-nav__menu-button[aria-expanded="true"] { background: var(--c-ink-a10); }
.site-nav__menu-close,
.site-nav__menu-button[aria-expanded="true"] .site-nav__menu-open { display: none; }
.site-nav__menu-button[aria-expanded="true"] .site-nav__menu-close { display: block; }
@media (min-width: 1000px) {
  .js .site-nav__menu-button { display: none; }
}

/* Space under the floating pill on pages that don't start with a hero. */
.site-nav-spacer { height: calc(var(--space-24) + var(--space-3)); }

/* ── Drawer (below 1000 px) ─────────────────────────────────────────────────────── */
.site-drawer {
  margin-top: 10px;
  padding: var(--space-2) var(--space-6) var(--space-6);
  color: var(--c-deep-blue);
}
.js .site-drawer {
  display: none;
  max-height: calc(100vh - 104px);
  max-height: calc(100svh - 104px);
  max-height: var(--drawer-max-height, calc(100svh - 104px)); /* set by drawer.js: room left under the pill, utility bar included */
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Keyboard focus scrolls items this far from the drawer's edge, so their focus ring (2 px, 2 px outside) isn't clipped. */
  scroll-padding-block: var(--space-2);
}
.js .site-drawer.is-open { display: block; }
@media (min-width: 1000px) {
  .site-drawer,
  .js .site-drawer.is-open { display: none; }
}

/* Without script, below 1000 px: the pill and the drawer content sit in the page, so every section is reachable. */
@media (max-width: 999.98px) {
  .no-js .site-nav { position: relative; height: auto; }
  .no-js .site-nav-spacer { height: var(--space-8); }
}

.site-drawer__section { border-bottom: var(--border-width) solid var(--color-hairline); }
.site-drawer__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: 14px 0;
  color: var(--c-deep-blue);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-light);
  line-height: 1.1;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.site-drawer__summary::-webkit-details-marker { display: none; }
.site-drawer__summary-label { min-width: 0; }
a.site-drawer__summary--link { text-decoration: none; }
.site-drawer__summary:hover { color: var(--c-mid-blue); text-decoration: none; }
.site-drawer__summary[aria-current] { color: var(--c-mid-blue); }
.site-drawer__summary[aria-current] .site-drawer__summary-label {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-heavy);
  text-underline-offset: 5px;
}
.site-drawer__sign {
  flex: none;
  color: var(--c-blue-600);
  font-size: 26px;
  line-height: 1;
}
.site-drawer__sign::before { content: "+"; }
.site-drawer__group[open] .site-drawer__sign::before { content: "\2212"; }

.site-drawer .site-drawer__links { padding-bottom: var(--space-3); }
.site-drawer .site-drawer__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 10px 0;
  color: var(--c-deep-blue);
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-drawer .site-drawer__link:hover { color: var(--c-mid-blue); text-decoration: underline; }
.site-drawer .site-drawer__link[aria-current] { color: var(--c-mid-blue); font-weight: var(--fw-semibold); }

.site-drawer__heading {
  margin: 0;
  padding: var(--space-6) 0 10px;
  color: var(--c-mid-blue);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
}
.site-drawer .site-drawer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site-drawer .site-drawer__chip {
  max-width: 100%;
  font-size: 14px;
  font-weight: var(--fw-regular);
  overflow-wrap: anywhere;
}
.site-drawer .site-drawer__chip:hover { text-decoration: none; }

.site-drawer .site-drawer__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.site-drawer .site-drawer__action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  height: 100%;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--c-ink-a18);
  border-radius: var(--radius-pill);
  background: var(--c-grey-100);
  color: var(--c-deep-blue);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: var(--transition-control);
}
.site-drawer .site-drawer__action:hover { background: var(--c-blue-050); color: var(--c-deep-blue); text-decoration: none; }

.site-drawer__button {
  margin-top: var(--space-2);
  --btn-1-bg: var(--btn-primary-bg);
  --btn-1-fg: var(--btn-primary-fg);
  --btn-1-border: var(--btn-primary-border);
}
.site-drawer__button .btn { width: 100%; min-height: 52px; }
.site-drawer__utility:first-child .site-drawer__heading { padding-top: var(--space-2); }