/* ==========================================================================
   kalisme-crossos.css — Cross-OS Compatibility Layer
   Version 12 — kalisme.com
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SAFE AREA INSETS (iOS notch, Android cutout, iPadOS)
   -------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Fixed/sticky headers */
  .top-bar,
  .top-nav,
  nav[class*="top"],
  header {
    padding-top: env(safe-area-inset-top);
  }

  /* Fixed bottom elements */
  .bottom-bar,
  footer,
  [class*="bottom-nav"] {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --------------------------------------------------------------------------
   2. TOUCH TARGETS — 44×44px minimum (Apple HIG / WCAG 2.5.8)
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  button,
  a,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  select,
  summary,
  .btn,
  .card,
  .nav-link,
  .tab,
  .chip {
    min-height: 44px;
    min-width: 44px;
  }

  /* Inline links within text — add vertical padding instead of min-height */
  p a,
  li a,
  span a,
  td a {
    min-height: auto;
    min-width: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    display: inline-block;
  }

  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  textarea {
    min-height: 44px;
    font-size: max(1em, 16px); /* Prevent iOS zoom on focus */
  }

  /* Checkboxes & radios — enlarge hit area */
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 24px;
    min-width: 24px;
  }
}

/* --------------------------------------------------------------------------
   3. BACKDROP-FILTER FALLBACKS (HarmonyOS, older browsers)
   -------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .top-bar,
  .top-nav,
  nav,
  .modal-overlay,
  .glass,
  [style*="backdrop-filter"] {
    background-color: rgba(0, 0, 0, 0.85) !important;
  }
}

/* --------------------------------------------------------------------------
   4. SCROLL-SNAP FALLBACKS (HarmonyOS instability)
   -------------------------------------------------------------------------- */
@supports not (scroll-snap-type: x mandatory) {
  .scroll-container,
  [style*="scroll-snap"] {
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   5. iOS SPECIFIC FIXES
   -------------------------------------------------------------------------- */
/* Prevent auto-zoom on input focus (iOS Safari) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: max(1em, 16px);
  }
}

/* Momentum scrolling for iOS */
.scroll-container,
[class*="scroll"],
[style*="overflow"] {
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   6. CHROMEOS / LARGE SCREEN ADAPTATION
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) and (max-width: 1400px) {
  /* ChromeOS typical viewport: 1366×768 — prevent horizontal truncation */
  body {
    overflow-x: hidden;
  }
}

/* --------------------------------------------------------------------------
   7. HIGH CONTRAST / FORCED COLORS (Windows accessibility)
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  button,
  a,
  input,
  select,
  textarea {
    border: 1px solid ButtonText;
  }

  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   8. REDUCED MOTION (Cross-OS accessibility)
   -------------------------------------------------------------------------- */
@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;
  }
}

/* --------------------------------------------------------------------------
   9. PRINT SAFETY (Cross-OS)
   -------------------------------------------------------------------------- */
@media print {
  .top-bar,
  .top-nav,
  nav,
  .bottom-bar,
  footer,
  .modal-overlay,
  .fab,
  button[class*="close"] {
    display: none !important;
  }

  body {
    padding: 0 !important;
  }
}