/* Moltd — responsive overrides for the inline-styled static export.
   support.js re-renders via React, which serializes inline styles as "prop: value"
   (space after the colon). So every value-based selector lists BOTH "prop:value" and
   "prop: value", and we use TAG selectors where possible. !important beats inline. */

* { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100% !important; overflow-x: hidden !important; }
img, svg, video, canvas, iframe { max-width: 100% !important; height: auto; }

/* ---------- grids (tablet & phones) ---------- */
@media (max-width: 860px) {
  /* stack EVERY multi-column grid to a full-width column (prevents narrow word-per-line wrapping) */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* ...except the integration chips, hooked explicitly so ONLY they stay 2-up */
  [data-grid="chips"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }

  [style*="transform:scale(1.04)"], [style*="transform: scale(1.04)"] { transform: none !important; }
}

/* ---------- phones: type / spacing / header / scroll ---------- */
@media (max-width: 640px) {
  /* headings — tag-based (reliable through the React render) */
  h1 { font-size: clamp(26px, 8.2vw, 36px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(23px, 7vw, 31px) !important; line-height: 1.15 !important; }
  h3 { font-size: 19px !important; line-height: 1.3 !important; }
  p  { font-size: 15.5px !important; line-height: 1.55 !important; }

  /* large text that lives in non-heading tags (both spacings) */
  [style*="font-size:54px"],[style*="font-size: 54px"],[style*="font-size:48px"],[style*="font-size: 48px"],
  [style*="font-size:44px"],[style*="font-size: 44px"],[style*="font-size:42px"],[style*="font-size: 42px"],
  [style*="font-size:40px"],[style*="font-size: 40px"],[style*="font-size:38px"],[style*="font-size: 38px"],
  [style*="font-size:36px"],[style*="font-size: 36px"],[style*="font-size:34px"],[style*="font-size: 34px"],
  [style*="font-size:32px"],[style*="font-size: 32px"],[style*="font-size:30px"],[style*="font-size: 30px"],
  [style*="font-size:28px"],[style*="font-size: 28px"],[style*="font-size:27px"],[style*="font-size: 27px"]
  { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.2 !important; }

  /* side padding small everywhere; tame huge vertical padding */
  section, header, footer, nav { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding:90px"],[style*="padding: 90px"],[style*="padding:80px"],[style*="padding: 80px"],
  [style*="padding:70px"],[style*="padding: 70px"] { padding-top: 42px !important; padding-bottom: 42px !important; }
  [style*="padding:56px"],[style*="padding: 56px"],[style*="padding:48px"],[style*="padding: 48px"],
  [style*="padding:40px"],[style*="padding: 40px"] { padding: 24px 16px !important; }

  /* integration chips — shrink so two fit per row (both spacings) */
  [style*="padding:13px 16px"],[style*="padding: 13px 16px"],
  [style*="padding:17px 20px"],[style*="padding: 17px 20px"]
  { padding: 9px 11px !important; font-size: 13px !important; }

  /* tighten big gaps for a denser, scaled-desktop feel */
  [style*="gap:34px"],[style*="gap: 34px"],[style*="gap:32px"],[style*="gap: 32px"],
  [style*="gap:28px"],[style*="gap: 28px"],[style*="gap:26px"],[style*="gap: 26px"],
  [style*="gap:24px"],[style*="gap: 24px"] { gap: 14px !important; }

  /* compact top bar — hide the center nav links (logo + sign-in + demo stay) */
  header nav { display: none !important; }

  /* signed-in account menu (navigation.js builds these with real DOM ids) */
  #moltd-account-trigger > span { display: none !important; }            /* hide the name; just the avatar */
  #moltd-account-trigger img { width: 32px !important; height: 32px !important; min-width: 32px !important; flex: 0 0 32px !important; } /* stop the squish */
  #moltd-account-dropdown { position: fixed !important; top: 60px !important; left: 12px !important; right: 12px !important; width: auto !important; } /* never clip off-screen */

  /* hide the floating decorative app-icon on mobile — it overlaps the header "Moltd" logo (Book a Demo hero) */
  [style*="animation:floatA"], [style*="animation: floatA"] { display: none !important; }

  /* release full-height clips so the page scrolls all the way down */
  [style*="min-height:100vh"],[style*="min-height: 100vh"] { min-height: auto !important; }
  [style*="height:100vh"],[style*="height: 100vh"] { height: auto !important; }
  html, body { height: auto !important; overflow-y: auto !important; }
}

/* ---------- sign-in split screen -> single column, drop the tall brand panel ---------- */
@media (max-width: 760px) {
  [style*="grid-template-columns:1.05fr 1fr"],[style*="grid-template-columns: 1.05fr 1fr"]
  { grid-template-columns: 1fr !important; min-height: auto !important; }
  [style*="grid-template-columns:1.05fr 1fr"] > div:first-child,
  [style*="grid-template-columns: 1.05fr 1fr"] > div:first-child { display: none !important; }
}

/* ---------- subpage + docs headers, and the docs layout ---------- */
@media (max-width: 640px) {
  /* keep header items on one line, tighten gaps */
  header a, header button { white-space: nowrap !important; }
  header [style*="gap:18px"], header [style*="gap: 18px"],
  header [style*="gap:14px"], header [style*="gap: 14px"] { gap: 8px !important; }

  /* "Back to home / Back to site" link -> smaller */
  header a[style*="font-weight:500"], header a[style*="font-weight: 500"] { font-size: 12px !important; }
  /* "Book a demo" pill -> compact */
  header a[style*="border-radius:999px"], header a[style*="border-radius: 999px"] { padding: 7px 12px !important; font-size: 12px !important; }

  /* DOCS: search bar -> icon-only (drops the 230px width + the ⌘K hint) */
  header button[style*="width:230px"], header button[style*="width: 230px"] { width: auto !important; padding: 8px !important; font-size: 0 !important; }
  header button[style*="width:230px"] span, header button[style*="width: 230px"] span { display: none !important; }

  /* DOCS: sidebar -> compact scrollable box at top instead of a full-screen sticky list */
  aside[style*="position:sticky"], aside[style*="position: sticky"] {
    position: static !important; height: auto !important; max-height: 46vh !important;
    overflow-y: auto !important; border-right: 0 !important;
    border-bottom: 1px solid rgba(21,16,14,0.1) !important; padding: 14px !important;
  }
}