/* ═══════════════════════════════════════════════════════════════════════
 * PASKAMER PRAAT Responsive Safety Layer (v1.0.1 minimal safe)
 * ═══════════════════════════════════════════════════════════════════════
 * v1.0.0 (2026-07-01): eerste release met 12 layers
 * v1.0.1 (2026-07-01): STRIPPED v1.0.0 veroorzaakte size-regressies op
 *   feed challenges-bar, filter-buttons en feed card images. Alleen de
 *   ECHT veilige regels behouden: horizontal overflow prevention + iOS
 *   safe-area voor bottom-nav + focus-visible + reduced-motion.
 *   Alle andere layers (touch-target min-height, img sizing, topbar
 *   safe-area, ultra-small padding, tablet grid overrides) VERWIJDERD
 *   omdat ze bestaande component-styling doorkruisen.
 * ═════════════════════════════════════════════════════════════════════ */


/* ════════════════════════ 1. HORIZONTALE OVERFLOW PREVENTIE ═══════════
 * Voorkomt "app scrollt naar rechts op mobiel" bugs, veilig omdat inner
 * scroll containers (feed, modal, chat) hun eigen scroll-context houden.
 * ═════════════════════════════════════════════════════════════════════ */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}


/* ════════════════════════ 2. iOS BOTTOM-NAV SAFE-AREA ═════════════════
 * Alleen bottom-nav krijgt extra safe-area padding op iOS notch/dynamic
 * island devices. Topbar en modals blijven UNCHANGED zodat design intact
 * blijft.
 * ═════════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  .dy-nav {
    padding-bottom: max(var(--sp-2, 8px), env(safe-area-inset-bottom));
  }
}


/* ════════════════════════ 3. REDUCED MOTION RESPECT ═══════════════════
 * OS-instelling voor gebruikers met vestibulaire issues respecteren.
 * ═════════════════════════════════════════════════════════════════════ */
@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. FOCUS-VISIBLE FALLBACK ═══════════════════
 * Alleen wanneer een element GEEN eigen focus-visible style heeft: toon
 * een subtiele accent outline voor toetsenbord-navigatie. Elementen met
 * eigen focus-style (bestaande buttons, inputs met explicit :focus)
 * behouden hun eigen styling omdat die specifieker is.
 * ═════════════════════════════════════════════════════════════════════ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--clay, #c67d06);
  outline-offset: 2px;
}