/* ====================================================================
   Maloc · Mobile App Polish
   Native-feeling mobile UX layer. Applied across all Maloc decks.
   Target: iOS Safari + Android Chrome, viewport ≤ 768px.
   ==================================================================== */

/* --- Variables: safe areas + native motion --- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --tap: rgba(0,0,0,0);
  --native-ease: cubic-bezier(0.32, 0.72, 0, 1); /* Apple's ease */
}

/* Touch device detection (cleaner on touch screens) */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    -webkit-tap-highlight-color: var(--tap);
  }

  /* Remove hover effects on touch (avoids sticky-hover on iOS) */
  a:hover, button:hover, [role="button"]:hover {
    transform: none !important;
  }
}

/* Mobile-only block (≤ 768px) */
@media (max-width: 768px) {

  /* ---- Reset + native scroll ---- */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  body {
    /* Use dynamic vh to handle iOS Safari URL bar */
    min-height: 100dvh;
    /* Prevent any horizontal scroll */
    overflow-x: hidden;
    max-width: 100vw;
    /* Respect safe areas */
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }

  /* ---- Typography: native-readable ---- */
  body {
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  p { font-size: 15px; line-height: 1.55; }

  /* Prevent iOS zoom on focus: inputs must be ≥16px */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* ---- Touch targets ≥ 44 × 44 px (Apple HIG) ---- */
  a, button, [role="button"], .btn,
  input[type="submit"], input[type="button"], label[for] {
    min-height: 44px;
    touch-action: manipulation; /* disable double-tap zoom on buttons */
  }

  /* ---- Tap feedback (native) ---- */
  a:active, button:active, [role="button"]:active, .btn:active {
    transition: transform 0.08s var(--native-ease), opacity 0.08s var(--native-ease);
    transform: scale(0.97);
    opacity: 0.86;
  }

  /* ---- Sticky safe-top header pattern ----
     Only target real top-bars / nav elements, NOT semantic <header> blocks
     used for hero sections (which need their own padding to clear the navbar). */
  .topbar, .nav, .navbar, header[role="banner"]:not(.hero) {
    padding-top: max(12px, var(--safe-top)) !important;
  }
  /* Sticky bottom CTA pattern (when content has one) */
  .sticky-cta, .mobile-cta-bar {
    padding-bottom: max(12px, var(--safe-bottom)) !important;
  }

  /* ---- Native scroll for horizontal containers ---- */
  .scroll-x, [data-scroll-x] {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding: 16px;
  }
  .scroll-x::-webkit-scrollbar { display: none; }
  .scroll-x > * { scroll-snap-align: start; }

  /* ---- Container padding: comfortable native gutter ---- */
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---- Hide hover-only decorations on touch ---- */
  .desktop-only { display: none !important; }

  /* ---- Better focus rings for keyboard nav on mobile ---- */
  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 8px;
  }

  /* ---- Smooth momentum scroll inside scrollable elements ---- */
  [data-scroll-y], .scroll-y {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ---- Print-only artifacts hidden by default ---- */
  .print-only { display: none !important; }

  /* ---- Pinch-zoom allowed but no double-tap zoom ---- */
  /* (touch-action manipulation already applied to buttons above) */
}

/* Very small phones (≤ 380px) – extra tight defaults */
@media (max-width: 380px) {
  body { font-size: 15px; }
  .container { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Landscape phone – fix viewport quirks */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .topbar, .nav, .navbar, header[role="banner"]:not(.hero) {
    padding-top: max(8px, var(--safe-top)) !important;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}