/* Progressive enhancement: links remain visible if the menu script is unavailable. */
.nav-toggle,
.nav-toggle[hidden],
.main-nav[hidden] { display: none; }

@media (max-width: 40rem) {
  .site-header { position: relative; padding-bottom: 0; }
  .site-header[data-menu-ready] {
    position: sticky;
    top: 0;
    /* A dedicated strip contains the spade, clear of controls and page text. */
    padding-bottom: 24px;
  }

  .header-inner {
    min-height: 72px;
    padding-block: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 20px;
  }

  .header-logo { width: 90px; }
  .site-name { padding-block: 0; }

  .site-header[data-menu-ready] .nav-toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 0 8px 12px;
    border: 0;
    background: transparent;
    color: var(--color-navy);
    font-size: .8125rem;
    font-weight: 600;
  }

  .nav-toggle-icon {
    position: relative;
    width: 22px;
    height: 16px;
  }

  .nav-toggle-icon span {
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
  }

  .nav-toggle-icon span:nth-child(1) { top: 0; }
  .nav-toggle-icon span:nth-child(2) { top: 7px; }
  .nav-toggle-icon span:nth-child(3) { top: 14px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  .main-nav {
    flex-basis: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 6px;
    padding-block: 8px 4px;
    border-top: 1px solid var(--color-border);
    max-height: calc(100svh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main-nav a { min-height: 44px; font-size: .875rem; }
  .main-nav a::after { right: auto; width: 36px; }
  .reading-progress { top: calc(var(--reading-progress-top, 0px) - 12px); }
}

@media print {
  .nav-toggle { display: none !important; }
  .site-header { position: static; padding-bottom: 0; }
}