/* ==========================================================================
   Jordon Murphy Health — Site-wide Responsive Layer
   Loaded AFTER every page's embedded desktop styles, so it only ever adds
   scoped mobile/tablet overrides. It never touches desktop rules directly —
   every rule in this file lives inside a max-width or min-width query.
   No transforms, no zoom, no root font scaling. Real stacking, real grids.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Retrofit mobile navigation (used on every page EXCEPT the homepage,
      which already ships its own bespoke hamburger + overlay menu).
      Structure reused as-is: .nav__inner > .nav__back, .nav__links
      (containing .nav__item / .nav__item--drop > .nav__dropdown), .nav__right.
      We only add a toggle button (.mnav-toggle) and turn .nav__links into a
      slide-in panel below 1130px. Desktop (>=1130px) is completely untouched.
   -------------------------------------------------------------------------- */
.mnav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex-shrink:0;
  border:1.5px solid rgba(124,58,237,.25);
  border-radius:10px;
  background:#fff;
  color:#4c1d95;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mnav-toggle:hover{ border-color:rgba(124,58,237,.5); }
.mnav-toggle svg{ display:block; pointer-events:none; }
.mnav-toggle .mnav-icon-close{ display:none; }
.mnav-toggle[aria-expanded="true"] .mnav-icon-open{ display:none; }
.mnav-toggle[aria-expanded="true"] .mnav-icon-close{ display:block; }

.mnav-scrim{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(29,23,48,.35);
  z-index:98;
  opacity:0;
  transition:opacity .25s ease;
}
.mnav-scrim.is-open{ display:block; opacity:1; }

@media (max-width: 1129px){
  .nav__inner{ gap:12px; }
  .mnav-toggle{ display:flex; }

  /* Persistent header stays lean: Back + spacer + toggle. Phone/CTA move
     into the slide-in panel so nothing crowds or wraps on narrow phones. */
  .nav__right{ display:none; }

  .nav__links{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    height:100dvh;
    width:min(86vw, 360px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    background:#fff;
    box-shadow:-16px 0 44px rgba(29,23,48,.18);
    padding:88px 22px 28px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:99;
  }
  .nav__links.is-open{ transform:translateX(0); }

  .nav__links > .nav__item{ width:100%; }
  .nav__links > .nav__item > a{
    display:flex !important;
    width:100%;
    padding:14px 4px !important;
    font-family:'Sora',sans-serif;
    font-size:1.02rem !important;
    font-weight:600 !important;
    color:#1d1730 !important;
    border-bottom:1px solid rgba(76,29,149,.08);
  }
  .nav__links > .nav__item:first-child > a{ border-top:1px solid rgba(76,29,149,.08); }

  /* Dropdown submenus: no hover on touch devices, so they render as
     permanently-expanded stacked sublists under their parent heading. */
  .nav__dropdown{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    min-width:0 !important;
    padding:2px 0 10px 14px !important;
    background:transparent !important;
  }
  .nav__dropdown a{
    padding:10px 4px !important;
    font-size:.92rem !important;
    color:#4a4458 !important;
    border-left:2px solid rgba(124,58,237,.18);
    padding-left:14px !important;
  }
  .nav__dropdown a:hover{ background:transparent !important; color:#4c1d95 !important; }

  /* Phone + CTA relocated inside the panel, always visible when open */
  .mnav-panel-foot{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(76,29,149,.10);
  }
  .mnav-panel-foot .nav__tel{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    font-size:1rem;
  }
  .mnav-panel-foot .nav__quote{
    width:100%;
    justify-content:center;
    padding:14px 20px;
  }
}

@media (min-width: 1130px){
  .mnav-toggle{ display:none !important; }
  .mnav-scrim{ display:none !important; }
  .mnav-panel-foot{ display:none; }
}

/* --------------------------------------------------------------------------
   2. Restore the homepage's original (bespoke) mobile menu breakpoints.
      These selectors only exist on index.html; harmless no-ops elsewhere.
   -------------------------------------------------------------------------- */
@media (max-width: 1129px){
  #siteNav .nav__toggle{ display:flex !important; }
}
@media (min-width: 1130px){
  #siteNav .nav__toggle{ display:none !important; }
  #siteNav .nav__links{ display:flex !important; }
  #siteNav .nav__cta{ display:flex !important; }
}
@media (max-width: 1129px){
  #siteNav .nav__links{ display:none !important; }
  #siteNav .nav__cta{ display:none !important; }
}

/* --------------------------------------------------------------------------
   3. Universal hero / section / grid stacking
      (.page-hero .container is used by ~70 detail pages: text column +
      image column. Collapses to one column comfortably before it cramps.)
   -------------------------------------------------------------------------- */
@media (max-width: 860px){
  .page-hero .container{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .page-hero{ padding-top:120px !important; padding-bottom:48px !important; }
  .hero-image{ max-height:320px !important; }
}
@media (max-width: 480px){
  .page-hero{ padding-top:104px !important; }
  .hero-image{ max-height:260px !important; }
  .breadcrumb{ font-size:.76rem !important; flex-wrap:wrap; }
}

/* Footer: universal 3-4 column -> stacked single column list */
@media (min-width: 760px){
  .footer-grid{ grid-template-columns:1.2fr 1fr 1fr !important; }
}
@media (min-width: 900px){
  .footer-grid{ grid-template-columns:1.2fr 1fr 1fr 1fr !important; }
}
@media (max-width: 759px){
  footer{ padding:44px 0 26px !important; }
  .footer-grid{ grid-template-columns:1fr !important; gap:28px !important; }
}

/* Generic card grids (coverage/learn/business/life-changes hubs, etc.) */
@media (min-width: 680px){
  .card-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (min-width: 1020px){
  .card-grid.card-grid--3, .cards-3 .card-grid{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width: 679px){
  .card-grid{ grid-template-columns:1fr !important; gap:16px !important; }
}

/* Business consultation form */
@media (min-width: 640px){
  .form-grid{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 639px){
  .form-grid{ grid-template-columns:1fr !important; }
  .biz-form{ padding:28px 20px !important; }
}

/* --------------------------------------------------------------------------
   4. About-page and state-page component grids
      (.trust-row, .fact-grid, .serve-grid, .founder, .split, .steps)
      These had NO responsive handling at all before this file.
   -------------------------------------------------------------------------- */
@media (max-width: 760px){
  .trust-row{ grid-template-columns:1fr 1fr !important; max-width:none !important; }
  .fact-grid{ grid-template-columns:1fr 1fr !important; }
  .serve-grid{ grid-template-columns:1fr 1fr !important; }
  .steps{ grid-template-columns:1fr 1fr !important; }
  .founder{ grid-template-columns:1fr !important; gap:32px !important; }
  .founder__img{ max-width:340px !important; max-height:425px !important; aspect-ratio:4/5 !important; margin:0 auto !important; }
  .split{ grid-template-columns:1fr !important; gap:36px !important; }
}
@media (max-width: 520px){
  .trust-row{ grid-template-columns:1fr !important; }
  .fact-grid{ grid-template-columns:1fr !important; }
  .serve-grid{ grid-template-columns:1fr !important; }
  .steps{ grid-template-columns:1fr !important; }
  .step .ic-box{ position:static !important; margin-bottom:14px; }
}

/* --------------------------------------------------------------------------
   5. Buttons: stack side-by-side pairs into full-width on small phones
   -------------------------------------------------------------------------- */
@media (max-width: 460px){
  .btn-row{ flex-direction:column !important; align-items:stretch !important; }
  .btn-row .btn, .btn-row > a.btn{ width:100% !important; text-align:center !important; }
}

/* --------------------------------------------------------------------------
   6. Section rhythm / typography breathing room on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 760px){
  .section{ padding:56px 0 !important; }
  .cta-band, .about-cta{ padding:56px 0 !important; }
  .cta-band__inner, .about-cta__inner{ padding:40px 24px !important; }
  .sec{ padding:56px 0 !important; }
  .sec--tight{ padding:40px 0 56px !important; }
}
@media (max-width: 480px){
  .container{ padding-left:18px !important; padding-right:18px !important; }
}

/* --------------------------------------------------------------------------
   7. FAQ / prose readability on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 480px){
  .faq-q{ padding:16px 18px !important; }
  .prose{ max-width:100% !important; }
}

/* --------------------------------------------------------------------------
   8. Homepage-specific bespoke sections
      (safe no-ops on every other page — these selectors don't exist there)
   -------------------------------------------------------------------------- */
@media (min-width: 900px){
  .coverage-layout{ grid-template-columns:0.85fr 1.15fr !important; gap:64px !important; }
  .coverage-intro{ position:sticky !important; top:120px !important; }
  .about-layout{ grid-template-columns:0.8fr 1.2fr !important; gap:64px !important; align-items:center !important; }
}
@media (min-width: 640px){
  .coverage-list{ grid-template-columns:1fr 1fr !important; }
}
@media (min-width: 768px){
  .journey{ flex-direction:row !important; gap:20px !important; margin-top:24px !important; padding-top:6px !important; }
  .journey__line{ left:12.5% !important; right:12.5% !important; top:32px !important; bottom:auto !important; width:auto !important; height:2px !important; }
  .journey-step{ flex-direction:column !important; align-items:center !important; text-align:center !important; gap:16px !important; flex:1 !important; }
  .journey-step__card{ text-align:center !important; width:100% !important; }
  .container{ padding:0 40px !important; }
}
@media (min-width: 820px){
  .final-card{ grid-template-columns:1.3fr 1fr !important; }
  .final-card__accent{ grid-column:1 / -1 !important; }
  .final-card__main{ padding-left:clamp(40px, 6vw, 64px) !important; }
  .final-card__contact{ border-top:none !important; border-left:1px solid var(--line) !important; justify-content:center !important; }
}
@media (max-width: 819px){
  .final-card__main .btn-row{ flex-direction:column !important; }
  .final-card__main .btn-row .btn{ width:100% !important; }
}
@media (max-width: 900px){
  .who-help-split{ grid-template-columns:1fr !important; gap:20px !important; margin-top:32px !important; }
  .who-help-visual{ aspect-ratio:4/3 !important; min-height:320px !important; max-height:none !important; }
}
@media (max-width: 480px){
  .who-help-visual{ aspect-ratio:1/1 !important; min-height:300px !important; border-radius:22px !important; }
  .who-help-overlay{ left:12px !important; right:12px !important; bottom:12px !important; padding:16px 18px !important; }
  .who-help-tab{ padding:16px 18px 18px !important; border-radius:18px !important; }
  .glow{ filter:blur(46px) !important; opacity:.6 !important; }
  .header-jm-logo{ height:34px !important; max-width:56px !important; }
  .footer-brand .logo__img{ max-width:170px !important; }
  .hero-full-logo{ width:min(92vw,420px) !important; margin-bottom:18px !important; }
  .carrier-track{ gap:40px !important; animation-duration:28s !important; }
  .carrier-item{ font-size:1.02rem !important; }
  .carrier-strip{ margin-top:26px !important; }
  .top-category-bar__inner{ gap:8px !important; }
  .category-pill{ padding:8px 16px !important; font-size:.8rem !important; }
  .carousel-arrow{ width:40px !important; height:40px !important; }
  .carousel-arrow--prev{ left:2px !important; }
  .carousel-arrow--next{ right:2px !important; }
  .to-top{ display:none !important; }
  .quote-modal{ max-width:100% !important; max-height:94vh !important; padding:24px 20px !important; border-radius:var(--radius-md) !important; }
}
@media (max-width: 1240px){
  #siteNav .nav__links{ gap:20px; }
}
/* Sticky quote bar is a mobile-only UI; on wider screens it duplicated the
   header CTA and collided with the back-to-top button. */
@media (min-width: 768px){
  .mobile-cta-bar{ display:none !important; }
}
/* While the bar is present (481-767px), lift back-to-top clear of it. */
@media (max-width: 767px){
  .to-top{ bottom:88px !important; }
}
/* .nav__call is a compact click-to-call pill for the narrow band where the
   full nav__links/nav__cta are hidden but the toggle hasn't taken over yet.
   It must stay capped below 1130px or it duplicates the header phone number
   in nav__cta and overflows the header at desktop widths. */
@media (min-width: 540px) and (max-width: 1129px){
  .nav__call{ display:inline-flex !important; }
}

/* --------------------------------------------------------------------------
   9. Verified-advisor page 3-column grid (.vae__grid)
   -------------------------------------------------------------------------- */
@media (min-width: 1130px){
  .vae__grid{
    grid-template-columns:30% 34% 36% !important;
    grid-template-rows:auto 1fr !important;
    grid-template-areas:"text advisor benefits" "badges advisor benefits" !important;
  }
}

/* --------------------------------------------------------------------------
   10. Coverage hub page 2-column layout (.cov__layout)
   -------------------------------------------------------------------------- */
@media (min-width: 900px){
  .cov__layout{ grid-template-columns:minmax(300px,1fr) minmax(380px,1.05fr) !important; gap:30px !important; }
}

/* --------------------------------------------------------------------------
   11. Never allow horizontal overflow, anywhere, on any screen
   -------------------------------------------------------------------------- */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg{ max-width:100%; height:auto; }
.hero-image, .founder__img{ height:auto; }
table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }