/**
 * ACCESSIBILITY ENHANCEMENTS CSS
 * Touch targets, focus management, motion preferences
 */

/* ============================================
   TOUCH TARGET SIZES - 48×48px minimum
   Applies to all interactive elements
   ============================================ */

/* Ensure all buttons meet minimum touch target */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="radio"],
input[type="checkbox"] {
    min-height: 44px;
    min-width: 44px;
    /* For icon-only buttons, ensure 48×48 */
}

/* Safer accessibility CSS */

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    min-height: 40px;
}

/* Only icon buttons should be square */
.btn-icon,
.icon-btn,
button[aria-label].icon-only,
a[aria-label].icon-only {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Do NOT force all links as flex */
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Form controls only */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    min-height: 40px;
    font-size: 16px;
}

/* Do not change all labels globally */
.form-label,
.form-check-label {
    cursor: pointer;
}

/* Keep browser focus fallback */
*:focus {
    outline: revert;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid var(--hm-primary, #0f3661);
    outline-offset: 2px;
}


/* Form elements - ensure proper sizing */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 16px; /* Prevent zoom on iOS */
}

/* Checkbox and radio should be visible */
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Label should extend clickable area for form controls */
label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

/* ============================================
   FOCUS INDICATORS - Visible and Accessible
   ============================================ */

/* Enhanced focus visible state */
*:focus-visible {
    outline: 3px solid var(--hm-primary, #0f3661);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Remove default outline as we have focus-visible */
*:focus {
    outline: none;
}

/* Buttons with focus */
button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--hm-primary, #0f3661);
    outline-offset: 2px;
}

/* Form controls with focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--hm-primary, #0f3661);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(15, 54, 97, 0.1);
}

/* ============================================
   REDUCED MOTION SUPPORT
   Respects user's motion preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    /*
     * Disable all animations for users who prefer reduced motion
     * This improves accessibility for users with vestibular disorders
     */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   SKIP LINK - Accessibility First
   ============================================ */

.skip-link,
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--hm-primary, #0f3661);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
    font-weight: 500;
}

.skip-link:focus,
.skip-to-content:focus {
    top: 0;
}

/* ============================================
   VISUALLY HIDDEN BUT SCREEN-READER VISIBLE
   ============================================ */

.visually-hidden-focusable:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   KEYBOARD NAVIGATION IMPROVEMENTS
   ============================================ */

/* Improve focus visible for complex components */
.dropdown-menu [role="menuitem"]:focus-visible {
    background-color: var(--hm-bg-surface, #F8FAFC);
    outline: 2px solid var(--hm-primary, #0f3661);
    outline-offset: -2px;
}

/* Modal focus management */
.modal-content:focus-visible {
    outline: 3px solid var(--hm-primary, #0f3661);
    outline-offset: 2px;
}

/* ============================================
   MOBILE TOUCH IMPROVEMENTS
   ============================================ */

/*@media (hover: none) and (pointer: coarse) {*/
    /* Increase padding on touch devices */
    /*button,
    .btn,
    a {
        padding: 12px 16px;
    }*/

    /* Slightly larger touch targets on mobile */
    /*.btn {
        min-height: 48px;
        min-width: 48px;
    }*/

    /* Remove hover effects that don't apply to touch */
    /*a:hover::after {
        display: none;
    }
}*/

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */

@media (prefers-contrast: more) {
    /* Increase border widths and contrast in high contrast mode */
    button,
    .btn,
    input,
    textarea,
    select {
        border-width: 2px;
    }

    *:focus-visible {
        outline-width: 4px;
    }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Ensure sufficient contrast in dark mode */
    :root {
        --hm-text-primary: #FFFFFF;
        --hm-bg-white: #1A202C;
    }
}