/* ============================================================
   MediSwich 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) 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(p, li, a, span, div) {
  overflow-wrap: anywhere;
  word-break: keep-all;
}

/* Modern line-breaking where supported */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }

/* --- 1) Remove "manual <br>" on mobile (prevents awkward line breaks) --- */
@media (max-width: 768px) {
  :where(h1, h2, h3, p, li) br:not(.br-keep) { display: none; }
}

/* --- 2) Prevent iOS jank: fixed background on mobile --- */
@media (max-width: 768px) {
  .cta-section { background-attachment: scroll !important; }
}

/* --- 3) Mobile typography safety clamps (light-touch overrides) --- */
@media (max-width: 768px) {
  /* Common section titles */
  .section-title { font-size: clamp(24px, 7vw, 36px) !important; line-height: 1.2 !important; }
  .section-desc  { font-size: 16px !important; }

  /* Index hero */
  .hero h1 { font-size: clamp(30px, 8.5vw, 40px) !important; line-height: 1.2 !important; }
  .hero p  { font-size: 16px !important; }

  /* 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: 10px; height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    mix-blend-mode: difference;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
  }

  .msw-cursor-ring {
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.55);
    background: rgba(37, 99, 235, 0.22);
    backdrop-filter: blur(2px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    transition: transform 160ms ease, 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.35); }
  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; }
}