/* Header/footer content reflow; joined-browser width gates are pending.
   Only shell elements are affected; original styles.css stays frozen.
   Accepted <=680px visibility and geometry remain unchanged. */
@media (min-width: 681px) {
  .site-header,
  .site-footer {
    flex-wrap: wrap;
  }

  .site-header > nav,
  .site-footer > nav {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .site-header {
    row-gap: 16px;
  }

  .site-footer > .footer-note {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Keep Privacy's popup inside the whole navigation row when links wrap. */
  .site-footer > nav {
    position: relative;
  }

  .site-footer .privacy-note {
    position: static;
  }

  .site-footer .privacy-note > p {
    right: 0;
    bottom: calc(100% + 10px);
    width: min(260px, 100%);
    max-width: 100%;
  }
}

/* Independent shell breakpoint; 960/961 must be included in integration QA.
   8px of vertical room contains the existing 2px + 6px focus outline.
   This can slightly increase the header height in the tablet range. */
@media (min-width: 681px) and (max-width: 960px) {
  .site-header {
    column-gap: 16px;
    padding-block: 8px;
  }

  .site-header > nav {
    margin-left: auto;
  }
}