/* ============================================================
   CWEN sitewide mobile responsive overrides
   Loaded on every page after the inline <style> block, so these
   rules win on conflicts.
   Last updated: 2026-05-09
   ============================================================ */

/* ---------- 1. Stop horizontal scrolling everywhere ---------- */
html, body { overflow-x: hidden; }
body { max-width: 100vw; }

img, video, iframe, svg:not([class*="w-"]) { max-width: 100%; height: auto; }

/* ---------- 2. Tame decorative absolute-positioned blobs ----- */
@media (max-width: 1023px) {
  .blob {
    max-width: 70vw !important;
    max-height: 70vw !important;
    filter: blur(45px) !important;
    opacity: .3 !important;
  }
}

/* ---------- 3. Hamburger button: always tappable & visible --- */
@media (max-width: 1023px) {
  button[aria-label="Menu"] {
    min-width: 44px;
    min-height: 44px;
    position: relative;
    z-index: 51;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Fallback hamburger lines drawn in CSS — visible if Lucide hasn't loaded
     yet, hidden when Lucide swaps the <i> for an <svg>. */
  button[aria-label="Menu"] i[data-lucide="menu"] {
    display: inline-block;
    width: 24px;
    height: 18px;
    background:
      linear-gradient(currentColor, currentColor) center top   / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center center/ 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center bottom/ 100% 2px no-repeat;
  }
  button[aria-label="Menu"] svg { background: none; }
}

/* ---------- 4. Mobile nav as a proper drawer ---------------- */
@media (max-width: 1023px) {
  #mobileNav:not(.hidden) {
    position: fixed;
    left: 0;
    right: 0;
    top: 72px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 18px 40px rgba(26, 10, 0, .18);
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 5. Cap large display headlines on phones -------- */
@media (max-width: 640px) {
  .display.text-8xl, .text-8xl { font-size: 2.6rem  !important; line-height: 1.05; }
  .display.text-7xl, .text-7xl { font-size: 2.3rem  !important; line-height: 1.07; }
  .display.text-6xl, .text-6xl { font-size: 2rem    !important; line-height: 1.08; }
  .display.text-5xl, .text-5xl { font-size: 1.75rem !important; line-height: 1.10; }
  .display.text-4xl, .text-4xl { font-size: 1.55rem !important; line-height: 1.15; }
  .text-3xl                    { font-size: 1.4rem  !important; line-height: 1.2;  }
  .text-2xl                    { font-size: 1.25rem !important; line-height: 1.25; }
}

/* ---------- 6. Layout safety on phones --------------------- */
@media (max-width: 640px) {
  /* Header pill rows wrap rather than overflow */
  header .flex.gap-2,
  header .flex.gap-3 { flex-wrap: wrap; }

  /* Wrap long words / URLs / tokens to keep cards inside the screen */
  body { word-break: break-word; overflow-wrap: anywhere; }

  /* Stop fixed-pixel widths (Tailwind w-[NNNpx]) from busting on phones —
     except SVG icons and decorative blobs which we already handled. */
  [class*="w-["]:not(svg):not(.blob):not(.dropdown-panel) {
    max-width: 100% !important;
  }

  /* Cards in grids never overflow their column */
  article, .card, [class*="rounded-3xl"], [class*="rounded-2xl"] {
    max-width: 100%;
  }

  /* Long buttons stack their icon and label cleanly */
  a.inline-flex, button.inline-flex { max-width: 100%; }

  /* Container side padding — the existing px-5 stays, but make sure
     no max-w-[1400px] bust occurs */
  [class*="max-w-["] { max-width: 100% !important; }
}

/* ---------- 7. Tables and code blocks ---------------------- */
table  { max-width: 100%; display: block; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ---------- 8. Marquee — keep ticker readable on phones ---- */
@media (max-width: 640px) {
  .marquee { animation-duration: 25s; }
  .ticker-divider { margin: 0 14px; }
  .marquee .px-4 { padding-left: 12px; padding-right: 12px; font-size: 12px; }
}

/* ---------- 9. Footer and forms --------------------------- */
@media (max-width: 640px) {
  form .flex.flex-col.sm\:flex-row { gap: .5rem; }
  input, textarea, select { font-size: 16px; } /* prevents iOS zoom on focus */
}

/* ---------- 10. Newsletter / Subscribe form ---------------
   Stack the email field above the Subscribe button on small phones
   so the button never gets clipped. Targets the footer subscribe
   form on every page (action="/newsletter-signup.php"). Also catches
   any other form that pairs an email input with a submit button.
   ---------------------------------------------------------- */
@media (max-width: 540px) {
  footer form[action*="newsletter"],
  form[action*="newsletter-signup"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem !important;
  }
  footer form[action*="newsletter"] > *,
  form[action*="newsletter-signup"] > * {
    width: 100%;
    max-width: 100%;
  }
  footer form[action*="newsletter"] button[type="submit"],
  form[action*="newsletter-signup"] button[type="submit"] {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Same treatment for any inline email-capture form */
  form.flex.gap-2:has(input[type="email"]),
  form.flex.gap-3:has(input[type="email"]) {
    flex-direction: column;
    align-items: stretch;
  }
  form.flex.gap-2:has(input[type="email"]) > button,
  form.flex.gap-3:has(input[type="email"]) > button {
    width: 100%;
  }
}

/* ---------- 11. Extra-narrow phones (≤ 380px) -------------
   iPhone SE / older small Androids — give the heavy display sizes
   one more notch down so headlines never overflow.
   ---------------------------------------------------------- */
@media (max-width: 380px) {
  .display.text-8xl, .text-8xl { font-size: 2.2rem  !important; }
  .display.text-7xl, .text-7xl { font-size: 2rem    !important; }
  .display.text-6xl, .text-6xl { font-size: 1.8rem  !important; }
  .display.text-5xl, .text-5xl { font-size: 1.55rem !important; }
  .text-4xl                    { font-size: 1.4rem  !important; }

  /* Side padding stays small but readable */
  [class*="px-5"]:not(button):not(a) { padding-left: 1rem !important; padding-right: 1rem !important; }
  [class*="px-8"]:not(button):not(a) { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Cap chip/pill content so it never overflows on tiny screens */
  .chip { font-size: 11px; padding: 5px 10px; }
}

/* ---------- 12. Tablet portrait fine-tuning (641px–820px) -
   Things that look fine on phones and desktop but pinch in this
   awkward middle zone — typically nav rows and hero grids.
   ---------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 820px) {
  /* Header right-side action pills don't all need to show; allow wrap */
  header .flex.items-center.gap-2,
  header .flex.items-center.gap-3 { flex-wrap: wrap; row-gap: .5rem; }
}

/* ---------- 13. Wide screens (≥ 1920px) — keep content readable
   The site's max-w-[1400px] already centers content, but big monitors
   can leave huge empty side gutters. No layout change here, just a
   safety so very wide images don't get awkwardly stretched.
   ---------------------------------------------------------- */
@media (min-width: 1920px) {
  img[class*="w-full"] { max-width: 100%; }
}