/* ============================================================
   PHYSIO TIME — RESPONSIVE.CSS
   Standalone responsive stylesheet, separate from the main
   index.html styles on purpose so it's easy to audit, diff,
   and maintain independently.

   Load AFTER the main inline styles (right before </head> or
   right before </body>) so these rules win the cascade for any
   overlapping selector, without needing !important everywhere.

   Breakpoint strategy (mobile-first, min-width based):
     base    : 0–479px    true mobile
     sm      : 480–767px  large phone
     md      : 768–1023px tablet
     lg      : 1024–1279px small desktop / tablet landscape
     xl      : 1280–1599px standard desktop
     xxl     : 1600–2199px large desktop
     xxxl    : 2200px+    ultrawide
   ============================================================ */

/* ---------- 0. Global safety net (root cause fixes, not band-aids) ---------- */
html, body { max-width: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
* { min-width: 0; } /* prevents flex/grid children from forcing overflow */

/* ============================================================
   1. MARKETING SITE
   ============================================================ */

/* --- Nav header ---
   FIX: previously targeted .mobile-menu-btn, a class that does
   not exist in index.html (the real button is .hbg) — that rule
   was dead code. The full show/hide + dropdown-panel behavior
   for .hbg / .nav-links now lives in index.html's own
   @media(max-width:900px) block so there's one definition, not
   two files fighting over the same selector. This file just
   hides the desktop-only CTA link on the same breakpoint. */
@media (max-width: 900px) {
  .nav-cta { display: none; }
}

/* --- Hero --- */
@media (max-width: 767px) {
  /* FIX: #hero is display:grid (set in index.html), not flex —
     flex-direction did nothing here before. Collapse the grid
     to a single column instead, which is what was actually
     needed and matches the rule below at 1024px. */
  #hero { padding: 84px 5% 56px; min-height: auto; }
  .hero-inner { gap: 2rem; }
  h1.hh { font-size: clamp(1.85rem, 8vw, 2.6rem); }
  .hero-sub { max-width: 100%; font-size: .92rem; }
  .hero-btns { flex-direction: column; width: 100%; }
  .hero-btns > * { width: 100%; justify-content: center; }
  .hero-stats { flex-wrap: wrap; gap: .6rem; }
  .hero-card { width: 100%; max-width: 100%; margin-top: 1.5rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-inner { gap: 2.5rem; }
  h1.hh { font-size: clamp(2.2rem, 5.5vw, 3rem); }
}

/* --- Section grids: desktop → tablet(2) → mobile(1) --- */
@media (max-width: 1023px) {
  .svc-grid, .why-grid, .rev-grid, .faq-grid, .doc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .svc-grid, .why-grid, .rev-grid, .faq-grid, .doc-grid, .hc-grid { grid-template-columns: 1fr !important; }
  .svc-card, .why-card, .faq-item, .doc-card { padding: 1.1rem; }
}

/* --- Home care / doctor visual section --- */
@media (max-width: 900px) {
  .hc-grid { grid-template-columns: 1fr; }
  .hc-visual-box { order: -1; margin-bottom: 1.5rem; }
}

/* --- Booking form --- */
@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 599px) {
  .book-form { padding: 1.2rem; }
  .book-info-card { padding: 1.1rem; }
}

/* --- FAQ --- */
@media (max-width: 599px) {
  .faq-q { font-size: .92rem; padding: .9rem 1rem; }
  .faq-a { font-size: .85rem; padding: 0 1rem .9rem; }
}

/* --- Footer / social row --- */
@media (max-width: 599px) {
  .f-social { flex-direction: column; align-items: center; gap: .9rem; }
}

/* ============================================================
   2. STAFF PORTAL
   ============================================================ */

/* --- Shell: sidebar + main --- */
@media (min-width: 1024px) {
  .pt-sb { width: 220px; }
}
@media (max-width: 1023px) {
  .pt-wrap { position: relative; overflow: hidden; }
  .pt-sb {
    position: fixed; top: 0; left: 0; height: 100%;
    z-index: 2500; width: min(86vw, 320px);
    max-width: min(86vw, 320px); /* defensive cap: guards against
      the sidebar rendering full-width regardless of cause */
    box-sizing: border-box;
    overflow-x: hidden;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transition: transform .25s ease;
    background-color: #05224f;
    overflow-y: visible;
  }
  .pt-sb.open { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }
  .pt-sb-nav, .pt-nitem { max-width: 100%; box-sizing: border-box; }
  .pt-hbg { display: inline-flex !important; }
  .pt-main { width: 100%; }
  .pt-content { padding: .9rem; }
}

/* --- Topbar: never let title + pills fight for one row --- */
@media (max-width: 640px) {
  .pt-mbar {
    flex-wrap: wrap;
    row-gap: .5rem;
    padding: .6rem .85rem;
  }
  .pt-mbar h2 {
    font-size: .92rem;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pt-mbar-r {
    flex-basis: 100%;
    justify-content: space-between;
    gap: .5rem;
  }
  .pt-cpill { font-size: .62rem; padding: .24rem .6rem; white-space: nowrap; }
  .pt-upill { font-size: .68rem; padding: .24rem .65rem; white-space: nowrap; }
  .pt-topbar { padding: .55rem .85rem; }
}

/* --- Dashboard stat cards: 4 → 2 → compact 2 ---
   FIX: this is now the single source of truth for .pt-stats at
   every width (the conflicting 1-column rule inside index.html's
   inline <style> at ≤480px has been removed), so the layout is
   no longer dependent on load order / cascade tie-breaking. */
@media (min-width: 1024px) {
  .pt-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 481px) and (max-width: 1023px) {
  .pt-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pt-stats { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .pt-stat {
    padding: .7rem .8rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .55rem;
    align-items: center;
  }
  .pt-stat .pt-si { grid-row: 1 / 3; width: 32px; height: 32px; font-size: .85rem; margin-bottom: 0; }
  .pt-stat .pt-sv { font-size: 1.15rem; grid-column: 2; grid-row: 1; }
  .pt-stat .pt-sl { font-size: .6rem; grid-column: 2; grid-row: 2; margin-top: 0; }
}

/* --- Dashboard secondary grid (Recent Patients / Top Conditions) --- */
@media (max-width: 767px) {
  .pt-dash-grid { grid-template-columns: 1fr; }
}

/* --- Top Conditions bars: never clip the count --- */
.pt-card-bd { padding: 1rem 1.2rem; }
@media (max-width: 480px) {
  .pt-card-bd { padding: .85rem .9rem; }
  .pt-crow { gap: .5rem; }
  .pt-clbl { width: clamp(64px, 32vw, 110px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pt-cn { width: 34px; font-size: .64rem; }
}

/* --- Forms: 2-col → 1-col --- */
@media (max-width: 640px) {
  .pt-fg2 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .pt-fg2 { grid-template-columns: 1fr; }
}

/* --- Body chart image: bigger, but never overflow --- */
@media (max-width: 480px) {
  .pt-bodychart-wrap { max-width: 100%; }
}

/* --- Tables: horizontal scroll instead of squeeze --- */
.pt-tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .pt-tbl { min-width: 560px; }
}

/* --- Modals: full-width with safe margins on mobile --- */
@media (max-width: 640px) {
  .pt-mbg { padding: .75rem; }
  .pt-modal { max-width: 100%; width: 100%; max-height: 92vh; }
  .pt-mhd, .pt-mbd, .pt-mft { padding-left: 1rem; padding-right: 1rem; }
}

/* --- Buttons: stack on mobile where they'd otherwise clip --- */
@media (max-width: 480px) {
  .pt-card-hd { flex-wrap: wrap; gap: .5rem; }
  .pt-card-hd .ptbtn { flex: 1 1 auto; }
}

/* --- Sidebar nav item spacing: guaranteed compact, no stray gaps --- */
.pt-sb-nav { flex: 0 1 auto !important; display: flex; flex-direction: column; gap: 1px; }
.pt-sb-foot { margin-top: auto !important; flex-shrink: 0; }

/* ============================================================
   3. LARGE / ULTRAWIDE SCREENS
   ============================================================ */
@media (min-width: 1600px) {
  .container { max-width: 1320px; }
  .pt-panel { max-width: 1180px; }
}
@media (min-width: 2200px) {
  .container { max-width: 1440px; }
  .pt-panel { max-width: 1280px; }
  body { font-size: 1.05rem; }
}

/* ---------- Reduced motion respected everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   4. FIXES — mobile "shake"/jump + fixed-button overlap
   ============================================================ */

/* FIX: 100vh doesn't account for the mobile browser's collapsing
   address bar, so the hero used to visibly resize/jump as the
   page scrolled. 100dvh tracks the *actual* visible viewport;
   100vh is kept as a fallback for older browsers. */
@media (max-width: 767px) {
  #hero { min-height: 100vh; min-height: 100dvh; }
}

/* FIX: wa-fab, staff-fab, sticky-call and btt were all pinned to
   raw pixel offsets with no allowance for the iPhone home-indicator
   safe area, so on notched devices they could crowd together or
   sit flush against the gesture bar. env() falls back to 0 on
   devices without a safe area, so this is a no-op elsewhere.

   ROOT-CAUSE FIX: on mobile, the sticky Call bar (bottom:24) sits
   in the same row as WhatsApp/Staff unless those two are raised
   clear of it, and Back-to-top must clear WhatsApp in turn. That
   raise (80px / 80px / 140px) used to live in index.html's own
   mobile media query, but this file loads after it and wins any
   tie, so it was silently resetting all three straight back down
   to 24px/24px/100px — undoing the raise and letting the buttons
   crowd together right on top of the call bar. This block is now
   the single place that sets these offsets, combining the raised
   base value with the safe-area inset instead of overwriting it.

   ROOT-CAUSE FIX 2: Staff used to sit fixed at bottom-left with its
   own text label underneath, which is exactly where the hero's now
   full-width mobile text lives — guaranteeing overlap with whatever
   paragraph line happens to reach the bottom of the screen. Moving
   it into the same right-hand stack as WhatsApp/Back-to-top (and
   dropping its separate label so it's a compact icon like WhatsApp)
   keeps every floating control on one side, leaving the rest of the
   screen — including all hero content — genuinely clear. Threshold
   widened to 1024px to match the hero's own single-column
   breakpoint, since that's the range where this collision is
   possible. Stack, bottom to top: Call bar (centered) → WhatsApp →
   Staff → Back-to-top. */
@media (max-width: 1024px) {
  .wa-fab { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .staff-fab {
    left: auto;
    right: 24px;
    bottom: calc(144px + env(safe-area-inset-bottom));
  }
  .staff-lbl { display: none; }
  .sticky-call { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .btt { bottom: calc(208px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   5. FIX — iOS Safari auto-zoom on form focus
   ============================================================
   ROOT CAUSE: every text input, select and textarea on the site
   (staff portal patient/assessment forms, the search/filter bar,
   the public booking form) renders at .75rem–.85rem (~12–14px).
   iOS Safari auto-zooms the whole page in whenever a focused
   field's font-size is under 16px, and — unlike a manual pinch —
   that zoom does not reliably reset when the field loses focus.
   That's the exact symptom reported: tapping into any field zooms
   the page in, and afterward scrolling/viewing the dashboard stays
   broken because the visual viewport is still zoomed. Raising
   every form field to 16px removes the trigger entirely; no JS
   viewport hacks or "user-scalable=no" (which would block
   legitimate pinch-zoom for everyone) are needed. Scoped to
   ≤1024px since this is a touch-device behavior; desktop form
   sizing is untouched. */
@media (max-width: 1024px) {
  .pt-f input, .pt-f select, .pt-f textarea,
  .pt-srch, .pt-select,
  .bf input, .bf select, .bf textarea {
    font-size: 16px;
  }
}