/**
 * responsive-fixes.css — Targeted cross-device polish
 *
 * Designed to LOAD AFTER base.css and components.css.
 * Only fills real gaps; never duplicates rules already in those files.
 *
 * Tested intent: iOS Safari, Android Chrome, Safari macOS, Chrome desktop,
 * Firefox, PWA standalone mode (Add to Home Screen), older Safari (≤14).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. iOS auto-zoom prevention
   ─────────────────────────────────────────────
   base.css sets `input { font-size: 14px }`. iOS Safari auto-zooms the page
   whenever a focused input has font-size < 16px. We force 16px on every
   interactive form field — this is the only correct fix.
   ═══════════════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input:not([type]),
select,
textarea {
  font-size: 16px;
}
.form-step label input,
.form-step label textarea,
.form-step label select,
.cek-form label input,
.login-card label input { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. Keyboard accessibility — visible focus rings on tab, hidden on click
   ─────────────────────────────────────────────
   base.css line 21 sets `outline: none` on buttons. That kills keyboard nav
   for ~3% of users (motor disability, power users). We restore focus rings
   ONLY when the user is actually tabbing (not clicking).
   ═══════════════════════════════════════════════════════════════════════════ */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary, #0e8a7a);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. Respect prefers-reduced-motion
   ─────────────────────────────────────────────
   Some users have motion sensitivity (vestibular disorders). Honor their OS
   setting — disable animations and instant-jump scrolls instead of smooth.
   ═══════════════════════════════════════════════════════════════════════════ */
@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;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. PWA standalone polish — prevent pull-to-refresh bounce
   ─────────────────────────────────────────────
   When user adds the site to Home Screen and opens it as PWA, pull-to-refresh
   feels weird (white bounce). overscroll-behavior contains the scroll within.
   ═══════════════════════════════════════════════════════════════════════════ */
html, body { overscroll-behavior-y: contain; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. Safari backdrop-filter prefix
   ─────────────────────────────────────────────
   .sticky-cta uses backdrop-filter: blur(8px). Safari (incl. iOS) needs the
   -webkit- prefix or the blur silently fails.
   ═══════════════════════════════════════════════════════════════════════════ */
.sticky-cta {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. Hover-state guards for touch devices
   ─────────────────────────────────────────────
   On touch screens, :hover styles "stick" after tap (the browser keeps the
   element in :hover state until next tap elsewhere). Disable hover-only
   visual changes when device can't actually hover.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .mcard:hover,
  .card:hover,
  .article-row:hover,
  .article-card:hover,
  .trip-card:hover,
  .umkm-card:hover,
  .explore-tile:hover,
  .btn-outline:hover,
  .btn-primary:hover,
  .copy-btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. Touch-target boost on coarse pointers (real touch devices)
   ─────────────────────────────────────────────
   .hdr-back / .hdr-icon are 32x32 in base.css. WCAG recommends 44x44 minimum
   for touch. Boost them on coarse-pointer devices only (preserves compact
   desktop appearance).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .hdr-back,
  .hdr-icon,
  .page-header .back-btn { width: 40px; height: 40px; }
  .copy-btn { padding: 8px 12px; }
  .cal-nav { width: 36px; height: 36px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. Long-word safety — prevent overflow from URLs/slugs
   ─────────────────────────────────────────────
   Long unbreakable strings (URLs in articles, customer emails, etc.) can
   bust the mobile shell. overflow-wrap:anywhere is the modern fix.
   ═══════════════════════════════════════════════════════════════════════════ */
.mcard-title,
.mcard-sub,
.card .title,
.card-text,
.lead,
p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. Modern dynamic viewport height (mobile chrome bar fix)
   ─────────────────────────────────────────────
   100vh "jumps" when iOS/Android URL bar appears/hides. 100dvh handles it.
   Apply only to login shells where full-height matters.
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (min-height: 100dvh) {
  .login-wrap,
  .admin-login-shell { min-height: 100dvh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. Print refinements (complement base.css)
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .sticky-cta,
  .filter-pills,
  .tabs { display: none !important; }
  .mcard, .card { break-inside: avoid; box-shadow: none; }
}