/* ══════════════════════════════════════════════════════════════════════════
   SOLARBILL — MOBILE LAYER
   Loaded last on every page. Makes every layout fluid on phones and tablets
   without touching desktop. Pairs with /mobile.js (hamburger menu).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── always-on fluid basics (harmless on desktop) ── */
html { -webkit-text-size-adjust:100%; }
img, video, iframe, svg, canvas { max-width:100%; }
img, video { height:auto; }
[style*="width"] { max-width:100%; }
table { max-width:100%; }

/* ── hamburger (hidden on desktop) ── */
.sb-burger { display:none; }
.sb-mobile-menu { display:none; }

/* ═══════════════════ TABLET & BELOW ═══════════════════ */
@media (max-width: 900px) {
  body { overflow-x:hidden; }

  /* nav: logo + essentials only; links fold into the menu */
  nav, #topNav { padding-left:14px !important; padding-right:14px !important; height:60px !important; }
  nav .nav-link, nav .nav-links > a, .nav-links a.nav-link { display:none !important; }
  .sb-burger {
    display:inline-flex !important; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px; border:1.5px solid #E6DFCF; background:#FFFDF9;
    color:#2A2318; font-size:20px; cursor:pointer; margin-left:8px; flex:0 0 auto;
  }
  .sb-mobile-menu {
    position:fixed; top:60px; left:0; right:0; z-index:9999;
    background:#FFFDF9; border-bottom:1px solid #E6DFCF; box-shadow:0 18px 40px rgba(42,35,24,.12);
    padding:10px 14px 16px; display:none; flex-direction:column; gap:4px;
  }
  .sb-mobile-menu.open { display:flex !important; }
  .sb-mobile-menu a, .sb-mobile-menu button {
    display:block; width:100%; text-align:left; padding:14px 12px; border-radius:10px;
    font-size:16px; font-weight:600; color:#2A2318 !important; text-decoration:none;
    background:transparent; border:none; font-family:inherit; cursor:pointer;
  }
  .sb-mobile-menu a:active, .sb-mobile-menu button:active { background:#FAF6EE; }
  .sb-mobile-menu .sb-cta { background:#F5A623; color:#2A2318 !important; text-align:center; margin-top:6px; }
  .sb-mobile-menu .sb-cta2 { border:1.5px solid #E6DFCF; text-align:center; }

  /* compact secondary nav buttons on phones */
  nav button, nav .btn, nav .nav-signin, nav .nav-cta, nav .nav-btn { padding:8px 12px !important; font-size:13px !important; }

  /* containers & sections */
  .wrap, .container, .inner, .hero-inner, .section-inner, .bill-section-inner, .content, .page, .app,
  [class*="-inner"], [class*="container"] { padding-left:16px !important; padding-right:16px !important; max-width:100% !important; }
  section, .hero, .steps, .installer-cta, .cta-band, .bill-section, .sec, .sc, [class*="section"] {
    padding-top:44px !important; padding-bottom:44px !important;
  }

  /* multi-column layouts collapse */
  .hero-grid, .sc-grid, .steps-grid, .stats-grid, .grid3, .grid2, .plans, .pricing-grid, .pricing,
  .feature-grid, .features, .cards, .two-col, .split, .row2, .tiles, .comparison-grid,
  [class*="grid"]:not(.chips), [class*="cols"], [class*="columns"] {
    grid-template-columns:1fr !important; gap:14px !important;
  }
  .stats, .stats-bar { grid-template-columns:1fr 1fr !important; flex-wrap:wrap; }
  .stat, .sbar { border-right:none !important; border-bottom:1px solid #E6DFCF; max-width:100% !important; }

  /* flex rows that should stack */
  .hero-inner, .bill-section-inner, .cta-inner, .split-inner, .hero-flex, .cta-row, .plan-row { flex-direction:column !important; }
  .hero-inner > *, .bill-section-inner > * { width:100% !important; max-width:100% !important; }

  /* typography */
  h1 { font-size:clamp(28px, 7.5vw, 40px) !important; line-height:1.12 !important; }
  h2 { font-size:clamp(22px, 5.6vw, 30px) !important; line-height:1.18 !important; }
  h3 { font-size:clamp(17px, 4.5vw, 21px) !important; }
  .hero p, .hero-sub, .lead, .intro-text { font-size:16px !important; }

  /* touch targets and iOS zoom prevention */
  input, select, textarea { font-size:16px !important; min-height:46px; }
  button, .btn, a.btn, [class*="btn"] { min-height:44px; }
  .chips .chip, .chip { padding:10px 14px !important; }

  /* data tables scroll instead of crushing */
  table { display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }

  /* modals / overlays fit the screen */
  .modal, .limit-box, .modal-box, .auth-box, .overlay > div, #cbOverlay > div, .lightbox {
    width:100% !important; max-width:100% !important; max-height:92vh !important; overflow-y:auto !important;
    border-radius:16px !important; padding:22px 18px !important;
  }

  /* the embedded calculator */
  #calcFrame { min-height:1150px; }

  /* videos and posters */
  video { border-radius:12px !important; }
}

/* ═══════════════════ PHONES ═══════════════════ */
@media (max-width: 480px) {
  .stats, .stats-bar { grid-template-columns:1fr 1fr !important; }
  .stat b { font-size:24px !important; }
  h1 { font-size:clamp(26px, 8.2vw, 34px) !important; }
  .hero { padding-top:36px !important; padding-bottom:36px !important; }
  .btn, a.btn, button.btn { width:100%; display:block; text-align:center; }
  nav .btn, nav button { width:auto; display:inline-flex; }
  .price { font-size:32px !important; }
  .card, .plan, .tile { padding:18px !important; }
}

/* call-back stays visible in the top bar on every phone size */
@media (max-width: 900px) {
  nav [onclick*="openCallback"] { display:inline-flex !important; align-items:center; gap:5px;
    background:#F5A623 !important; border-color:#F5A623 !important; color:#2A2318 !important;
    font-weight:800 !important; padding:8px 12px !important; }
}
@media (max-width: 480px) {
  /* short label so logo + call + sign-in + menu all fit */
  nav [onclick*="openCallback"] { font-size:0 !important; padding:8px 11px !important; }
  nav [onclick*="openCallback"]::before { content:"📞 Call"; font-size:13px; }
  nav .nav-signin, #topNavSignIn { padding:8px 10px !important; font-size:12.5px !important; }
}