/* ============================================================
   MediSwitch Landing - UI Patch (assets/ui.css)
   - Trendy custom cursor (desktop only)
   - Strong mobile responsiveness: safer wrapping + remove forced <br> on mobile
   - Small UX fixes (iOS text scaling, overflow, fixed-bg on mobile)
   ============================================================ */

/* --- 0) Hard stop: prevent horizontal scroll (root + body) --- */
html, body { max-width: 100%; }
html { overflow-x: hidden; }
body { overflow-x: hidden; position: relative; }
@supports (overflow: clip) {
  html { overflow-x: clip; }
  body { overflow-x: clip; }
}

/* --- 0) Mobile text scaling / readability --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; height: auto; }

/* Flex/grid overflow guard */
* { min-width: 0; }

/* Safer wrapping (prevents overflow on narrow screens) */
:where(h1,h2,h3,h4,p,li,span,a,button) { overflow-wrap: anywhere; word-break: keep-all; }
:where(.badge, .pill, .tag) { white-space: nowrap; }

/* Remove forced <br> on mobile (keeps desktop layout) */
@media (max-width: 900px) {
  br.m-only-hide,
  br.m-hide { display: none !important; }
}

/* Background fixed on desktop, disable on mobile (performance) */
@media (max-width: 900px) {
  .fixed-bg, .bg-fixed { background-attachment: scroll !important; }
}

/* --- 1) Prevent “bento” tiles from collapsing on mobile --- */
@media (max-width: 900px) {
  :where(.bento-grid) { grid-template-columns: 1fr !important; }
  :where(.bento-tile, .tile) { min-height: auto !important; }
}

/* --- 2) Stronger stacking guards for sticky elements --- */
:where(.sticky) { contain: paint; }

/* --- 3) Misc page-specific safety fixes --- */
@media (max-width: 900px) {
  /* Avoid horizontal overflow from wide charts/grids */
  :where(.viz, .mini-viz, .chart, .grid, .table-wrap) { overflow-x: auto; }
  :where(.viz) { -webkit-overflow-scrolling: touch; }

  /* Feature/Comparison headings used across pages */
  :where(.feature-title, .tab-text h3, .comp-card h3, .feature-grid h2, .features-hero h1) {
    font-size: clamp(22px, 6.8vw, 32px) !important;
    line-height: 1.25 !important;
  }

  /* Cards/sections padding sanity */
  :where(.comp-content) { padding: 28px !important; }
  :where(.tab-content.active) { gap: 32px !important; }
}

/* --- 4) Trendy custom cursor (desktop only) --- */
@media (hover: hover) and (pointer: fine) {
  html.msw-cursor-on, html.msw-cursor-on * { cursor: none !important; }

  .msw-cursor-dot,
  .msw-cursor-ring {
    position: fixed;
    left: 0; top: 0;
    pointer-events: none;
    z-index: 9999;
    will-change: left, top, transform, opacity;
    transform: translate(-50%, -50%);
    opacity: 0;
  }

  .msw-cursor-dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
    z-index: 10000;
  }

  .msw-cursor-ring {
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1.5px solid rgba(59, 130, 246, 0.4);
    background: transparent;
    transition: transform 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, opacity 200ms ease;
  }

  html.msw-cursor-ready .msw-cursor-dot,
  html.msw-cursor-ready .msw-cursor-ring { opacity: 1; }

  html.msw-cursor-hidden .msw-cursor-dot,
  html.msw-cursor-hidden .msw-cursor-ring { opacity: 0; }

  html.msw-cursor-hover .msw-cursor-ring {
    transform: translate(-50%, -50%) scale(1.8);
    background: rgba(59, 130, 246, 0.10);
    border-color: transparent;
  }

  html.msw-cursor-down .msw-cursor-ring {
    transform: translate(-50%, -50%) scale(0.92);
  }
}

/* Respect accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .msw-cursor-ring { transition: none !important; }
}