/* thc-mobile.css — census-driven mobile repairs (mechanism B, spec 2026-10-07).
   Every rule cites its measured offender: page class, width, census evidence.
   All rules max-width:767px. Desktop untouched (G4 geometry-parity gate).
   Injected as the LAST <head> child by worker.js (build-worker.py) so these
   rules win equal-specificity cascade ties against theme + elementor sheets. */
@media (max-width: 767px) {

  /* ------------------------------------------------------------------ */
  /* CLASS A — /colon-hydrotherapy-vitamin-infusion/ @375: sticky e-con  */
  /* containers carry 693px desktop width (census-full1: elements       */
  /* 7730446 + 5e6392d, computed width 692.56px), dragging page         */
  /* scrollWidth to 708px; children already max-width:100% and reflow   */
  /* once the containers are constrained. jkit-sticky-ele included.     */
  /* ------------------------------------------------------------------ */
  .elementor-element-7730446,
  .elementor-element-5e6392d {
    width: auto !important;
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------------ */
  /* CLASS B — /importance-of-getting-screened/ @375: theme .content-area*/
  /* computed width 454.39px (probe: cssW=454.391px on the whole        */
  /* single-blog template family), scrollWidth 470. Release the fixed   */
  /* width on mobile; every child inherits and reflows.                 */
  /* ------------------------------------------------------------------ */
  .content-area {
    width: auto !important;
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------------ */
  /* CLASS C — 10 condition pages (autoimmune, bloating, constipation,  */
  /* fatigue-slump, hyper-acidity, infections, irritable-bowel-syndrome,*/
  /* migraine-headaches, respiratory, tension-headaches) @375: +8px     */
  /* scrollable bleed from the testimonial shortcode widget (bisect:    */
  /* element-ed5b999 subtree; paints nothing — strip probe). Shared     */
  /* template IDs verified on all 10 pages. Contain the widget.         */
  /* ------------------------------------------------------------------ */
  .elementor-element-ed5b999 {
    overflow-x: clip;
  }

  /* ------------------------------------------------------------------ */
  /* CONTAINMENT — 4 offer/details-template pages (ayurveda-details,    */
  /* detox-package-offer, detox-ramadan-offer, healers-ramdan-offer)    */
  /* @375/390: +3px paint-nothing bleed (direct display-toggle proved   */
  /* no content element extends the viewport; a first bisect pass       */
  /* mis-blamed the skip-link). Wrapper-level containment: census gate  */
  /* still catches any real element offender at element level.          */
  /* ------------------------------------------------------------------ */
  .zak-site {
    overflow-x: clip;
  }

  /* canvas-template pages (elementor_canvas, e.g. /ayurveda-details/): the
     elementor root is a DIRECT body child — outside .zak-site (verified:
     body children = the elementor root + injected blocks), so the wrapper
     containment misses them. Empirically verified live: clipping THIS root
     yields scrollWidth 375; clipping body/html does NOT (body-overflow
     propagation quirk). */
  body.page-template-elementor_canvas > .elementor {
    overflow-x: clip;
  }

  /* ------------------------------------------------------------------ */
  /* E3 — floating contact stack overlaps form fields and body copy     */
  /* (home @375 vision-confirmed; .btn-web WhatsApp z=9999 at x15 y707, */
  /* .landpage-call-button phone at x15 y757). Dock tightly to the      */
  /* bottom-left corner with safe-area, keep tap targets.               */
  /* ------------------------------------------------------------------ */
  #wachat1 a {
    left: 10px !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .landpage-call-button a {
    left: 10px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .landpage-call-button img {
    max-width: 34px !important;
  }

  /* G3 vision verdict (home/ayurdetails @375): docked icons still PAINT OVER
     the booking form's inputs. Stacking fix: the white form card gains a
     stacking context ABOVE the icons — icons slide under the card (visible
     only outside it), form fields fully tappable and legible. */
  #wachat1 a,
  .landpage-call-button a {
    z-index: 500;
  }
  .thcf-wrap {
    position: relative;
    z-index: 1000;
  }

  /* CLASS D — 15 program pages: decorative absolute IMG (wp-image-7992,*/
  /* 188px) bleeds 41px off the LEFT edge. LTR left-overflow creates no */
  /* scrollable area (census: scrollW=375) and vision reads show no     */
  /* text overlap — design intent, no rule. Re-verified in G3.          */

  /* ------------------------------------------------------------------ */
  /* CLASS E — service-page CTA buttons (e.g. "Book a Session", "View   */
  /* Discounted Packages" on /services/colon-hydrotherapy/, /ayurveda/,  */
  /* /homeopathy/, /yoga/, etc. @375: stacked vertically with mismatched */
  /* widths (button A = 159px, button B = 237px, no gap, both            */
  /* inline-block collapsing to text width — vision-confirmed 2026-10-10). */
  /* Structure: the two buttons live in separate elementor widgets       */
  /* (.elementor-element-*) inside a parent flex row (.e-flex.e-con).    */
  /* Elementor's mobile responsive switch did not flip the parent row    */
  /* to column on these pages (the original crawl was desktop). Force:   */
  /* parent row becomes column, each widget fills 100% width, and each   */
  /* button-wrapper has a vertical gap.                                  */
  /* ------------------------------------------------------------------ */
  .e-con.e-flex.e-child,
  .e-con.e-flex {
    flex-direction: column !important;
  }
  .elementor-mobile-align-center,
  .elementor-align-center {
    width: 100% !important;
  }
  .elementor-mobile-align-center .elementor-button,
  .elementor-align-center .elementor-button {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* gap between consecutive full-width button widgets */
  .elementor-mobile-align-center + .elementor-mobile-align-center,
  .elementor-align-center + .elementor-align-center {
    margin-top: 12px !important;
  }
}