/**
 * Rainbow Solar — responsive refinements.
 * Loaded LAST on every page, after styles.css / pages.css / page-specific CSS, so it only tightens
 * what's already there: no colours, content or behaviour change. Mobile-first: base rules target
 * phones (320px+), and min-width queries scale up.
 * Tested at 320, 375, 390, 430, 768, 1024 and 1440px.
 */

/* ---------- 1. Global guards: no sideways scrolling, media never wider than its box ---------- */
html { overflow-x: clip; }
body { overflow-x: clip; }
img, video, iframe, canvas { max-width: 100%; }
img { height: auto; }
.table-card { max-width: 100%; -webkit-overflow-scrolling: touch; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
p, li, td, th, dd, summary, label { overflow-wrap: break-word; }

/* ---------- 2. Fluid typography & spacing (clamp) ---------- */
h1 { font-size: clamp(1.9rem, 1.15rem + 4.1vw, 3.7rem); }
h2 { font-size: clamp(1.45rem, 1.05rem + 2.3vw, 2.4rem); }
h3 { font-size: clamp(1rem, .95rem + .3vw, 1.1rem); }
.section { padding-block: clamp(44px, 6vw + 20px, 64px); }
.section-head { margin-bottom: clamp(22px, 3vw + 10px, 36px); }
.section-head p { font-size: clamp(.95rem, .9rem + .3vw, 1.05rem); }
.container { padding-inline: clamp(16px, 3vw, 24px); }
@media (min-width: 1248px) { .container { padding-inline: 24px; } }

/* ---------- 3. Buttons: never cut off on narrow phones ---------- */
@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
  .btn--lg { padding-inline: 18px; font-size: .95rem; }
  .btn--block { padding-inline: 14px; }
  .tn-projects-cta-btn { white-space: normal; text-align: center; }
}
@media (max-width: 359px) {
  .btn--lg { font-size: .9rem; padding-inline: 12px; }
}

/* ---------- 4. Hero sections: single column on phones, roomy on desktop ---------- */
@media (max-width: 899px) {
  .lp-grid, .hero-grid, .calc-grid, .split, .consult-grid, .subsidy-grid, .emi-wrap, .app-wrap, .cta-grid, .bv-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .lp-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .lp-form, .form-card { width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 359px) {
  .lp-badges strong { font-size: 1.05rem; }
  .lp-badges span { font-size: .78rem; }
  .bill-pills { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .seg label span { padding-inline: 6px; font-size: .82rem; }
}

/* ---------- 5. Cards & grids collapse to one column on small phones ---------- */
@media (max-width: 559px) {
  .grid--3, .grid--4, .footer-grid, .footer-grid--5 { grid-template-columns: minmax(0, 1fr) !important; }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 560px) and (max-width: 899px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 6. Tables: readable on phones (scroll inside the card, never the page) ---------- */
@media (max-width: 599px) {
  .table-card table { font-size: .88rem; }
  .table-card th, .table-card td { padding: 10px 12px; }
}

/* ---------- 7. Forms (consultation, booking, calculator): full width, 16px inputs (no iOS zoom) ---------- */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
  .f input, .f select { min-height: 48px; }
  .bill-pills label span, .seg label span { min-height: 44px; }
  .form-card { padding: clamp(18px, 5vw, 28px); }
  .sm-search input { font-size: 16px !important; }
}

/* ---------- 8. EMI card, Rainbow Care+, subsidy & savings sections ---------- */
@media (max-width: 479px) {
  .size-opts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tenure-opts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .vs { gap: 8px; }
  .vs strong { font-size: clamp(1.1rem, 5vw, 1.4rem); }
  .emi-cost-row { font-size: .86rem; }
  .sch-txt strong { white-space: normal; }
}

/* ---------- 9. Footer: stacked, comfortable tap targets ---------- */
@media (max-width: 767px) {
  .footer-grid { gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
  .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
  .site-footer a { display: inline-block; padding-block: 4px; }
  .contact-list li { align-items: flex-start; }
}

/* ---------- 10. Mobile menu: collapsible groups ---------- */
.mobile-nav details.m-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; min-height: 48px; margin: 0; padding: 4px; }
.mobile-nav details.m-group > summary::-webkit-details-marker { display: none; }
.mobile-nav details.m-group > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); margin-right: 8px; }
.mobile-nav details.m-group[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.mobile-nav details.m-group[open] > summary { color: var(--blue-600); }
.mobile-nav details.m-group > a, .mobile-nav details.m-group > .m-subrow { animation: mIn .25s var(--ease) both; }
@keyframes mIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- 11. Sitemap map: legible small labels ---------- */
.sm-map .leaflet-control-attribution { font-size: 11px !important; }
@media (max-width: 600px) {
  .sm-legend { font-size: .72rem !important; }
  .sm-impact span { font-size: .7rem !important; }
  .sm-d-kpis span { font-size: .7rem; }
}

/* ---------- 12. Performance: lighter motion on phones, none when reduced motion is requested ---------- */
@media (max-width: 767px) {
  .sun-chip, .chip-float { animation: none !important; }
  .site-header { -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Mobile menu: full-screen panel with the header pinned on top ----------
   Locking page scroll (body overflow:hidden) can make the sticky header scroll out of view on phones,
   leaving page content showing above the menu. Pin the header while the menu is open and let the
   panel cover the whole screen underneath it. */
@media (max-width: 999px) {
  body.menu-open .site-header { position: fixed !important; top: 0; left: 0; right: 0; transform: none !important; background: #fff; }
  body.menu-open { padding-top: var(--header-h); }
  .mobile-nav { top: 0 !important; bottom: 0; padding-top: calc(var(--header-h) + 16px) !important; background: #fff; }
  .mobile-nav summary, .mobile-nav a { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
  .mobile-nav summary::selection, .mobile-nav a::selection, .mobile-nav summary *::selection { background: transparent; }
}