/* =========================================================================
   RFPS Homepage v2 — Mobile Responsive Layer
   -------------------------------------------------------------------------
   The desktop design (src/homepage-v2.jsx) uses inline React styles, which
   have the highest CSS specificity. To make the design mobile-responsive
   WITHOUT touching the source component code, we override those inline
   styles via attribute selectors (`[style*="..."]`) + `!important` inside
   media queries.

   Attribute selectors match React's serialized inline `style` attribute —
   e.g. `gridTemplateColumns:'1fr 1.2fr'` becomes
   `style="grid-template-columns: 1fr 1.2fr; ..."` in the DOM, and can be
   reliably targeted with `[style*="grid-template-columns"]`.

   Breakpoints:
     • <= 1024px  — tablet (narrower gutters, tighter type)
     • <= 760px   — mobile (single-column, hamburger nav)
     • <= 420px   — phone (further type + padding scale)
   ========================================================================= */

/* ---------- Global — always on ---------- */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* Prevent horizontal jog from marquee, floating leaves, etc. */
#homepage-scroll { overflow-x: clip; }

/* ==========================================================================
   TABLET (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Slightly tighter gutters on inner rails */
  #root [style*="max-width: 1200px"],
  #root [style*="max-width:1200px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Two-column layouts collapse gap */
  #root [style*="grid-template-columns: 1fr 1.2fr"],
  #root [style*="grid-template-columns: 1fr 1.4fr"],
  #root [style*="grid-template-columns: 1fr 1.5fr"],
  #root [style*="grid-template-columns: 1fr 2fr"],
  #root [style*="grid-template-columns: 1fr 1fr"] {
    gap: 36px !important;
  }

  /* Nav: hide the "Client Portal" button label a bit sooner so items fit */
  #root [data-nav-desktop] { gap: 20px !important; }
}

/* ==========================================================================
   MOBILE (<= 760px)  — the main pass
   ========================================================================== */
@media (max-width: 760px) {

  /* ---------- Global inner-rail padding ---------- */
  #root [style*="max-width: 1200px"],
  #root [style*="max-width:1200px"],
  #root [style*="max-width: 880px"],
  #root [style*="max-width: 860px"],
  #root [style*="max-width: 720px"],
  #root [style*="max-width: 760px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Section vertical rhythm — tighten 110px verticals to 64px */
  #root section[style*="padding: 110px 0"],
  #root section[style*="padding:110px 0"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* ---------- TOP EMERGENCY BAR ---------- */
  /* Stack label + phone; still readable. */
  #root [style*="max-width: 1200px"][style*="padding: 8px 24px"] {
    padding: 8px 18px !important;
    gap: 10px !important;
    font-size: 11px !important;
  }

  /* ---------- NAV ---------- */
  /* Hide desktop nav + Client Portal button; show hamburger. */
  #root [data-nav-desktop] { display: none !important; }
  #root [data-nav-cta] { display: none !important; }
  #root [data-nav-hamburger] { display: flex !important; }
  #root [data-nav-drawer] { display: flex !important; }

  #root [data-nav-inner] {
    padding: 14px 18px !important;
    gap: 12px !important;
  }

  /* ---------- HERO ---------- */
  /* Reduce vertical padding, letting the shorter H1 sit closer to the fold. */
  #root section[style*="min-height: 720px"] {
    min-height: 0 !important;
  }
  #root section[style*="min-height: 720px"] > div[style*="padding: 110px 24px 90px"] {
    padding: 76px 18px 140px !important;
  }

  /* H1 — 108px on desktop scales to 44px */
  #root h1[style*="font-size: 108px"] {
    font-size: 44px !important;
    max-width: none !important;
    letter-spacing: -0.02em !important;
  }
  /* Hero eyebrow row wraps */
  #root [style*="animation: slideRight"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }
  #root [style*="animation: slideRight"] span[style*="letter-spacing: 0.36em"],
  #root [style*="animation: slideRight"] span[style*="letter-spacing: 0.28em"] {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }

  /* Hero body copy */
  #root section[style*="min-height: 720px"] p[style*="font-size: 18px"] {
    font-size: 15px !important;
    margin-top: 22px !important;
  }
  /* Hero CTAs — stack, full width */
  #root section[style*="min-height: 720px"] [style*="margin-top: 40px"][style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  #root section[style*="min-height: 720px"] button[style*="padding: 18px 30px"] {
    padding: 16px 22px !important;
    justify-content: center !important;
    font-size: 12px !important;
  }
  /* Hero social proof (avatar cluster) — sits under CTAs */
  #root section[style*="min-height: 720px"] [style*="margin-left: 12px"][style*="opacity: 0.85"] {
    margin-left: 0 !important;
    margin-top: 6px !important;
  }

  /* Hero floating decorative leaf — smaller & pushed off */
  #root section[style*="min-height: 720px"] [style*="animation: float"] svg {
    width: 160px !important;
    height: auto !important;
  }

  /* Hide the hero grid overlay noise on small screens for perf */
  #root section[style*="min-height: 720px"] > div[style*="background-size: 80px 80px"] {
    background-size: 40px 40px !important;
    opacity: 0.5 !important;
  }

  /* Certification marquee: keep it, but tighten */
  #root [style*="animation: marquee"] { gap: 40px !important; }
  #root [style*="animation: marquee"] > div { gap: 40px !important; padding-right: 40px !important; }

  /* ---------- STATS STRIP ---------- */
  #root section[style*="background: rgb(11, 33, 58)"] [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #root section[style*="background: rgb(11, 33, 58)"] [style*="grid-template-columns: repeat(4"] > div {
    padding: 28px 18px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  #root section[style*="background: rgb(11, 33, 58)"] [style*="grid-template-columns: repeat(4"] > div [style*="font-size: 52px"] {
    font-size: 36px !important;
  }
  #root section[style*="background: rgb(11, 33, 58)"] [style*="grid-template-columns: repeat(4"] > div [style*="font-size: 40px"] {
    font-size: 28px !important;
    white-space: normal !important;
  }

  /* ---------- SERVICES ---------- */
  /* Header row: 2-col → stack */
  #root section#services [style*="grid-template-columns: 1fr 1fr"][style*="align-items: flex-end"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }
  /* H2 — 68px → 40px */
  #root section#services h2[style*="font-size: 68px"] { font-size: 40px !important; }

  /* Split accordion → stack */
  #root section#services [style*="grid-template-columns: 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 0 !important;
  }
  /* Accordion button rows */
  #root section#services button[style*="padding: 22px 26px"] {
    padding: 18px 18px !important;
    gap: 14px !important;
  }
  #root section#services button[style*="padding: 22px 26px"] > div[style*="font-size: 22px"],
  #root section#services button[style*="padding: 22px 26px"] div[style*="font-size: 22px"] {
    font-size: 17px !important;
  }
  /* Detail panel — smaller headline, single-col bullets */
  #root section#services [style*="padding: 44px 44px 40px"] {
    padding: 32px 22px 32px !important;
  }
  #root section#services h3[style*="font-size: 40px"] { font-size: 28px !important; }
  #root section#services [style*="grid-template-columns: 1fr 1fr"][style*="gap: 8px"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ---------- PROCESS ---------- */
  #root section#process [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Kill the horizontal connecting line on mobile */
  #root section#process [style*="grid-template-columns: repeat(4"] > div[style*="position: absolute"][style*="top: 30px"] {
    display: none !important;
  }
  #root section#process h2[style*="font-size: 60px"] { font-size: 38px !important; }

  /* ---------- PORTAL ---------- */
  #root section#portal [style*="grid-template-columns: 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  #root section#portal h2[style*="font-size: 64px"] { font-size: 38px !important; }
  #root section#portal p[style*="font-size: 16px"] { font-size: 14px !important; }

  /* Portal CTA row: stack */
  #root section#portal [style*="margin-top: 40px"][style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #root section#portal [style*="margin-top: 40px"][style*="display: flex"] button {
    padding: 14px 20px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ---------- COVERAGE ---------- */
  #root section#coverage [style*="grid-template-columns: 1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Sticky sidebar unsticks on mobile */
  #root section#coverage [style*="position: sticky"][style*="top: 100px"] {
    position: static !important;
  }
  #root section#coverage h2[style*="font-size: 52px"] { font-size: 34px !important; }

  /* ---------- INDUSTRIES ---------- */
  /* First outer 2-col grid */
  #root [style*="grid-template-columns: 1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Industries inner 2-col list → single col */
  #root [style*="grid-template-columns: repeat(2, 1fr)"][style*="border-top: 1px solid"] {
    grid-template-columns: 1fr !important;
  }
  #root [style*="grid-template-columns: repeat(2, 1fr)"][style*="border-top: 1px solid"] > div {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Industries h2 */
  #root h2[style*="font-size: 48px"] { font-size: 32px !important; }

  /* ---------- TESTIMONIALS ---------- */
  #root [style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  #root blockquote[style*="font-size: 32px"] { font-size: 22px !important; }

  /* ---------- FAQ ---------- */
  #root h2[style*="font-size: 52px"] { font-size: 32px !important; }
  #root button[style*="padding: 22px 0"] > span[style*="font-size: 17px"] {
    font-size: 15px !important;
  }

  /* ---------- CTA ---------- */
  #root section#contact > div[style*="padding: 110px 24px"] {
    padding: 72px 18px !important;
  }
  #root section#contact h2[style*="font-size: 84px"] { font-size: 42px !important; }
  #root section#contact p[style*="font-size: 17px"] { font-size: 15px !important; }
  #root section#contact [style*="margin-top: 40px"][style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  #root section#contact [style*="margin-top: 40px"][style*="display: flex"] button,
  #root section#contact [style*="margin-top: 40px"][style*="display: flex"] a {
    padding: 16px 22px !important;
    justify-content: center !important;
  }
  #root section#contact [style*="margin-top: 30px"][style*="display: flex"] {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 22px !important;
  }

  /* ---------- FOOTER ---------- */
  #root footer [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  #root footer [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] > div:first-child {
    grid-column: 1 / -1 !important;
  }
  #root footer [style*="padding: 70px 24px 30px"] { padding: 48px 18px 24px !important; }
  #root footer [style*="border-top: 1px solid rgba(255, 255, 255, 0.08)"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* ---------- BOOKING MODAL ---------- */
  #root [style*="max-width: 880px"][style*="grid-template-columns: 320px 1fr"] {
    grid-template-columns: 1fr !important;
    max-height: 96vh !important;
  }
  #root [style*="max-width: 880px"][style*="grid-template-columns: 320px 1fr"] > div:first-child {
    padding: 20px 20px 16px !important;
  }
  #root [style*="max-width: 880px"][style*="grid-template-columns: 320px 1fr"] > div:last-child {
    padding: 22px 20px !important;
    min-height: 0 !important;
  }
  /* Modal service tile grid */
  #root [style*="max-width: 880px"] [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Modal step indicator: hide the extra vertical list on small screens */
  #root [style*="max-width: 880px"] > div:first-child > div[style*="flex-direction: column"][style*="gap: 12px"] {
    display: none !important;
  }
}

/* ==========================================================================
   PHONE (<= 420px)
   ========================================================================== */
@media (max-width: 420px) {
  #root [style*="max-width: 1200px"],
  #root [style*="max-width:1200px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Even smaller headlines */
  #root h1[style*="font-size: 108px"] { font-size: 38px !important; }
  #root section#services h2[style*="font-size: 68px"] { font-size: 34px !important; }
  #root section#process h2[style*="font-size: 60px"] { font-size: 32px !important; }
  #root section#portal h2[style*="font-size: 64px"] { font-size: 32px !important; }
  #root section#contact h2[style*="font-size: 84px"] { font-size: 36px !important; }

  /* Top emergency bar — hide subtitle on very narrow */
  #root [style*="max-width: 1200px"][style*="padding: 8px"] span[style*="opacity: 0.9"] {
    display: none !important;
  }

  /* Nav padding */
  #root [data-nav-inner] { padding: 12px 14px !important; }

  /* Section vertical rhythm even tighter */
  #root section[style*="padding: 110px 0"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

/* ==========================================================================
   Touch-target hygiene — larger tap zones for all buttons/links on touch
   devices, regardless of viewport size.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  #root a, #root button { min-height: 44px; }
}