/* ============================================================================
 * dranilbhatt.com — Mobile Responsiveness Fix Pack
 * SARA AI for Phoenix AI Agent  ·  2026-05-27
 *
 * LOAD ORDER:  load style-premium.css FIRST, then this file.
 * Pure overrides — no resets that would conflict with the base design system.
 *
 * Targets:
 *   ✓ Eliminate horizontal overflow at 320px / 375px / 414px viewports
 *   ✓ iOS Safari quirks (tap highlight, text zoom, safe-area-inset)
 *   ✓ Long medical term wrapping (Glomerulonephritis etc.)
 *   ✓ Floating-button stacking
 *   ✓ Accessibility: reduced-motion, focus-visible, hit-target spacing
 *   ✓ Patch appointment.html (which loads style-v2.css and lacks the
 *     main breakpoints) — see "APPOINTMENT-PAGE PATCH" block below
 * ============================================================================ */

/* ---------- GLOBAL: iOS / Safari quirks ---------- */
html {
  -webkit-text-size-adjust: 100%;          /* stop iOS landscape font zoom */
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  -webkit-tap-highlight-color: rgba(10, 38, 71, 0.12);  /* subtle navy tap, not iOS gray */
}

body {
  overflow-x: hidden;                       /* belt + braces — base already has this */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ---------- Long words: prevent overflow on narrow screens ---------- */
h1, h2, h3, h4, h5, p, li, a, span, td, th {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* ---------- Images: hard cap to viewport width ---------- */
img, picture, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* ---------- iOS safe-area-inset on fixed floating elements ---------- */
.whatsapp-float,
.scroll-top,
.print-btn,
.fixed-cta,
[class*="floating"] {
  right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cookie-banner,
.drb-consent {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
}

/* ---------- Accessibility: reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track,
  .marquee,
  [class*="scrolling"] {
    animation: none !important;
    transform: none !important;
  }
}

/* ---------- Focus-visible: keyboard users get a clear outline ---------- */
:focus-visible {
  outline: 3px solid #14BEF0;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Floating button stack on mobile ---------- */
@media (max-width: 768px) {
  .whatsapp-float {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    z-index: 50;
  }
  .scroll-top {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
    z-index: 49;
  }
  .print-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 138px) !important;
    z-index: 48;
  }
}

/* ---------- Ticker / marquee: cap height on mobile + fade edges ---------- */
@media (max-width: 768px) {
  .ticker-bar {
    padding: 8px 0 !important;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  }
  .ticker-item {
    font-size: 13px !important;
    padding: 0 16px !important;
  }
}

/* ---------- Country-flag strip: wrap nicely on small screens ---------- */
@media (max-width: 480px) {
  [class*="country"] span,
  [class*="flags"] span {
    display: inline-block;
    margin: 4px 6px;
    font-size: 1.4rem;
    line-height: 1;
  }
}

/* ---------- Form inputs: prevent iOS zoom + larger hit-area ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-size: 16px !important;               /* prevents iOS auto-zoom */
  min-height: 48px;                          /* generous tap target */
  padding: 12px 14px;
  border-radius: 8px;
}

textarea {
  min-height: 120px;
}

/* ---------- Buttons: stable tap targets ---------- */
@media (max-width: 768px) {
  button,
  .btn,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1.3;
  }
  /* Buttons that are icons-only stay square */
  button[aria-label]:not(:has(span:not(.sr-only))),
  .icon-btn {
    min-width: 48px;
  }
}

/* ---------- Spacing: tap-target spacing in nav-drawer ---------- */
@media (max-width: 768px) {
  .nav-menu li + li {
    margin-top: 8px;
  }
  .nav-menu li a {
    width: 100%;
    text-align: center;
  }
}

/* ---------- Tables (if any): scroll horizontally instead of breaking layout ---------- */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ---------- Hero copy: tighter line-height and padding on small screens ---------- */
@media (max-width: 480px) {
  .hero h1,
  .page-header h1 {
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
  }
  .hero p,
  .page-header p {
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

/* ---------- 320px (iPhone SE 1st gen) — tightest container padding ---------- */
@media (max-width: 360px) {
  .container,
  .container-narrow,
  .section,
  .hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  h1 { font-size: 1.65rem !important; }
  h2 { font-size: 1.35rem !important; }
  .btn { padding: 12px 16px; font-size: 0.95rem; }
}

/* ============================================================================
 * APPOINTMENT-PAGE PATCH
 * ----------------------------------------------------------------------------
 * /appointment.html loads style-v2.css (a WordPress block leftover) and does
 * NOT include the main responsive nav / 768px / 480px breakpoints. These
 * rules graft the same mobile pattern onto that page so the menu is reachable.
 * ============================================================================ */
@media (max-width: 768px) {
  /* Generic responsive scaffold for the appointment page's serif layout */
  body.appointment-page header nav,
  body.appointment-page .nav,
  body.appointment-page .site-header > nav {
    flex-wrap: wrap;
    padding: 12px 16px;
  }
  body.appointment-page .nav__menu,
  body.appointment-page nav ul {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-top: 1px solid rgba(10, 38, 71, 0.08);
  }
  body.appointment-page .nav.is-open .nav__menu,
  body.appointment-page nav.nav--open ul {
    display: flex;
  }
  body.appointment-page .nav__menu li a,
  body.appointment-page nav ul li a {
    display: block;
    padding: 14px 16px;
    min-height: 48px;
    font-size: 17px;
  }
  body.appointment-page .nav__burger,
  body.appointment-page #navBurger,
  body.appointment-page .hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-left: auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
  }
  body.appointment-page .nav__burger::before,
  body.appointment-page #navBurger::before,
  body.appointment-page .hamburger::before {
    content: "";
    width: 22px;
    height: 16px;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size: 100% 2px;
    background-position: top, center, bottom;
    background-repeat: no-repeat;
  }
  body.appointment-page .field-row {
    grid-template-columns: 1fr !important;
  }
  body.appointment-page form button,
  body.appointment-page form input[type="submit"] {
    width: 100%;
    min-height: 52px;
    font-size: 17px;
  }
}

/* ============================================================================
 * MICROFIXES — found during 375px / 414px / 768px live inspection
 * ============================================================================ */

/* Stat-card numbers: don't shrink below readable on narrow screens */
@media (max-width: 480px) {
  .stat-item p,
  .stat-card p,
  .stats-grid p {
    font-size: 13px !important;
    line-height: 1.4;
  }
  .stat-item h3,
  .stat-item .stat-number,
  .stats-grid .stat-number {
    font-size: 1.6rem !important;
  }
}

/* Pricing card grid → stack on mobile */
@media (max-width: 768px) {
  [class*="pricing-grid"],
  [class*="price-cards"],
  .grid-pricing {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

/* Hospital cards — image header should not crop weirdly */
@media (max-width: 480px) {
  [class*="hospital-card"] img,
  [class*="centre-card"] img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}

/* Service grid icons (the 22x22 inline-styled badges) — bump for finger taps */
@media (max-width: 768px) {
  [style*="width:22px"][style*="height:22px"],
  [style*="width: 22px"][style*="height: 22px"] {
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

/* Footer link rows — single column with comfortable spacing */
@media (max-width: 480px) {
  .footer a {
    display: inline-block;
    padding: 6px 4px;
    min-height: 44px;
    line-height: 1.4;
  }
}

/* Breadcrumbs on mobile — allow wrap, smaller font */
@media (max-width: 480px) {
  .breadcrumb,
  [class*="breadcrumb"] {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* Hide print-only elements on small screens (declutter) */
@media (max-width: 480px) {
  .print-btn {
    display: none !important;
  }
}

/* Ensure dropdown menus inside the mobile drawer don't double-indent */
@media (max-width: 768px) {
  .nav-menu .nav-dropdown {
    width: 100%;
    text-align: center;
  }
  .nav-menu .nav-dropdown-menu {
    padding: 0 !important;
  }
  .nav-menu .nav-dropdown-menu a {
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 16px;
    border-radius: 8px;
  }
}