/* =====================================================================
   MealWeek Focus State Styles
   Version: 1.0.0

   Keyboard accessibility and focus state management.
   Implements WCAG 2.2 Focus Visible requirements.

   Table of Contents:
   1. Focus Ring Custom Properties
   2. Global Focus-Visible Styles
   3. Animated Focus Ring
   4. Skip Link Styles
   5. Focus-Within Container Styles
   6. Component-Specific Focus Styles
   7. Reduced Motion Support
   ===================================================================== */


/* =====================================================================
   1. FOCUS RING CUSTOM PROPERTIES
   ===================================================================== */

:root {
    /* Focus ring appearance */
    --mw-focus-ring-color: var(--mw-color-primary);
    --mw-focus-ring-width: 2px;
    --mw-focus-ring-offset: 2px;
    --mw-focus-ring-style: solid;

    /* Focus ring animation */
    --mw-focus-ring-animation-duration: 200ms;
    --mw-focus-ring-animation-easing: var(--mw-easing-standard, ease-out);

    /* High contrast focus for accessibility */
    --mw-focus-ring-color-high-contrast: #005FCC;
}

/* Dark mode adjustments */
.mud-theme-dark {
    --mw-focus-ring-color: var(--mw-color-primary-light, #4DB6AC);
    --mw-focus-ring-color-high-contrast: #66B2FF;
}


/* =====================================================================
   2. GLOBAL FOCUS-VISIBLE STYLES
   ===================================================================== */

/*
   Use :focus-visible for keyboard-only focus indicators.
   This hides focus rings for mouse clicks but shows them for keyboard navigation.
*/

/* Reset default browser focus styles */
*:focus {
    outline: none;
}

/* Apply focus ring only for keyboard navigation */
*:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
}

/* Links and buttons */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
    border-radius: var(--mw-radius-sm, 4px);
}

/* Form elements */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable="true"]:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
}

/* Interactive elements with role */
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible,
[role="slider"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="listbox"]:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
}


/* =====================================================================
   3. ANIMATED FOCUS RING
   ===================================================================== */

/* Animated focus ring class - add to elements that should have animated focus */
.mw-focus-animate:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
    animation: mw-focus-ring-appear var(--mw-focus-ring-animation-duration) var(--mw-focus-ring-animation-easing);
}

@keyframes mw-focus-ring-appear {
    from {
        outline-offset: 6px;
        outline-color: transparent;
    }
    to {
        outline-offset: var(--mw-focus-ring-offset);
        outline-color: var(--mw-focus-ring-color);
    }
}

/* Pulsing focus ring for important elements */
.mw-focus-pulse:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
    animation: mw-focus-ring-pulse 1.5s ease-in-out infinite;
}

@keyframes mw-focus-ring-pulse {
    0%, 100% {
        outline-offset: var(--mw-focus-ring-offset);
    }
    50% {
        outline-offset: 4px;
    }
}

/* Ring focus effect (alternative to outline) */
.mw-focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--mw-focus-ring-offset) var(--mw-color-background, white),
                0 0 0 calc(var(--mw-focus-ring-offset) + var(--mw-focus-ring-width)) var(--mw-focus-ring-color);
}

/* Inset focus ring (for elements where outline would be clipped) */
.mw-focus-inset:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--mw-focus-ring-width) var(--mw-focus-ring-color);
}


/* =====================================================================
   4. SKIP LINK STYLES
   ===================================================================== */

/* Skip link - hidden until focused */
.mw-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--mw-z-modal, 500) + 100);
    padding: var(--mw-spacing-3, 12px) var(--mw-spacing-5, 24px);
    background: var(--mw-color-primary);
    color: var(--mw-color-text-inverse, white);
    font-weight: var(--mw-font-weight-semibold, 600);
    text-decoration: none;
    border-radius: 0 0 var(--mw-radius-md, 8px) var(--mw-radius-md, 8px);
    box-shadow: var(--mw-shadow-lg);
    transition: top var(--mw-focus-ring-animation-duration) var(--mw-focus-ring-animation-easing);
}

.mw-skip-link:focus,
.mw-skip-link:focus-visible {
    top: 0;
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
}

/* Multiple skip links container */
.mw-skip-links {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: var(--mw-spacing-2, 8px);
    z-index: calc(var(--mw-z-modal, 500) + 100);
}

.mw-skip-links .mw-skip-link {
    position: relative;
    top: -100%;
    transform: none;
}

.mw-skip-links .mw-skip-link:focus,
.mw-skip-links .mw-skip-link:focus-visible {
    top: 0;
}


/* =====================================================================
   5. FOCUS-WITHIN CONTAINER STYLES
   ===================================================================== */

/* Container highlight when child is focused */
.mw-focus-container:focus-within {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
}

/* Subtle container highlight */
.mw-focus-container-subtle:focus-within {
    background-color: var(--mw-color-focus, rgba(10, 124, 90, 0.08));
}

/* Card with focus-within effect */
.mw-focus-card:focus-within {
    box-shadow: 0 0 0 var(--mw-focus-ring-width) var(--mw-focus-ring-color),
                var(--mw-shadow-lg);
}

/* Form group focus */
.mw-form-group:focus-within .mw-form-label {
    color: var(--mw-color-primary);
}


/* =====================================================================
   6. COMPONENT-SPECIFIC FOCUS STYLES
   ===================================================================== */

/* --- MudBlazor Component Overrides --- */

/* MudButton focus */
.mud-button:focus-visible,
.mud-button-root:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color) !important;
    outline-offset: var(--mw-focus-ring-offset) !important;
}

/* MudIconButton focus */
.mud-icon-button:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color) !important;
    outline-offset: var(--mw-focus-ring-offset) !important;
}

/* MudFab focus */
.mud-fab:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color) !important;
    outline-offset: var(--mw-focus-ring-offset) !important;
}

/* MudInput focus */
.mud-input:focus-within {
    /* MudBlazor handles its own input focus, this adds container awareness */
}

.mud-input-control:focus-within .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mw-color-primary) !important;
    border-width: 2px !important;
}

/* MudChip focus */
.mud-chip:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color) !important;
    outline-offset: var(--mw-focus-ring-offset) !important;
}

/* MudCard interactive focus */
.mud-card[onclick]:focus-visible,
.mud-card[role="button"]:focus-visible,
.mw-recipe-card:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color) !important;
    outline-offset: var(--mw-focus-ring-offset) !important;
}

/* MudMenu item focus */
.mud-menu-item:focus-visible,
.mud-list-item:focus-visible {
    outline: none !important;
    background-color: var(--mw-color-focus, rgba(10, 124, 90, 0.12)) !important;
}

/* MudTab focus */
.mud-tab:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color) !important;
    outline-offset: calc(var(--mw-focus-ring-offset) * -1) !important;
}

/* MudCheckbox/MudSwitch focus */
.mud-checkbox:focus-within .mud-checkbox-input,
.mud-switch:focus-within .mud-switch-track {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
}

/* --- Navigation Focus Styles --- */

/* Bottom tab bar items */
.mw-tab-item:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: calc(var(--mw-focus-ring-offset) * -1);
    border-radius: var(--mw-radius-md, 8px);
}

/* Top nav links */
.mw-nav-link:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) rgba(255, 255, 255, 0.9);
    outline-offset: var(--mw-focus-ring-offset);
}

.mud-theme-dark .mw-nav-link:focus-visible {
    outline-color: var(--mw-focus-ring-color);
}

/* --- Card & List Item Focus --- */

/* Recipe card focus */
.mw-recipe-card:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: var(--mw-focus-ring-offset);
}

/* Shopping list item focus */
.mw-shopping-item:focus-visible {
    outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color);
    outline-offset: calc(var(--mw-focus-ring-offset) * -1);
    background-color: var(--mw-color-focus, rgba(10, 124, 90, 0.08));
}


/* =====================================================================
   7. REDUCED MOTION SUPPORT
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Disable focus ring animations */
    .mw-focus-animate:focus-visible,
    .mw-focus-pulse:focus-visible {
        animation: none !important;
    }

    /* Instant skip link appearance */
    .mw-skip-link {
        transition: none !important;
    }

    /* Keep static focus indicators visible */
    *:focus-visible {
        outline: var(--mw-focus-ring-width) var(--mw-focus-ring-style) var(--mw-focus-ring-color) !important;
        outline-offset: var(--mw-focus-ring-offset) !important;
    }
}


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

@media (forced-colors: active) {
    *:focus-visible {
        outline: 3px solid CanvasText !important;
        outline-offset: 2px !important;
    }

    .mw-skip-link:focus-visible {
        outline: 3px solid CanvasText !important;
        background: Canvas !important;
        color: CanvasText !important;
    }
}