/* ============================================================
   GoPulse — mobile responsiveness
   The pages are built entirely with inline styles (no classes),
   so overrides target the inline-style patterns via attribute
   selectors with !important. Keep this file in sync with markup.
   ============================================================ */

/* Hamburger button — hidden on desktop, injected by mobile-nav.js */
.gp-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1.5px solid #D8E2EB;
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.gp-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #0C1118;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.gp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Tablet / mobile
   ============================================================ */
@media (max-width: 980px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  /* 1. Remove the desktop min-width that forces horizontal scroll */
  [style*="min-width: 1100px"],
  [style*="min-width: 1180px"] { min-width: 0 !important; }

  /* 2. Every multi-column grid collapses to a single column.
        minmax(0, 1fr) (not 1fr) stops a wide grid item from expanding the
        track past the viewport. */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* 3. Large fixed-width blocks shrink to fit (box-sizing is already border-box) */
  [style*="width: 300px"], [style*="width: 320px"], [style*="width: 330px"],
  [style*="width: 360px"], [style*="width: 390px"], [style*="width: 420px"],
  [style*="width: 440px"], [style*="width: 460px"], [style*="width: 480px"],
  [style*="width: 720px"], [style*="width: 760px"] { max-width: 100% !important; }

  /* media never overflows its container */
  img, svg, video, canvas { max-width: 100% !important; }

  /* flex items must be allowed to shrink (default min-width:auto lets fixed-
     width illustration boxes push their column past the viewport) */
  [data-screen-label="Steps"] [style*="padding: 40px"] { width: 100% !important; max-width: 100% !important; }

  /* 4. Display headings scale down */
  [style*="font-size: 58px"], [style*="font-size: 60px"] { font-size: 38px !important; }
  [style*="font-size: 44px"], [style*="font-size: 46px"], [style*="font-size: 48px"],
  [style*="font-size: 50px"], [style*="font-size: 52px"], [style*="font-size: 54px"] { font-size: 32px !important; }
  [style*="font-size: 34px"], [style*="font-size: 36px"], [style*="font-size: 38px"],
  [style*="font-size: 40px"] { font-size: 26px !important; }

  /* 5. Tame oversized section / card padding (matches shorthand too) */
  [style*="padding: 96px"], [style*="padding: 88px"], [style*="padding: 80px"] { padding: 44px 20px !important; }
  [style*="padding: 72px"], [style*="padding: 64px"], [style*="padding: 56px"], [style*="padding: 48px"] { padding: 32px 18px !important; }

  /* 6. Button / price rows (CTA, Bundle, etc.) share this signature — let them
        shrink and wrap instead of pushing past the viewport */
  [style*="gap: 14px"][style*="flex-shrink: 0"] { flex-shrink: 1 !important; flex-wrap: wrap !important; }

  /* ---- Footer: stack the logo / links / copyright row, wrap the links ---- */
  [data-screen-label="Footer"] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  [data-screen-label="Footer"] > div > div {
    flex-wrap: wrap !important;
  }

  /* ---- Marketing nav -> hamburger drawer ---- */
  .gp-burger { display: inline-flex !important; }
  header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    background: #ffffff;
    padding: 10px 20px 16px;
    border-bottom: 1px solid #EAF0F5;
    box-shadow: 0 18px 40px rgba(12, 17, 24, 0.10);
  }
  header nav[data-open] { display: flex !important; }
  header nav a {
    padding: 13px 8px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }
  /* full-width pill CTAs inside the drawer (last two links) */
  header nav a:nth-last-child(-n+2) {
    text-align: center;
    margin-top: 6px;
  }

  /* ---- Demo app bar: wrap into rows, make the tab strip swipeable ---- */
  [data-screen-label="App bar"] {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 10px 16px !important;
    gap: 10px !important;
  }
  [data-screen-label="App bar"] > div:nth-child(2) {
    order: 3;
    flex-basis: 100%;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-screen-label="App bar"] > div:nth-child(2)::-webkit-scrollbar { display: none; }
  [data-screen-label="App bar"] > div:nth-child(2) button { flex-shrink: 0; }

  /* ---- Demo app dashboard: stop locking to viewport height, stack panels ---- */
  [data-screen-label="Live map view"],
  [data-screen-label="Trip replay"],
  [data-screen-label="Zone editor"],
  [data-screen-label="Coaching"],
  [data-screen-label="Safety center"],
  [data-screen-label="Car health"],
  [data-screen-label="AI digest"],
  [data-screen-label="Rewards"],
  [data-screen-label="Notifications"] {
    flex-direction: column !important;
    min-height: 0 !important;
  }
}

/* ============================================================
   Small phones
   ============================================================ */
@media (max-width: 600px) {
  [style*="font-size: 58px"], [style*="font-size: 60px"] { font-size: 30px !important; }
  [style*="padding: 0 32px"] { padding-left: 18px !important; padding-right: 18px !important; }
}