/* Modern CSS for Moto-Reli Driving School */
/* Optimized with Tailwind @apply directives */

/* Base styles */
* {
    @apply font-inter;
    box-sizing: border-box;
}

/* Smooth scrolling with reduced motion support */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Global Layout */
body {
    @apply leading-relaxed text-gray-900 bg-white;
    margin: 0;
    padding: 0;
}

/* Navigation Styles */
.nav-link {
    @apply relative text-gray-700 hover:text-blue-600 font-semibold transition-colors duration-300;
}

.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all duration-300;
}

.nav-link:hover::after {
    @apply w-full;
}

/* Mobile Menu */
.mobile-menu {
    @apply lg:hidden hidden bg-white border-t border-blue-100;
}

.mobile-menu-btn {
    @apply text-blue-700 hover:text-blue-900 focus:outline-none p-2;
}

/* Hero Section */
.hero-section {
    @apply relative min-h-screen flex items-center justify-center overflow-hidden pt-20;
}

.hero-overlay {
    @apply absolute inset-0 bg-gradient-to-br from-blue-900/80 via-blue-800/70 to-blue-700/60;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-blue-600 rounded;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-700;
}

/* Footer */
.footer-link {
    @apply text-blue-200 hover:text-red-400 transition-colors duration-300;
}

.footer-icon {
    @apply text-red-400;
}

/* Back to Top Button */
#backToTop {
    @apply fixed bottom-8 right-8 bg-blue-600 hover:bg-red-600 text-white w-14 h-14 rounded-full shadow-2xl transition-all duration-300 opacity-0 invisible flex items-center justify-center z-50 transform hover:scale-110;
}

#backToTop.visible {
    @apply opacity-100 visible;
}

/* Map Container */
.map-container {
    @apply rounded-3xl overflow-hidden shadow-2xl;
}

/* Reusable main button style */
.main-btn {
  @apply px-8 py-4 rounded-2xl font-bold text-lg shadow-lg transition-all duration-300 transform hover:-translate-y-1 flex items-center;
}

/* Reusable phone button style */
.phone-btn {
  @apply px-4 py-3 bg-blue-600 text-white rounded-xl shadow-lg hover:bg-blue-700 flex items-center font-semibold group transition-all duration-300;
}

/* Reusable section header style */
.section-header {
  @apply inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-full text-sm font-bold mb-6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .section-title {
        @apply text-3xl md:text-4xl;
    }
    
    .hero-title {
        @apply text-4xl md:text-5xl;
    }
    
    .feature-card,
    .service-card,
    .instructor-card,
    .category-card,
    .contact-card {
        @apply p-6;
    }
}

@media (max-width: 640px) {
    .hero-title {
        @apply text-3xl md:text-4xl;
    }
    
    .section-title {
        @apply text-2xl md:text-3xl;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-outline {
        @apply px-6 py-3 text-base;
    }
}

/* Focus Management */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        @apply text-black bg-white;
    }
    
    h1, h2, h3, h4, h5, h6 {
        @apply text-black;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: more) {
    .feature-card,
    .service-card,
    .instructor-card,
    .category-card,
    .contact-card {
        @apply border-2 border-gray-900;
    }
    
    .nav-link {
        @apply border-b-2 border-transparent;
    }
    
    .nav-link:hover {
        @apply border-blue-900;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}