/* Mobile fixes 2026-09-29 — hamburger reachable at <=768px, tap targets >=44px, no
   horizontal overflow. Loaded AFTER assets/combined.min.css on purpose: the bundle already
   has three merged, conflicting @media(max-width:768px) header blocks plus one that clips
   overflow instead of fixing it (see pm/MOBILE-AUDIT-2026-09-29.md, motoristi.eu section).
   Keep this file separate from combined.min.css — do not fold it back in. */

@media (max-width: 768px) {
  /* Root cause of the clipped hamburger: #settings-btn carries an inline style="display:flex"
     (index.html ~line 330) that none of the bundle's ".header-btn" hide rules match (wrong
     class name), so it always renders in .header-right at ~118px wide. Combined with
     .login-btn and #header-user-info, that pushes .mobile-menu-btn past the 390px edge, where
     .modern-header's overflow-x:hidden clips it out of reach instead of wrapping it.
     Its language/theme controls are already duplicated inside the hamburger drawer itself
     (.mobile-menu .mobile-menu-controls), so hiding the header copy on mobile loses nothing
     reachable only from here except zoom/text-size, which stay available on desktop. */
  .settings-btn,
  .settings-dropdown {
    display: none !important;
  }

  /* A later !important rule further down combined.min.css re-widens this button to
     padding:10px 20px / font-size:1rem, undoing every earlier mobile shrink in that same
     file. This file loads after it, so at equal specificity this wins on source order. */
  .login-btn {
    padding: 6px 10px !important;
    font-size: 13px !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  .header-left {
    min-width: 0;
  }

  .header-right {
    min-width: 0;
    gap: 6px;
  }

  .mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .header-right {
    gap: 4px;
  }
}