/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Montserrat:wght@300;400;600&display=swap');

/* ===================================
   CSS THEMING SYSTEM
   =================================== */

/* DEFAULT THEME - Amber/Gold */
:root {
    /* Primary Colors */
    --color-primary: #D97706;        /* amber-600 */
    --color-primary-light: #FEF3C7;  /* amber-50 */
    --color-primary-dark: #B45309;   /* amber-700 */
    --color-primary-rgb: 217, 119, 6;
    
    /* Text Colors */
    --color-text-primary: #111827;   /* gray-900 */
    --color-text-secondary: #4B5563; /* gray-600 */
    --color-text-tertiary: #9CA3AF;  /* gray-400 */
    --color-text-light: #FFFFFF;     /* white - theme-aware */
    
    /* Background Colors */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F9FAFB;   /* gray-50 */
    --color-bg-dark: #1F2937;        /* gray-800 */
    
    /* Border Colors */
    --color-border-light: #E5E7EB;   /* gray-200 */
    --color-border-dark: #374151;    /* gray-700 */
    
    /* Font Families */
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
    
    /* Hero Image & Overlay */
    --hero-image: url('assets/nbpac-a/img/hero-background.png');
    --hero-overlay: linear-gradient(to bottom, rgba(217, 119, 6, 0.8), rgba(217, 119, 6, 0.7), rgba(217, 119, 6, 0.9));
}

/* EMERALD THEME */
[data-theme="emerald"] {
    --color-primary: #059669;        /* emerald-600 */
    --color-primary-light: #D1FAE5;  /* emerald-50 */
    --color-primary-dark: #047857;   /* emerald-700 */
    --color-primary-rgb: 5, 150, 105;
    --hero-image: url('assets/emerald/img/hero-background.png');
    --hero-overlay: linear-gradient(to bottom, rgba(5, 150, 105, 0.8), rgba(5, 150, 105, 0.7), rgba(5, 150, 105, 0.9));
}

/* ROSE THEME */
[data-theme="rose"] {
    --color-primary: #E11D48;        /* rose-600 */
    --color-primary-light: #FFE4E6;  /* rose-50 */
    --color-primary-dark: #BE123C;   /* rose-700 */
    --color-primary-rgb: 225, 29, 72;
    --hero-image: url('assets/rose/img/hero-background.png');
    --hero-overlay: linear-gradient(to bottom, rgba(225, 29, 72, 0.8), rgba(225, 29, 72, 0.7), rgba(225, 29, 72, 0.9));
}

/* INDIGO THEME */
[data-theme="indigo"] {
    --color-primary: #4F46E5;        /* indigo-600 */
    --color-primary-light: #E0E7FF;  /* indigo-50 */
    --color-primary-dark: #4338CA;   /* indigo-700 */
    --color-primary-rgb: 79, 70, 229;
    --hero-image: url('assets/indigo/img/hero-background.png');
    --hero-overlay: linear-gradient(to bottom, rgba(79, 70, 229, 0.8), rgba(79, 70, 229, 0.7), rgba(79, 70, 229, 0.9));
}

/* PURPLE THEME */
[data-theme="purple"] {
    --color-primary: #9333EA;        /* purple-600 */
    --color-primary-light: #F3E8FF;  /* purple-50 */
    --color-primary-dark: #7E22CE;   /* purple-700 */
    --color-primary-rgb: 147, 51, 234;
    --hero-image: url('assets/purple/img/hero-background.png');
    --hero-overlay: linear-gradient(to bottom, rgba(147, 51, 234, 0.8), rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.9));
}

/* TEAL THEME */
[data-theme="teal"] {
    --color-primary: #0D9488;        /* teal-600 */
    --color-primary-light: #CCFBF1;  /* teal-50 */
    --color-primary-dark: #0F766E;   /* teal-700 */
    --color-primary-rgb: 13, 148, 136;
    --hero-image: url('assets/teal/img/hero-background.png');
    --hero-overlay: linear-gradient(to bottom, rgba(13, 148, 136, 0.8), rgba(13, 148, 136, 0.7), rgba(13, 148, 136, 0.9));
}

/* NATARAJA THEME - Deep Crimson with High Contrast */
[data-theme="nataraj"] {
    --color-primary: #8B1538;        /* Deep Crimson/Maroon */
    --color-primary-light: #FEF2F4;  /* Soft cream/pink tint */
    --color-primary-dark: #6B0F2A;   /* Darker crimson */
    --color-primary-rgb: 139, 21, 56;
    
    /* High Contrast Backgrounds */
    --color-bg-primary: #FAF9F7;     /* Off-white/cream */
    --color-bg-secondary: #F5F3F0;   /* Warm cream */
    --color-bg-dark: #1A1817;        /* Near-black */
    
    /* Adjusted Text for Contrast */
    --color-text-primary: #1A1817;   /* Near-black for readability */
    --color-text-secondary: #3D3935; /* Dark warm grey */
    --color-text-tertiary: #7A7571;  /* Medium grey */
    --color-text-light: #F5F3F0;     /* Warm cream for dark backgrounds */
    
    /* Borders */
    --color-border-light: #E8E5E1;   /* Warm light grey */
    --color-border-dark: #3D3935;    /* Dark warm grey */
    
    /* Hero Image & Overlay */
    --hero-image: url('assets/nataraj/img/hero-background.png');
    --hero-overlay: linear-gradient(to right, rgba(250, 249, 247, 0.8), rgba(245, 243, 240, 0.73), rgba(26, 24, 23, 0.60));
}

/* NATARAJA THEME - Deep Crimson with High Contrast */
[data-theme="nataraj2"] {
    --color-primary: #8B1538;        /* Deep Crimson/Maroon */
    --color-primary-light: #FEF2F4;  /* Soft cream/pink tint */
    --color-primary-dark: #6B0F2A;   /* Darker crimson */
    --color-primary-rgb: 139, 21, 56;
    
    /* High Contrast Backgrounds */
    --color-bg-primary: #FAF9F7;     /* Off-white/cream */
    --color-bg-secondary: #F5F3F0;   /* Warm cream */
    --color-bg-dark: #1A1817;        /* Near-black */
    
    /* Adjusted Text for Contrast */
    --color-text-primary: #1A1817;   /* Near-black for readability */
    --color-text-secondary: #3D3935; /* Dark warm grey */
    --color-text-tertiary: #7A7571;  /* Medium grey */
    --color-text-light: #F5F3F0;     /* Warm cream for dark backgrounds */
    
    /* Borders */
    --color-border-light: #E8E5E1;   /* Warm light grey */
    --color-border-dark: #3D3935;    /* Dark warm grey */
    
    /* Hero Image & Overlay */
    --hero-image: url('assets/nataraj2/img/hero-background.png');
    --hero-overlay: linear-gradient(to right, rgba(250, 249, 247, 0.8), rgba(245, 243, 240, 0.73), rgba(26, 24, 23, 0.60));
}

/* NBPAC OPTION A - Polished Arts Center Theme */
[data-theme="nbpac-a"] {
    /* Main Branding Colors */
    --color-primary: #800000;        /* True Maroon - Used for accents/buttons */
    --color-primary-light: #F5DEB3;  /* Wheat/Cream - Used for subheadings */
    --color-primary-dark: #4A0000;   
    --color-primary-rgb: 128, 0, 0;
    
    /* Backgrounds */
    --color-bg-primary: #FFFFFF;     
    --color-bg-secondary: #F5DEB3;   
    --color-bg-dark: #1A1817;        
    
    /* Text Colors - Updated for High Contrast */
    --color-text-primary: #FFFFFF;   /* Pure White for Hero Headings */
    --color-text-secondary: #4A0000; /* Wheat for "NB School of Kathak" */
    --color-text-tertiary: #D1D5DB;  
    --color-text-light: #FFFFFF;     
    
    /* Font Swap */
    --font-serif: 'Playfair Display', serif; 
    --font-sans: 'Lora', serif;              
    
    /* Hero Image & Overlay */
    --hero-image: url('assets/nbpac-a/img/hero-background.png');
    
    /* THE FIX: Dark-to-Transparent Gradient */
    /* This creates a shadow on the left for the text while keeping the statue bright on the right */
    --hero-overlay: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0.8) 0%,   /* Darkest point behind the main text */
        rgba(0, 0, 0, 0.4) 40%,  /* Softening as we hit the center */
        rgba(0, 0, 0, 0) 100%    /* Completely clear to show the statue's light */
    );
 
    .theading2 {
        font-family: var(--font-serif);
        font-size: 1.75rem;
        font-weight: var(--font-weight-bold);
        line-height: 3;
        /* color: var(--color-text-secondary); */
    }
    .theading3 {
        font-family: var(--font-serif);
        font-size: 1.35rem;
        font-weight: var(--font-weight-bold);
        line-height: 3;
        /* color: var(--color-text-secondary); */
    }
    .h3-background {
        background-color: var(--color-primary);
    }

    .box-border {
        border: 2px solid rgb(212, 175, 55);
    }

    .inner-rounded-box {
        background: linear-gradient(135deg, rgb(245, 222, 179) 0%, rgb(232, 212, 168) 100%); 
        border: 1px solid rgb(212, 175, 55);

        border-radius: 1rem;
        padding: 1rem;
        background-color: var(--color-bg-secondary);
    }

    .inner-inner-rounded-circle {
        background: linear-gradient(135deg, rgb(245, 222, 179) 0%, rgb(232, 212, 168) 100%); 
    }

    .inner-inner-rounded-box {
        /* background: linear-gradient(135deg, rgb(245, 222, 179) 0%, rgb(232, 212, 168) 100%); border: 1px solid rgb(212, 175, 55); */
        background: white; color: rgb(80, 7, 36);
    }

    .course-button {
        background: linear-gradient(to right, rgb(212, 175, 55), rgb(184, 148, 31));        
    }


}

/* VARIANT 1: THE CLASSICAL (Traditional & Elegant) 
   Best for: Heritage, Guru profiles, and formal history. */
[data-theme="nbpac-classical"] {
    /* Inherit NBPAC-A Colors */
    --color-primary: #500724;
    --color-primary-light: #F5DEB3;
    --color-primary-dark: #3D051B;
    --color-bg-primary: #FFFFFF;
    
    /* Font Swap */
    --font-serif: 'Playfair Display', serif; /* Elegant, high-contrast headings */
    --font-sans: 'Lora', serif;              /* Calligraphic body text */
    
    /* Hero Image */
    --hero-image: url('assets/nbpac-classical/img/hero-background.png');
}

/* VARIANT 2: THE MODERN (Modern & Fluid) 
   Best for: Workshops, contemporary fusion, and youth academies. */
[data-theme="nbpac-modern"] {
    /* Inherit NBPAC-A Colors */
    --color-primary: #500724;
    --color-primary-light: #F5DEB3;
    --color-primary-dark: #3D051B;
    
    /* Font Swap */
    --font-serif: 'Raleway', sans-serif;     /* Movement-oriented headings */
    --font-sans: 'Montserrat', sans-serif;    /* Clean, structural body */
    
    /* Hero Image */
    --hero-image: url('assets/nbpac-modern/img/hero-background.png');
}

/* VARIANT 3: THE ARTISTIC (Storyteller/Drama) 
   Best for: Performance announcements and "Katha" (storytelling) sections. */
[data-theme="nbpac-artistic"] {
    /* Inherit NBPAC-A Colors */
    --color-primary: #500724;
    --color-primary-light: #F5DEB3;
    --color-primary-dark: #3D051B;
    
    /* Font Swap */
    --font-serif: 'Cinzel', serif;           /* Monumental/Classical headings */
    --font-sans: 'Cormorant Garamond', serif; /* Graceful body text */
    
    /* Hero Image */
    --hero-image: url('assets/nbpac-artistic/img/hero-background.png');
    
    /* Bonus: You can use 'Pinyon Script' for a specific class like .accent-font */
}

/* Accent class for the Artistic Script */
.font-accent {
    font-family: 'Pinyon Script', cursive;
    text-transform: none; /* Scripts usually look better in Title Case */
    letter-spacing: normal;
}

/* Base Typography */
body {
    font-family: var(--font-serif);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
}

.font-sans {
    font-family: var(--font-sans);
}

/* Decorative Pattern Background */
.pattern-dots {
    background-image: radial-gradient(circle at 2px 2px, var(--color-primary) 1px, transparent 0);
    background-size: 40px 40px;
}

/* Hero Background Image */
.hero-background {
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    background: var(--hero-overlay);
}

/* Brand Elements */
.brand-logo {
    color: var(--color-primary);
}

/* Navigation */
.nav-link {
    color: var(--color-text-secondary);
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--color-primary);
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    transition: all 0.3s;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.btn-secondary {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    transition: all 0.3s;
}

.btn-secondary:hover {
    background-color: var(--color-primary-light);
}

.btn-outline-light {
    border: 2px solid white;
    color: white;
    transition: all 0.3s;
}

.btn-outline-light:hover {
    background-color: white;
    color: var(--color-primary);
}

/* Text Colors */
.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-accent {
    color: var(--color-primary);
}

.text-light {
    color: var(--color-text-light);
}

/* Background Colors */
.bg-primary {
    background-color: var(--color-bg-primary);
}

.bg-secondary {
    background-color: var(--color-bg-secondary);
}

.bg-dark {
    background-color: var(--color-bg-dark);
}

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

.bg-gradient-light {
    background: linear-gradient(to bottom right, var(--color-primary-light), white);
}

.bg-gradient-accent {
    background: linear-gradient(to right, var(--color-primary), var(--color-primary-dark));
}

/* Headings */
.heading-accent {
    color: var(--color-primary);
}

/* Borders */
.border-accent {
    border-color: var(--color-primary);
}

.border-light {
    border-color: var(--color-border-light);
}

.border-dark {
    border-color: var(--color-border-dark);
}

/* Footer */
.footer-heading {
    color: var(--color-primary);
}

.footer-text {
    color: var(--color-text-tertiary);
}

.footer-link {
    color: var(--color-text-tertiary);
    transition: color 0.3s;
}

.footer-link:hover {
    color: var(--color-primary);
}

/* Shadows */
.shadow-light {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Hover Effects & Transitions */
img {
    transition: all 0.3s ease-in-out;
}

img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

a {
    transition: all 0.3s ease-in-out;
}

button {
    transition: all 0.3s ease-in-out;
}

/* Gallery & Card Hover Effects */
.card-hover {
    transition: all 0.3s ease-in-out;
}

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

/* CTA Button Enhanced Hover */
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(217, 119, 6, 0.3);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.15);
}

.btn-outline-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* Navigation Hover Enhancement */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
    width: 100%;
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* ===================================
   UTILITY CLASSES (Replacing Tailwind)
   =================================== */

/* Section Styles */
.section {
    padding: 6rem 1.5rem;
}

.section-sm {
    padding: 4rem 1.5rem;
}

.section-lg {
    padding: 8rem 1.5rem;
}

/* Container */
.container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-md {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-sm {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 900;
    line-height: 1.2;
}

.heading-1 {
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1;
}

.heading-2 {
    font-size: 4rem;
    font-weight: 700;
}

.heading-3 {
    font-size: 2.25rem;
    font-weight: 700;
}

.heading-4 {
    font-size: 1.875rem;
    font-weight: 700;
}

/* Card Styles */
.card {
    background-color: var(--color-bg-primary);
    padding: 2.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

.card-bordered {
    border-top: 4px solid var(--color-primary);
}

.card-bordered-left {
    border-left: 4px solid var(--color-primary);
}

/* Divider */
.divider {
    width: 6rem;
    height: 0.25rem;
    background-color: var(--color-primary);
    margin: 0 auto 3rem;
}

.divider-left {
    margin: 0 0 3rem;
}

/* Grid */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .heading-1 {
        font-size: 6rem;
    }
    
    .heading-2 {
        font-size: 4.5rem;
    }
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.leading-relaxed {
    line-height: 1.75;
}

/* Theme Switcher Styles */
.theme-switcher {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
}

.theme-switcher-button {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: white;
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.theme-switcher-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.theme-menu {
    position: absolute;
    bottom: 4.5rem;
    right: 0;
    background-color: var(--color-bg-primary);
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    padding: 1rem;
    min-width: 200px;
    display: none;
}

.theme-menu.active {
    display: block;
    animation: fadeInUp 0.3s ease;
}

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

.theme-option {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background-color 0.2s;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.theme-option:hover {
    background-color: var(--color-bg-secondary);
}

.theme-option.active {
    background-color: var(--color-primary-light);
}

.theme-color-preview {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--color-border-light);
}

/* Tailwind Gradient Compatibility Classes */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to, rgba(0, 0, 0, 0)));
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-to, rgba(0, 0, 0, 0)));
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--gradient-from), var(--gradient-via, transparent), var(--gradient-to, rgba(0, 0, 0, 0)));
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--gradient-from), var(--gradient-to, rgba(0, 0, 0, 0)));
}

.from-accent {
    --gradient-from: var(--color-primary);
}

.to-accent {
    --gradient-to: var(--color-primary);
}

.via-accent {
    --gradient-via: var(--color-primary);
}

.from-secondary {
    --gradient-from: var(--color-primary-light);
}

.to-secondary {
    --gradient-to: var(--color-primary-light);
}

.from-primary-dark {
    --gradient-from: var(--color-primary-dark);
}

.to-primary-dark {
    --gradient-to: var(--color-primary-dark);
}

.hover\:bg-primary-dark:hover {
    background-color: var(--color-primary-dark);
}

.hover\:from-primary-dark:hover {
    --gradient-from: var(--color-primary-dark);
}

.hover\:to-accent:hover {
    --gradient-to: var(--color-primary);
}

/* Accordion Styles */
.accordion {
    border: 1px solid var(--color-border-light);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    background-color: var(--color-bg-primary);
    overflow: hidden;
}

.accordion-header {
    background-color: var(--color-bg-primary);
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    transition: background-color 0.3s ease;
    border-bottom: none;
}

.accordion-header:hover {
    background-color: var(--color-bg-secondary);
}

.accordion-header.active {
    border-bottom: 1px solid var(--color-border-light);
}

.accordion-header-title {
    font-weight: 700;
    color: var(--color-text-secondary);
}

.accordion-header-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.accordion-chevron {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: var(--color-primary);
    transition: transform 0.3s ease;
    margin-top: 0.25rem;
}

.accordion-header.active .accordion-chevron {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1.5rem;
}

.accordion-content.active {
    max-height: 1000px;
    padding: 1.5rem;
}

.accordion-body {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.accordion-body ul {
    margin: 1rem 0;
}

.accordion-body li {
    margin: 0.5rem 0;
}

.accordion-bullet {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    margin-right: 0.75rem;
}

/* Sticky Navigation */
nav {
    position: sticky;
    top: 0;
    z-index: 40;
}

/* Instructor Card Component */
.instructor-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background-color: var(--color-bg-primary);
    border-radius: 0.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.instructor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.instructor-image {
    width: 16rem;
    height: 16rem;
    border-radius: 9999px;
    overflow: hidden;
    margin: 1.5rem auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.instructor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instructor-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.instructor-title {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-weight: 500;
}

.instructor-bio {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}
/* Theme-Aware Solid Button */
.btn-learn-solid {
    /* background: linear-gradient(to right, var(--color-primary-light), var(--color-primary)); */
    /* Makes the light wheat color occupy more space before fading into maroon */
    background: linear-gradient(to right, var(--color-primary-light) 0%, var(--color-primary-light) 60%, var(--color-primary) 100%);
    color: var(--color-primary-dark);
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-learn-solid:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 10px 20px rgba(var(--color-primary-rgb), 0.3);
}

/* Theme-Aware Ghost Button */
.btn-learn-ghost {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* ===================================
   MOBILE STICKY ACTION BAR
   =================================== */
.mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(26, 24, 23, 0.98), rgba(26, 24, 23, 0.95));
    backdrop-filter: blur(10px);
    display: flex;
    gap: 0;
    padding: 0.75rem 1rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    z-index: 100;
    border-top: 2px solid #D4AF37;
}

.mobile-sticky-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.mobile-sticky-btn-inquire {
    background: transparent;
    border: 2px solid #F5DEB3;
    color: #F5DEB3;
}

.mobile-sticky-btn-inquire:hover {
    background: rgba(245, 222, 179, 0.1);
    transform: translateY(-2px);
}

.mobile-sticky-btn-enroll {
    background: linear-gradient(to right, #F5DEB3, #D4AF37);
    color: #4A0000;
    border: 2px solid #D4AF37;
}

.mobile-sticky-btn-enroll:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.mobile-sticky-btn svg {
    width: 20px;
    height: 20px;
}

/* ===================================
   DROPDOWN NAVIGATION
   =================================== */
nav .group {
    position: relative;
}

nav .group:hover .absolute {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

nav .absolute {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

/* ===================================
   PROGRAM CARDS & LOCATION CARDS
   =================================== */
.program-card {
    transition: all 0.3s ease;
}

.program-card:hover {
    transform: translateY(-4px);
}

/* Location cards already styled inline but here for reference */
.location-card {
    transition: all 0.3s ease;
}

.location-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.btn-learn-ghost:hover {
    background: var(--color-primary);
    color: var(--color-text-light); /* Refers to your theme's light text color */
}

/* Mobile Spacing Optimization */
@media (max-width: 640px) {
    .accordion-header {
        padding: 1rem;
    }
    
    .accordion-content.active {
        padding: 1rem;
    }
    
    .accordion {
        margin-bottom: 1rem;
    }
    
    .instructor-image {
        width: 12rem;
        height: 12rem;
    }
    
    .instructor-card {
        padding: 1.5rem 1rem;
    }
    
    /* Add padding to body to account for sticky bar */
    body {
        padding-bottom: 5rem;
    }