/**
 * WhatArmy Accessibility Styles
 * WCAG 2.1 AA Compliant Focus States & Accessibility Enhancements
 */

/* ============================================
   FOCUS STATES - VISIBLE OUTLINES
   ============================================ */

/* Global focus-visible for all interactive elements */
:focus-visible {
    outline: 2px solid var(--color-rust, #E07854);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Remove default outline but keep focus-visible */
:focus:not(:focus-visible) {
    outline: none;
}

/* Form Inputs - Enhanced Focus States */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
    outline: 2px solid var(--color-rust, #E07854);
    outline-offset: 0;
    border-color: var(--color-rust, #E07854);
    box-shadow: 0 0 0 4px rgba(224, 120, 84, 0.15);
}

/* Button Focus States */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: 2px solid var(--color-rust, #E07854);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(224, 120, 84, 0.2);
}

/* Link Focus States */
a:focus-visible {
    outline: 2px solid var(--color-rust, #E07854);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Navigation Focus States */
.nav-links a:focus-visible,
.nav-menu a:focus-visible {
    outline: 2px solid var(--color-rust, #E07854);
    outline-offset: 2px;
    background: rgba(224, 120, 84, 0.1);
    border-radius: 4px;
}

/* Card Focus States */
.card:focus-visible,
.service-card:focus-visible,
.case-study-card:focus-visible,
.testimonial-card:focus-visible {
    outline: 2px solid var(--color-rust, #E07854);
    outline-offset: 4px;
}

/* Dropdown Focus - for keyboard navigation */
.dropdown-toggle:focus-visible,
.accordion-header:focus-visible,
.faq-question:focus-visible {
    outline: 2px solid var(--color-rust, #E07854);
    outline-offset: 2px;
    background: rgba(224, 120, 84, 0.05);
}

/* ============================================
   SKIP LINKS - Keyboard Navigation
   ============================================ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-forest, #0F3D3E);
    color: var(--color-white, #ffffff);
    padding: 12px 24px;
    z-index: 100000;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-rust, #E07854);
    outline-offset: 2px;
}

/* ============================================
   REDUCED MOTION - Respect User Preferences
   ============================================ */
@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;
    }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */
@media (prefers-contrast: high) {
    :focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }

    .btn,
    button {
        border: 2px solid currentColor;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        border: 2px solid currentColor;
    }
}

/* ============================================
   SCREEN READER ONLY CONTENT
   ============================================ */
.sr-only,
.screen-reader-text,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   KEYBOARD NAVIGATION INDICATORS
   ============================================ */

/* Show keyboard focus more prominently */
body.keyboard-navigation :focus-visible {
    outline: 3px solid var(--color-rust, #E07854);
    outline-offset: 3px;
}

/* Interactive element cursor hints */
button,
[role="button"],
a,
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
select,
.clickable,
[tabindex]:not([tabindex="-1"]) {
    cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea {
    cursor: text;
}

/* ============================================
   FORM LABELS & ERROR STATES
   ============================================ */

/* Required field indicator */
.form-group label .required,
.form-group label[aria-required="true"]::after {
    color: #dc2626;
    content: " *";
}

/* Error states */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-group.has-error input:focus-visible,
.form-group.has-error textarea:focus-visible,
.form-group.has-error select:focus-visible {
    outline-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

.form-error-message,
.error-message,
[role="alert"] {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 4px;
}

/* Success states */
.form-group.has-success input,
.form-group.has-success textarea,
.form-group.has-success select {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

/* ============================================
   TOUCH TARGET SIZES
   Minimum 44x44px for touch targets (WCAG 2.5.5)
   ============================================ */
@media (pointer: coarse) {
    button,
    .btn,
    input[type="submit"],
    input[type="button"],
    input[type="checkbox"],
    input[type="radio"],
    select,
    a.nav-link,
    .nav-menu a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Checkbox and radio labels need padding for touch */
    input[type="checkbox"] + label,
    input[type="radio"] + label {
        padding: 12px 0;
        display: inline-block;
    }
}

/* ============================================
   ARIA LIVE REGIONS
   ============================================ */
[aria-live="polite"],
[aria-live="assertive"] {
    /* Ensure live regions are accessible but not visually intrusive */
}

/* Status messages */
.status-message,
[role="status"] {
    padding: 12px 16px;
    border-radius: 8px;
    margin: 16px 0;
}

.status-message.success,
[role="status"].success {
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.3);
    color: #15803d;
}

.status-message.error,
[role="status"].error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #dc2626;
}

/* ============================================
   DARK MODE FOCUS ADJUSTMENTS
   ============================================ */
@media (prefers-color-scheme: dark) {
    :focus-visible {
        outline-color: #f97316;
    }
}

/* Dark background sections - adjust focus color */
.hero--forest :focus-visible,
.cta-section--forest :focus-visible,
.service-hero--forest :focus-visible,
.section--dark :focus-visible,
[data-theme="dark"] :focus-visible {
    outline-color: #ffffff;
}

/* ============================================
   PRINT STYLES - ACCESSIBILITY
   ============================================ */
@media print {
    /* Show URLs for links in print */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }

    /* Don't show URLs for internal/javascript links */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* Ensure sufficient contrast in print */
    body {
        color: #000;
        background: #fff;
    }
}