/* The Sunday Issue menu on the Veterans & Responders pages (/veterans/, /veterans/faces/, /veterans/tell-us/).
   Scoped: every selector starts at .si-menu, or at the site header that holds one. The wrapper is a zero-height block
   after the section nav, and the control and panel are absolutely placed, so the phone header and hero do not reflow.
   Phone widths only (the pages' own 860 px phone header). Desktop keeps the header's The Sunday Issue link.
   Markup: the wrapper carries the hidden attribute, so nothing shows if this file fails to load. Without JavaScript the
   control is a details/summary disclosure; the page script swaps it for a button with aria-expanded. */
.si-menu,
.si-menu[hidden] { display: none; }

@media (max-width: 860px) {
  .si-menu,
  .si-menu[hidden] {
    display: block;
    position: relative;
    height: 0;
    margin: 0;
    padding: 0;
  }
  /* The strip scrolls far enough that its last link clears the 44 px control. */
  .site-head:has(> .si-menu) nav.section-nav ul { padding-right: 64px; scroll-padding-right: 64px; }

  .si-menu .si-d { display: block; margin: 0; padding: 0; }
  .si-menu .si-burger {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f7f4ee;
    border: 0;
    border-left: 1px solid rgba(31, 58, 77, 0.22);
    border-radius: 0;
    color: #0B1F3A;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .si-menu summary.si-burger::-webkit-details-marker { display: none; }
  .si-menu summary.si-burger::marker { content: ""; }
  .si-menu .si-burger:focus { outline: none; }
  .si-menu .si-burger:focus-visible {
    outline: 3px solid #b2432a;
    outline-offset: -3px;
  }
  .si-menu .si-bars,
  .si-menu .si-bars::before,
  .si-menu .si-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #0B1F3A;
    position: relative;
  }
  .si-menu .si-bars::before,
  .si-menu .si-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .si-menu .si-bars::before { top: -6px; }
  .si-menu .si-bars::after { top: 6px; }
  .si-menu .si-d[open] .si-bars,
  .si-menu .si-burger[aria-expanded="true"] .si-bars { background: transparent; }
  .si-menu .si-d[open] .si-bars::before,
  .si-menu .si-burger[aria-expanded="true"] .si-bars::before { top: 0; transform: rotate(45deg); }
  .si-menu .si-d[open] .si-bars::after,
  .si-menu .si-burger[aria-expanded="true"] .si-bars::after { top: 0; transform: rotate(-45deg); }

  .si-menu .si-panel {
    position: absolute;
    z-index: 60;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 20px 14px;
    background: #f7f4ee;
    border-bottom: 1px solid rgba(31, 58, 77, 0.12);
    box-shadow: 0 10px 18px rgba(8, 20, 36, 0.18);
  }
  .si-menu .si-panel[hidden] { display: none; }
  .si-menu .si-panel .m-kicker {
    margin: 14px 4px 4px;
    color: #B22234;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .si-menu .si-panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(31, 58, 77, 0.1);
    color: #0B1F3A;
    font-family: Fraunces, Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
  }
  .si-menu .si-panel a:focus-visible { outline: 3px solid #b2432a; outline-offset: -3px; }
}