/*
 * The responsive menu's look. Above the phone width the button is hidden and the nav is shown as the page draws it; at the phone width
 * (560px, the header's own phone line) the button is shown and the nav stays hidden until the button opens it, then it is a full-width
 * panel under the header row, one link per line, each at least 44px high.
 * No colour or face lives here: colours come from the site's own --brand-* properties, and focus is drawn in currentColor.
 * Placement in a wrapping flex header: the button takes order 3 (after the header's actions, order 2) and pulls toward them by
 * --menu-pull (default -1.25rem, against a 1.5rem column gap), so the phone row reads: the mark, then the actions and the button together
 * on the right. The opened panel takes order 4 and a full row. A page may set --menu-pull for a different gap.
 * Nothing moves: no transition or animation, and both motion locks hold that.
 */
[data-menu-button] { display: none; }

@media (max-width: 560px) {
  [data-menu-button] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 3;
    margin-inline-start: var(--menu-pull, -1.25rem);
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0 .5rem;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--brand-ink);
    background: var(--brand-surface);
    border: 1px solid var(--brand-grid);
    border-radius: 999px;
    cursor: pointer;
  }
  [data-menu-button][aria-expanded="true"] { border-color: var(--brand-ink); }
  nav[data-menu] { order: 4; flex-basis: 100%; }
  nav[data-menu]:not([data-open]) { display: none; }
  nav[data-menu][data-open] { display: block; border-top: 1px solid var(--brand-grid); padding-block: .25rem; }
  nav[data-menu] ul { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; list-style: none; }
  nav[data-menu] li { margin: 0; }
  nav[data-menu] a { display: flex; align-items: center; width: 100%; min-height: 2.75rem; padding: .5rem .25rem; }
  nav[data-menu] a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
}

[data-menu-button]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.menu-btn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-menu-button], nav[data-menu], nav[data-menu] a { transition: none; animation: none; }
}
:root[data-motion="off"] [data-menu-button], :root[data-motion="off"] nav[data-menu], :root[data-motion="off"] nav[data-menu] a { transition: none; animation: none; }