/* ============================================================================
   Flame Solren — responsive layer
   ----------------------------------------------------------------------------
   The Blueprint design was drawn desktop-1440 only, with every rule inline on
   the element. Inline styles beat stylesheets, so each override here targets the
   inline value via an attribute selector and uses !important. Nothing about the
   desktop design changes — these rules only engage below 1280px.
   ========================================================================== */

/* ---------- shared: the 1200px content rail becomes fluid ---------- */
@media (max-width: 1279px) {
  [style*="width:1200px"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: clamp(16px, 4vw, 40px) !important;
    padding-right: clamp(16px, 4vw, 40px) !important;
  }
  /* page-level bands carry their own 56px/72px/120px gutters */
  [style*="padding:14px 56px"],
  [style*="padding:8px 56px"],
  [style*="padding:9px 72px"],
  [style*="padding:9px 120px"] {
    padding-left: clamp(16px, 4vw, 40px) !important;
    padding-right: clamp(16px, 4vw, 40px) !important;
  }
  img { max-width: 100%; height: auto; }
}

/* ---------- tablet: 3/4/5-up grids collapse to 2 ---------- */
@media (max-width: 1024px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* footer 4-col -> 2-col */
  [style*="grid-template-columns:1.3fr 1fr 1fr 1.2fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  /* hero + calculator + any asymmetric 2-up -> single column */
  [style*="grid-template-columns:1.02fr 0.98fr"],
  [style*="grid-template-columns:1.15fr 0.85fr"],
  [style*="grid-template-columns:1.12fr 0.88fr"],
  [style*="grid-template-columns:1.05fr 0.95fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* the blueprint hero drawing is decorative — it has a fixed 545px column and
     an absolutely-positioned canvas, neither of which can reflow. Hide it and
     let the headline take the full width rather than overlap. */
  .fs-hero-art-col { display: none !important; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  /* every multi-column grid becomes a single column */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(8,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.3fr 1fr 1fr 1.2fr"],
  [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
  }
  /* space-between rows (CTA bands, section headers, footer bottom) stack */
  [style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  /* spec strips / stat rows */
  [style*="display:grid"] { gap: 14px !important; }

  /* vertical rhythm: the design's 56–100px section padding is too tall on a phone */
  [style*="padding:88px 0"], [style*="padding:84px 0"], [style*="padding:80px 0"],
  [style*="padding:72px 0"], [style*="padding:66px 0"], [style*="padding:64px 0"],
  [style*="padding:60px 0"], [style*="padding:56px 0"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* headline scale — the design's 46–60px sizes overflow small screens */
  h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(18px, 5vw, 22px) !important; }
  p, li, span, a, div { text-wrap: pretty; }

  /* utility bar: drop the email (keep phone + socials), tighten */
  .fs-util-email { display: none !important; }
  [style*="background:#0b3b57;color:#cfe0ea;font-size:13px"] { font-size: 12px !important; }

  /* announcement bar: allow the message to wrap, keep the close button reachable */
  [data-announce-bar] {
    flex-wrap: wrap !important;
    text-align: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  [data-announce-bar] [data-close-bar] {
    position: absolute !important;
    right: 10px !important;
    top: 8px !important;
  }
  [data-announce-bar] { position: relative !important; }

  /* subsidy popup: fit the viewport instead of a fixed 560px card */
  [data-notice] > div {
    width: calc(100vw - 32px) !important;
    max-width: 460px !important;
    margin: 0 16px !important;
  }
  [data-notice] { padding-top: 60px !important; align-items: flex-start !important; }

  /* tables/spec rows that were laid out as fixed columns */
  [style*="white-space:nowrap"] { white-space: normal !important; }

  /* the India map iframe needs more height once its panel stacks */
  iframe[data-map-frame] { min-height: 760px !important; }
}

/* ---------- very small phones ----------
   No rail padding override here: the clamp(16px, 4vw, 40px) above already gives
   a sensible 16px gutter at these widths, and an override that lands later in
   the cascade would desynchronise the rails from each other. */
@media (max-width: 400px) {
  [data-header] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ============================================================================
   Mobile navigation — the design never specified one for the 10-item menu.
   Below 1100px the inline nav is replaced by a hamburger + slide-down drawer.
   ========================================================================== */
.fs-burger { display: none; }

@media (max-width: 1100px) {
  /* hide the desktop nav and the header CTA (both are duplicated in the drawer) */
  [data-header] > nav { display: none !important; }
  [data-header] > a[href="contact.html"] { display: none !important; }

  .fs-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1.5px solid #dbe5e0;
    border-radius: 8px;
    background: #fff;
    color: #0b3b57;
    cursor: pointer;
    flex-shrink: 0;
  }
  .fs-burger:focus-visible { outline: 3px solid #e1740c; outline-offset: 2px; }

  [data-header] { gap: 12px; }
  [data-header] img { height: 36px !important; }

  .fs-drawer {
    position: fixed;
    left: 0; right: 0;
    top: var(--fs-drawer-top, 64px);
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e1e8e4;
    padding: 8px clamp(16px, 4vw, 32px) 32px;
    overflow-y: auto;
    z-index: 90;
    display: none;
    -webkit-overflow-scrolling: touch;
  }
  .fs-drawer[data-open] { display: block; }
  .fs-drawer a {
    display: block;
    padding: 15px 2px;
    border-bottom: 1px solid #eef3ee;
    color: #1e2a2f;
    text-decoration: none;
    font: 500 16.5px 'Lexend', sans-serif;
  }
  .fs-drawer a[data-current] { color: #0b3b57; border-left: 3px solid #e1740c; padding-left: 12px; }
  .fs-drawer .fs-drawer-cta {
    display: block;
    margin-top: 20px;
    background: #e1740c;
    color: #fff;
    text-align: center;
    border: 0;
    border-radius: 8px;
    padding: 15px 20px;
    font: 600 16px 'Lexend', sans-serif;
  }
  body[data-fs-locked] { overflow: hidden; }
}

/* ---------- touch devices: the design's hover-only lifts never fire ---------- */
@media (hover: none) {
  /* make sure nothing depends on hover to be readable — the inline style-hover
     rules only add lift/shadow, so we simply give cards a resting affordance */
  a[style*="border:1.5px solid #dbe5e0"],
  a[style*="border:2px solid #0b3b57"] {
    box-shadow: 0 2px 10px rgba(11, 59, 87, 0.06);
  }
}

/* ---------- print ---------- */
@media print {
  [data-announce-bar], [data-notice], .fs-burger, .fs-drawer { display: none !important; }
}

/* ---------- fixed-width rails other than the main 1200px one ----------
   (article rails, popup cards, inset panels). Enumerated because each value is
   inline on the element and attribute selectors need the literal string. */
@media (max-width: 1279px) {
  [style*="width:820px"], [style*="width:760px"], [style*="width:660px"],
  [style*="width:560px"], [style*="width:520px"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* same gutter as the main rail, so titles line up on every page */
    padding-left: clamp(16px, 4vw, 40px) !important;
    padding-right: clamp(16px, 4vw, 40px) !important;
  }
}

/* ---------- flex rows must wrap on small screens ----------
   Marquees are deliberately wider than the viewport (that is how they scroll)
   and are clipped by their own overflow:hidden parent — never wrap those. */
@media (max-width: 900px) {
  [style*="display:flex"][style*="gap:"]:not([data-marquee]):not([data-marquee] *):not([data-social]) {
    flex-wrap: wrap !important;
  }
  /* calculator mode tabs + provider chips */
  [style*="display:flex;gap:10px"] > * { flex: 0 1 auto !important; }
}

/* ============================================================================
   Cross-page alignment
   ----------------------------------------------------------------------------
   Every page left-aligns its content to the 1200px rail, EXCEPT the blog article,
   whose 660px column the design centres. Side by side that reads as "some pages
   are middle-aligned, some are side-aligned". Anchor the narrow column to the
   same left edge as the rail so titles line up across the whole site, while
   keeping the 660px measure for comfortable reading.
   Clamped at 0, so on narrow screens it simply fills the band as before.
   ========================================================================== */
[style*="width:660px;margin:0 auto"] {
  margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
  margin-right: auto !important;
}