/**
 * Accessibility Styles
 * Focus states, keyboard navigation, and screen reader support
 *
 * @package Tokutei
 * @since 1.1.0
 */

/* ==========================================================================
   Focus States - Only show for keyboard users
   ========================================================================== */

/* Hide focus outlines by default (mouse users) */
body:not(.user-is-tabbing) *:focus {
    outline: none;
}

/* Show enhanced focus outlines for keyboard users */
body.user-is-tabbing *:focus,
.focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Specific focus styles for interactive elements */
body.user-is-tabbing a:focus,
body.user-is-tabbing button:focus,
body.user-is-tabbing input:focus,
body.user-is-tabbing select:focus,
body.user-is-tabbing textarea:focus,
a.focus-visible,
button.focus-visible,
input.focus-visible,
select.focus-visible,
textarea.focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Focus styles for links */
body.user-is-tabbing a:focus {
    background-color: rgba(0, 123, 255, 0.1);
    text-decoration: underline;
}

/* Focus styles for buttons */
body.user-is-tabbing button:focus,
body.user-is-tabbing .btn:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Focus styles for form inputs */
body.user-is-tabbing input:focus,
body.user-is-tabbing select:focus,
body.user-is-tabbing textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Focus styles for menu items */
body.user-is-tabbing .primary-menu a:focus {
    background-color: rgba(0, 123, 255, 0.1);
    transform: translateY(-2px);
}

/* Focus styles for cards */
body.user-is-tabbing .card:focus,
body.user-is-tabbing .grammar-card:focus,
body.user-is-tabbing .post-card:focus {
    outline: 3px solid #007bff;
    outline-offset: 3px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Skip to Content Link
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #007bff;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100000;
    transition: top 0.2s;
    font-weight: 600;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid white;
    outline-offset: -4px;
}

/* Alternative skip link styling (comment/uncomment as needed) */
/*
.skip-link {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: #212529;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    z-index: 100000;
    transition: top 0.3s;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.skip-link:focus {
    top: 0;
}
*/

/* ==========================================================================
   Screen Reader Only Content
   ========================================================================== */

.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Show on focus (for skip links) */
.sr-only:focus,
.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 8px 16px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Screen reader announcements */
[role="status"],
[role="alert"],
[aria-live] {
    /* Already invisible via .sr-only if needed */
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    /* Enhanced contrast for all interactive elements */
    *:focus {
        outline: 3px solid currentColor !important;
        outline-offset: 3px !important;
    }

    a {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }

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

    /* Higher contrast borders */
    input,
    select,
    textarea {
        border: 2px solid currentColor;
    }

    /* Stronger shadows */
    .card,
    .modal,
    .dropdown {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    }
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Disable animations and transitions */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep focus transitions instant */
    *:focus {
        transition: none !important;
    }
}

/* ==========================================================================
   Focus Visible States for Specific Components
   ========================================================================== */

/* Menu toggle button */
body.user-is-tabbing .menu-toggle:focus {
    outline: 2px solid #007bff;
    outline-offset: 4px;
    background-color: rgba(0, 123, 255, 0.1);
}

/* User menu link */
body.user-is-tabbing .user-link:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
}

/* Breadcrumb links */
body.user-is-tabbing .breadcrumb-item a:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    background-color: rgba(0, 123, 255, 0.1);
    padding: 2px 4px;
    margin: -2px -4px;
}

/* Pagination links */
body.user-is-tabbing .pagination a:focus,
body.user-is-tabbing .pagination button:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    background-color: rgba(0, 123, 255, 0.1);
    transform: scale(1.1);
}

/* Tab navigation */
body.user-is-tabbing .tab-list button:focus,
body.user-is-tabbing .tab-list a:focus {
    outline: 2px solid #007bff;
    outline-offset: -2px;
    z-index: 1;
}

/* Accordion headers */
body.user-is-tabbing .accordion-header:focus,
body.user-is-tabbing .accordion-toggle:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    background-color: rgba(0, 123, 255, 0.05);
}

/* Modal close button */
body.user-is-tabbing .modal-close:focus,
body.user-is-tabbing .close:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    transform: scale(1.1);
}

/* Dropdown toggle */
body.user-is-tabbing .dropdown-toggle:focus,
body.user-is-tabbing [aria-haspopup="true"]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
}

/* Social links */
body.user-is-tabbing .social-links a:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    transform: scale(1.15);
}

/* Back to top button */
body.user-is-tabbing .back-to-top:focus,
body.user-is-tabbing #back-to-top:focus {
    outline: 2px solid #007bff;
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(0, 123, 255, 0.2);
}

/* Checkboxes and radio buttons */
body.user-is-tabbing input[type="checkbox"]:focus,
body.user-is-tabbing input[type="radio"]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
}

/* Table cells (when navigable) */
body.user-is-tabbing td:focus,
body.user-is-tabbing th:focus {
    outline: 2px solid #007bff;
    outline-offset: -2px;
    background-color: rgba(0, 123, 255, 0.1);
}

/* ==========================================================================
   ARIA States Visual Indicators
   ========================================================================== */

/* Expanded/Collapsed states */
[aria-expanded="true"] .icon-expand::before {
    content: '−'; /* Minus */
}

[aria-expanded="false"] .icon-expand::before {
    content: '+'; /* Plus */
}

/* Selected state */
[aria-selected="true"] {
    background-color: rgba(0, 123, 255, 0.1);
    font-weight: 600;
}

/* Pressed state (toggle buttons) */
[aria-pressed="true"] {
    background-color: #007bff;
    color: white;
}

/* Disabled state */
[aria-disabled="true"],
[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hidden but accessible */
[aria-hidden="true"]:not(.icon) {
    display: none;
}

/* Invalid fields */
[aria-invalid="true"] {
    border-color: #dc3545;
    border-width: 2px;
}

[aria-invalid="true"]:focus {
    outline-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* Required fields indicator */
[aria-required="true"]::after,
.required::after {
    content: ' *';
    color: #dc3545;
    font-weight: bold;
}

/* ==========================================================================
   Keyboard Navigation Helpers
   ========================================================================== */

/* Visual indicator for roving tabindex */
[tabindex="0"]:not(a):not(button):not(input):not(select):not(textarea) {
    cursor: pointer;
}

/* Active/current indicators */
[aria-current="page"],
[aria-current="step"],
[aria-current="location"] {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   Dark Mode Focus States
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    body.user-is-tabbing *:focus {
        outline-color: #5eb3f6;
    }

    body.user-is-tabbing a:focus {
        background-color: rgba(94, 179, 246, 0.2);
    }

    body.user-is-tabbing button:focus,
    body.user-is-tabbing .btn:focus {
        box-shadow: 0 0 0 3px rgba(94, 179, 246, 0.4);
    }

    body.user-is-tabbing input:focus,
    body.user-is-tabbing select:focus,
    body.user-is-tabbing textarea:focus {
        border-color: #5eb3f6;
        box-shadow: 0 0 0 3px rgba(94, 179, 246, 0.4);
    }

    .skip-link {
        background: #5eb3f6;
        color: #000;
    }

    [aria-selected="true"] {
        background-color: rgba(94, 179, 246, 0.2);
    }

    [aria-pressed="true"] {
        background-color: #5eb3f6;
        color: #000;
    }
}

/* ==========================================================================
   Responsive Focus States
   ========================================================================== */

@media (max-width: 768px) {
    /* Larger focus outlines on mobile for better visibility */
    body.user-is-tabbing *:focus {
        outline-width: 3px;
        outline-offset: 3px;
    }

    /* Skip link more prominent on mobile */
    .skip-link {
        padding: 12px 20px;
        font-size: 16px;
    }
}

/* ==========================================================================
   Print - Hide focus states
   ========================================================================== */

@media print {
    .skip-link,
    [role="status"],
    [aria-live] {
        display: none !important;
    }

    /* Reset all focus styles for print */
    *:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}