/* ============================================================
   ReNew Wellness — responsive / mobile layer
   Shared across all pages. Loaded AFTER each page's inline
   <style> so these rules win on equal specificity.
   Desktop (>880px) is untouched. All mobile overrides live
   inside the media query below.
   ============================================================ */

/* Hamburger control is invisible until mobile */
.nav-toggle{display:none;}
.nav-burger{display:none;}

/* ---------- Desktop nav: keep the full link row fitting on one line ----------
   With 8 links + logo + CTA the row needs ~1400px, so tighten spacing above the
   hamburger breakpoint and never let the Book Consult button wrap. */
@media (min-width: 1301px){
  nav{padding:18px 32px;}
  .nav-logo img{height:44px;}
  .nav-links{gap:16px;flex-wrap:nowrap;}
  .nav-links a{font-size:11.5px;white-space:nowrap;}
  .nav-cta{white-space:nowrap;padding:10px 18px;}
}

@media (max-width: 1300px){

  /* ---------- NAV: collapse to a hamburger menu ---------- */
  nav{padding:14px 20px !important;}
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:38px;height:38px;cursor:pointer;background:none;border:0;
    z-index:120;
  }
  .nav-burger span{
    display:block;width:23px;height:2px;border-radius:2px;
    background:#3a3a36;transition:transform .25s ease,opacity .2s ease;
  }
  /* X animation when open */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#faf5ec;z-index:110;
    border-bottom:1px solid rgba(138,158,140,0.18);
    box-shadow:0 16px 32px rgba(58,58,54,0.12);
    max-height:0;overflow:hidden;padding:0 20px;
    transition:max-height .3s ease,padding .3s ease;
  }
  .nav-toggle:checked ~ .nav-links{max-height:80vh;padding:8px 20px 18px;}
  .nav-links li{width:100%;}
  .nav-links a{
    display:block;padding:14px 4px;font-size:13px;
    border-bottom:1px solid rgba(138,158,140,0.12);
  }
  .nav-links li:last-child a{border-bottom:0;}
  /* keep the Book Consult CTA looking like a button, full width */
  .nav-cta{
    text-align:center;margin-top:12px;padding:14px 22px !important;
    border-bottom:0 !important;
  }

  /* ---------- Collapse every multi-column layout to one column ---------- */
  .hero,.page-hero,.hero-inner,.featured-inner,
  .empathy,.story,.method-header,.values-header,.research-header,
  .email-band,.veterans,.cta-band,.audience,.method-loop,.diff-grid,
  .test-grid,.services-grid,.process-steps,.stat-row,.values-grid,
  .providers-grid,.support-grid,.founder-cards,.founder-card,
  .founder-story,.trust-band,.guides-grid,.screening-grid,.other-grid,
  .blog-grid,.conditions-list,.conditions-grid,.service-section,
  .hero-meta,.fears,.what-grid,.expect-header,.diff-box,.trans-grid,
  .faq-grid,.resource-links,.callout-stat,.combo-box,.expect-step,
  .diff-row,footer{
    grid-template-columns:1fr !important;
  }

  /* The transformation row has a center arrow that should hide when stacked */
  .trans-arrow{display:none !important;}

  /* ---------- Shrink the big 56–64px side gutters ---------- */
  .hero-left,.empathy,.difference,.audience,.veterans,.process,
  .testimonials,.services,.insurance-strip,.cta-band,.footer-bottom,
  footer,.story,.stat-row,.method,.different,.values,.founders,
  .founder-story,.clinical,.trust-band,.hero-inner,.resource-tabs,
  .guides,.research,.screening,.other-resources,.email-band,
  .category-tabs,.featured,.blog-grid-section,.pagination,.page-hero,
  .service-main,.service-sidebar-inner,.fears,.what-it-is,.expect,
  .transformation,.faq,.resources-strip,.conditions,.combo-box,
  .diff-box,.hero-right-content{
    padding-left:20px !important;padding-right:20px !important;
  }

  /* Quick-nav chips and decision/CTA bands shouldn't run off-screen */
  .services-quick-nav{flex-wrap:wrap !important;padding-left:20px !important;padding-right:20px !important;}

  /* Resources/blog tab strips scroll sideways instead of overflowing the page */
  .resource-tabs,.category-tabs{overflow-x:auto;}
  .res-tab,.cat-tab{padding-left:16px !important;padding-right:16px !important;}

  /* ---------- Hero images keep a visible height when stacked ---------- */
  .hero-right{min-height:300px !important;}
  .hero-img-bg{position:absolute !important;inset:0 !important;}

  /* Side image/quote cards inside heroes shouldn't overflow */
  .hero-quote-card{position:relative !important;max-width:100% !important;}

  /* Hero: don't force full-viewport height when stacked — that's the big empty band */
  .hero,.page-hero{min-height:auto !important;}
  .hero-left{padding-top:56px !important;padding-bottom:48px !important;justify-content:flex-start !important;}

  /* Sticky side columns shouldn't pin/overlap while scrolling on mobile */
  .audience-sticky,.service-sidebar-inner{position:static !important;top:auto !important;}

  /* Footer: keep the link columns in a row along the bottom (not a tall stack) */
  footer{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:28px 24px !important;padding-top:48px !important;padding-bottom:36px !important;}
  footer > div:first-child{grid-column:1 / -1;margin-bottom:8px;}
  .footer-bottom{flex-direction:column;gap:6px;text-align:center;}

  /* Service detail page: sidebar sits under the body, full width */
  .service-sidebar{position:static !important;width:auto !important;}
}

/* Extra squeeze for small phones */
@media (max-width: 480px){
  .hero-left,.page-hero,.service-main{padding-left:18px !important;padding-right:18px !important;}
  .hero-trust{flex-wrap:wrap;gap:18px;}
  /* Drop the footer links to two columns on small phones */
  footer{grid-template-columns:repeat(2,1fr) !important;}
}