/**
 * BTBX Touch Target Improvements
 * WCAG 2.1 AAA Compliant - Minimum 44px touch targets
 *
 * This file ensures all interactive elements meet accessibility standards
 * for touch targets on mobile devices.
 */

/* ============================================
   BASE TOUCH TARGET UTILITY CLASSES
   ============================================ */

/* Minimum touch target size for all clickable elements */
.touch-target-min {
    min-height: 44px;
    min-width: 44px;
}

/* Full-size touch target with padding */
.touch-target-full {
    height: 44px;
    min-height: 44px;
}

/* Compact but compliant (for icon buttons) */
.touch-target-compact {
    height: 44px;
    width: 44px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   FORM INPUT ENHANCEMENTS
   ============================================ */

/* All text inputs, selects, and textareas - but NOT those with padding utility classes */
input[type="text"]:not([class*="pl-"]),
input[type="email"]:not([class*="pl-"]),
input[type="password"]:not([class*="pl-"]),
input[type="number"]:not([class*="pl-"]),
input[type="tel"]:not([class*="pl-"]),
input[type="url"]:not([class*="pl-"]),
input[type="search"]:not([class*="pl-"]),
input[type="date"]:not([class*="pl-"]),
input[type="time"]:not([class*="pl-"]),
input[type="datetime-local"]:not([class*="pl-"]),
input[type="color"]:not([class*="pl-"]),
select,
textarea {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    line-height: 1.5 !important;
}

/* Textarea-specific adjustments */
textarea {
    min-height: 88px !important; /* 2x minimum for better usability */
    resize: vertical;
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */

/* Base button styles with proper touch targets */
button,
.btn,
[class*="btn-"],
a[role="button"],
[role="button"] {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 16px !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 150ms ease-in-out;
}

/* Icon-only buttons */
.btn-icon,
[aria-label="close"],
[aria-label="menu"],
[aria-label="search"],
[aria-label="edit"],
[aria-label="delete"] {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 12px !important;
}

/* ============================================
   CHECKBOX & RADIO ENHANCEMENTS
   ============================================ */

/* Larger checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    cursor: pointer;
}

/* Checkbox/radio wrapper for better touch area */
input[type="checkbox"] + label,
input[type="radio"] + label {
    min-height: 44px;
    padding: 10px 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* Touch-safe spacing between checkbox and label */
input[type="checkbox"] + label *,
input[type="radio"] + label * {
    pointer-events: none;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    pointer-events: auto;
}

/* ============================================
   LINK ENHANCEMENTS
   ============================================ */

/* Navigation links and standalone links */
nav a,
.nav a,
.menu a,
.pagination a,
.breadcrumb a {
    min-height: 44px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
}

/* ============================================
   MOBILE-SPECIFIC IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Increase touch targets on mobile */
    button,
    .btn,
    a[role="button"] {
        min-height: 48px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        font-size: 16px !important;
    }

    /* Larger inputs on mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select {
        min-height: 48px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    /* Larger checkboxes on mobile */
    input[type="checkbox"],
    input[type="radio"] {
        width: 28px !important;
        height: 28px !important;
    }

    /* Ensure adequate spacing between stacked elements */
    .space-y-2 > * + *,
    .space-y-3 > * + *,
    .space-y-4 > * + * {
        margin-top: 12px !important;
    }
}

/* ============================================
   ACCESSIBILITY FOCUS INDICATORS
   ============================================ */

/* Visible focus for keyboard navigation */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   HOVER/ACTIVE STATES
   ============================================ */

/* Desktop hover effects */
@media (hover: hover) and (pointer: fine) {
    button:hover,
    .btn:hover,
    a[role="button"]:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    button:active,
    .btn:active,
    a[role="button"]:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

/* Touch feedback for mobile */
@media (hover: none) and (pointer: coarse) {
    button:active,
    .btn:active,
    a[role="button"]:active,
    input[type="checkbox"]:active,
    input[type="radio"]:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* ============================================
   SPECIAL COMPONENT FIXES
   ============================================ */

/* Livewire button overrides */
[wire\\:click] {
    min-height: 44px !important;
}

/* Alpine.js clickable elements */
[x-on\\:click],
@click {
    min-height: 44px !important;
    cursor: pointer;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    button,
    .btn {
        border: 1px solid #000;
        background: white !important;
        color: black !important;
    }
}

/* ============================================
   CRISIS RESOURCE LINKS (SOS Joueurs)
   ============================================ */

/* Crisis links need EXTRA LARGE touch targets for safety */
@media (max-width: 768px) {
    /* Joueurs Info Service and SOS Joueurs links - CRITICAL SAFETY */
    a[href*="joueurs-info-service"],
    a[href*="sos-joueurs"],
    .sos-joueurs-link,
    a[href^="tel:0974751313"] {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        background-color: #fef2f2 !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        transition: all 150ms ease-in-out !important;
    }

    /* Hover state for crisis links */
    a[href*="joueurs-info-service"]:hover,
    a[href*="sos-joueurs"]:hover,
    .sos-joueurs-link:hover,
    a[href^="tel:0974751313"]:hover {
        background-color: #fee2e2 !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    }

    /* Active state for crisis links */
    a[href*="joueurs-info-service"]:active,
    a[href*="sos-joueurs"]:active,
    .sos-joueurs-link:active,
    a[href^="tel:0974751313"]:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
    }

    /* Ensure icons in crisis links are properly sized */
    a[href*="joueurs-info-service"] svg,
    a[href*="sos-joueurs"] svg,
    .sos-joueurs-link svg,
    a[href^="tel:0974751313"] svg {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0;
    }
}

/* ============================================
   FOOTER LINKS - Mobile Touch Targets
   ============================================ */

/* Footer links need proper touch targets on mobile */
@media (max-width: 768px) {
    /* All footer links - ensure 44x44px minimum */
    footer a,
    [class*="footer"] a {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
        justify-content: center !important;
    }

    /* Footer link lists - maintain proper spacing */
    footer ul li a,
    [class*="footer"] ul li a {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Inline footer links (like on welcome page) */
    footer .flex a,
    [class*="footer"] .flex a {
        margin: 4px !important;
    }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    button,
    .btn,
    input,
    select,
    textarea {
        transition: none !important;
    }

    /* Also disable crisis link hover transitions */
    a[href*="joueurs-info-service"],
    a[href*="sos-joueurs"],
    .sos-joueurs-link,
    a[href^="tel:0974751313"] {
        transition: none !important;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Dark mode focus indicator */
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline-color: #60a5fa;
    }
}