/*
 * mobile-fixes.css — The Diet Rebel
 * Loaded after all inline page styles as a universal override layer.
 * DO NOT remove or consolidate inline CSS during this phase.
 * All rules are scoped to mobile breakpoints or specific selectors.
 * Desktop styles are unaffected.
 *
 * Fixes applied (audit-approved, 2026-07-14):
 *   F1  — Overlay z-index: know-your-number.html nav sits above overlay
 *   F2  — Slide-in overlay upgrade: 5 pages use translateX pattern instead of canonical
 *   F3  — site-nav__cta white-space:nowrap causes horizontal overflow at 320px
 *   F4  — CTA buttons: hero-btn-primary / hero-btn-outline full-width + centered on mobile
 *   F5  — hero-cta-stack / glp-hero__ctas: stretch children on mobile
 *   F6  — Pricing decision__grid: 1 column on mobile (approved: single column)
 *   F7  — Pricing guarantee-banner padding on mobile
 *   F8  — GLP-1 inline grid overflow: glp-responsive-grid class
 *   F9  — GLP-1 article fixed widths: max-width:100% override
 *   F10 — Maintenance hero: increase mobile height so face is visible
 *   F11 — trust__line / trust__credentials nowrap overflow (home.html)
 *   F12 — nw-section-nav nowrap overflow (maintenance.html)
 *   F13 — pricing free-consult-banner__features li and card__price-note nowrap
 *   F14 — resources res-email__sub and res-start-here-top__link nowrap
 *   F15 — Missing overflow-x:hidden on 4 article pages (via body rule)
 *   F16 — Article table overflow-x:auto (4 pages)
 */

/* ─────────────────────────────────────────────
   F1 — know-your-number.html overlay z-index
   The nav on this page has z-index:900 which sits above the overlay z-index:600.
   Raise overlay to 1000 on this page only.
   ───────────────────────────────────────────── */
/* Applied via direct page edit — see fix_approved.py */

/* ─────────────────────────────────────────────
   F3 — site-nav__cta white-space:nowrap → horizontal overflow at 320px
   The "WORK WITH THE REBEL" nav button forces the nav bar wider than viewport.
   At ≤768px the nav CTA is already hidden (display:none), so this is a safety net
   for any edge case where it remains visible.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-nav__cta {
    white-space: normal !important;
  }
}

/* ─────────────────────────────────────────────
   F4 — CTA buttons: full-width, centered text on mobile
   hero-btn-primary and hero-btn-outline have no mobile breakpoint on 8 pages.
   Universal rule: safe to apply — only activates at ≤768px.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-btn-primary,
  .hero-btn-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ─────────────────────────────────────────────
   F5 — hero-cta-stack / glp-hero__ctas: stretch children
   Container goes column but buttons don't stretch to fill it.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-cta-stack,
  .glp-hero__ctas,
  .nw-hero__ctas,
  .ms2-hero__ctas,
  .s2-hero__ctas {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

/* ─────────────────────────────────────────────
   F6 — Pricing decision__grid: 1 column on mobile (approved)
   The existing breakpoint at 640px already sets 1fr, but 768px sets 1fr 1fr.
   Override to 1 column at 768px as well.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .decision__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────
   F7 — Pricing guarantee-banner: add padding on mobile
   guarantee-banner__inner has padding:0 var(--pad) on desktop but
   var(--pad) may resolve to 0 on mobile. Ensure minimum 20px padding.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .guarantee-banner__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .guarantee__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ─────────────────────────────────────────────
   F8 — GLP-1 inline grid: glp-responsive-grid class
   4 inline grid-template-columns:1fr 1.4fr styles on glp1.html.
   Class added via direct HTML edit. CSS rule here.
   ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .glp-responsive-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────
   F9 — GLP-1 article fixed widths: prevent overflow
   glp1-deep-dive-guide.html, glp1-medications-guide.html,
   medicaid-glp1-coverage.html, medicare-glp1-coverage.html
   have fixed widths (600px, 680px, 760px, 860px) outside media queries.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* GLP-1 article content containers */
  .glp-deep__inner,
  .glp-med__inner,
  .coverage__inner,
  .glp-stage-inner,
  .glp-faq__inner,
  .glp-timeline__inner {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Any element with a fixed pixel width that may overflow */
  [style*="width:680px"],
  [style*="width: 680px"],
  [style*="width:860px"],
  [style*="width: 860px"],
  [style*="width:760px"],
  [style*="width: 760px"],
  [style*="width:600px"],
  [style*="width: 600px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────
   F10 — Maintenance hero: increase mobile height
   At 390px, 85vw = 331px which may not show the full subject.
   Increase to 100vw (max 520px) for more vertical space.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .nw-hero__img {
    height: 100vw !important;
    max-height: 520px !important;
  }
}

/* ─────────────────────────────────────────────
   F11 — home.html trust line overflow
   .trust__line and .trust__credentials have white-space:nowrap
   which causes overflow at 320px.
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .trust__line,
  .trust__credentials {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }
}

/* ─────────────────────────────────────────────
   F12 — maintenance.html section nav overflow
   .nw-section-nav a has white-space:nowrap — tabs overflow on narrow screens.
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .nw-section-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .nw-section-nav a {
    flex-shrink: 0 !important;
  }
}

/* ─────────────────────────────────────────────
   F13 — pricing.html nowrap overflow elements
   .free-consult-banner__features li and .card__price-note
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .free-consult-banner__features li {
    white-space: normal !important;
  }
  .card__price-note {
    white-space: normal !important;
  }
}

/* ─────────────────────────────────────────────
   F14 — resources.html nowrap overflow elements
   .res-email__sub and .res-start-here-top__link
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .res-email__sub {
    white-space: normal !important;
  }
  .res-start-here-top__link {
    white-space: normal !important;
  }
}

/* ─────────────────────────────────────────────
   F15 — Missing overflow-x:hidden on body
   band-colors.html, band-options.html, band-typo.html, chapter-cards-lab.html
   Applied via direct page edit.
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   F16 — Article table overflow-x:auto
   band-options.html, do-i-have-to-track-calories-forever.html,
   medicaid-glp1-coverage.html, medicare-glp1-coverage.html
   Applied via direct HTML edit (wrap <table> in scrollable div).
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Safety net: any unwrapped table in article content */
  .article-body table,
  .article__body table,
  .content table,
  .post-body table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAVIGATION FINAL CORRECTION — Version 1.0
   Root cause: .site-nav__overlay uses align-items:center which
   centers plain <a> tags (HOME, RESOURCES, CONTACT, CLIENT PORTAL,
   WORK WITH THE REBEL) while .overlay-parent-btn items have
   width:100% that overrides centering — creating inconsistent
   left/center alignment.
   Fix: override align-items to flex-start on the overlay container
   so ALL items share identical left alignment. Remove dropdowns,
   arrows, and sub-menu behavior on mobile via CSS (desktop unaffected
   because these rules are scoped to max-width:860px).
   Applied globally via mobile-fixes.css — all 51 pages inherit fix.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {

  /* 1. Unified left alignment for ALL overlay items */
  .site-nav__overlay {
    align-items: flex-start !important;
  }

  /* 2. Remove dropdown arrows on mobile */
  .overlay-arrow {
    display: none !important;
  }

  /* 3. Remove expandable dropdown submenus on mobile (both open and closed) */
  .overlay-dropdown,
  .overlay-dropdown.open {
    display: none !important;
  }

  /* 4. Overlay parent buttons: left-align, consistent spacing, no justify-content:space-between */
  .overlay-parent-btn {
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  /* 5. Plain anchor links in overlay: same block styling as parent btns */
  .site-nav__overlay > a {
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    padding: 0 !important;
  }

  /* 6. Uniform vertical gap and side padding for the overlay container */
  .site-nav__overlay {
    gap: 20px !important;
    padding: 72px 32px 48px !important;
  }

  /* 7. Touch targets: minimum 44px tap height on all overlay items */
  .site-nav__overlay > a,
  .overlay-parent-btn {
    min-height: 44px !important;
  }

  /* 8. WORK WITH THE REBEL CTA: preserve pink color */
  .site-nav__overlay > a[href*="pricing"] {
    color: #ed1780 !important;
  }

  /* 9. Close button: fixed position so it never shifts while scrolling */
  .site-nav__overlay-close {
    position: fixed !important;
    top: 24px !important;
    right: 28px !important;
    z-index: 700 !important;
    min-height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 10. No horizontal overflow in overlay */
  .site-nav__overlay {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}