/* Shared navigation typography for every language and resource page. */
.header {
  --navigation-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--navigation-font);
  gap: 18px;
}
.header #navigation {
  gap: clamp(12px, 1.3vw, 22px);
}
.header #navigation a {
  font-family: var(--navigation-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.015em;
  text-transform: none;
  padding: 12px 0;
  border-bottom: 1px solid transparent;
}
.header #navigation a[aria-current="page"] {
  padding-bottom: 12px;
  border-bottom-color: currentColor;
}
.header .header-book {
  font-family: var(--navigation-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.45;
}
.header #language,
.header .resource-languages a {
  font-family: var(--navigation-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .035em;
}
.header .resource-languages a { padding: 8px 0; border: 0; }
.header .header-actions { gap: 14px; }
.header .menu-toggle { width: 44px; height: 44px; flex-shrink: 0; }
.header .menu-toggle span { width: 22px; margin: 7px auto; }

@media (max-width: 1280px) {
  .header #navigation {
    display: none;
    position: absolute;
    top: 86px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 14px 30px 22px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--teal-dark);
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
  }
  .header #navigation.open { display: flex; }
  .header #navigation a,
  .header #navigation a[aria-current="page"] {
    font-size: 17px;
    padding: 13px 0;
    white-space: normal;
    border-bottom: 1px solid #ffffff26;
  }
  .header #navigation a[aria-current="page"] { font-weight: 650; }
  .header .menu-toggle { display: block; }
  .header .header-actions { margin-left: auto; }
}
@media (max-width: 900px) {
  .header #navigation { top: 76px; max-height: calc(100dvh - 76px); }
}
@media (max-width: 650px) {
  .header { padding: 0 12px; gap: 8px; }
  .header .logo { flex-basis: 64px; }
  .header .logo img { width: 64px; height: 52px; }
  .header .header-actions { gap: 8px; }
  .header .header-book { font-size: 11px; padding: 10px; }
  .header #language { padding: 8px 0; }
  .header .resource-languages { gap: 8px !important; }
  .header #navigation { top: 72px; padding: 12px 24px 20px; max-height: calc(100dvh - 72px); }
}