/* Boditrax website - header breakpoints
 * The full desktop navigation (eight top-level items, language menu and Demonstration button) needs about 1280px
 * in longer languages such as Spanish and French. Help Centre is in the Resources menu since 6 Nov 2026. Below 80rem the header therefore uses the Menu button and the
 * stacked navigation that phones and tablets already use; boditrax.js switches menu behaviour at the same width
 * (the "desktop" media query). Between 80rem and 96rem the top-level items are spaced a little more tightly.
 * The selectors target the Tailwind lg: utilities in _Header.cshtml, so keep the two in step. */

@media (64rem <= width < 80rem) {
  header nav.lg\:block,
  header .lg\:flex.lg\:items-center { display: none; }
  header button[aria-controls="mobile-nav"] { display: inline-block; }
  header #mobile-nav:not([hidden]) { display: block; }
}

@media (80rem <= width < 96rem) {
  header .container-page > .h-18 { column-gap: 1rem; }
  header nav.lg\:block > ul { gap: 0; }
  header nav.lg\:block > ul > li > :is(a, button) { padding-inline: 0.5rem; }
}