/* Global Styles */
:root {
    --primary: #26667F;
    --primary-light: #3D7F99;
    --primary-dark: #1A4D66;
    --accent: #1DCD9F;
    --accent-light: #3AE0B3;
    --accent-dark: #0DBA8C;
}

/* Extra Small Breakpoint (xs) */
@media (max-width: 475px) {
    .hidden-xs {
        display: none !important;
    }
    
    .block-xs {
        display: block !important;
    }
    
    /* Navbar adjustments for very small screens */
    .navbar-logo-xs {
        font-size: 1rem !important;
    }
    
    .navbar-avatar-xs {
        height: 1.5rem !important;
        width: 1.5rem !important;
        font-size: 0.625rem !important;
    }
    
    .navbar-button-xs {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* Small screen improvements */
@media (max-width: 640px) {
    .mobile-menu-scroll {
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .mobile-menu-scroll::-webkit-scrollbar {
        width: 4px;
    }
    
    .mobile-menu-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .mobile-menu-scroll::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 2px;
    }
    
    .mobile-menu-scroll::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* Medium screen improvements */
@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-nav-hidden {
        display: none !important;
    }
    
    .tablet-nav-inline {
        display: inline !important;
    }
}

/* Navbar hover states */
.navbar-link-hover {
    transition: all 0.2s ease;
}

.navbar-link-hover:hover {
    transform: translateY(-1px);
}

/* Mobile menu animations */
.mobile-menu-enter {
    animation: slideDown 0.3s ease-out;
}

.mobile-menu-exit {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Dropdown menu improvements */
.dropdown-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-menu-item {
        min-height: 48px;
        padding: 12px 16px;
    }
}

/* Buttons */
.btn-primary {
    @apply bg-primary hover:bg-primary-dark text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-200;
}

.btn-accent {
    @apply bg-accent hover:bg-accent-dark text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-200;
}

.btn-outline-primary {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-200;
}

/* Hero Section */
.hero-gradient {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: white;
}

/* Cards */
.card {
    @apply bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300;
}

.card-header {
    @apply bg-gray-50 px-6 py-4 border-b border-gray-100;
}

/* Navigation */
.nav-link {
    @apply text-gray-700 hover:text-accent px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

/* Form Elements */
.input-field {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent transition-all duration-200;
}

/* Badges */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-primary/10 text-primary;
}

.badge-accent {
    @apply bg-accent/10 text-accent;
}

/* Section Headers */
.section-header {
    @apply text-center mb-12;
}

.section-header h2 {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-3;
}

.section-header p {
    @apply text-lg text-gray-600;
}

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

/* Custom Animations */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-header h2 {
        @apply text-2xl;
    }
    
    .section-header p {
        @apply text-base;
    }
}