/*
 * ============================================================
 * M.H College
 * File: 99-accessibility.css
 * Purpose:
 * Keyboard accessibility and reduced-motion preferences
 * ============================================================
 */

/*
 * ============================================================
 * Keyboard focus
 * ============================================================
 */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 4px;
}

/*
 * Add a dark separation ring so the gold focus indicator stays
 * visible on both light and dark backgrounds.
 */

.button:focus-visible,
.menu-toggle:focus-visible,
.language-link:focus-visible,
.floating-whatsapp:focus-visible,
.social-links a:focus-visible {
    box-shadow:
        0 0 0 2px var(--bg),
        0 0 0 5px var(--gold-light);
}

/*
 * Preserve a clear focus shape on navigation links without
 * changing their normal resting appearance.
 */

.main-nav a:focus-visible,
.footer-links a:focus-visible,
.footer-contact > a:focus-visible,
.text-link:focus-visible,
.brand:focus-visible {
    border-radius: 8px;
}

/*
 * Ensure the skip link becomes visible when focused.
 */

.skip-link:focus,
.skip-link:focus-visible {
    top: 16px;

    outline-offset: 3px;
}

/*
 * Keep focused controls above nearby decorative elements.
 */

.menu-toggle:focus-visible,
.language-link:focus-visible,
.floating-whatsapp:focus-visible,
.social-links a:focus-visible {
    position: relative;
    z-index: 2;
}

/*
 * Improve focus visibility for users of Windows High Contrast
 * and other forced-color modes.
 */

@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 4px;

        box-shadow: none;
    }
}

/*
 * ============================================================
 * Reduced motion
 * ============================================================
 */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
        transition-delay: 0s !important;

        scroll-behavior: auto !important;
    }

    /*
     * Reveal content immediately, including elements prepared by
     * the progressive .reveal-ready JavaScript state.
     */

    .reveal,
    .reveal.reveal-ready,
    .reveal.reveal-ready.visible {
        opacity: 1;

        transform: none;

        transition: none !important;
        transition-delay: 0s !important;

        will-change: auto;
    }

    /*
     * Disable repeating WhatsApp animations.
     */

    .floating-whatsapp,
    .floating-whatsapp::before {
        animation: none !important;
    }

    /*
     * Remove menu and hamburger movement while preserving the
     * open and closed states.
     */

    .main-nav,
    .main-nav.open,
    .menu-toggle span:not(.sr-only) {
        transition: none !important;
    }

    /*
     * Remove hover movement while preserving colors.
     */

    .button:hover,
    .button:active,
    .text-link:hover,
    .course-card:hover,
    .tech-card:hover,
    .why-item:hover,
    .contact-card:hover,
    .gallery-item:hover,
    .trainer-experience:hover,
    .floating-whatsapp:hover,
    .social-links a:hover,
    .footer-links a:hover,
    .footer-contact > a:hover,
    .brand:hover .brand-logo {
        transform: none;
    }

    .course-card:hover .course-image img,
    .course-feature-media:hover img,
    .trainer-visual:hover img,
    .why-visual:hover img,
    .gallery-item:hover img {
        transform: none;
    }

    .button:hover .icon,
    .text-link:hover .icon,
    .tech-card:hover .icon,
    .why-item:hover .icon,
    .floating-whatsapp:hover .icon,
    .footer-contact > a:hover .icon,
    .course-card:hover .course-number,
    .course-feature-media:hover span {
        transform: none;
    }
}