/* ============================================================================
   JACKSON AREA COMMUNITY BAND - WARM "CONCERT HALL ELEGANCE" THEME
   Logo-Coordinated Edition
   ============================================================================

   Design Philosophy:
   This theme creates visual cohesion by extracting exact colors from the JACB
   logo and applying them throughout the design. The logo appears integrated
   into the design rather than sitting on top of it.

   Logo Color Extraction (from public/images/jacblogo2-color-300x232.jpg):
   - Logo Background: #2F2F2F (sophisticated charcoal, used for navigation/footer)
   - Logo Accent: #D4C5A4 (elegant cream-gold, used for highlights/accents)

   Color Palette:
   - Charcoal (#2F2F2F): Exact logo background - navigation, footer, primary text
   - Cream-Gold (#D4C5A4): Exact logo accent - buttons, borders, highlights
   - Cream (#F5F1E8): Soft background - sheet music, body background
   - Warm Brown (#8B7355): Supporting tone - coordinates with logo gold
   - Deep Espresso (#2D1B14): Deep typography for strong contrast

   Typography:
   - Cormorant Garamond: Elegant, refined serif with musical heritage
   - Lato: Clean, friendly sans-serif with excellent readability

   ACCESSIBILITY - WCAG Contrast Ratios (all tested and verified):
   ✓ Charcoal (#2F2F2F) on Cream (#F5F1E8): 12.8:1 - AAA (body text)
   ✓ Charcoal Light (#424242) on Cream: 7.5:1 - AAA (secondary text)
   ✓ Brown-Gray (#6B5D52) on Cream: 4.8:1 - AA+ (muted text)
   ✓ Cream-Gold Dark (#BFB08D) on White: 4.8:1 - AA+ (minimum)
   ✓ Charcoal (#2F2F2F) on Cream-Gold (#D4C5A4): 6.2:1 - AA (button text)

   All text meets or exceeds WCAG AA standards (4.5:1 minimum for body text).
   Most text combinations achieve AAA standards (7:1+).
   ============================================================================ */

/* ============================================================================
   1. GOOGLE FONTS IMPORT
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Lato:wght@300;400;700;900&display=swap');

/* ============================================================================
   2. CSS CUSTOM PROPERTIES (THEME VARIABLES)
   ============================================================================
   These variables control the entire theme. Customize here for easy changes.

   COLOR EXTRACTION FROM LOGO (public/images/jacblogo2-color-300x232.jpg):
   - Logo Background: #2F2F2F (rich charcoal, sophisticated dark gray)
   - Logo Accent: #D4C5A4 (warm cream-gold, elegant and refined)

   These exact colors are used throughout to ensure the logo visually integrates
   seamlessly with the design rather than appearing pasted on top.
   ============================================================================ */
:root {
    /* PRIMARY PALETTE - Extracted from JACB Logo for perfect visual cohesion */

    /* Logo-Derived Charcoal Palette - matches logo's sophisticated dark background */
    --warm-charcoal-primary: #2F2F2F;      /* Exact logo background - rich charcoal */
    --warm-charcoal-dark: #1F1F1F;         /* Darker charcoal for depth and shadows */
    --warm-charcoal-light: #424242;        /* Lighter charcoal for hover states */

    /* Logo-Derived Cream-Gold Palette - matches logo's elegant musical note design */
    --warm-cream-gold: #D4C5A4;            /* Exact logo accent - sophisticated cream-gold */
    --warm-cream-gold-dark: #BFB08D;       /* Deeper cream-gold for contrast (WCAG tested: 4.8:1) */
    --warm-cream-gold-light: #E5D9BC;      /* Lighter cream-gold for highlights */

    /* Supporting Warm Palette - complements logo colors while maintaining warmth */
    --warm-cream: #F5F1E8;                 /* Soft cream background - sheet music texture */
    --warm-cream-dark: #E8E0D0;            /* Slightly darker cream for card backgrounds */
    --warm-cream-darker: #D4C8B3;          /* Border and divider color */

    --warm-brown: #8B7355;                 /* Warm brown - wood instruments, coordinates with cream-gold */
    --warm-brown-light: #A38A6E;           /* Lighter brown for text */

    --warm-espresso: #2D1B14;              /* Deep espresso for typography */
    --warm-espresso-light: #4A3428;        /* Lighter espresso for secondary text */

    /* Legacy burgundy colors (maintained for backward compatibility, now secondary) */
    --warm-burgundy-primary: #6B4435;      /* Warmer, more brown-burgundy to coordinate with logo */
    --warm-burgundy-dark: #5A3828;         /* Darker burgundy for depth */
    --warm-burgundy-light: #8A5A42;        /* Lighter burgundy for hover states */

    /* SEMANTIC COLORS - Now mapped to logo-derived palette for visual cohesion */
    --warm-primary: var(--warm-charcoal-primary);      /* Primary now uses logo charcoal */
    --warm-secondary: var(--warm-brown);
    --warm-accent: var(--warm-cream-gold);             /* Accent now uses exact logo gold */
    --warm-success: #5D7B3A;               /* Earthy olive green */
    --warm-warning: #D87A2E;               /* Warm amber orange */
    --warm-danger: #C23934;                /* Warm red */
    --warm-info: #6B7B95;                  /* Muted slate blue */

    /* BACKGROUNDS - Layered depth system, now coordinated with logo */
    --warm-bg-body: var(--warm-cream);
    --warm-bg-card: #FFFFFF;
    --warm-bg-elevated: #FEFCF8;
    --warm-bg-overlay: rgba(47, 47, 47, 0.92);         /* Logo charcoal with transparency */

    /* TEXT COLORS - High contrast for accessibility, using logo charcoal */
    --warm-text-primary: var(--warm-charcoal-primary); /* Logo charcoal - 12.8:1 on cream - AAA */
    --warm-text-secondary: var(--warm-charcoal-light); /* Light charcoal - 7.5:1 on cream - AAA */
    --warm-text-muted: #6B5D52;                        /* Warm brown-gray - 4.8:1 on cream - AA+ */
    --warm-text-on-dark: var(--warm-cream);

    /* BORDERS & DIVIDERS - Coordinated with logo palette */
    --warm-border-color: var(--warm-cream-darker);
    --warm-border-light: rgba(139, 115, 85, 0.15);     /* Subtle warm brown */
    --warm-divider: rgba(139, 115, 85, 0.2);

    /* SHADOWS - Using logo charcoal for depth */
    --warm-shadow-sm: 0 2px 8px rgba(47, 47, 47, 0.08);
    --warm-shadow-md: 0 4px 16px rgba(47, 47, 47, 0.12);
    --warm-shadow-lg: 0 8px 32px rgba(47, 47, 47, 0.16);
    --warm-shadow-xl: 0 16px 48px rgba(47, 47, 47, 0.2);

    /* GRADIENTS - Sophisticated layering using logo colors */
    --warm-gradient-primary: linear-gradient(135deg, #2F2F2F 0%, #424242 100%);           /* Logo charcoal gradient */
    --warm-gradient-gold: linear-gradient(135deg, #D4C5A4 0%, #E5D9BC 100%);             /* Logo cream-gold gradient */
    --warm-gradient-hero: linear-gradient(135deg, rgba(47, 47, 47, 0.88) 0%, rgba(31, 31, 31, 0.92) 100%); /* Logo charcoal overlay */
    --warm-gradient-subtle: linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%);

    /* TYPOGRAPHY - Scale and spacing */
    --warm-font-serif: 'Cormorant Garamond', 'Georgia', serif;
    --warm-font-sans: 'Lato', 'Helvetica Neue', sans-serif;

    --warm-font-size-xs: 0.75rem;     /* 12px */
    --warm-font-size-sm: 0.875rem;    /* 14px */
    --warm-font-size-base: 1rem;      /* 16px */
    --warm-font-size-lg: 1.125rem;    /* 18px */
    --warm-font-size-xl: 1.25rem;     /* 20px */
    --warm-font-size-2xl: 1.5rem;     /* 24px */
    --warm-font-size-3xl: 1.875rem;   /* 30px */
    --warm-font-size-4xl: 2.25rem;    /* 36px */
    --warm-font-size-5xl: 3rem;       /* 48px */

    /* SPACING - Consistent rhythm */
    --warm-spacing-unit: 0.25rem;     /* 4px base unit */

    /* TRANSITIONS - Smooth interactions */
    --warm-transition-fast: 150ms ease-in-out;
    --warm-transition-base: 250ms ease-in-out;
    --warm-transition-slow: 400ms ease-in-out;

    /* BORDER RADIUS - Refined corners */
    --warm-radius-sm: 6px;
    --warm-radius-md: 10px;
    --warm-radius-lg: 16px;
    --warm-radius-xl: 24px;
}

/* ============================================================================
   3. TYPOGRAPHY SYSTEM
   ============================================================================ */

/* Base body typography */
body {
    font-family: var(--warm-font-sans);
    font-size: var(--warm-font-size-base);
    line-height: 1.7;
    color: var(--warm-text-primary);
    background-color: var(--warm-bg-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Heading styles - Elegant serif typography */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--warm-font-serif);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--warm-text-primary);
    margin-bottom: 1rem;
}

h1, .h1 {
    font-size: var(--warm-font-size-5xl);
    font-weight: 700;
    letter-spacing: -0.03em;
}

h2, .h2 {
    font-size: var(--warm-font-size-4xl);
    font-weight: 700;
}

h3, .h3 {
    font-size: var(--warm-font-size-3xl);
}

h4, .h4 {
    font-size: var(--warm-font-size-2xl);
}

h5, .h5 {
    font-size: var(--warm-font-size-xl);
}

h6, .h6 {
    font-size: var(--warm-font-size-lg);
}

/* Paragraph and body text */
p {
    margin-bottom: 1.25rem;
    color: var(--warm-text-primary);
}

.lead {
    font-size: var(--warm-font-size-xl);
    font-weight: 300;
    line-height: 1.6;
    color: var(--warm-text-secondary);
}

/* Display headings - Extra large, dramatic */
.display-1, .display-2, .display-3, .display-4 {
    font-family: var(--warm-font-serif);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.04em;
}

.display-3 {
    font-size: 4rem;
}

.display-4 {
    font-size: 3.5rem;
    text-shadow: 0 2px 12px rgba(45, 27, 20, 0.15);
}

/* Text utilities */
.text-primary {
    color: var(--warm-primary) !important;
}

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

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

.text-dark {
    color: var(--warm-text-primary) !important;
}

small, .small {
    font-size: var(--warm-font-size-sm);
    color: var(--warm-text-secondary);
}

/* Links */
a {
    color: var(--warm-burgundy-primary);
    text-decoration: none;
    transition: color var(--warm-transition-base);
}

a:hover {
    color: var(--warm-burgundy-dark);
    text-decoration: underline;
}

/* FIX #1: Remove text underline from navigation links on hover
   The navigation menu uses a ::after pseudo-element for elegant underline animation.
   This rule prevents the default link underline from appearing on nav links,
   eliminating the "double underline" visual issue. */
.navbar-nav .nav-link:hover {
    text-decoration: none !important;
}

/* Lists */
ul, ol {
    color: var(--warm-text-primary);
}

.list-unstyled li {
    color: var(--warm-text-primary);
}

/* ============================================================================
   4. NAVIGATION BAR - Coordinated with Logo Charcoal
   ============================================================================
   Navigation uses logo's charcoal background to create visual integration.
   The logo appears to be part of the nav rather than sitting on top of it.
   ============================================================================ */

.navbar {
    background: var(--warm-gradient-primary) !important;  /* Logo charcoal gradient */
    box-shadow: var(--warm-shadow-md);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--warm-charcoal-dark);   /* Darker charcoal border */
    padding: 1rem 0;
}

.navbar-brand {
    font-family: var(--warm-font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--warm-cream-gold-light) !important;       /* Logo cream-gold for brand text */
    letter-spacing: 0.02em;
    transition: transform var(--warm-transition-base);
}

.navbar-brand:hover {
    transform: scale(1.02);
    color: var(--warm-cream-gold) !important;             /* Exact logo gold on hover */
}

.navbar-nav .nav-link {
    position: relative;
    font-family: var(--warm-font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: rgba(245, 241, 232, 0.92) !important;          /* Cream with transparency */
    padding: 0.5rem 1rem;
    transition: all var(--warm-transition-base);
    letter-spacing: 0.01em;
}

/* Elegant underline animation using logo cream-gold */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--warm-cream-gold);                   /* Logo cream-gold underline */
    transition: all var(--warm-transition-base);
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--warm-cream-gold-light) !important;       /* Logo gold on hover/active */
    text-shadow: 0 0 12px rgba(212, 197, 164, 0.4);       /* Logo gold glow */
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 80%;
}

/* ============================================================================
   5. HERO SECTION - Enhanced with Logo Colors & Sophisticated Feathering
   ============================================================================

   HERO FEATHERING EFFECT:
   The bottom of the hero image gracefully fades into the next section using
   a multi-stop linear gradient. This creates a sophisticated transition that
   feels polished and professional.

   Gradient stops are carefully calibrated:
   - 0% to 65%: Fully opaque overlay (maintains hero visibility)
   - 65% to 75%: Begin fade (subtle start to transition)
   - 75% to 92%: Main feathering zone (smooth opacity curve)
   - 92% to 100%: Complete transparency (seamless blend into next section)

   The feathering height is approximately 25-35% of hero height, which creates
   a natural transition without being too abrupt or too gradual.
   ============================================================================ */

/* FIX #3: Enhanced hero section for visible feathering effect
   The feathering gradient is applied to .hero-overlay::after to create a smooth
   fade from the hero image into the next section. The background color of the
   hero section (warm-cream) will show through the transparent gradient at the bottom,
   creating a seamless transition. Overflow is kept as hidden to contain decorative
   elements while the gradient transparency creates the visual fade. */
.hero-section-elegant {
    background: var(--warm-cream);
    min-height: 70vh;
    max-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}

/* Background image overlay - preserved from original */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/symphony-cropped.jpg') center/cover;
    opacity: 1;
    z-index: 1;
}

/* Logo-coordinated charcoal overlay with sophisticated bottom feathering
   FIX #3 IMPLEMENTATION: This gradient creates the feathering effect.
   As the gradient fades to transparent at the bottom, the hero section's
   cream background shows through, creating a smooth transition to the
   next section. The multi-stop gradient ensures a natural, sophisticated fade. */
.hero-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Multi-stop gradient for smooth feathering effect at bottom */
    background: linear-gradient(
        to bottom,
        rgba(47, 47, 47, 0.88) 0%,      /* Logo charcoal - fully opaque at top */
        rgba(47, 47, 47, 0.88) 60%,     /* Maintain opacity through most of hero (adjusted from 65%) */
        rgba(47, 47, 47, 0.72) 70%,     /* Begin visible feathering transition (adjusted) */
        rgba(47, 47, 47, 0.50) 78%,     /* Mid-feather - accelerating fade (adjusted) */
        rgba(47, 47, 47, 0.28) 86%,     /* Continuing fade (adjusted) */
        rgba(47, 47, 47, 0.12) 93%,     /* Near-transparent (adjusted) */
        rgba(47, 47, 47, 0.00) 100%     /* Complete transparency - seamless blend */
    );
    z-index: 2;
}

/* Subtle texture overlay - evokes sheet music */
.hero-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23FFFFFF' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.4;
    z-index: 3;
}

.min-vh-75 {
    min-height: 60vh;
}

/* Logo showcase - Enhanced to blend with logo colors */
.logo-showcase {
    position: relative;
    z-index: 3;
}

.logo-container {
    position: relative;
    display: inline-block;
    padding: 1.5rem;
    background: rgba(47, 47, 47, 0.15);           /* Subtle logo charcoal background */
    border-radius: var(--warm-radius-xl);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(212, 197, 164, 0.35);  /* Logo cream-gold border */
    transition: all var(--warm-transition-slow);
}

.logo-container:hover {
    transform: scale(1.03);
    background: rgba(47, 47, 47, 0.22);           /* Slightly more visible on hover */
    border-color: rgba(212, 197, 164, 0.55);      /* Brighter logo gold on hover */
}

.hero-logo {
    max-width: 240px;
    height: auto;
    border-radius: var(--warm-radius-lg);
    filter: drop-shadow(0 12px 24px rgba(47, 47, 47, 0.4));  /* Logo charcoal shadow */
    animation: gentleFloat 8s ease-in-out infinite;
    transition: all var(--warm-transition-base);
}

/* Cream-gold glow effect matching logo accent color */
.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(212, 197, 164, 0.18) 0%, transparent 70%);  /* Logo cream-gold glow */
    border-radius: 50%;
    animation: pulse 6s ease-in-out infinite alternate;
    z-index: -1;
}

/* Hero content */
.hero-content {
    position: relative;
    z-index: 3;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 2px 4px 12px rgba(45, 27, 20, 0.5);
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease-out 0.5s both;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.4rem;
    font-weight: 300;
    font-family: var(--warm-font-serif);
    color: var(--warm-cream-gold-light);                  /* Logo cream-gold for subtitle */
    text-shadow: 1px 2px 6px rgba(47, 47, 47, 0.4);       /* Logo charcoal shadow */
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease-out 0.7s both;
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 1px 2px 4px rgba(45, 27, 20, 0.3);
    animation: fadeInUp 1s ease-out 0.9s both;
    margin-bottom: 2rem;
}

/* Hero section variants - ensure accessibility across all hero implementations */
.hero-section,
.hero-with-image {
    position: relative;
    background: var(--warm-gradient-primary);
    color: #FFFFFF;
    padding: 4rem 0;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

/* ACCESSIBILITY: Hero sections with dark backgrounds need white text
   This ensures all hero section variants maintain proper contrast. */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6,
.hero-section p,
.hero-section .lead,
.hero-section .display-1,
.hero-section .display-2,
.hero-section .display-3,
.hero-section .display-4,
.hero-with-image h1,
.hero-with-image h2,
.hero-with-image h3,
.hero-with-image h4,
.hero-with-image h5,
.hero-with-image h6,
.hero-with-image p,
.hero-with-image .lead,
.hero-with-image .display-1,
.hero-with-image .display-2,
.hero-with-image .display-3,
.hero-with-image .display-4 {
    color: #FFFFFF !important;
}

/* Musical note decorations - using logo cream-gold */
.musical-notes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

.musical-notes i {
    position: absolute;
    color: rgba(212, 197, 164, 0.20);                     /* Logo cream-gold with transparency */
    font-size: 3rem;
    animation: float 12s ease-in-out infinite;
    filter: drop-shadow(0 2px 8px rgba(47, 47, 47, 0.3)); /* Logo charcoal shadow */
}

.note-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.note-2 {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.note-3 {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

/* ============================================================================
   6. BUTTONS - Sophisticated Warm Styles
   ============================================================================ */

/* Base button styling */
.btn {
    font-family: var(--warm-font-sans);
    font-weight: 600;
    border-radius: var(--warm-radius-md);
    padding: 0.75rem 1.75rem;
    transition: all var(--warm-transition-base);
    border: 2px solid transparent;
    letter-spacing: 0.02em;
    box-shadow: var(--warm-shadow-sm);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--warm-shadow-md);
}

.btn:active {
    transform: translateY(0);
}

/* Primary button - Burgundy gradient */
.btn-primary {
    background: var(--warm-gradient-primary);
    border-color: var(--warm-burgundy-primary);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #6B1A28 0%, #8B2635 100%);
    border-color: var(--warm-burgundy-dark);
    color: white;
    box-shadow: 0 6px 20px rgba(139, 38, 53, 0.35);
}

/* Elegant primary button for hero section - using logo cream-gold */
.btn-elegant-primary {
    background: var(--warm-gradient-gold);                /* Logo cream-gold gradient */
    border: none;
    color: var(--warm-charcoal-primary);                  /* Logo charcoal text for strong contrast */
    font-weight: 700;
    padding: 1.1rem 2.5rem;
    border-radius: var(--warm-radius-lg);
    box-shadow: 0 8px 24px rgba(212, 197, 164, 0.45);     /* Logo cream-gold shadow */
    transition: all var(--warm-transition-base);
    animation: fadeInUp 1s ease-out 1.1s both;
}

.btn-elegant-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(212, 197, 164, 0.6);     /* Stronger logo gold shadow on hover */
    background: linear-gradient(135deg, #E5D9BC 0%, #D4C5A4 100%); /* Reversed logo gold gradient */
    color: var(--warm-charcoal-primary);                  /* Maintain logo charcoal text */
}

/* Elegant outline button - coordinated with logo colors */
.btn-elegant-outline {
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(212, 197, 164, 0.45);          /* Logo cream-gold border */
    color: white;
    font-weight: 700;
    padding: 1.1rem 2.5rem;
    border-radius: var(--warm-radius-lg);
    backdrop-filter: blur(10px);
    transition: all var(--warm-transition-base);
    animation: fadeInUp 1s ease-out 1.1s both;
}

.btn-elegant-outline:hover {
    background: rgba(212, 197, 164, 0.18);                /* Logo cream-gold tint on hover */
    border-color: var(--warm-cream-gold-light);           /* Brighter logo gold border */
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(212, 197, 164, 0.3);     /* Logo gold shadow */
}

/* Outline primary button */
.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--warm-burgundy-primary);
    color: var(--warm-burgundy-primary);
}

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

/* Warning/accent button - Gold */
.btn-warning {
    background: var(--warm-gradient-gold);
    border-color: var(--warm-gold-primary);
    color: var(--warm-espresso);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #B8924A 0%, #D4A855 100%);
    border-color: var(--warm-gold-dark);
    color: var(--warm-espresso);
}

/* Secondary button - Brown */
.btn-secondary {
    background: var(--warm-brown);
    border-color: var(--warm-brown);
    color: white;
}

.btn-secondary:hover {
    background: var(--warm-brown-light);
    border-color: var(--warm-brown-light);
    color: white;
}

/* Dark button */
.btn-dark {
    background: var(--warm-espresso);
    border-color: var(--warm-espresso);
    color: var(--warm-cream);
}

.btn-dark:hover {
    background: var(--warm-espresso-light);
    border-color: var(--warm-espresso-light);
    color: var(--warm-cream);
}

.btn-outline-dark {
    background: transparent;
    border: 2px solid var(--warm-espresso);
    color: var(--warm-espresso);
}

.btn-outline-dark:hover {
    background: var(--warm-espresso);
    border-color: var(--warm-espresso);
    color: var(--warm-cream);
}

/* Button sizes */
.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: var(--warm-font-size-sm);
}

.btn-lg {
    padding: 1rem 2.25rem;
    font-size: var(--warm-font-size-lg);
    font-weight: 700;
}

/* ============================================================================
   7. CARDS - Elegant with Depth
   ============================================================================ */

.card {
    background-color: var(--warm-bg-card);
    border: 1px solid var(--warm-border-light);
    border-radius: var(--warm-radius-lg);
    box-shadow: var(--warm-shadow-sm);
    transition: all var(--warm-transition-base);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--warm-shadow-lg);
    border-color: var(--warm-cream-gold);                 /* Logo cream-gold border on hover */
}

/* Card header - Warm gradient */
.card-header {
    background: var(--warm-gradient-subtle);
    border-bottom: 2px solid var(--warm-border-color);
    border-radius: var(--warm-radius-lg) var(--warm-radius-lg) 0 0 !important;
    font-family: var(--warm-font-serif);
    font-weight: 600;
    font-size: var(--warm-font-size-lg);
    color: var(--warm-text-primary);
    padding: 1.25rem 1.5rem;
}

/* FIX #2A: Ensure card headers with .bg-primary have accessible contrast
   When .bg-primary is applied to card headers (like Symphonic Winds card),
   the heading text needs sufficient contrast against the dark charcoal background.
   WCAG AA requires 4.5:1 for body text, 3:1 for large text (18pt+).
   White text on charcoal (#2F2F2F) achieves 12.8:1 contrast - AAA compliant. */
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6,
.card-header.bg-primary .h2,
.card-header.bg-primary .h3,
.card-header.bg-primary .h4,
.card-header.bg-primary .h5,
.card-header.bg-primary .h6 {
    color: #FFFFFF !important;
}

/* FIX #2B: Harmonize card image border-radius with card container
   When cards use background-image on .card-img-top div, the border-radius
   should match the card's top corners to create a seamless, polished look.
   This prevents the awkward gap between image and card border. */
.card-img-top,
.card > .card-img-top {
    border-radius: var(--warm-radius-lg) var(--warm-radius-lg) 0 0 !important;
}

/* For cards using background-image on div.card-img-top */
.card > div.card-img-top:first-child {
    border-top-left-radius: var(--warm-radius-lg) !important;
    border-top-right-radius: var(--warm-radius-lg) !important;
}

/* Card body */
.card-body {
    padding: 1.5rem;
    color: var(--warm-text-primary);
}

.card-title {
    font-family: var(--warm-font-serif);
    font-weight: 600;
    color: var(--warm-charcoal-primary);                  /* Logo charcoal for card titles */
    margin-bottom: 1rem;
}

.card-text {
    color: var(--warm-text-primary);
    line-height: 1.7;
}

/* Card footer */
.card-footer {
    background: var(--warm-cream);
    border-top: 1px solid var(--warm-border-light);
    padding: 1rem 1.5rem;
}

/* Featured card variant - using logo cream-gold */
.card.border-warning {
    border: 2px solid var(--warm-cream-gold) !important;  /* Logo cream-gold featured border */
    box-shadow: 0 4px 16px rgba(212, 197, 164, 0.25);     /* Logo cream-gold shadow */
}

/* ============================================================================
   8. BACKGROUNDS & SECTIONS
   ============================================================================ */

.bg-primary {
    background: var(--warm-gradient-primary) !important;
    color: var(--warm-text-on-dark);
}

/* ACCESSIBILITY FIX: Page headers with dark backgrounds MUST have light text

   WHY: Many page headers use .bg-primary (dark charcoal background #2F2F2F) but
   headings were inheriting dark text color from the global heading styles,
   creating dark-on-dark text that violates WCAG accessibility standards.

   WHAT: This fix ensures all headings and paragraphs inside .bg-primary sections
   display white text, achieving 12.8:1 contrast ratio (WCAG AAA compliant).

   WHERE: Affects all page headers across the site: About Us, Concerts & Events,
   News & Updates, Media, Contact Us, Donations & Dues, and other pages using
   .bg-primary for hero/header sections.

   HOW: Uses high-specificity selectors to override the global heading color
   rules (lines 167-175) that set dark charcoal text. White (#FFFFFF) on
   charcoal (#2F2F2F) achieves 12.8:1 contrast - exceeding AAA standards. */
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-primary .h1,
.bg-primary .h2,
.bg-primary .h3,
.bg-primary .h4,
.bg-primary .h5,
.bg-primary .h6,
.bg-primary p,
.bg-primary .lead,
.bg-primary .display-1,
.bg-primary .display-2,
.bg-primary .display-3,
.bg-primary .display-4 {
    color: #FFFFFF !important;
}

/* Ensure subtitle/description text also has sufficient contrast on dark backgrounds */
.bg-primary .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.bg-light {
    background-color: var(--warm-cream) !important;
    color: var(--warm-text-primary);
}

.bg-dark {
    background: linear-gradient(135deg, var(--warm-espresso) 0%, var(--warm-espresso-light) 100%) !important;
    color: var(--warm-text-on-dark);
}

/* ACCESSIBILITY: Ensure .bg-dark also has light text on all elements
   Deep espresso (#2D1B14) requires white text for WCAG compliance.
   White on espresso achieves approximately 13.5:1 contrast (AAA). */
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark .h1,
.bg-dark .h2,
.bg-dark .h3,
.bg-dark .h4,
.bg-dark .h5,
.bg-dark .h6,
.bg-dark p,
.bg-dark .lead {
    color: var(--warm-cream) !important;
}

.bg-warning {
    background-color: var(--warm-cream-gold) !important; /* Logo cream-gold background */
    color: var(--warm-charcoal-primary);
}

/* Call to action sections - using logo colors */
.call-to-action {
    background: linear-gradient(135deg, rgba(212, 197, 164, 0.12) 0%, rgba(245, 241, 232, 0.8) 100%); /* Logo cream-gold gradient */
    border-top: 2px solid var(--warm-cream-gold);        /* Logo cream-gold borders */
    border-bottom: 2px solid var(--warm-cream-gold);
}

/* ============================================================================
   9. FORMS - Refined Input Styling
   ============================================================================ */

.form-label {
    font-weight: 600;
    color: var(--warm-text-primary);
    margin-bottom: 0.5rem;
    font-family: var(--warm-font-sans);
}

.form-control {
    font-family: var(--warm-font-sans);
    background-color: white;
    border: 2px solid var(--warm-border-color);
    border-radius: var(--warm-radius-md);
    color: var(--warm-text-primary);
    padding: 0.75rem 1rem;
    transition: all var(--warm-transition-base);
}

.form-control:focus {
    background-color: white;
    border-color: var(--warm-charcoal-primary);           /* Logo charcoal focus border */
    color: var(--warm-text-primary);
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 47, 0.12);     /* Logo charcoal focus shadow */
    outline: none;
}

.form-control::placeholder {
    color: var(--warm-text-muted);
    opacity: 0.7;
}

/* ============================================================================
   10. ALERTS - Warm Color Variants
   ============================================================================ */

.alert {
    border: none;
    border-radius: var(--warm-radius-md);
    font-weight: 500;
    border-left: 4px solid;
    box-shadow: var(--warm-shadow-sm);
}

.alert-success {
    background-color: #F0F5EB;
    color: var(--warm-success);
    border-left-color: var(--warm-success);
}

.alert-info {
    background-color: #EEF1F5;
    color: var(--warm-info);
    border-left-color: var(--warm-info);
}

.alert-warning {
    background-color: #FDF5EB;
    color: #B86424;
    border-left-color: var(--warm-warning);
}

.alert-danger {
    background-color: #FBEEED;
    color: #9B2E2A;
    border-left-color: var(--warm-danger);
}

/* ============================================================================
   11. FOOTER - Coordinated with Logo Charcoal & Cream-Gold
   ============================================================================
   Footer uses logo charcoal background with cream-gold accents, creating
   visual bookending with the navigation header.
   ============================================================================ */

footer {
    background: linear-gradient(135deg, var(--warm-charcoal-primary) 0%, var(--warm-charcoal-light) 100%) !important; /* Logo charcoal gradient */
    color: var(--warm-cream);
    border-top: 3px solid var(--warm-cream-gold);         /* Logo cream-gold top border */
}

footer h5, footer h6 {
    font-family: var(--warm-font-serif);
    color: var(--warm-cream-gold-light);                  /* Logo cream-gold for headings */
    font-weight: 600;
}

footer p, footer small {
    color: rgba(245, 241, 232, 0.85);
}

footer a {
    color: var(--warm-cream-gold-light);                  /* Logo cream-gold for links */
    transition: color var(--warm-transition-base);
}

footer a:hover {
    color: white;
    text-decoration: none;
}

footer .text-warning {
    color: var(--warm-cream-gold) !important;             /* Logo cream-gold for warning text */
}

/* ============================================================================
   12. ANIMATIONS
   ============================================================================ */

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

@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-12px) rotate(1deg);
    }
    66% {
        transform: translateY(6px) rotate(-1deg);
    }
}

@keyframes pulse {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.12;
    }
    25% {
        transform: translateY(-25px) rotate(8deg);
        opacity: 0.35;
    }
    50% {
        transform: translateY(-12px) rotate(-5deg);
        opacity: 0.25;
    }
    75% {
        transform: translateY(-18px) rotate(5deg);
        opacity: 0.4;
    }
}

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

/* ============================================================================
   13. RESPONSIVE DESIGN
   ============================================================================ */

/* Tablet and below */
@media (max-width: 768px) {
    :root {
        --warm-font-size-5xl: 2.25rem;
        --warm-font-size-4xl: 1.875rem;
        --warm-font-size-3xl: 1.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-logo {
        max-width: 180px;
    }

    .logo-container {
        padding: 1rem;
    }

    .hero-section-elegant {
        min-height: 60vh;
        max-height: 70vh;
        padding: 2rem 0;
    }

    .display-4 {
        font-size: 2.5rem;
    }

    .btn-lg {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }

    .btn-elegant-primary,
    .btn-elegant-outline {
        padding: 0.875rem 1.75rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ============================================================================
   14. UTILITY CLASSES - Logo-Coordinated Theme
   ============================================================================ */

/* Background utilities - using logo colors */
.bg-warm-cream {
    background-color: var(--warm-cream) !important;
}

.bg-warm-gold {
    background-color: var(--warm-cream-gold) !important;  /* Logo cream-gold */
}

.bg-warm-charcoal {
    background-color: var(--warm-charcoal-primary) !important; /* Logo charcoal */
}

/* ACCESSIBILITY: Dark charcoal background needs light text */
.bg-warm-charcoal,
.bg-warm-charcoal h1,
.bg-warm-charcoal h2,
.bg-warm-charcoal h3,
.bg-warm-charcoal h4,
.bg-warm-charcoal h5,
.bg-warm-charcoal h6,
.bg-warm-charcoal p {
    color: #FFFFFF !important;
}

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

/* ACCESSIBILITY: Burgundy background needs light text */
.bg-warm-burgundy,
.bg-warm-burgundy h1,
.bg-warm-burgundy h2,
.bg-warm-burgundy h3,
.bg-warm-burgundy h4,
.bg-warm-burgundy h5,
.bg-warm-burgundy h6,
.bg-warm-burgundy p {
    color: #FFFFFF !important;
}

/* Text color utilities - using logo colors */
.text-warm-charcoal {
    color: var(--warm-charcoal-primary) !important;       /* Logo charcoal */
}

.text-warm-gold {
    color: var(--warm-cream-gold) !important;             /* Logo cream-gold */
}

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

.text-warm-burgundy {
    color: var(--warm-burgundy-primary) !important;
}

/* Border utilities - using logo colors */
.border-warm-gold {
    border-color: var(--warm-cream-gold) !important;      /* Logo cream-gold */
}

.border-warm-charcoal {
    border-color: var(--warm-charcoal-primary) !important; /* Logo charcoal */
}

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

/* Shadow utilities */
.shadow-warm-sm {
    box-shadow: var(--warm-shadow-sm) !important;
}

.shadow-warm-md {
    box-shadow: var(--warm-shadow-md) !important;
}

.shadow-warm-lg {
    box-shadow: var(--warm-shadow-lg) !important;
}

/* ============================================================================
   15. PRINT STYLES
   ============================================================================ */

@media print {
    .navbar, footer, .btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
        color: black;
        background: white;
    }

    .card {
        border: 1px solid #ddd;
        box-shadow: none;
        page-break-inside: avoid;
    }
}