/*
  Mobile header: keep the logo and the main call-to-action button on one line
  so the button never wraps onto two lines or spills out of the header bar.
  Only applies to headers that have a button; logo-only headers are untouched.
  Added 19 Oct 2026.
*/
.nav-btn-short { display: none; }

@media (max-width: 480px) {
  nav .nav-inner:has(.btn, .nav-dd-toggle) { gap: 10px; }
  nav .nav-inner:has(.btn, .nav-dd-toggle) .logo { font-size: 19px; white-space: nowrap; flex: 0 0 auto; }
  nav .nav-inner .nav-links { flex: 0 0 auto; }
  nav .nav-inner .btn,
  nav .nav-inner .nav-dd-toggle {
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 13px !important;
    font-size: 13px !important;
    line-height: 1.2;
  }
  nav .nav-inner .nav-btn-long { display: none; }
  nav .nav-inner .nav-btn-short { display: inline; }
}

@media (max-width: 360px) {
  nav:has(.btn, .nav-dd-toggle) { padding-left: 16px; padding-right: 16px; }
  nav .nav-inner:has(.btn, .nav-dd-toggle) { padding-left: 0; padding-right: 0; }
  nav .nav-inner:has(.btn, .nav-dd-toggle) .logo { font-size: 17px; }
  nav .nav-inner .btn,
  nav .nav-inner .nav-dd-toggle { padding: 8px 11px !important; font-size: 12.5px !important; }
}

@media (max-width: 340px) {
  nav .nav-inner:has(.btn, .nav-dd-toggle) { gap: 8px; }
  nav .nav-inner:has(.btn, .nav-dd-toggle) .logo { font-size: 16px; }
  nav .nav-inner .btn,
  nav .nav-inner .nav-dd-toggle { padding: 7px 9px !important; font-size: 12px !important; gap: 5px; }
}