/* Mobile Overlay (SAFE-ONLY) — added as a new file and loaded last.
   Goal: fix mobile overflow + nav stacking without changing desktop behavior.
   Rollback: remove the <link> tag(s) or delete this file. */

@media (max-width: 820px) {
  /* Hard stop horizontal scroll */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Common fixed-width offenders */
  img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
  pre, code { max-width: 100%; overflow-x: auto; }

  /* Tables & wide content */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Generic container safety */
  .container, .wrap, .wrapper, .content, .page, main, section { max-width: 100%; }

  /* Make forms usable */
  input, select, textarea, button { max-width: 100%; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"],
  input[type="url"], input[type="password"], textarea, select { width: 100%; }

  /* Header / nav stacking (best-effort — won’t affect desktop) */
  header, .header, .site-header { max-width: 100%; }
  nav, .nav, .navbar, .topnav, .top-nav, .main-nav { max-width: 100%; }

  /* If a nav bar uses flex, allow wrapping */
  .nav, .navbar, .topnav, .top-nav, .main-nav, .menu, .menu-row, .nav-links, .nav-items {
    flex-wrap: wrap;
  }

  /* Prevent long menu items from forcing overflow */
  a, .nav a, .navbar a { word-break: break-word; }

  /* Dropdowns: on mobile, prefer document flow to avoid off-screen menus */
  .dropdown-menu, .submenu, .sub-menu, .menu-dropdown {
    position: static;
    float: none;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Cards/grids: make sure they can wrap */
  .grid, .cards, .card-grid, .grid-wrap {
    grid-template-columns: 1fr !important;
  }

  /* Any element explicitly set too wide should not exceed viewport */
  [style*="width:"] { max-width: 100%; }
}

/* Slightly tighter breakpoint for small phones */
@media (max-width: 480px) {
  body { font-size: 16px; } /* iOS legibility; functional */
  .btn, button, input[type="submit"] { padding: 12px 14px; }
}


/* NAV OVERLAY FIX (SAFE-ONLY): guarantee mobile menu overlays page */
@media (max-width: 860px){
  #navOverlay.nav-overlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,23,42,0.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 2147483646 !important;
    transition: opacity 180ms ease, visibility 0s linear 180ms !important;
  }
  body.nav-open #navOverlay.nav-overlay,
  body.no-scroll #navOverlay.nav-overlay{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 180ms ease !important;
  }
  /* Ensure nav is above overlay (JS also sets this inline) */
  #mainNav, nav.main-nav{ z-index: 2147483647 !important; }
}


/*
  NOTE:
  The blocks below were removed because they used aggressive !important rules that
  fought with the dedicated mobile-menu-rebuild.js controller (fixed-position portal).
  Keeping only the overlay layering guarantees (above) prevents "menu under page"
  without breaking the JS drawer behavior.
*/