/**
 * Global Styles
 * 
 * This file contains global styles and CSS resets that apply
 * across the entire application.
 */

/**
 * iOS Momentum Scrolling Fix [M-012]
 * 
 * Enables smooth, physics-based scrolling on iOS devices.
 * This provides a native-feeling scroll experience with
 * momentum and bounce effects.
 * 
 * Impact: All scrollable containers on iOS
 * Performance: Minimal impact (native iOS optimization)
 * Accessibility: Improves usability for touch users
 */
* {
  -webkit-overflow-scrolling: touch;
}

/**
 * Additional mobile improvements
 */
html {
  /* Prevent text size adjustment on orientation change */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  /* Improve text rendering on mobile */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Focus-Visible Global System [P1 - Sprint Design/UX]
 * 
 * Implementa focus-visible para navegación por teclado (WCAG AA)
 * Solo muestra focus cuando el usuario navega con Tab key
 * 
 * Impact: Accessibility mejorada para usuarios de teclado
 * Performance: Minimal (CSS puro + script ligero)
 * Browser Support: Chrome, Firefox, Safari, Edge
 */

/* ===== RESET DEFAULT FOCUS ===== */
/* Remover outline predeterminado del navegador */
*:focus {
  outline: none;
}

/* ===== CUSTOM FOCUS-VISIBLE (SOLO TECLADO) ===== */
/* Solo aplica cuando el usuario navega con Tab key */
*:focus-visible {
  outline: 3px solid var(--accent-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== REMOVE FOCUS FOR MOUSE USERS ===== */
/* Cuando se hace click con mouse, no mostrar outline */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ===== OVERRIDE ESPECÍFICOS POR TIPO DE ELEMENTO ===== */

/* Buttons */
button:focus-visible,
.btn:focus-visible {
  outline-width: 3px;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Links */
a:focus-visible {
  outline-width: 2px;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-width: 2px;
  outline-offset: 1px;
  border-radius: 0.375rem;
}

/* Navigation items */
.nav-link:focus-visible,
.nav-item:focus-visible,
.bottom-nav-item:focus-visible {
  outline-width: 2px;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Cards clickable */
.resource-card:focus-visible,
.validation-card:focus-visible {
  outline-width: 2px;
  outline-offset: 4px;
  border-radius: 0.75rem;
}

/* ===== PREFERS-CONTRAST: HIGH ===== */
/* Para usuarios que necesitan alto contraste */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline-width: 4px;
    outline-offset: 2px;
    outline-color: oklch(0.50 0.20 285); /* Más oscuro */
  }
}

/* ===== PREFERS-REDUCED-MOTION ===== */
/* Desactivar transiciones de focus para usuarios con sensibilidad */
@media (prefers-reduced-motion: reduce) {
  *:focus-visible {
    transition: none;
  }
}

/* ===== DARK MODE ===== */
/* Asegurar contraste en modo oscuro */
@media (prefers-color-scheme: dark) {
  *:focus-visible {
    outline-color: var(--accent-secondary);
  }
}

/* ===== USER-IS-TABBING CLASS ===== */
/* Agregado por script en Layout.astro */
/* Solo mostrar focus si la clase .user-is-tabbing está presente en body */
body:not(.user-is-tabbing) *:focus-visible {
  outline: none;
}

body.user-is-tabbing *:focus-visible {
  outline: 3px solid var(--accent-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

/**
 * Remove default tap highlight on mobile (iOS/Android)
 * Replaced with custom :active states if needed
 */
* {
  -webkit-tap-highlight-color: transparent;
}