/*
 * ============================================================
 * M.H College
 * File: 95-responsive-interactions.css
 * Purpose:
 * Touch-device responsive interaction adjustments
 * ============================================================
 */

/*
 * ============================================================
 * Touch devices
 * Maximum width: 820px
 * ============================================================
 */

@media (
    max-width: 820px
) and (
    hover: none
) and (
    pointer: coarse
) {
    /*
     * Header and mobile navigation
     */

    .menu-toggle:hover,
    .language-link:hover,
    .main-nav a:hover {
        transform: none;
    }

    .main-nav a:hover {
        color: #e9e1d4;

        background: rgba(255, 255, 255, .018);

        border-color: transparent;
    }

    /*
     * Preserve the active navigation state when tapped.
     */

    .main-nav a.active:hover,
    .main-nav a[aria-current="page"]:hover {
        color: var(--gold-light);

        background:
            linear-gradient(
                90deg,
                rgba(217, 173, 87, .135),
                rgba(217, 173, 87, .045)
            );

        border-color: rgba(245, 220, 152, .34);
    }

    /*
     * Disable hover movement on content cards.
     */

    .course-card:hover,
    .tech-card:hover,
    .why-item:hover,
    .gallery-item:hover,
    .trainer-experience:hover {
        transform: none;
    }

    /*
     * Disable hover zoom on images.
     */

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