/* =========================================================
   SAAM Foundation — mobile & responsive fixes
   Load LAST (after reveal.css). Overrides the duplicate
   .mobile-nav / .menu-toggle rules in base.css, header.css
   and pages.css, and the rules injected by main.js.
   ========================================================= */

/* 1. Never allow sideways scrolling */
html, body { overflow-x: clip; max-width: 100%; }

/* 2. Hamburger: hidden on desktop, shown whenever the desktop nav is hidden (<=1080px) */
html body .header-actions .menu-toggle { display: none !important; }
@media (max-width: 1080px) {
  html body .header-actions .menu-toggle { display: flex !important; }
}

/* 3. Mobile drawer: completely off-screen & invisible until opened */
html body .mobile-nav {
  position: fixed !important;
  top: 0 !important; bottom: 0 !important;
  left: auto !important; right: 0 !important;
  width: min(400px, 100%) !important;
  max-width: none !important;
  height: auto !important;
  display: none !important;
  flex-direction: column;
  background: #fff;
  z-index: 9999;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(110%) !important;
  visibility: hidden;
  box-shadow: none !important;
  transition: transform .35s ease, visibility 0s linear .35s, box-shadow .35s ease !important;
}
@media (max-width: 1080px) {
  html body .mobile-nav { display: flex !important; }
}
html body .mobile-nav.is-open {
  transform: translateX(0) !important;
  visibility: visible;
  /* the huge spread dims the page behind the drawer */
  box-shadow: 0 0 0 100vmax rgba(20, 14, 48, .55) !important;
  transition: transform .35s ease, visibility 0s, box-shadow .35s ease !important;
}
html body .mobile-nav-cta .btn { width: 100%; justify-content: center; }
html body .mobile-nav-cta .btn-outline { color: var(--forest-2); }

/* 4. Compact header on phones */
@media (max-width: 480px) {
  .header-inner { height: 70px; gap: 10px; }
  .brand .brand-logo { width: 40px; height: 40px; }
  .brand-text .b1, .brand-text .b2 { font-size: 17px; }
  .header-actions { gap: 6px; }
  .header-actions .btn-sm { padding: 9px 16px; font-size: 13px; }
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
}
@media (max-width: 360px) { .brand-text { display: none; } }

/* 5. Cards: inline 3-/4-column grids used to stay squeezed on phones */
@media (max-width: 1080px) {
  .vertical-rows[style] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .mv-grid[style] { grid-template-columns: 1fr !important; }
  .mv-card { padding: 28px 24px; }
}

/* 6. Floating WhatsApp button shouldn't cover content on small phones */
@media (max-width: 480px) {
  .floating-whatsapp { width: 52px !important; height: 52px !important; bottom: 16px !important; right: 16px !important; }
}