/* ============================================================
   ELITE MED REP — Responsive overrides
   Mobile-first compression of the desktop-1280 design.
   Breakpoints:
     ≤ 1024px  →  tablet (compress padding, scale type)
     ≤ 720px   →  phone  (stack columns, hide nav links, full-width CTAs)
   ============================================================ */

/* Smooth-scroll for anchor nav clicks; padding-top so the sticky nav doesn't
   eclipse the top of the target section on jump. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (max-width: 720px) { html { scroll-padding-top: 64px; } }

/* ---------- Mobile menu drop-in animation ---------- */
@keyframes emrFadeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Hamburger visibility ---------- */
/* Show hamburger only on phones; hide inline menu items + Sign In on phones. */
.emr-hamburger { display: none !important; }
@media (max-width: 720px) {
  .emr-hamburger { display: flex !important; }
}

/* ---------- iOS Safari seamless top — kill the gap between URL bar + nav ---
   Approach (what works after iterating):
   - theme-color meta tints Safari's URL bar
   - Body + html background = obsidian (so safe-area / overscroll is obsidian)
   - Nav is fully opaque obsidian on ALL mobile + tablet (≤ 1024px), with no
     backdrop-blur. Translucent nav + blur on small viewports creates the
     bleed-through that read as a "gap" (hero eyebrow showing through).
   - Do NOT pad nav into safe-area. iOS owns that zone; padding nav into it
     pushes the wordmark down and OPENS a visible seam.
   ----------------------------------------------------------------------- */
html, body {
  background: #0A0E14 !important;   /* obsidian fills safe-area + overscroll */
}

/* Nav is now position: fixed (was sticky — sticky was breaking on iOS Safari).
   Compensate with a body padding-top so the hero doesn't render under the nav.
   Nav height: ~70px desktop / ~58px phone. */
body { padding-top: 70px; }
@media (max-width: 720px) { body { padding-top: 58px; } }

@media (max-width: 1024px) {
  nav {
    background: #0A0E14 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ---------- Tablet ≤ 1024px ---------- */
@media (max-width: 1024px) {
  /* Compress section padding */
  section, footer { padding-left: 32px !important; padding-right: 32px !important; }
  nav { padding-left: 24px !important; padding-right: 24px !important; }

  /* Hero — shrink display type so it fits */
  section h1 { font-size: 64px !important; line-height: 1.05 !important; }
  section p[style*="font-size:24px"], section p[style*="font-size: 24px"] { font-size: 19px !important; }

  /* Pillars + Pricing — keep 3 cols but tighter gap */
  div[style*="grid-template-columns: repeat(3"] { gap: 24px !important; }
}

/* ---------- Phone ≤ 720px ---------- */
@media (max-width: 720px) {
  /* Section padding — collapse further */
  section { padding-top: 56px !important; padding-bottom: 56px !important; padding-left: 20px !important; padding-right: 20px !important; }
  footer { padding: 48px 20px 28px !important; }
  nav { padding: 14px 20px !important; gap: 16px !important; }

  /* ---------- NAV ----------
     Phone layout = hamburger + wordmark + flex spacer + Apply only.
     Hide inline menu items div, Sign In <a>, and let .emr-hamburger show.
     Order in JSX: <button hamburger>, <a wordmark>, <div menu>, <a Sign In>, <a Apply> */
  nav > div:nth-of-type(1) { display: none !important; }   /* inline menu items */
  nav > a:nth-of-type(2) { display: none !important; }      /* Sign In button */
  nav > a:nth-of-type(1) { flex: 1 !important; }            /* wordmark expands as spacer */
  nav { justify-content: flex-start !important; gap: 12px !important; }

  /* Wordmark scale */
  .emr-wordmark > span:first-of-type { font-size: 20px !important; }
  .emr-wordmark > span:last-of-type { font-size: 9px !important; }

  /* ---------- HERO ---------- */
  section h1 { font-size: 40px !important; line-height: 1.1 !important; letter-spacing: 0.03em !important; margin: 16px 0 14px !important; }
  section p[style*="font-style:italic"], section p[style*="font-style: italic"] { font-size: 16px !important; line-height: 1.5 !important; }
  /* CTA buttons stack and go full width */
  section > div > div[style*="display:flex"][style*="gap:16"],
  section > div > div[style*="display: flex"][style*="gap: 16"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  section > div > div[style*="display:flex"][style*="gap:16"] > button,
  section > div > div[style*="display: flex"][style*="gap: 16"] > button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Coach · Connect · Elevate divider — keep it but shrink */
  section > div > div[style*="margin:80px"], section > div > div[style*="margin: 80px"] { margin-top: 56px !important; max-width: 100% !important; }

  /* ---------- PILLARS / 3-COL GRIDS ---------- */
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ---------- CURRICULUM TABLE ---------- */
  div[style*="grid-template-columns:"][style*="80px"],
  div[style*="grid-template-columns: "][style*="80px"] {
    grid-template-columns: 60px 1fr !important;
    gap: 16px !important;
  }
  /* Hide far-right columns of the curriculum row on phones (duration + difficulty) */
  div[style*="grid-template-columns:"][style*="80px"] > *:nth-child(n+4),
  div[style*="grid-template-columns: "][style*="80px"] > *:nth-child(n+4) { display: none !important; }

  /* ---------- QUOTE ---------- */
  section blockquote, section q { font-size: 22px !important; line-height: 1.4 !important; }

  /* ---------- STATS ---------- */
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  /* ---------- PRICING ---------- */
  /* Already covered by 3-col → 1fr above */

  /* ---------- FOOTER ---------- */
  footer div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
  footer div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  footer > div > div:last-child {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* Universal — kill any horizontal overflow.
     IMPORTANT: use `clip` not `hidden` — `overflow-x: hidden` on body
     creates a scroll container that breaks `position: sticky` descendants
     on iOS Safari (sticky nav loses its pin). `clip` confines paint without
     creating a scroll context. (Bug fixed 2026-05-04 v4 per Matt feedback.) */
  body { overflow-x: clip; }
  html { overflow-x: clip; }

  /* Display headings everywhere — cap at viewport-relative size */
  h1, h2 { word-break: break-word; }
}

/* ---------- Small phones ≤ 400px ---------- */
@media (max-width: 400px) {
  section h1 { font-size: 32px !important; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
}