/* wwwroot/css/tutorial-accessibility.css */

/* High Contrast Mode */
.high-contrast-tutorials .tutorial-tooltip {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

    .high-contrast-tutorials .tutorial-tooltip button {
        background: #fff !important;
        color: #000 !important;
        border: 2px solid #fff !important;
    }

/* Reduced Motion */
.reduced-motion .tutorial-tooltip {
    animation: none !important;
    transition: opacity 0.1s !important;
}

.reduced-motion .tutorial-highlight {
    animation: none !important;
}

/* Focus Indicators */
.tutorial-tooltip :focus {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

/* Screen Reader Only Content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Font Size Variables */
:root {
    --tutorial-font-size: 14px;
}

.tutorial-tooltip {
    font-size: var(--tutorial-font-size);
}

/* Keyboard Navigation Indicators */
.keyboard-focus .tutorial-action:focus {
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.3);
}

/* Skip Links */
.tutorial-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 100000;
}

    .tutorial-skip-link:focus {
        top: 0;
    }