@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Light Green Theme Palette */
    --primary: oklch(38% 0.09 156); /* Medium-dark emerald green */
    --primary-foreground: oklch(98% 0.01 156);
    --gold: oklch(75% 0.13 85); /* Academic Gold */
    --gold-foreground: oklch(25% 0.05 85);
    --leaf: oklch(65% 0.17 145); /* Bright, vibrant light green */
    --background: oklch(99.5% 0.008 145); /* Near-white with a hint of green */
    --foreground: oklch(22% 0.04 160); /* Very dark green for readability */
    --secondary: oklch(95% 0.03 150); /* Soft, pale green for sections */
    --border: oklch(90% 0.025 150); /* Light grayish-green borders */
    
    /* Fonts */
    --font-serif: "Playfair Display", "Georgia", serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    
    /* Gradients */
    --gradient-hero: linear-gradient(135deg, oklch(20% 0.06 156) 0%, oklch(30% 0.08 156) 55%, oklch(40% 0.1 145) 100%);
    --gradient-primary: linear-gradient(135deg, oklch(38% 0.09 156), oklch(50% 0.1 145));
}

/* Global Typography */
body {
    font-family: var(--font-sans) !important;
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: var(--font-serif) !important;
}

/* Header & Navigation */
#site-header {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
}

/* Mobile Menu Premium Look */
#mobile-menu {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) !important;
}

#mobile-menu nav a {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    border-bottom: 1px solid oklch(90% 0.025 150);
    padding-bottom: 0.5rem;
    transition: all 0.3s ease;
}

#mobile-menu nav a:hover {
    color: var(--gold);
    padding-left: 0.5rem;
}

/* Universal Responsiveness Fixes */
@media (max-width: 768px) {
    /* Ensure containers have consistent padding */
    .container {
        padding-inline: 1.25rem !important;
    }
    
    /* Scale down hero text to fit small screens */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    /* Adjust spacing */
    .py-16 {
        padding-block: 2.5rem !important;
    }
    
    .py-20 {
        padding-block: 3rem !important;
    }
    
    .py-24 {
        padding-block: 3.5rem !important;
    }
    
    .pt-24 {
        padding-top: 5rem !important;
    }
    
    /* Fix grid layouts that might be too wide */
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Ensure flex items wrap */
    .flex-wrap-mobile {
        flex-wrap: wrap !important;
    }
}

/* Fix for small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
    h1 {
        font-size: 1.75rem !important;
    }
    
    .text-lg {
        font-size: 1rem !important;
    }
}

/* Fix for very small screens (iPhone 5, etc.) */
@media (max-width: 320px) {
    h1 {
        font-size: 1.5rem !important;
    }
    
    .container {
        padding-inline: 0.75rem !important;
    }
}

/* Utility overrides to enforce brand colors */
.text-primary {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.text-gold {
    color: var(--gold) !important;
}

.bg-gold {
    background-color: var(--gold) !important;
}

.bg-gradient-gold {
    background: linear-gradient(135deg, var(--gold), oklch(80% 0.15 90)) !important;
}

.shadow-gold {
    box-shadow: 0 4px 14px 0 oklch(75% 0.13 85 / 40%) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.border-gold {
    border-color: var(--gold) !important;
}

/* Theme Toggle Icon Visibility */
#theme-toggle .sun-icon {
    display: none;
}
#theme-toggle .moon-icon {
    display: block;
}
.dark #theme-toggle .sun-icon {
    display: block !important;
}
.dark #theme-toggle .moon-icon {
    display: none !important;
}

/* Dark Mode Overrides */
.dark {
    --background: oklch(15% 0.04 156) !important; /* Very Dark Green */
    --foreground: oklch(95% 0.01 156) !important;
    --card: oklch(20% 0.04 156) !important;
    --card-foreground: oklch(95% 0.01 156) !important;
    --primary: oklch(65% 0.17 145) !important; /* Bright Green for contrast */
    --primary-foreground: oklch(15% 0.04 156) !important;
    --border: oklch(30% 0.04 156) !important;
}

/* Force text to be green in dark mode to avoid black text */
.dark body, .dark p, .dark span, .dark li, .dark label {
    color: oklch(85% 0.05 150) !important; /* Pale green for body text */
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: oklch(65% 0.17 145) !important; /* Bright green for headings */
}

.dark a:not([class*="bg-"]) {
    color: oklch(65% 0.17 145) !important; /* Bright green for links */
}

/* Fix header background in dark mode */
.dark #site-header {
    background-color: rgba(13, 36, 29, 0.9) !important;
}

/* Fix mobile menu background in dark mode */
.dark #mobile-menu {
    background-color: rgba(13, 36, 29, 0.98) !important;
}

/* Micro-interactions */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

.hover-lift:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 0 15px 30px -10px var(--primary) !important;
}

/* Smooth scroll reveal */
[data-reveal] {
    transition: opacity 0.8s ease, transform 0.8s ease !important;
}

/* Custom Footer Styles for Dark Mode */
.dark .footer-title-green {
    color: oklch(65% 0.17 145) !important; /* Bright green */
}

.dark .footer-last-line {
    color: oklch(65% 0.17 145) !important; /* Bright green */
}

/* Hide carousel navigation buttons on small screens (mobile) */
@media (max-width: 768px) {
    /* Hide desktop side arrows and mobile circular controls */
    #next-btn,
    #prev-btn,
    .carousel-mobile-controls {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Student's Corner Dropdown styling */
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    min-width: 180px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.5rem;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    list-style: none !important;
    margin: 0 !important;
}

.dropdown-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    color: var(--foreground);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: none !important;
}

.dropdown-menu a:hover {
    background-color: var(--secondary) !important;
    color: var(--primary) !important;
}

.dropdown-menu a.active {
    background-color: rgba(38, 90, 72, 0.1) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

.dropdown-container:hover .dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem;
}

.dropdown-container:hover button svg {
    transform: rotate(180deg);
}

/* Dark mode overrides for dropdown */
.dark .dropdown-menu {
    background-color: rgba(13, 36, 29, 0.95) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

.dark .dropdown-menu a {
    color: oklch(85% 0.05 150) !important;
}

.dark .dropdown-menu a:hover {
    background-color: var(--card) !important;
    color: var(--primary) !important;
}

.dark .dropdown-menu a.active {
    background-color: rgba(65, 170, 145, 0.15) !important;
    color: var(--primary) !important;
}