/**
 * Solaria — Public Pages Mobile CSS
 * Loaded by all public (non-app) pages.
 * Fixes every layout, font size, overflow, and spacing issue on mobile.
 */

/* ── Prevent all horizontal overflow ── */
html, body { overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }

/* ── Base font size prevents iOS zoom on inputs ── */
input, textarea, select { font-size: 16px !important; }

@media (max-width: 1024px) {
  .container { padding: 0 20px; }
}

@media (max-width: 768px) {
  /* ── Container ── */
  .container { padding: 0 16px !important; max-width: 100% !important; }

  /* ── Typography ── */
  h1, .display-xl, .display-lg { font-size: clamp(26px, 9vw, 44px) !important; letter-spacing: -1px !important; }
  h2, .display-md, .display-sm { font-size: clamp(20px, 7vw, 30px) !important; letter-spacing: -0.5px !important; }
  h3 { font-size: clamp(16px, 5vw, 20px) !important; }
  p, li { font-size: 15px !important; line-height: 1.7 !important; }
  .lead { font-size: 15px !important; }
  .section-sub, .hero-sub { font-size: 14px !important; }

  /* ── Sections ── */
  .section { padding: 56px 0 !important; }
  .section-sm { padding: 40px 0 !important; }
  .page-header { padding: 64px 0 40px !important; }

  /* ── Navigation ── */
  #nav { height: 60px !important; }
  .nav-inner { padding: 0 16px !important; height: 60px !important; }
  .nav-logo { font-size: 16px !important; }
  .nav-links, .nav-actions .btn:not(:last-child) { display: none !important; }
  #hamburger { display: flex !important; }

  /* Mobile menu */
  #mobile-menu { top: 60px !important; }
  .mobile-nav-links a { font-size: 16px !important; padding: 14px 0 !important; }
  .mobile-nav-cta { padding: 16px !important; gap: 10px; display: flex; flex-direction: column; }

  /* ── Hero sections ── */
  .hero-inner { grid-template-columns: 1fr !important; padding: 48px 0 40px !important; gap: 28px !important; }
  .hero-h1, .hero-title { font-size: clamp(28px, 10vw, 46px) !important; letter-spacing: -1.5px !important; line-height: 1.05 !important; }
  .hero-sub { font-size: 15px !important; margin-bottom: 24px !important; }
  .hero-ctas { flex-wrap: wrap !important; gap: 10px !important; }
  .hero-ctas .btn { flex: 1 1 140px !important; text-align: center !important; justify-content: center !important; min-width: 130px !important; }
  .hero-stats { flex-wrap: wrap !important; gap: 14px !important; }
  .hero-stat { min-width: 90px !important; }
  .hero-stat-num { font-size: 22px !important; }
  .phone-wrap, .hero-phone { display: none !important; }

  /* ── Grids → single column ── */
  .grid-2, .grid-3, .grid-4, .features-grid, .how-grid,
  .safety-grid, .testimonials-grid, .team-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* ── Cards ── */
  .card, .feature-card, .safety-card, .how-card { padding: 20px 18px !important; border-radius: 16px !important; }

  /* ── Pricing ── */
  .pricing-grid, .pricing-cards, .pcard-grid { grid-template-columns: 1fr !important; max-width: 400px !important; margin: 0 auto !important; gap: 14px !important; }
  .pcard-featured, .pricing-card.featured { transform: none !important; }
  .billing-toggle { flex-wrap: wrap !important; gap: 6px !important; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-bottom { flex-direction: column !important; gap: 10px !important; text-align: center !important; }

  /* ── Buttons ── */
  .btn-xl { padding: 14px 24px !important; font-size: 15px !important; }
  .btn-lg { padding: 12px 20px !important; font-size: 14px !important; }

  /* ── CTA box ── */
  .cta-box { padding: 32px 20px !important; border-radius: 20px !important; }

  /* ── Page header ── */
  .page-header-grid { display: none; }

  /* ── FAQ ── */
  .faq-q { font-size: 14px !important; }

  /* ── Tables → scroll ── */
  .price-compare { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .price-table { min-width: 480px; }

  /* ── Blog / articles ── */
  .article-h1 { font-size: clamp(24px, 8vw, 40px) !important; letter-spacing: -0.8px !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .related-grid { grid-template-columns: 1fr !important; }
  .article-body p { font-size: 15px !important; }
  .article-body h2 { font-size: clamp(18px, 6vw, 26px) !important; }

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-cards { grid-template-columns: 1fr !important; }
  .email-list { gap: 8px; }
  .email-item { flex-direction: column !important; align-items: flex-start !important; }

  /* ── Parents page ── */
  .p-section-inner { grid-template-columns: 1fr !important; gap: 20px !important; }
  .p-section-label { position: static !important; }
  .data-table { font-size: 12px !important; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .contact-box { grid-template-columns: 1fr !important; }

  /* ── Safety page ── */
  .safety-hero { padding: 64px 0 40px !important; }
  .crisis-grid { grid-template-columns: 1fr !important; }

  /* ── About page ── */
  .team-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Divider ── */
  .divider { margin: 0 16px !important; }

  /* ── Tawk.to: allow on desktop, keep on mobile but fix z-index so close button works ── */
  #tawk-bubble-container, iframe[src*="tawk.to"] {
    bottom: 60px !important;  /* above any bottom nav if present */
    z-index: 999 !important;
  }

  /* ── Fix nav overlapping content ── */
  .page-wrapper { padding-top: 0 !important; }
}

@media (max-width: 480px) {
  /* ── Tighter layout ── */
  .container { padding: 0 14px !important; }
  .section { padding: 44px 0 !important; }
  h1, .hero-h1 { font-size: clamp(24px, 10vw, 36px) !important; }

  /* ── Stats single col ── */
  .stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Footer full width ── */
  .footer-grid { grid-template-columns: 1fr !important; }

  /* ── Features: tighten ── */
  .feature-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }

  /* ── Eyebrow text ── */
  .eyebrow, .section-label, .article-tag, .blog-eyebrow { font-size: 10px !important; }

  /* ── Pricing note ── */
  .pricing-note { padding: 16px !important; border-radius: 14px !important; }
}

@media (max-width: 360px) {
  .hero-h1, h1 { font-size: 22px !important; }
  .hero-ctas .btn { min-width: 100% !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PWA STANDALONE MODE
   ═══════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  html, body {
    background: #07050f !important;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* Push nav down for iOS status bar */
  #nav {
    background: #07050f !important;
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 -300px 0 300px #07050f;
  }
  /* Body padding for safe areas */
  body {
    padding-left:  env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  /* Cookie banner not needed in PWA */
  #cookie-banner { display: none !important; }
}

/* ── Solaria Mobile Responsiveness Fixes ────────────────────────── */

/* Prevent text overflow everywhere */
* { word-break: break-word; -webkit-text-size-adjust: 100%; }

/* Partners page mobile */
@media (max-width: 640px) {
  .lifeline-body { grid-template-columns: 1fr !important; gap: 20px !important; padding: 20px !important; }
  .lifeline-inner { flex-direction: column !important; gap: 16px !important; }
  .badge-strip { grid-template-columns: 1fr !important; text-align: center; }
  .badge-circle { margin: 0 auto; }
  .partners-grid { grid-template-columns: 1fr !important; }
  .partner-cta { padding: 32px 20px !important; }
  .pb-items { gap: 8px !important; }
  .pb-item { font-size: 11px !important; padding: 5px 10px !important; }
}

/* Login page mobile */
@media (max-width: 768px) {
  .left-panel { display: none !important; }
  .right-panel { padding: 28px 20px !important; align-items: flex-start !important; padding-top: 36px !important; }
  .auth-box { max-width: 100% !important; }
  .otp-digit { width: 44px !important; height: 54px !important; font-size: 20px !important; }
}

/* Blog mobile */
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-hero { padding: 80px 20px 40px !important; }
  .related-card { padding: 16px !important; }
}

/* General container overflow fix */
.container { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Fix nav overflow on small screens */
@media (max-width: 480px) {
  .nav-inner { padding: 0 16px !important; }
  .nav-links { display: none !important; }
  .nav-logo-text { font-size: 18px !important; }
}

/* Fix footer on very small screens */
@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center; }
}

/* Ensure buttons are tappable */
.btn, button, a.btn { min-height: 44px; }

/* Fix hero stats wrapping */
@media (max-width: 480px) {
  .hero-stats { flex-wrap: wrap !important; gap: 16px 24px !important; }
}


/* ── Contrast enforcement on mobile ─────────────────────────────── */
/* Ensure text meets WCAG AA on small screens where squinting is common */
@media (max-width: 768px) {
  /* Blog article body text */
  .article-body p,
  .article-body li {
    color: rgba(240,236,255,0.72) !important;
  }
  /* Section descriptions */
  .blog-sub,
  .blog-card-desc,
  .press-sub {
    color: rgba(240,236,255,0.68) !important;
  }
  /* Feature descriptions */
  .feature-desc,
  .how-step-desc {
    color: rgba(240,236,255,0.68) !important;
  }
}