/* ============================================================
   IVs For Me — global responsive layer
   Loaded LAST in <head> so it overrides each page's inline
   <style>. Keeps the existing design; only adjusts layout so
   every page works on desktop, laptop, tablet, and mobile.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }

/* Header logo must never shrink or clip — keep the full "IVs For Me" wordmark
   intact at every width (the ≤600px block below intentionally scales it down). */
nav[style*="sticky"] > a[aria-label] { flex-shrink: 0; }
nav[style*="sticky"] > a[aria-label] svg { flex-shrink: 0; width: auto; height: 30px; max-width: none; }

/* Wide comparison tables scroll inside their own box instead of the page */
.compare-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; }

/* Nav buttons never wrap their labels, at any width */
.nav-cta, .menu-btn { white-space: nowrap; flex-shrink: 0; }

/* ---------- Desktop nav: full inline menu, hamburger hidden ---------- */
.nav-desktop { display: none; align-items: center; gap: 2px; flex-wrap: nowrap; }
.nav-desktop a { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  color: rgba(26, 26, 26, .8); text-decoration: none; padding: 8px 11px;
  border-radius: 30px; white-space: nowrap; transition: all .15s; }
.nav-desktop a:hover { background: #1A1A1A; color: #FBF8F2; }
.nav-desktop a.active { background: #123524; color: #FBF8F2; }
@media (min-width: 1150px) {
  .nav-desktop { display: flex; }
  .menu-wrap { display: none; }
}
@media (min-width: 1150px) and (max-width: 1339px) {
  .nav-desktop a { font-size: 12px; padding: 7px 8px; }
  nav[style*="sticky"] > a[aria-label] svg { height: 26px !important; }
}
/* Weight Loss dropdown (desktop) */
.nav-desktop .nav-group { position: relative; display: inline-flex; }
.nav-desktop .nav-group > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-desktop .nav-group > a::after { content: "▾"; font-size: 15px; line-height: 1; opacity: .8; margin-top: 1px; }
.nav-desktop .nav-group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-sub { position: absolute; top: calc(100% + 8px); left: 0; background: #FBF8F2;
  border: 2px solid #1A1A1A; border-radius: 14px; box-shadow: 4px 4px 0 #1A1A1A;
  padding: 6px; min-width: 180px; display: none; flex-direction: column; gap: 2px; z-index: 200; }
.nav-desktop .nav-group:hover .nav-sub, .nav-desktop .nav-group:focus-within .nav-sub { display: flex; }
.nav-sub a { padding: 9px 12px !important; border-radius: 10px; font-size: 13px !important;
  font-weight: 600; color: rgba(26,26,26,.8); white-space: nowrap; }
.nav-sub a::after { content: none !important; }
.nav-sub a:hover { background: #1A1A1A; color: #FBF8F2; }
.nav-sub a.active { background: #123524; color: #FBF8F2; }

/* Weight Loss group in the mobile hamburger menu: indent the three medications */
.menu-dropdown a.submenu { padding-left: 28px; font-size: 13px; color: rgba(26,26,26,.6); }
.menu-dropdown a.submenu::before { content: "–"; margin-right: 8px; opacity: .4; }

/* (Visit-us and footer-contact styles live inline in each page's <style>
   block, matching the site's per-page styling pattern.) */

/* ---------- Tablet (portrait) and small laptops: ≤ 900px ---------- */
@media (max-width: 900px) {
  /* Dense 4-col rows drop to 2 */
  .why-grid, .how-grid, .bundles, .value-strip-inner, .stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Content-heavy 2/3-col card rows stack to 1 */
  .service-grid, .programs, .benefits, .club-grid,
  .cards-standard, .journal-grid, .featured, .nad-card {
    grid-template-columns: 1fr !important;
  }
  /* Auto-fill card grids: tighten the minimum so they never overflow */
  .prog-grid, .menu-grid, .blog-grid, .related-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
}

/* ---------- Phones: ≤ 600px ---------- */
@media (max-width: 600px) {
  .service-grid, .why-grid, .journal-grid, .stats, .benefits, .how-grid,
  .programs, .cards-standard, .value-strip-inner, .bundles, .club-grid,
  .featured, .nad-card, .prog-grid, .menu-grid, .blog-grid, .related-grid {
    grid-template-columns: 1fr !important;
  }
  /* Nav: keep the logo + Menu + Book now on one row, and never let the
     "Book now" button wrap to two lines. Tighten spacing and let the wide
     wordmark logo scale down to make room. */
  nav[style*="sticky"] { padding-left: 14px !important; padding-right: 14px !important; gap: 8px !important; }
  nav[style*="sticky"] > a[aria-label] { flex: 0 1 auto; min-width: 0; }
  nav[style*="sticky"] > a[aria-label] svg { width: 100% !important; height: auto !important; max-width: 40vw; max-height: 26px; }
  nav[style*="sticky"] > div { gap: 8px !important; }
  .menu-btn, .nav-cta { white-space: nowrap; flex-shrink: 0; }
  .menu-btn { padding: 8px 12px !important; }
  .nav-cta { padding: 9px 14px !important; }
  /* Trim oversized section padding so content breathes on narrow screens */
  .hero { padding-left: 20px !important; padding-right: 20px !important; }
  /* Comparison tables: keep readable and inside the viewport */
  .compare th, .compare td { font-size: 12px !important; padding: 10px 8px !important; }
  /* Accordions: don't clip long answers that wrap to more lines on mobile */
  .faq-item.open .faq-a { max-height: 1200px !important; }
}
