/**
 * Greenhill Academy Frontend Custom Styles
 *
 * This file contains all custom CSS for the frontend interface,
 * complementing Tailwind CSS with specific design requirements.
 */

/* ============================================
   Global Styles
   ============================================ */

* {
    font-family: 'Mona Sans', system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* ============================================
   Hero Section
   ============================================ */

.hero-overlay {
    background: linear-gradient(135deg, rgba(65, 19, 107, 0.85) 0%, rgba(44, 5, 80, 0.7) 100%);
}

/* ============================================
   Animations
   ============================================ */

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-slide-in {
    animation: slideInRight 0.4s ease-out;
}

.animate-fade-scale {
    animation: fadeInScale 0.6s ease-out;
}

/* ============================================
   Mobile Menu
   ============================================ */

.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* ============================================
   Card Hover Effects
   ============================================ */

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Back to Top Button
   ============================================ */

#backToTop {
    transition: all 0.3s ease;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Focus Visible Enhancement */
.focus-visible\:ring-greenhill:focus-visible {
    outline: 2px solid #41136b;
    outline-offset: 2px;
}

/* Custom Scrollbar for Mega Menu */
.mega-menu-scroll::-webkit-scrollbar {
    width: 6px;
}

.mega-menu-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.mega-menu-scroll::-webkit-scrollbar-thumb {
    background: #41136b;
    border-radius: 10px;
}

.mega-menu-scroll::-webkit-scrollbar-thumb:hover {
    background: #2c0550;
}