/* ========================================
 * css/base.css
 * ======================================== */

/* A Lo Cubano Boulder Fest - Base Design System */

/**
 * CSS Custom Properties (Variables) Organization
 * 
 * This file establishes the complete design system for the festival website
 * using CSS custom properties for consistent theming and easy maintenance.
 * 
 * Variable Categories:
 * 1. Brand Colors - Core festival palette from logo design
 * 2. Gray Scale - Neutral colors for text and interface elements
 * 3. Semantic Colors - Context-aware color assignments for light mode
 * 4. Typography - Font families, sizes, spacing, and weights
 * 5. Layout & Spacing - Consistent spacing scale and layout primitives
 * 6. Interactive Elements - Border radius, transitions, shadows, z-index
 * 
 * Theme System:
 * - Light mode: Default values defined in :root
 * - Dark mode: Overrides in [data-theme="dark"] selector
 * - System preference: Media query fallback in [data-theme="auto"]
 * 
 * Performance Considerations:
 * - Consolidated alpha values to reduce recomputation
 * - Optimized transitions for smooth theme switching
 * - Efficient variable cascade for inheritance
 */

:root {
  /* Brand Colors from Logo
   * These are the core colors extracted from the festival logo design
   * and should remain consistent across all branding materials */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue: #5b6bb5;    /* Primary brand blue */
  --color-red: #cc2936;     /* Accent red from Cuban flag inspiration */
  --color-paypal: #0070ba;  /* PayPal brand blue */
  --color-accent: #0066cc;  /* Accent color for links and highlights */

  /* Gray Scale
   * Comprehensive neutral palette for text hierarchy and interface elements
   * Provides consistent contrast ratios for accessibility compliance */
  --color-gray-900: #111111;  /* Darkest - used for dark mode backgrounds */
  --color-gray-800: #333333;  /* Dark text and surfaces */
  --color-gray-750: #4a4a4a;  /* Extra dark secondary text - 7.0:1 contrast (WCAG AA) */
  --color-gray-700: #555555;  /* Secondary text in light mode */
  --color-gray-650: #707070;  /* WCAG AA optimized muted text - 4.6:1 contrast */
  --color-gray-600: #666666;  /* Borders and dividers */
  --color-gray-500: #888888;  /* Muted text and placeholders */
  --color-gray-400: #999999;  /* Subtle text and disabled states */
  --color-gray-300: #bbbbbb;  /* Light borders */
  --color-gray-200: #dddddd;  /* Very light borders and backgrounds */
  --color-gray-100: #f5f5f5;  /* Light background surfaces */

  /* Semantic Colors - Light Mode (Default)
   * Context-aware color assignments that adapt to theme changes
   * Use these instead of direct color values for automatic theme support */
  
  /* Background Colors - Hierarchical surface system */
  --color-background: var(--color-white);           /* Page background */
  --color-background-secondary: var(--color-gray-100);  /* Secondary areas */
  --color-background-tertiary: var(--color-gray-200);   /* Tertiary sections */
  --color-surface: var(--color-white);             /* Card/component surfaces */
  --color-surface-elevated: var(--color-white);    /* Modal/dropdown surfaces */
  --color-surface-overlay: rgba(255, 255, 255, 0.95);  /* Overlay backgrounds */

  /* Text Colors - Clear hierarchy for readability */
  --color-text-primary: var(--color-black);        /* Main content text */
  --color-text-secondary: var(--color-gray-750);                 /* Secondary information - 7.0:1 contrast (WCAG AA) */
  --color-text-tertiary: var(--color-gray-650);    /* Subtle supporting text - 4.6:1 contrast (WCAG AA) */
  --color-text-muted: var(--color-gray-650);                     /* Disabled/placeholder text - 4.6:1 contrast (WCAG AA) */
  --color-text-inverse: var(--color-white);        /* Text on dark backgrounds */

  /* Border Colors - Consistent border treatment */
  --color-border: var(--color-gray-200);           /* Default borders */
  --color-border-light: var(--color-gray-100);     /* Subtle borders */
  --color-border-medium: var(--color-gray-300);    /* Medium emphasis borders */
  --color-border-strong: var(--color-gray-400);    /* Strong emphasis borders */

  /* Form Input Colors - Optimized for accessibility across themes */
  --color-input-bg: var(--color-surface);          /* Input background */
  --color-input-text: var(--color-text-primary);   /* Input text color */
  --color-input-border: var(--color-border);       /* Input border color */
  --color-input-placeholder: var(--color-gray-600);              /* Input placeholder text - 5.74:1 contrast (WCAG AA) */

  /* Interactive Colors - Brand-aligned actions and states */
  --color-primary: var(--color-blue);              /* Primary actions (CTA buttons) */
  --color-primary-hover: #4a5ca3;                  /* Primary hover state */
  --color-primary-active: #3d4d91;                 /* Primary active state */
  --color-secondary: var(--color-red);             /* Secondary actions */
  --color-secondary-hover: #b8242f;                /* Secondary hover state */
  --color-secondary-active: #a41e28;               /* Secondary active state */

  /* State Colors - Standard feedback colors for UI states */
  --color-success: #047857;                        /* Success states and confirmations - Deep green with 5.24:1 contrast (WCAG AA) */
  --color-success-light: #dcfce7;                  /* Success background tints */
  --color-warning: #d97706;                        /* Warning and caution states - 4.17:1 contrast (WCAG AA) */
  --color-warning-light: #fef3c7;                  /* Warning background tints */
  --color-error: var(--color-red);                 /* Error states (reuses brand red) */
  --color-error-light: #fef2f2;                    /* Error background tints */
  --color-info: var(--color-blue);                 /* Informational states */
  --color-info-light: #eff6ff;                     /* Info background tints */

  /* Extended State Colors - Additional variants for advanced UI needs */
  --color-success-600: #16a34a;                   /* Medium success green */
  --color-success-700: #15803d;                   /* Dark success green */
  --color-success-dark: var(--color-success-700); /* Success dark variant */
  --color-warning-600: #d97706;                   /* Medium warning orange */
  --color-warning-700: #b45309;                   /* Dark warning orange */
  --color-warning-dark: var(--color-warning-700); /* Warning dark variant */
  --color-error-600: #dc2626;                     /* Medium error red */
  --color-error-700: #b91c1c;                     /* Dark error red */
  --color-error-dark: var(--color-error-700);     /* Error dark variant */
  --color-info-500: #0ea5e9;                      /* Medium info blue */
  --color-info-600: #0284c7;                      /* Dark info blue */
  --color-primary-500: var(--color-blue);         /* Primary medium */
  --color-purple: #8b5cf6;                        /* Purple for categories */
  --color-purple-600: #7c3aed;                    /* Medium purple */
  --color-purple-700: #6d28d9;                    /* Dark purple */
  --color-purple-dark: var(--color-purple-600);   /* Purple dark variant */
  --color-green: #22c55e;                         /* Alias for success */
  --color-green-600: #16a34a;                     /* Medium green */
  --color-green-700: #15803d;                     /* Dark green */
  --color-green-800: #166534;                     /* Extra dark green */
  --color-teal-600: #0d9488;                      /* Medium teal */
  --color-teal-700: #0f766e;                      /* Dark teal */
  --color-emerald-500: #10b981;                   /* Emerald medium */
  --color-emerald-600: #059669;                   /* Emerald dark */
  --color-emerald-700: #047857;                   /* Emerald extra dark */
  --color-red-500: #ef4444;                       /* Red medium */
  --color-red-600: var(--color-error-600);        /* Red dark */
  --color-red-700: var(--color-error-700);        /* Red extra dark */
  --color-red-800: #991b1b;                       /* Red darkest */
  --color-amber-500: #f59e0b;                     /* Amber alias for warning */
  --color-amber-600: var(--color-warning-600);    /* Amber dark */
  --color-blue-500: #0ea5e9;                      /* Sky blue medium */
  --color-blue-600: #0284c7;                      /* Sky blue dark */
  --color-gray-300-alpha: #ccc;                   /* Gray for borders */
  --color-warning-bg: #856404;                    /* Warning text color */
  --color-google-blue: #4285f4;                   /* Google brand blue */
  --color-google-green: #34a853;                  /* Google brand green */

  /* Typography Scale
   * Consistent type sizing based on a modular scale for visual harmony */
  --font-size-xs: 0.75rem;     /* 12px - Small labels, captions */
  --font-size-sm: 0.875rem;    /* 14px - Secondary text, form labels */
  --font-size-base: 1rem;      /* 16px - Body text baseline */
  --font-size-lg: 1.125rem;    /* 18px - Large body text */
  --font-size-xl: 1.25rem;     /* 20px - Small headings */
  --font-size-2xl: 1.5rem;     /* 24px - Medium headings */
  --font-size-3xl: 1.875rem;   /* 30px - Large headings */
  --font-size-4xl: 2.25rem;    /* 36px - XL headings */
  --font-size-5xl: 3rem;       /* 48px - Display text */
  --font-size-6xl: 3.75rem;    /* 60px - Large display */
  --font-size-7xl: 4.5rem;     /* 72px - Hero text */
  --font-size-8xl: 6rem;       /* 96px - Feature displays */
  --font-size-9xl: 8rem;       /* 128px - Maximum impact */

  /* Font Families
   * Carefully chosen typefaces for brand personality and readability */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;                              /* System sans-serif stack */
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;  /* Serif stack */
  --font-mono:
    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New",
    monospace;                                      /* Monospace stack */
  --font-display: "Bebas Neue", var(--font-sans);  /* Display/heading font */
  --font-accent: "Playfair Display", var(--font-serif);  /* Elegant accent font */
  --font-code: var(--font-mono);                   /* Code and technical text */

  /* Line Heights - Vertical rhythm for text readability */
  --line-height-none: 1;       /* Tight spacing for headings */
  --line-height-tight: 1.25;   /* Compact text blocks */
  --line-height-snug: 1.375;   /* Comfortable reading */
  --line-height-normal: 1.5;   /* Standard body text */
  --line-height-relaxed: 1.625; /* Loose, airy text */
  --line-height-loose: 2;      /* Very open spacing */

  /* Letter Spacing - Fine-tuning character spacing */
  --letter-spacing-tighter: -0.05em;  /* Condensed headings */
  --letter-spacing-tight: -0.025em;   /* Slightly tight */
  --letter-spacing-normal: 0;         /* Default spacing */
  --letter-spacing-wide: 0.025em;     /* Slightly expanded */
  --letter-spacing-wider: 0.05em;     /* Expanded for emphasis */
  --letter-spacing-widest: 0.1em;     /* Maximum expansion */

  /* Spacing Scale
   * Consistent spatial rhythm throughout the interface */
  --space-xs: 0.25rem;    /* 4px - Minimal spacing */
  --space-sm: 0.5rem;     /* 8px - Small gaps */
  --space-md: 1rem;       /* 16px - Base spacing unit */
  --space-lg: 1.5rem;     /* 24px - Medium sections */
  --space-xl: 2rem;       /* 32px - Large sections */
  --space-2xl: 3rem;      /* 48px - Extra large gaps */
  --space-3xl: 4rem;      /* 64px - Section dividers */
  --space-4xl: 6rem;      /* 96px - Page sections */
  --space-5xl: 8rem;      /* 128px - Major layout areas */

  /* Border Radius - Consistent corner treatment */
  --radius-none: 0;           /* Sharp corners */
  --radius-sm: 0.125rem;      /* 2px - Subtle rounding */
  --radius-md: 0.25rem;       /* 4px - Standard rounding */
  --radius-lg: 0.5rem;        /* 8px - Friendly rounding */
  --radius-xl: 1rem;          /* 16px - Pronounced rounding */
  --radius-full: 9999px;      /* Pill/circular shapes */

  /* Transitions - Smooth, consistent animations */
  --transition-fast: 150ms ease;     /* Quick interactions */
  --transition-base: 250ms ease;     /* Standard transitions */
  --transition-slow: 350ms ease;     /* Deliberate animations */

  /* Shadow Colors - Theme Aware
   * Shadow colors that adapt to light/dark themes for proper depth perception */
  --shadow-color: rgba(0, 0, 0, 0.1);        /* Standard shadows */
  --shadow-color-light: rgba(0, 0, 0, 0.05); /* Subtle shadows */
  --shadow-color-strong: rgba(0, 0, 0, 0.15); /* Emphasized shadows */

  /* Shadows - Elevation system for depth hierarchy */
  --shadow-sm: 0 1px 2px 0 var(--shadow-color-light);    /* Minimal elevation */
  --shadow-md: 0 4px 6px -1px var(--shadow-color);       /* Standard cards */
  --shadow-lg: 0 10px 15px -3px var(--shadow-color);     /* Elevated panels */
  --shadow-xl: 0 20px 25px -5px var(--shadow-color);     /* Floating elements */

  /* Z-index Scale - Layering system for stacking context */
  --z-base: 0;              /* Default layer */
  --z-dropdown: 1000;       /* Dropdown menus */
  --z-sticky: 1020;         /* Sticky headers */
  --z-fixed: 1030;          /* Fixed positioning */
  --z-modal-backdrop: 1040; /* Modal backgrounds */
  --z-modal: 1050;          /* Modal content */
  --z-popover: 1060;        /* Popovers and tooltips */
  --z-tooltip: 1070;        /* Highest UI elements */

  /* Cart-specific colors */
  --color-cart-dark-bg: rgba(0, 0, 0, 0.85); /* Translucent dark cart background */
}

/* Dark Mode Theme Overrides - Performance Optimized
 * 
 * Dark theme implementation that overrides semantic color variables
 * while maintaining the same design system structure. Optimized for
 * performance with consolidated alpha values and efficient cascading.
 * 
 * Applied when [data-theme="dark"] attribute is present on <html> element.
 */
[data-theme="dark"] {
  /* Background Colors - Consolidated for efficiency
   * Inverted hierarchy using darker grays for comfortable viewing */
  --color-background: var(--color-gray-900);           /* Dark page background */
  --color-background-secondary: var(--color-gray-800); /* Secondary dark areas */
  --color-background-tertiary: var(--color-gray-700);  /* Tertiary sections */
  --color-surface: var(--color-gray-900);              /* Card surfaces */
  --color-surface-elevated: var(--color-gray-700);     /* Elevated surfaces */
  --color-surface-overlay: rgba(17, 17, 17, 0.95);     /* Dark overlays */

  /* Text Colors - Optimized hierarchy
   * High contrast for readability on dark backgrounds */
  --color-text-primary: var(--color-white);            /* Primary text */
  --color-text-secondary: var(--color-gray-300);       /* Secondary text */
  --color-text-tertiary: var(--color-gray-400);        /* Subtle text */
  --color-text-muted: var(--color-gray-400);           /* Muted/disabled text */
  --color-text-inverse: var(--color-white);            /* Text on dark backgrounds/overlays */

  /* Border Colors - Simplified cascade
   * Lighter borders for visibility on dark surfaces */
  --color-border: var(--color-gray-600);               /* Standard borders */
  --color-border-light: var(--color-gray-700);         /* Subtle borders */
  --color-border-medium: var(--color-gray-600);        /* Medium borders */
  --color-border-strong: var(--color-gray-500);        /* Strong borders */

  /* Form Input Colors - Dark mode optimized
   * Enhanced contrast for better visibility on dark surfaces */
  --color-input-bg: var(--color-gray-800);             /* Input background (darker) */
  --color-input-text: var(--color-white);              /* Input text (white) */
  --color-input-border: var(--color-gray-600);         /* Input border (visible) */
  --color-input-placeholder: var(--color-gray-400);    /* Input placeholder (muted) */

  /* Interactive Colors - Optimized for performance
   * Slightly brighter variants for better visibility on dark backgrounds */
  --color-primary-hover: #6c7bc7;                      /* Brighter primary hover */
  --color-primary-active: #7d8bd9;                     /* Brighter primary active */
  --color-secondary-hover: #d63444;                    /* Brighter secondary hover */
  --color-secondary-active: #e13f52;                   /* Brighter secondary active */

  /* State Colors - Consolidated alpha values
   * Adjusted for dark theme visibility with consistent alpha transparency */
  --color-success: #22c55e;                            /* Brighter green for dark backgrounds (4.8:1 contrast - WCAG AA compliant) */
  --color-success-light: rgba(52, 211, 153, 0.1);     /* Success background */
  --color-warning: #fbbf24;                            /* Brighter warning amber */
  --color-warning-light: rgba(251, 191, 36, 0.1);     /* Warning background */
  --color-error-light: rgba(204, 41, 54, 0.1);        /* Error background */
  --color-info-light: rgba(91, 107, 181, 0.1);        /* Info background */

  /* Extended State Colors - Dark mode variants */
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-dark: var(--color-success-700);
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  /* Shadow Colors - Semantic shadow tokens */
  --shadow-color-dark: rgba(0, 0, 0, 0.5);
  --color-overlay-dark: rgba(0, 0, 0, 0.8);
  --shadow-accent-blue: 0 4px 12px rgba(91, 107, 181, 0.3);
  --shadow-accent-red: 0 4px 12px rgba(204, 41, 54, 0.3);
  --shadow-elevated-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
  --color-warning-dark: var(--color-warning-700);
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-dark: var(--color-error-700);
  --color-info-500: #0ea5e9;
  --color-info-600: #0284c7;
  --color-primary-500: var(--color-blue);
  --color-purple: #8b5cf6;
  --color-purple-600: #7c3aed;
  --color-purple-700: #6d28d9;
  --color-purple-dark: var(--color-purple-600);
  --color-green: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-red-500: #ef4444;
  --color-red-600: var(--color-error-600);
  --color-red-700: var(--color-error-700);
  --color-red-800: #991b1b;
  --color-amber-500: #f59e0b;
  --color-amber-600: var(--color-warning-600);
  --color-blue-500: #0ea5e9;
  --color-blue-600: #0284c7;
  --color-gray-300-alpha: #ccc;
  --color-warning-bg: #856404;
  --color-google-blue: #4285f4;
  --color-google-green: #34a853;

  /* Shadow Colors - Optimized performance
   * Deeper shadows for proper depth perception on dark backgrounds */
  --shadow-color: rgba(0, 0, 0, 0.3);                 /* Stronger base shadows */
  --shadow-color-light: rgba(0, 0, 0, 0.2);           /* Subtle dark shadows */
  --shadow-color-strong: rgba(0, 0, 0, 0.4);          /* Emphasized shadows */
  
  /* Animation performance optimization
   * Consolidated transition property for theme switching */
  --transition-theme: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* System Preference Dark Mode - Only applies when explicitly opted-in
 * 
 * Fallback implementation for users who have set theme preference to "auto/system"
 * and have dark mode enabled at the OS level. Uses same color overrides as explicit
 * dark theme to maintain consistency.
 * 
 * Applied when [data-theme="auto"] is present AND user has OS dark mode enabled.
 */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    /* Background Colors - Identical to explicit dark theme */
    --color-background: var(--color-gray-900);
    --color-background-secondary: var(--color-gray-800);
    --color-background-tertiary: var(--color-gray-700);
    --color-surface: var(--color-gray-800);
    --color-surface-elevated: var(--color-gray-700);
    --color-surface-overlay: rgba(17, 17, 17, 0.95);

    /* Text Colors - Maintains same hierarchy as explicit dark theme */
    --color-text-primary: var(--color-white);
    --color-text-secondary: var(--color-gray-300);
    --color-text-tertiary: var(--color-gray-400);
    --color-text-muted: var(--color-gray-400);
    --color-text-inverse: var(--color-white);

    /* Border Colors - Consistent with explicit dark theme */
    --color-border: var(--color-gray-600);
    --color-border-light: var(--color-gray-700);
    --color-border-medium: var(--color-gray-600);
    --color-border-strong: var(--color-gray-500);

    /* Interactive Colors - Keep brand colors but adjust for contrast */
    --color-primary-hover: #6c7bc7;
    --color-primary-active: #7d8bd9;
    --color-secondary-hover: #d63444;
    --color-secondary-active: #e13f52;

    /* State Colors - Adjusted for dark backgrounds */
    --color-success-light: rgba(52, 211, 153, 0.1);
    --color-warning: #fbbf24;
    --color-warning-light: rgba(251, 191, 36, 0.1);
    --color-error-light: rgba(204, 41, 54, 0.1);
    --color-info-light: rgba(91, 107, 181, 0.1);

    /* Extended State Colors - Auto theme variants */
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-dark: var(--color-success-700);
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-dark: var(--color-warning-700);
    --color-error-600: #dc2626;
    --color-error-700: #b91c1c;
    --color-error-dark: var(--color-error-700);
    --color-info-500: #0ea5e9;
    --color-info-600: #0284c7;
    --color-primary-500: var(--color-blue);
    --color-purple: #8b5cf6;
    --color-purple-600: #7c3aed;
    --color-purple-700: #6d28d9;
    --color-purple-dark: var(--color-purple-600);
    --color-green: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;
    --color-green-800: #166534;
    --color-teal-600: #0d9488;
    --color-teal-700: #0f766e;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-red-500: #ef4444;
    --color-red-600: var(--color-error-600);
    --color-red-700: var(--color-error-700);
    --color-red-800: #991b1b;
    --color-amber-500: #f59e0b;
    --color-amber-600: var(--color-warning-600);
    --color-blue-500: #0ea5e9;
    --color-blue-600: #0284c7;
    --color-gray-300-alpha: #ccc;
    --color-warning-bg: #856404;
    --color-google-blue: #4285f4;
    --color-google-green: #34a853;

    /* Shadow Colors - Darker shadows for dark mode */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-color-light: rgba(0, 0, 0, 0.2);
    --shadow-color-strong: rgba(0, 0, 0, 0.4);
  }
}

/* Reset & Base Styles
 * 
 * Modern CSS reset and baseline styles that provide a consistent
 * foundation across all browsers while maintaining accessibility.
 */

/* Universal Box Sizing
 * Ensures consistent box model behavior across all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset default margins and padding
 * Provides clean slate for consistent spacing control */
* {
  margin: 0;
  padding: 0;
}

/* Document-level optimizations
 * Smooth scrolling, font rendering, and base font size */
html {
  font-size: 16px;                    /* Base font size for rem calculations */
  scroll-behavior: smooth;            /* Smooth anchor link scrolling */
  -webkit-font-smoothing: antialiased;     /* Improved font rendering on WebKit */
  -moz-osx-font-smoothing: grayscale;      /* Improved font rendering on Firefox */
}

/* Body baseline styles
 * Establishes typography and color foundation */
body {
  font-family: var(--font-sans);             /* Default sans-serif font stack */
  font-size: var(--font-size-base);          /* 16px base font size */
  line-height: 1.5;                          /* Comfortable reading line height */
  color: var(--color-text-primary);          /* Theme-aware text color */
  background-color: var(--color-background); /* Theme-aware background */
  min-height: 100vh;                         /* Full viewport height minimum */
}

/* Media element optimization
 * Responsive images and media with sensible defaults */
img,
picture,
video,
canvas,
svg {
  display: block;                     /* Eliminates unwanted inline spacing */
  max-width: 100%;                    /* Responsive scaling */
  height: auto;                       /* Maintains aspect ratio */
}

/* Form element inheritance
 * Ensures form controls inherit typography settings */
input,
button,
textarea,
select {
  font: inherit;                      /* Inherit font properties from parent */
}

/* Text element optimization
 * Prevents text overflow and improves word wrapping */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;          /* Intelligent word breaking */
}

/* Link reset
 * Clean baseline for custom link styling */
a {
  color: inherit;                     /* Inherit text color by default */
  text-decoration: none;              /* Remove default underline */
}

/* Button reset
 * Clean baseline for custom button styling */
button {
  cursor: pointer;                    /* Pointer cursor for interactivity */
  background: none;                   /* Remove default button styling */
  border: none;
  padding: 0;
  font: inherit;                      /* Inherit typography */
  color: inherit;                     /* Inherit text color */
}

/* Utility Classes
 * 
 * Common layout and accessibility utilities used throughout the site.
 * These provide consistent spacing, layout, and accessibility patterns.
 */

/* Container System
 * Responsive container with consistent padding and max-width */
.container {
  width: 100%;                        /* Full width by default */
  max-width: 1440px;                  /* Maximum content width */
  margin: 0 auto;                     /* Center horizontally */
  padding: 0 var(--space-md);         /* Base horizontal padding */
}

/* Responsive container padding
 * Progressively larger padding for larger screens */
@media (min-width: 480px) {
  .container {
    padding: 0 var(--space-lg);       /* Increased padding on small tablets */
  }
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-xl);       /* Increased padding on tablets */
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--space-2xl);      /* Maximum padding on desktop */
  }
}

/* Screen Reader Only Content
 * Visually hides content while keeping it accessible to screen readers */
.visually-hidden {
  position: absolute;                 /* Remove from document flow */
  width: 1px;                         /* Minimal dimensions */
  height: 1px;
  padding: 0;
  margin: -1px;                       /* Negative margin to fully hide */
  overflow: hidden;                   /* Prevent visual overflow */
  clip: rect(0, 0, 0, 0);            /* Legacy clipping */
  white-space: nowrap;                /* Prevent text wrapping */
  border-width: 0;                    /* Remove any borders */
}

/* Loading Animation
 * Subtle pulse animation for loading states */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;                       /* Full opacity at start and end */
  }
  50% {
    opacity: 0.5;                     /* Reduced opacity at midpoint */
  }
}

.loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;  /* Smooth pulse animation */
}

/* Focus Styles
 * 
 * Consistent, accessible focus indicators that respect user preferences
 * and provide clear visual feedback for keyboard navigation.
 */

/* Base focus style - applied to all focusable elements */
:focus {
  outline: 2px solid var(--color-primary);  /* Theme-aware focus ring */
  outline-offset: 2px;                      /* Spacing from element */
}

/* Remove focus outline for mouse users (accessibility maintained) */
:focus:not(:focus-visible) {
  outline: none;                            /* Hidden for mouse interactions */
}

/* Enhanced focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--color-primary);  /* Visible for keyboard navigation */
  outline-offset: 2px;
}

/* Skip Links
 * Accessibility enhancement for keyboard navigation */
.skip-link:focus {
  top: 0;                                   /* Bring skip link into view when focused */
}

/* Modal System
 * Accessible modal dialogs with smooth animations and proper focus management
 * Used by modal-utils.js to replace alert() and confirm() calls */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-backdrop.show {
  opacity: 1;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--color-surface-elevated);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  z-index: var(--z-modal);
  opacity: 0;
  transition: all 0.3s ease;
  padding: 24px;
  border: 2px solid var(--color-border);
}

.modal.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.modal-icon {
  font-size: 24px;
  margin-right: 12px;
  line-height: 1;
}

.modal h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.modal p {
  margin-bottom: 24px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.modal button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 2px solid;
  min-width: 70px;
}

.modal__cancel {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
}

.modal__cancel:hover {
  background: var(--color-background-secondary);
  border-color: var(--color-text-secondary);
}

.modal__confirm {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

.modal__confirm:hover {
  background: var(--color-primary-hover, var(--color-primary));
  border-color: var(--color-primary-hover, var(--color-primary));
  transform: translateY(-1px);
}

.modal__confirm:focus,
.modal__cancel:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Modal type variations */
.modal--info .modal-icon {
  color: var(--color-info);
}

.modal--warning .modal-icon {
  color: var(--color-warning);
}

.modal--error .modal-icon {
  color: var(--color-error);
}

.modal--success .modal-icon {
  color: var(--color-success);
}

.modal--confirm .modal-icon {
  color: var(--color-info);
}

/* Dark theme adjustments */
[data-theme="dark"] .modal {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .modal {
    max-width: 95%;
    padding: 20px;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal button {
    width: 100%;
    justify-content: center;
  }
}

/* Verification Flow Styles */
.verification-step {
  margin-bottom: 20px;
}

.verification-step p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.highlight-email {
  font-weight: 600;
  color: var(--color-primary);
}

.code-expiry-info {
  font-size: 14px;
  color: var(--color-text-secondary);
  background: var(--color-background-secondary);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.verification-form {
  margin-top: 20px;
}

.verification-form .form-group {
  margin-bottom: 15px;
}

.verification-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.verification-form input {
  width: 100%;
  padding: 12px;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.3em;
  border: 2px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-input-bg);
  color: var(--color-input-text);
  transition: border-color 0.2s;
}

.verification-form input:focus {
  border-color: var(--color-primary);
  outline: none;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-primary {
  padding: 12px 30px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
  min-height: 44px;
}

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

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  padding: 12px 30px;
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s, border-color 0.2s;
  min-height: 44px;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-background-tertiary);
  border-color: var(--color-border-strong);
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
  font-size: 14px;
  padding: 8px 0;
  margin-top: 10px;
}

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

.session-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: var(--color-background-secondary);
  border-radius: 5px;
  margin-bottom: 20px;
}

.session-info p {
  margin: 0;
  font-size: 14px;
}

/* Inline Editing Styles */
.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.attendee-info {
  position: relative;
}

.attendee-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-icon {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: 3px;
  transition: background-color 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}

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

.btn-icon svg {
  display: block;
}

.attendee-edit-form {
  margin-top: 10px;
}

.edit-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.form-group-inline {
  display: flex;
  flex-direction: column;
}

.form-group-inline label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
}

.form-group-inline input {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 14px;
  background: var(--color-input-bg);
  color: var(--color-input-text);
}

.form-group-inline input:focus {
  border-color: var(--color-primary);
  outline: none;
}

.edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s, transform 0.1s;
  min-height: 36px;
}

.btn-small svg {
  display: block;
}

.btn-small.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-small.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.btn-small.btn-secondary {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn-small.btn-secondary:hover:not(:disabled) {
  background: var(--color-background-tertiary);
}

.btn-small.btn-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}

.btn-small.btn-warning:hover:not(:disabled) {
  background: var(--color-warning-dark);
}

.btn-small:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.no-tickets {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-secondary);
  font-size: 16px;
}

/* Message Styles Enhancement */
.message.success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
  border-left: 4px solid var(--color-success);
}

.message.warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
  border-left: 4px solid var(--color-warning);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .form-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  .session-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .ticket-actions {
    flex-direction: column;
  }

  .btn-small {
    width: 100%;
    justify-content: center;
  }

  .edit-actions {
    flex-direction: column;
  }

  .edit-actions .btn-small {
    width: 100%;
  }
}


/* ========================================
 * css/typography.css
 * ======================================== */

/* A Lo Cubano Boulder Fest - Design 4: Typographic */

/* Google Fonts loaded via preload in HTML head for optimal performance */

/* Custom Font Faces for Display Typography */
:root {
  --font-display: "Bebas Neue", sans-serif;
  --font-accent: "Playfair Display", serif;
  --font-code: "Space Mono", monospace;

  /* Typography-specific variables */
  --letter-spacing-tight: -0.05em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-widest: 0.2em;

  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
}

/* Base Typography Reset */
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  text-rendering: optimizeLegibility;
  font-feature-settings:
    "kern" 1,
    "liga" 1;
}

/* Typography-based Navigation */
/* Navigation styles moved to navigation.css */

body {
  margin: 0;
  padding: 0;
}

/* fadeInUp animation - used by other components */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Creative Text Layouts for Content */
.section-typographic {
  padding: var(--space-lg) 0;
  position: relative;
}

.text-composition {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.text-block-large {
  grid-column: span 8;
  font-family: var(--font-accent);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  font-weight: 900;
  color: var(--color-text-primary);
}

.text-block-large span {
  color: var(--color-blue);
  font-style: italic;
}

.text-block-vertical {
  grid-column: span 2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-red);
  align-self: stretch;
  text-align: center;
}

.text-block-small {
  grid-column: span 4;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.text-block-mono {
  grid-column: span 6;
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-loose);
  background: var(--color-background-secondary);
  padding: var(--space-xl);
  border-left: 4px solid var(--color-blue);
}

/* Typographic Gallery */
.gallery-typographic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2xl);
  padding: var(--space-3xl) 0;
}

.gallery-item-type {
  position: relative;
  padding: var(--space-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  overflow: hidden;
}

.gallery-item-type::before {
  content: attr(data-number);
  position: absolute;
  top: -20px;
  right: -20px;
  font-family: var(--font-display);
  font-size: var(--font-size-8xl);
  line-height: 1;
  color: var(--color-background-secondary);
  z-index: 0;
}

.gallery-item-type:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
  transition: all var(--transition-slow);
}

.gallery-type-title {
  font-family: var(--font-accent);
  font-size: var(--font-size-2xl);
  font-weight: 900;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.gallery-type-meta {
  font-family: var(--font-code);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-lg);
}

.gallery-type-description {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  position: relative;
  z-index: 1;
}

/* About Page Section Anchors - Scroll offset for subnav links */
#the-beginning,
#the-team,
#join-our-team {
  scroll-margin-top: 120px;
}

/* Team Member Cards - Board Members Section */
.team-grid {
  grid-template-columns: repeat(2, 1fr);
}

.team-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-member-card::before {
  content: none !important;
}

.team-member-card .gallery-type-description {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.team-member-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.team-member-photo:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
}

.team-member-photo:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Text-focused Form Elements */
.form-typographic {
  max-width: 600px;
  margin: 0 auto;
}

.form-group-type {
  margin-bottom: var(--space-2xl);
  position: relative;
}

.form-label-type {
  display: block;
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-sm);
  transition: all var(--transition-fast);
}

.form-input-type {
  width: 100%;
  padding: var(--space-md) 0;
  font-family: var(--font-accent);
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-border-medium);
  transition: all var(--transition-base);
}

.form-input-type:focus {
  outline: none;
  border-bottom-color: var(--color-blue);
}

.form-input-type:focus + .form-label-type {
  color: var(--color-blue);
}

.form-textarea-type {
  min-height: 150px;
  resize: vertical;
  font-family: var(--font-sans);
  line-height: var(--line-height-relaxed);
}

.form-button-type {
  display: inline-block;
  padding: var(--space-lg) var(--space-3xl);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-slow);
  text-decoration: none;
  will-change: transform;
}

.form-button-type::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-blue);
  transition: all var(--transition-slow);
  z-index: -1;
}

.form-button-type:hover {
  color: var(--color-text-inverse);
  border-color: var(--color-blue);
  transform: translateY(-2px);
}

.form-button-type:hover::before {
  left: 0;
}

/* Letter Animations and Effects */
.text-split {
  display: inline-block;
}

.text-split span {
  display: inline-block;
  transition: all var(--transition-fast);
}

.text-split:hover span {
  animation: letterDance 0.5s ease-in-out;
}

.text-split span:nth-child(odd) {
  animation-delay: 0.1s;
}

.text-split span:nth-child(even) {
  animation-delay: 0.2s;
}

@keyframes letterDance {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(-5deg);
  }
}

.text-glitch {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--font-size-5xl);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.text-glitch::before,
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.text-glitch::before {
  animation: glitch-1 0.6s infinite;
  color: var(--color-blue);
  z-index: -1;
}

.text-glitch::after {
  animation: glitch-2 0.6s infinite;
  color: var(--color-red);
  z-index: -2;
}

@keyframes glitch-1 {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(20% 0 30% 0);
    transform: translate(-2px, 2px);
  }
  40% {
    clip-path: inset(50% 0 20% 0);
    transform: translate(2px, -2px);
  }
  60% {
    clip-path: inset(10% 0 60% 0);
    transform: translate(-2px, 0);
  }
  80% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(2px, 1px);
  }
}

@keyframes glitch-2 {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(2px, -1px);
  }
  40% {
    clip-path: inset(10% 0 70% 0);
    transform: translate(-2px, 1px);
  }
  60% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(1px, 2px);
  }
  80% {
    clip-path: inset(5% 0 85% 0);
    transform: translate(-1px, -2px);
  }
}

/* Variable Font Features */
.text-variable {
  font-family: var(--font-accent);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  transition: all var(--transition-slow);
}

.text-variable:hover {
  font-variation-settings: "wght" 900;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-blue);
}

/* Text Masking Effects */
.text-mask {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--font-size-6xl);
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Typographic HR Divider */
.hr-typographic {
  border: none;
  margin: var(--space-3xl) 0;
  padding: 0;
  position: relative;
  text-align: center;
  height: var(--space-lg);
  overflow: visible;
}

.hr-typographic::before {
  content: "◊ ◊ ◊ ◊ ◊";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-accent);
  font-size: var(--font-size-lg);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-blue);
  background: var(--color-background);
  padding: 0 var(--space-lg);
}

.hr-typographic::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-border-medium) 25%,
    var(--color-border-medium) 75%,
    transparent 100%
  );
  z-index: -1;
}

/* Alternative typographic dividers */
.hr-typographic.style-text::before {
  content: "SALSA · CUBAN · BOULDER";
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-red);
}

.hr-typographic.style-minimal::before {
  content: "◆";
  font-size: var(--font-size-2xl);
  color: var(--color-text-primary);
}

.hr-typographic.style-display::before {
  content: "A LO CUBANO";
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-blue);
}

.hr-typographic.style-glitch::before {
  content: "▓▒░ 2026 ░▒▓";
  font-family: var(--font-code);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-red);
  animation: glitchDivider 2s ease-in-out infinite;
}

@keyframes glitchDivider {
  0%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) skew(0deg);
  }
  25% {
    opacity: 0.8;
    transform: translate(-50%, -50%) skew(-1deg);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) skew(1deg);
  }
  75% {
    opacity: 0.9;
    transform: translate(-50%, -50%) skew(-0.5deg);
  }
}

/* Experimental Text Layouts */
.text-circular {
  position: relative;
  width: 300px;
  height: 300px;
  margin: var(--space-3xl) auto;
}

.text-circular svg {
  width: 100%;
  height: 100%;
  animation: rotateText 20s linear infinite;
}

@keyframes rotateText {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.text-circular text {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  fill: var(--color-text-primary);
}

/* Footer Typography */
.footer-typographic {
  position: relative;
  padding: var(--space-lg) 0 var(--space-md);
  text-align: center;
  border-top: 1px solid var(--color-border);
}

/* .footer-wordmark - removed as per design update */

.footer-credits {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  margin: var(--space-xs) 0;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-md);
}

.footer-credits a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.footer-credits a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

/* Footer Social Links */
.footer-social {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.social-link-type {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-tertiary);
  transition: all var(--transition-base);
  text-decoration: none;
}

.social-link-type:hover {
  color: var(--color-primary);
  transform: translateY(-2px);
}
.social-link-type svg {
  width: 24px;
  height: 24px;
}
.social-label {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
}

/* Footer Additional Styles */
.footer-content {
  max-width: 800px;
  margin: 0 auto;
}
.footer-tagline {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-lg);
  opacity: 0.8;
}
.footer-info {
  text-align: center;
}
.footer-copyright {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}
.footer-info a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}
.footer-info a:hover {
  color: var(--color-primary);
}

/* Typography effect classes used in tickets */
.text-gradient {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text-primary);
  text-stroke: 2px var(--color-text-primary);
}

.text-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
}

.text-glitch-bg {
  background: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}

.text-glitch-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  transition: all var(--transition-slow);
  z-index: -1;
}

.text-glitch-bg:hover::before {
  left: 0;
}

.text-gradient-bg {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  border: 2px solid transparent;
  background-clip: padding-box;
}

.text-gradient-bg:hover {
  background: linear-gradient(45deg, var(--color-red), var(--color-blue));
  transform: translateY(-2px);
}

/* Ticket-specific hover fixes */
.pricing-card-type,
.addon-card-type,
.tier-card-type,
.stat-card-type,
.contact-card-type,
.policy-block-type {
  transition: all var(--transition-slow);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.pricing-card-type:hover,
.addon-card-type:hover,
.tier-card-type:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-blue);
}

/* Additional ticket form styling */
.ticket-option-type,
.addon-checkbox-type {
  transition: all var(--transition-base);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.ticket-option-type:hover,
.addon-checkbox-type:hover {
  background-color: var(--color-background-secondary);
  transform: translateX(2px);
  border-color: var(--color-blue);
}

/* Pricing layout */
.pricing-typographic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-2xl);
  margin: var(--space-3xl) 0;
}

.pricing-card-type.featured {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-md);
  transform: scale(1.05);
}

.pricing-card-type.vip {
  border-color: var(--color-red);
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--color-background-secondary) 100%
  );
}

/* Add-ons layout */
.addons-typographic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-2xl) 0;
}

/* Group tiers layout */
.group-tiers-typographic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-2xl) 0;
}

/* Form styling */
.form-grid-type {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.form-grid-type .full-width {
  grid-column: 1 / -1;
}

/* Logo responsive styling */
@media (max-width: 768px) {
  .typographic .logo-text {
    font-size: var(--font-size-2xl);
    gap: var(--space-xs);
  }

  .typographic .logo-main,
  .typographic .logo-sub {
    font-size: var(--font-size-base);
  }

  .typographic .logo-separator {
    font-size: var(--font-size-lg);
  }
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  .text-composition {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Responsive Typography */
@media (max-width: 768px) {
  .nav-menu-type {
    gap: var(--space-lg);
  }

  .nav-menu-type a {
    font-size: var(--font-size-xs);
  }

  .text-composition {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .text-block-large,
  .text-block-vertical,
  .text-block-small,
  .text-block-mono {
    grid-column: span 1;
  }

  .text-block-vertical {
    writing-mode: horizontal-tb;
    text-align: left;
  }

  .text-glitch {
    font-size: var(--font-size-3xl);
  }

  /* .footer-wordmark - removed */
}

@media (max-width: 480px) {
  .hero-typographic {
    padding: var(--space-3xl) var(--space-sm);
  }

  .hero-subtitle {
    font-size: var(--font-size-sm);
    white-space: normal;
  }

  .gallery-typographic {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-member-photo {
    width: 150px;
    height: 150px;
  }

  .form-input-type {
    font-size: var(--font-size-lg);
  }

  /* Mobile logo adjustments */
  .typographic .logo-text {
    font-size: var(--font-size-xl);
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  .typographic .logo-main {
    font-size: var(--font-size-sm);
  }

  .typographic .logo-separator {
    display: none;
  }

  .typographic .logo-sub {
    font-size: var(--font-size-xs);
    opacity: 0.8;
  }

  /* Mobile ticket styling */
  .form-button-type {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-base);
    width: 100%;
    text-align: center;
  }

  .pricing-card-type,
  .addon-card-type {
    padding: var(--space-lg);
  }

  /* Mobile pricing layout */
  .pricing-typographic {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .pricing-card-type.featured {
    transform: none;
    order: -1;
  }

  .addons-typographic,
  .group-tiers-typographic {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .form-grid-type {
    grid-template-columns: 1fr;
  }

  .text-outline {
    -webkit-text-stroke: 1px var(--color-text-primary);
    text-stroke: 1px var(--color-text-primary);
  }
}

/* Print Styles for Typography */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-background);
  }

  .nav-typographic,
  .text-glitch::before,
  .text-glitch::after {
    display: none;
  }

  .hero-title-massive {
    font-size: 48pt;
    page-break-after: avoid;
  }

  .text-block-large {
    font-size: 24pt;
  }

  .text-mask {
    -webkit-text-fill-color: var(--color-text-primary);
    text-fill-color: var(--color-text-primary);
  }
}

/* Accessibility Features */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .text-circular svg {
    animation: none;
  }

  .hero-subtitle {
    animation: none;
    max-width: 100%;
    border-right: none;
  }
}

/* ==========================================================================
   DARK MODE TYPOGRAPHY OVERRIDES
   ========================================================================== */

[data-theme="dark"] {
  /* Typography-specific dark mode variables */
  --text-composition-bg: var(--color-background);
  --text-block-mono-bg: var(--color-background-secondary);
  --text-block-mono-border: var(--color-blue);
  --gallery-item-type-bg: var(--color-surface);
  --gallery-item-type-border: var(--color-border);
  --gallery-item-type-number: var(--color-background-secondary);
  --form-input-type-border: var(--color-border-medium);
  --hr-typographic-bg: var(--color-background);
  --text-circular-fill: var(--color-text-primary);
}

/* Text Composition Components */
[data-theme="dark"] .text-block-mono {
  background: var(--text-block-mono-bg);
  border-left-color: var(--text-block-mono-border);
}

/* Gallery Typography */
[data-theme="dark"] .gallery-item-type {
  background: var(--gallery-item-type-bg);
  border-color: var(--gallery-item-type-border);
}

[data-theme="dark"] .gallery-item-type::before {
  color: var(--gallery-item-type-number);
}

[data-theme="dark"] .gallery-item-type:hover {
  box-shadow: var(--shadow-xl);
}

/* Form Elements Typography */
[data-theme="dark"] .form-input-type,
[data-theme="dark"] .form-textarea-type {
  border-bottom-color: var(--form-input-type-border);
  color: var(--color-text-primary);
  background: transparent;
}

[data-theme="dark"] .form-input-type:focus,
[data-theme="dark"] .form-textarea-type:focus {
  border-bottom-color: var(--color-blue);
}

[data-theme="dark"] .form-input-type:focus + .form-label-type {
  color: var(--color-blue);
}

[data-theme="dark"] .volunteer-form-typographic {
  background: var(--color-surface);
  border-color: var(--color-text-primary);
}

/* Button Typography */
[data-theme="dark"] .form-button-type {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-text-primary);
}

[data-theme="dark"] .form-button-type::before {
  background: var(--color-secondary);
}

[data-theme="dark"] .form-button-type:hover {
  color: var(--color-white);
  border-color: var(--color-text-primary);
}

[data-theme="dark"] .volunteer-submit {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .volunteer-submit:hover {
  background: var(--color-secondary);
}

/* Text Effects */
[data-theme="dark"] .text-mask {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

[data-theme="dark"] .text-glitch::before {
  color: var(--color-blue);
}

[data-theme="dark"] .text-glitch::after {
  color: var(--color-red);
}

/* Typographic HR Dividers */
[data-theme="dark"] .hr-typographic::before {
  background: var(--hr-typographic-bg);
  color: var(--color-blue);
}

[data-theme="dark"] .hr-typographic.style-text::before {
  color: var(--color-red);
}

[data-theme="dark"] .hr-typographic.style-minimal::before {
  color: var(--color-text-primary);
}

[data-theme="dark"] .hr-typographic.style-display::before {
  color: var(--color-blue);
}

[data-theme="dark"] .hr-typographic.style-glitch::before {
  color: var(--color-red);
}

/* Circular Text */
[data-theme="dark"] .text-circular text {
  fill: var(--text-circular-fill);
}

/* Footer Typography */
[data-theme="dark"] .footer-typographic {
  border-top-color: var(--color-border);
}

[data-theme="dark"] .footer-credits {
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .footer-credits a {
  color: inherit;
}

[data-theme="dark"] .footer-credits a:hover {
  color: var(--color-blue);
}

[data-theme="dark"] .social-link-type {
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .social-link-type:hover {
  color: var(--color-primary);
}

/* Typography Effects Classes */
[data-theme="dark"] .text-gradient {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

[data-theme="dark"] .text-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text-primary);
  text-stroke: 2px var(--color-text-primary);
}

[data-theme="dark"] .text-glitch-bg {
  background: var(--color-text-primary);
}

[data-theme="dark"] .text-glitch-bg::before {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
}

[data-theme="dark"] .text-gradient-bg {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  border-color: transparent;
}

[data-theme="dark"] .text-gradient-bg:hover {
  background: linear-gradient(45deg, var(--color-red), var(--color-blue));
}

/* Card Components Typography */
[data-theme="dark"] .pricing-card-type,
[data-theme="dark"] .addon-card-type,
[data-theme="dark"] .tier-card-type,
[data-theme="dark"] .stat-card-type,
[data-theme="dark"] .contact-card-type,
[data-theme="dark"] .policy-block-type {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .pricing-card-type:hover,
[data-theme="dark"] .addon-card-type:hover,
[data-theme="dark"] .tier-card-type:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-blue);
}

[data-theme="dark"] .pricing-card-type.featured {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .pricing-card-type.vip {
  border-color: var(--color-red);
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--color-background-secondary) 100%
  );
}

/* Option Components */
[data-theme="dark"] .ticket-option-type,
[data-theme="dark"] .addon-checkbox-type {
  border-color: var(--color-border);
  background: var(--color-surface);
}

[data-theme="dark"] .ticket-option-type:hover,
[data-theme="dark"] .addon-checkbox-type:hover {
  background-color: var(--color-background-secondary);
  border-color: var(--color-blue);
}

/* Checkbox Components */
[data-theme="dark"] .checkbox-type {
  color: var(--color-text-primary);
}

/* Mobile Typography Adjustments */
@media (max-width: 480px) {
  [data-theme="dark"] .text-outline {
    -webkit-text-stroke: 1px var(--color-text-primary);
    text-stroke: 1px var(--color-text-primary);
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  [data-theme="dark"] .text-mask {
    background: none;
    -webkit-text-fill-color: currentColor;
    text-fill-color: currentColor;
  }

  [data-theme="dark"] .form-input-type {
    border-bottom-width: 3px;
  }

  [data-theme="dark"] .gallery-item-type {
    border-width: 2px;
    border-color: var(--color-text-primary);
  }
  
  [data-theme="dark"] .text-gradient,
  [data-theme="dark"] .text-gradient-bg {
    background: none;
    -webkit-text-fill-color: currentColor;
    text-fill-color: currentColor;
    background-color: var(--color-text-primary);
  }
}


/* ========================================
 * css/navigation.css
 * ======================================== */

/* Navigation Module - Consolidated from typography.css and components.css */

/* Header Structure */
.typographic .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-lg) 0;
  background: linear-gradient(
    to bottom,
    var(--color-surface) 0%,
    var(--color-surface) 90%,
    transparent 100%
  );
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

/* Dark mode header - pure black background */
[data-theme="dark"] .typographic .header {
  background: linear-gradient(
    to bottom,
    var(--color-black) 0%,
    var(--color-black) 90%,
    transparent 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.typographic .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.typographic .grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-lg);
}

/* Logo Section */
.typographic .header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.typographic .logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease-in-out;
}

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

.typographic .header-left img {
  display: block;
  height: 78px;
}

.typographic .logo-text {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-text-primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Logo Components */
.typographic .logo-main {
  font-weight: 700;
  color: var(--color-text-primary);
  transition: all var(--transition-base);
}

.typographic .logo-separator {
  color: var(--color-secondary);
  font-weight: 400;
  margin: 0 var(--space-xs);
  transition: all var(--transition-base);
}

.typographic .logo-sub {
  font-weight: 400;
  color: var(--color-text-primary);
  transition: all var(--transition-base);
}

.typographic .logo-link:hover .logo-main {
  color: var(--color-primary);
}

.typographic .logo-link:hover .logo-separator {
  color: var(--color-primary);
  transform: scale(1.1);
}

.typographic .logo-link:hover .logo-sub {
  color: var(--color-secondary);
}

.typographic .header-text {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.typographic .logo {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-none);
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-decoration: none;
  position: relative;
  transition: all var(--transition-base);
}

.typographic .logo:hover {
  transform: scale(1.05);
  color: var(--color-secondary);
}

/* Navigation Menu */
.typographic .main-nav,
.main-nav {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--space-md); /* Spacing between nav-list and cart icon */
}

/* Desktop navigation */
@media (min-width: 769px) {
  .typographic .nav-list,
  .nav-list {
    display: flex;
    gap: var(--space-2xl);
    align-items: baseline;
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/* Navigation Links - Typographic Style (Primary) */
.typographic .nav-link {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  position: relative;
  transition: all var(--transition-base);
  padding: var(--space-xs) 0;
}

.typographic .nav-link::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-text-primary);
  font-weight: 700;
  transform: translateY(-100%);
  opacity: 0;
  transition: all var(--transition-base);
}

.typographic .nav-link:hover {
  color: transparent;
}

.typographic .nav-link:hover::before {
  transform: translateY(0);
  opacity: 1;
}

.typographic .nav-link.is-active {
  color: var(--color-secondary);
  font-weight: 700;
}

.typographic .nav-link.is-active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-secondary);
}

/* Active state for nav-trigger (Events) when on events pages */
.typographic .nav-trigger.is-active {
  color: var(--color-secondary);
  font-weight: 700;
}

.typographic .nav-trigger.is-active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-secondary);
}

/* Active state for nav-trigger when parent nav-item is active (for event pages) - Desktop */
.typographic .nav-item.is-active .nav-trigger {
  color: var(--color-secondary);
  font-weight: 700;
}

.typographic .nav-item.is-active .nav-trigger::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-secondary);
}

/* Navigation Links - Component Style (Alternative) */
.nav-link {
  position: relative;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-sm);
  transition: color var(--transition-base);
  padding: var(--space-xs) 0;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-secondary);
  transition: width var(--transition-base);
}

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

/* Active state for nav-link - Component style */
.nav-link.is-active {
  color: var(--color-secondary);
  font-weight: 700;
}

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

/* Active state for nav-trigger (Events) - component style */
.nav-trigger.is-active {
  color: var(--color-secondary);
  font-weight: 700;
}

.nav-trigger.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-secondary);
}

/* Active state for nav-trigger when parent nav-item is active (for event pages) - Component style */
.nav-item.is-active .nav-trigger {
  color: var(--color-secondary);
  font-weight: 700;
}

.nav-item.is-active .nav-trigger::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-secondary);
}

/* Mobile Menu - Typographic Style (Updated to use hamburger icon) */
.typographic .menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  transition: all var(--transition-base);
  z-index: 1001; /* Higher than mobile menu (1000) */
  padding: 0;
}

.typographic .menu-toggle:hover {
  transform: scale(1.1);
}

.typographic .menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 4px;
}

.typographic .menu-icon span {
  display: block;
  width: 28px;
  height: 3px;
  background-color: var(--color-text-primary);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 2px;
}

.typographic .menu-toggle:hover .menu-icon span {
  background-color: var(--color-text-primary);
}

.typographic .menu-toggle.is-active .menu-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background-color: var(--color-text-primary);
}

.typographic .menu-toggle.is-active .menu-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.typographic .menu-toggle.is-active .menu-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background-color: var(--color-text-primary);
}

/* Mobile Menu - Component Style */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 1001; /* Higher than mobile menu (1000) */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 4px;
}

.menu-icon span {
  display: block;
  width: 28px;
  height: 3px;
  background-color: var(--color-text-primary);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 2px;
}

.menu-toggle:hover .menu-icon span {
  background-color: var(--color-text-primary);
}

.menu-toggle.is-active .menu-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background-color: var(--color-text-primary);
}

.menu-toggle.is-active .menu-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle.is-active .menu-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background-color: var(--color-text-primary);
}

/* Mobile Navigation Responsive */
@media (max-width: 768px) {
  .typographic .menu-toggle,
  .menu-toggle {
    display: block !important;
    position: fixed !important;
    top: var(--space-lg);
    right: var(--space-xl);
    z-index: 1001 !important; /* Always above mobile menu */
  }

  /* Mobile navigation - starts off-screen, slides in when opened */
  .typographic .nav-list,
  .nav-list {
    position: fixed !important;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: var(--color-surface);
    opacity: 0.98;
    backdrop-filter: blur(20px);
    padding: var(--space-4xl) var(--space-lg) var(--space-xl);
    flex-direction: column;
    gap: var(--space-sm);
    z-index: 1000;
    /* Start off-screen from right */
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Always display flex, just hidden via transform */
    display: flex !important;
    /* Remove list bullets */
    list-style: none;
    margin: 0;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-xl);
  }

  .typographic .nav-list.is-open,
  .nav-list.is-open {
    /* Slide in when opened */
    transform: translateX(0) !important;
  }

  /* Mobile menu backdrop */
  .typographic .nav-list.is-open::before,
  .typographic .nav-list.is-active::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: -1;
    pointer-events: none;
  }

  .typographic .nav-list.is-open .nav-link,
  .nav-list.is-open .nav-link,
  .typographic .nav-list.is-open .nav-trigger,
  .nav-list.is-open .nav-trigger {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-primary);
    padding: var(--space-md) var(--space-lg);
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    touch-action: manipulation;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 4px;
    overflow: hidden;
    white-space: nowrap;
    list-style: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
  }

  .typographic .nav-list.is-open .nav-link::before,
  .nav-list.is-open .nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-blue), var(--color-red));
    transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: -1;
  }

  /* Remove background effects for nav-trigger to prevent Events highlighting */
  .typographic .nav-list.is-open .nav-trigger::before,
  .nav-list.is-open .nav-trigger::before {
    display: none;
  }

  .typographic .nav-list.is-open .nav-link:hover,
  .nav-list.is-open .nav-link:hover {
    color: var(--color-text-inverse) !important;
    transform: translateX(8px) !important;
  }

  /* Keep nav-trigger hover behavior minimal - no background changes */
  .typographic .nav-list.is-open .nav-trigger:hover,
  .nav-list.is-open .nav-trigger:hover {
    /* Only keep basic hover styling, no background color changes */
    transform: none !important;
  }

  .typographic .nav-list.is-open .nav-link:hover::before,
  .nav-list.is-open .nav-link:hover::before {
    left: 0 !important;
  }

  /* Prevent background slide-in for nav-trigger */
  .typographic .nav-list.is-open .nav-trigger:hover::before,
  .nav-list.is-open .nav-trigger:hover::before {
    display: none !important;
  }

  .typographic .nav-list.is-open .nav-link.is-active,
  .nav-list.is-open .nav-link.is-active,
  .typographic .nav-list.is-open .nav-trigger.is-active,
  .nav-list.is-open .nav-trigger.is-active,
  .typographic .nav-list.is-open .nav-item.is-active .nav-trigger,
  .nav-list.is-open .nav-item.is-active .nav-trigger {
    color: var(--color-secondary);
    font-weight: 500;
  }

  /* Remove bullets from mobile menu list items */
  .typographic .nav-list.is-open li,
  .nav-list.is-open li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Add visual separation between menu sections */
  .typographic .nav-list.is-open li + li,
  .nav-list.is-open li + li {
    border-top: 1px solid var(--color-border-light);
  }

  /* Cuban accent on active item for mobile */
  .typographic .nav-list.is-open .nav-link.is-active,
  .nav-list.is-open .nav-link.is-active {
    position: relative;
  }

  .typographic .nav-list.is-open .nav-link.is-active::after,
  .nav-list.is-open .nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-blue), var(--color-red));
  }
}

/* Main content spacing */
main,
.main-content {
  margin-top: calc(var(--space-4xl) + var(--space-lg));
}

/* =================================================================
   DROPDOWN NAVIGATION SYSTEM
   Cuban Dance-Inspired Dropdown Menus with Typography-Forward Design
   ================================================================= */

/* Dropdown Design Variables - Cuban Cultural Extension */
:root {
  /* Color RGB Values for rgba() usage */
  --color-red-rgb: 204, 41, 54; /* RGB values for #CC2936 */

  /* Dropdown Layout Variables */
  --dropdown-offset-y: var(--space-sm);
  --dropdown-min-width: 200px;
  --dropdown-max-width: 320px;
  --dropdown-padding: var(--space-md);
  --dropdown-item-height: var(--space-3xl);
  --dropdown-separator-height: 1px;
  --dropdown-border-radius: 4px;
  --dropdown-backdrop-blur: 20px;

  /* Cuban Dance Animation Variables */
  --salsa-spring-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --cuban-rhythm-delay: 0.05s;
  --dance-bounce-height: -8px;
  --dance-subtle-rotation: 0.5deg;
  --salsa-fade-timing: 200ms;
  --dropdown-slide-distance: var(--space-sm);

  /* Event-Specific Color Themes */
  --boulder-fest-primary: var(--color-red); /* #CC2936 */
  --boulder-fest-secondary: var(--color-blue); /* #5B6BB5 */
  --weekender-primary: var(--color-blue); /* Blue - on brand */
  --weekender-secondary: var(--color-red); /* Red - on brand */

  /* Mobile Dropdown Variables */
  --mobile-dropdown-padding: var(--space-lg);
  --mobile-accordion-timing: 0.35s;
  --touch-safe-target: 48px;

  /* Z-index Variables */
  --z-dropdown: 1100;
}

/* Dropdown Container - Both Navigation Styles */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-toggle {
  position: relative;
  cursor: pointer;
}

/* Dropdown Arrow Indicator */
.nav-dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--space-xs);
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform var(--transition-base) var(--salsa-spring-easing);
}

.nav-dropdown.is-open .nav-dropdown-toggle::after,
.nav-dropdown:hover .nav-dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Dropdown Menu Base Styles */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--dropdown-offset-y));
  left: 50%;
  transform: translateX(-50%) translateY(var(--dance-bounce-height)) scale(0.95);
  min-width: var(--dropdown-min-width);
  max-width: var(--dropdown-max-width);
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--dropdown-border-radius);
  padding: var(--dropdown-padding);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-dropdown);
  backdrop-filter: blur(var(--dropdown-backdrop-blur));
  box-shadow: var(--shadow-lg);
  transition: all var(--salsa-fade-timing) var(--salsa-spring-easing);
}

/* Salsa-Inspired Entry Animation */
@keyframes salsaDropdownEntry {
  0% {
    transform: translateX(-50%) translateY(var(--dance-bounce-height))
      scale(0.95) rotate(-1deg);
    opacity: 0;
  }
  30% {
    transform: translateX(-50%) translateY(2px) scale(1.02)
      rotate(var(--dance-subtle-rotation));
    opacity: 0.8;
  }
  60% {
    transform: translateX(-50%) translateY(-1px) scale(0.98) rotate(-0.2deg);
    opacity: 0.95;
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Dropdown Active State - Desktop */
@media (min-width: 769px) {
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: salsaDropdownEntry 0.4s var(--salsa-spring-easing) forwards;
  }
}

/* Dropdown Items */
.nav-dropdown-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.nav-dropdown-link {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  white-space: nowrap;
  min-height: var(--touch-safe-target);
  transition: all var(--transition-base) var(--salsa-spring-easing);
  touch-action: manipulation;
  position: relative;
  z-index: 1;
}

/* Cuban Hip Movement Hover Animation */
@keyframes cubanHipMovement {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(2px) rotate(var(--dance-subtle-rotation));
  }
}

.nav-dropdown-link:hover {
  color: var(--color-text-inverse);
  transform: translateX(4px);
  animation: cubanHipMovement 0.6s ease-in-out;
}

/* Background Slide Animation */
.nav-dropdown-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--boulder-fest-primary),
    var(--boulder-fest-secondary)
  );
  transition: left var(--transition-base) var(--salsa-spring-easing);
  z-index: -1;
  border-radius: 2px;
}

.nav-dropdown-link:hover::before {
  left: 0;
}

/* Staggered Animation for Dropdown Items */
.nav-dropdown-menu .nav-dropdown-item:nth-child(1) .nav-dropdown-link {
  animation-delay: 0ms;
}

.nav-dropdown-menu .nav-dropdown-item:nth-child(2) .nav-dropdown-link {
  animation-delay: calc(var(--cuban-rhythm-delay) * 1);
}

.nav-dropdown-menu .nav-dropdown-item:nth-child(3) .nav-dropdown-link {
  animation-delay: calc(var(--cuban-rhythm-delay) * 2);
}

.nav-dropdown-menu .nav-dropdown-item:nth-child(4) .nav-dropdown-link {
  animation-delay: calc(var(--cuban-rhythm-delay) * 3);
}

.nav-dropdown-menu .nav-dropdown-item:nth-child(5) .nav-dropdown-link {
  animation-delay: calc(var(--cuban-rhythm-delay) * 4);
}

/* Separator for Dropdown Sections */
.nav-dropdown-separator {
  height: var(--dropdown-separator-height);
  background: var(--color-border-medium);
  margin: var(--space-xs) 0;
  border-radius: var(--dropdown-separator-height);
}

/* =================================================================
   TYPOGRAPHIC STYLE DROPDOWN EXTENSIONS
   ================================================================= */

/* Typographic Navigation Dropdown Specific Styles */
.typographic .nav-dropdown-toggle {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  position: relative;
  transition: all var(--transition-base);
  padding: var(--space-xs) 0;
}

/* Typographic slide-down text replacement for dropdown toggles */
.typographic .nav-dropdown-toggle::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-text-primary);
  font-weight: 700;
  transform: translateY(-100%);
  opacity: 0;
  transition: all var(--transition-base);
  pointer-events: none;
}

.typographic .nav-dropdown-toggle:hover {
  color: transparent;
}

.typographic .nav-dropdown-toggle:hover::before {
  transform: translateY(0);
  opacity: 1;
}

.typographic .nav-dropdown-link {
  font-family: var(--font-code);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  font-weight: 400;
}

.typographic .nav-dropdown-link:hover {
  font-weight: 600;
}

/* =================================================================
   EVENT-SPECIFIC DROPDOWN THEMES
   ================================================================= */

/* Boulder Fest Theme (Default - Red/Blue) */
.nav-dropdown[data-theme="boulder-fest"] .nav-dropdown-link::before {
  background: linear-gradient(
    135deg,
    var(--boulder-fest-primary),
    var(--boulder-fest-secondary)
  );
}

/* Weekender Theme (Orange/Teal) */
.nav-dropdown[data-theme="weekender"] .nav-dropdown-link::before {
  background: linear-gradient(
    135deg,
    var(--weekender-primary),
    var(--weekender-secondary)
  );
}

/* Event-specific toggle colors */
.nav-dropdown[data-theme="weekender"] .nav-dropdown-toggle:hover::before {
  color: var(--weekender-primary);
}

/* =================================================================
   MOBILE DROPDOWN IMPLEMENTATION
   Hybrid Approach: Accordion on Mobile, Dropdown on Desktop
   ================================================================= */

@media (max-width: 768px) {
  /* Mobile Accordion Behavior */
  .nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: auto;
    max-width: none;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height var(--mobile-accordion-timing)
      var(--salsa-spring-easing);
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 400px; /* Adjust based on content */
    padding: var(--mobile-dropdown-padding) 0;
  }

  /* Mobile dropdown items styling */
  .nav-dropdown-link {
    padding: var(--space-md) var(--mobile-dropdown-padding);
    font-size: var(--font-size-base);
    border-left: 3px solid transparent;
    margin-bottom: var(--space-xs);
    background: var(--color-surface-overlay);
    backdrop-filter: blur(10px);
    border-radius: var(--dropdown-border-radius);
  }

  .nav-dropdown-link:hover {
    border-left-color: var(--boulder-fest-primary);
    background: var(--color-surface-elevated);
    transform: translateX(var(--space-xs));
  }

  /* Mobile accordion arrow */
  .nav-dropdown-toggle::after {
    border-top-width: 6px;
    border-right-width: 6px;
    border-left-width: 6px;
    margin-left: var(--space-sm);
  }

  /* Prevent desktop hover states on mobile */
  .nav-dropdown:hover .nav-dropdown-menu {
    animation: none;
  }

  /* Mobile touch optimization */
  .nav-dropdown-toggle {
    min-height: var(--touch-safe-target);
    display: flex;
    align-items: center;
    touch-action: manipulation;
  }
}

/* =================================================================
   ADVANCED MOBILE OPTIMIZATIONS
   ================================================================= */

/* iOS Safari Optimizations */
@supports (-webkit-touch-callout: none) {
  .nav-dropdown-menu {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav-dropdown-link {
    -webkit-tap-highlight-color: var(--shadow-color-light);
  }
}

/* Android Performance Optimizations */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
  .nav-dropdown-menu {
    will-change: max-height;
  }

  .nav-dropdown-link {
    will-change: transform, background-color;
  }
}

/* Gesture Conflict Prevention */
.nav-dropdown {
  touch-action: manipulation;
}

/* =================================================================
   ACCESSIBILITY ENHANCEMENTS
   ================================================================= */

/* Focus Management */
.nav-dropdown-toggle:focus,
.nav-dropdown-link:focus {
  outline: 2px solid var(--boulder-fest-secondary);
  outline-offset: 2px;
}

/* Screen Reader Support */
.nav-dropdown[aria-expanded="true"] .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .nav-dropdown-menu {
    background: var(--color-surface);
    border: 2px solid var(--color-text-primary);
  }

  .nav-dropdown-link {
    border-bottom: 1px solid var(--color-border-medium);
  }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-menu {
    animation: none;
    transition: opacity var(--transition-fast);
  }

  .nav-dropdown-link {
    animation: none;
    transition: color var(--transition-fast);
  }

  .nav-dropdown-toggle::after {
    transition: transform var(--transition-fast);
  }
}

/* =================================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================================= */

/* GPU Acceleration for Smooth Animations */
.nav-dropdown-menu,
.nav-dropdown-link,
.nav-dropdown-toggle::after {
  will-change: transform, opacity;
  transform: translateZ(0); /* Force GPU layer */
}

/* Critical CSS Strategy - Above the Fold */
@media (min-width: 769px) {
  .nav-dropdown:nth-child(-n + 3) .nav-dropdown-menu {
    will-change: transform, opacity, visibility;
  }
}

/* Cleanup will-change after animations */
.nav-dropdown-menu:not(:hover):not(.is-open) {
  will-change: auto;
}

/* =================================================================
   ACTUAL HTML STRUCTURE DROPDOWN STYLES (Events Menu)
   ================================================================= */

/* Events dropdown container */
.nav-item.has-dropdown {
  position: relative;
  display: inline-block;
}

/* Events dropdown trigger button - match nav-link styles */
.nav-trigger {
  background: none;
  border: none;
  cursor: pointer;
  /* Match nav-link styles for consistency */
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  position: relative;
  transition: all var(--transition-base);
  padding: var(--space-xs) 0;
  font-weight: 500;
  /* Touch target compliance */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown arrow styling */
.dropdown-arrow {
  margin-left: var(--space-xs);
  font-size: 0.8em;
  transition: transform var(--transition-base) var(--salsa-spring-easing);
  display: inline-block;
}

/* Arrow rotation when open */
.nav-trigger[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown menu - hidden by default */
.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--dropdown-offset-y));
  left: 50%;
  transform: translateX(-50%) translateY(var(--dance-bounce-height)) scale(0.95);
  min-width: var(--dropdown-min-width);
  max-width: var(--dropdown-max-width);
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--dropdown-border-radius);
  padding: var(--dropdown-padding);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-dropdown);
  backdrop-filter: blur(var(--dropdown-backdrop-blur));
  box-shadow: var(--shadow-lg);
  transition: all var(--salsa-fade-timing) var(--salsa-spring-easing);
  list-style: none;
  margin: 0;
}

/* Show dropdown when triggered */
.nav-trigger[aria-expanded="true"] + .dropdown-menu {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: salsaDropdownEntry 0.4s var(--salsa-spring-easing) forwards;
}

/* Dropdown category styling */
.dropdown-category {
  margin-bottom: var(--space-sm);
}

.dropdown-category:last-child {
  margin-bottom: 0;
}

.dropdown-category-title {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-xs);
  padding: 0 var(--space-xs);
}

.dropdown-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dropdown links */
.dropdown-link {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
  border-radius: 2px;
}

/* Dropdown links - simple text color change to match navigation style */
.dropdown-link:hover {
  color: var(--color-secondary);
  transform: translateX(2px);
}

/* Typographic style for nav trigger (to match other nav links) */
.typographic .nav-trigger {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  position: relative;
  transition: all var(--transition-base);
  padding: var(--space-xs) 0;
  /* Touch target compliance */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Typographic slide-down text replacement for nav trigger */
.typographic .nav-trigger::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-text-primary);
  font-weight: 700;
  transform: translateY(-100%);
  opacity: 0;
  transition: all var(--transition-base);
  pointer-events: none;
}

/* Remove typographic hover effects for nav-trigger to prevent text highlighting */
.typographic .nav-trigger:hover {
  /* Keep original color, no transparency effect */
  color: var(--color-text-secondary);
}

.typographic .nav-trigger:hover::before {
  /* Disable slide-down text replacement */
  transform: translateY(-100%);
  opacity: 0;
}

/* =================================================================
   EVENT SUB NAVIGATION STYLES
   ================================================================= */

/* Event Sub Navigation Container - Theme Aware */
.event-subnav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
  margin-bottom: var(--space-xl);
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

/* Dark mode event subnav - enhanced styling */
[data-theme="dark"] .event-subnav {
  background: var(--color-surface);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Event Navigation List */
.event-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-lg);
  justify-content: center;
  align-items: center;
}

/* Event Navigation Links - Theme Aware Styling */
.event-nav-link {
  position: relative;
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--transition-base);
  padding: var(--space-xs) 0;
  font-weight: 500;
}

/* Typographic slide-down text replacement for event nav links - Theme Aware */
.typographic .event-nav-link::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-text-primary);
  font-weight: 700;
  transform: translateY(-100%);
  opacity: 0;
  transition: all var(--transition-base);
  pointer-events: none;
}

.typographic .event-nav-link:hover {
  color: transparent;
}

.typographic .event-nav-link:hover::before {
  transform: translateY(0);
  opacity: 1;
}

/* Active state styling */
.event-nav-link.is-active {
  color: var(--color-secondary);
  font-weight: 700;
}

.typographic .event-nav-link.is-active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-secondary);
}

/* Alternative styling for non-typographic theme */
.event-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-secondary);
  transition: width var(--transition-base);
}

.event-nav-link:hover::after,
.event-nav-link.is-active::after {
  width: 100%;
}

.event-nav-link:hover {
  color: rgba(255, 255, 255, 1); /* White text on hover for dark background */
}

/* Mobile Responsive Event Navigation */
@media (max-width: 768px) {
  .event-nav-list {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 var(--space-md);
    gap: var(--space-md);
  }

  .event-nav-link {
    white-space: nowrap;
    font-size: var(--font-size-xs);
  }

  .event-subnav {
    position: static;
  }
}

/* =================================================================
   NAVIGATION MENU TYPE EXTENSIONS (Original)
   ================================================================= */

.nav-menu-type a::before {
  content: "[";
  position: absolute;
  left: -1em;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nav-menu-type a::after {
  content: "]";
  position: absolute;
  right: -1em;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nav-menu-type a:hover::before,
.nav-menu-type a:hover::after {
  opacity: 1;
}

/* =================================================================
   SKIP LINK - Accessibility Feature
   ================================================================= */

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 6px;
}

/* Dark mode navigation fixes */
[data-theme="dark"] .menu-icon span {
  background-color: var(--color-gray-200);
}

[data-theme="dark"] .menu-toggle:hover .menu-icon span {
  background-color: var(--color-gray-100);
}

[data-theme="dark"] .menu-toggle.is-active .menu-icon span:nth-child(1),
[data-theme="dark"] .menu-toggle.is-active .menu-icon span:nth-child(3) {
  background-color: var(--color-gray-200);
}

/* Also fix mobile menu backdrop opacity */
[data-theme="dark"] .nav-list {
  opacity: 0.95; /* Increase from 0.85 for better readability */
}

/* Fix dropdown menu contrast */
[data-theme="dark"] .nav-dropdown-link {
  color: var(--color-gray-200);
}

[data-theme="dark"] .nav-dropdown-link:hover {
  color: var(--color-white);
  background: var(--color-surface-elevated);
}


/* ========================================
 * css/components.css
 * ======================================== */

/* Reusable Components for A Lo Cubano Boulder Fest */

/* Loading Overlay Components */
.hero-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.hero-loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top: 4px solid var(--color-white);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-md);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: var(--color-white);
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  text-align: center;
  margin-bottom: var(--space-md);
  opacity: 0.9;
  animation: pulse 2s ease-in-out infinite;
}

/* Lazy Loading Components */
.lazy-placeholder {
  position: relative;
  background: var(--color-gray-100);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}

.lazy-placeholder .loading-spinner {
  font-size: 2rem;
  color: var(--color-gray-400);
  animation: pulse 2s ease-in-out infinite;
  border: none;
  width: auto;
  height: auto;
  margin: 0;
}

.lazy-image {
  transition: opacity 0.3s ease-in-out;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gallery-item.loaded .lazy-placeholder {
  display: none;
}

/* Moved to consolidated .gallery-item definition */

.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--shadow-color);
}

.loading-more {
  font-family: var(--font-code);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Gallery Year Banner */
.gallery-year-banner {
  padding: var(--space-2xl) 0;
  text-align: center;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.year-display-text {
  font-family: var(--font-display);
  font-size: clamp(4rem, 15vw, 12rem);
  font-weight: 400;
  line-height: var(--line-height-none);
  margin: 0 0 var(--space-md) 0;
  letter-spacing: var(--letter-spacing-wide);
}

.year-char {
  display: inline-block;
  transition: all 0.3s ease;
}

.year-char-1 {
  color: var(--color-red);
}
.year-char-2 {
  color: var(--color-blue);
}
.year-char-3 {
  color: var(--color-text-primary);
}
.year-char-4 {
  color: var(--color-red);
}

.year-char:hover {
  transform: scale(1.1) rotate(5deg);
}

.year-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin: 0;
}

/* Gallery Detail Sections */
#gallery-detail-content {
  display: none;
}

.gallery-section {
  display: none;
}

.gallery-section.socials-section {
  margin-top: var(--space-4xl);
}

.gallery-section .text-display {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.gallery-grid-static {
  display: none;
}

.gallery-static-content {
  text-align: center;
  padding: var(--space-3xl) 0;
}

.gallery-static-title {
  margin-bottom: var(--space-xl);
}

.gallery-static-description {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.gallery-static-note {
  color: var(--color-gray-600);
  margin-bottom: var(--space-2xl);
}

.gallery-static-actions {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.gallery-static-actions .form-button-type {
  display: inline-block;
}

.gallery-static-actions .form-button-type.tickets-button {
  background: var(--color-red);
}

/* Gallery Stats Section */
.gallery-stats {
  background: var(--color-background-secondary);
  padding: var(--space-3xl) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2xl);
  text-align: center;
}

.stat-item .font-display {
  font-size: var(--font-size-3xl);
  color: var(--color-red);
}

.stat-item .font-mono {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Performance optimizations */
.gallery-grid {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

.gallery-item-media {
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  margin-bottom: 0;
  height: 100%; /* Fill the entire gallery item */
}

.gallery-item-media img {
  width: 100%;
  height: 100%; /* Match container height instead of fixed 200px */
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* Position lazy placeholder absolutely within media container */
.gallery-item-media .lazy-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Ensure placeholder doesn't block clicks */
  z-index: 0; /* Keep placeholder behind the image */
}

/* Moved to consolidated .gallery-item definition */

/* Make sure lazy images are clickable when loaded */
.gallery-item .lazy-image {
  pointer-events: auto;
}

/* Gallery sections */
.gallery-section {
  margin-bottom: var(--space-3xl);
}

.gallery-section h2 {
  margin-bottom: var(--space-xl);
}

/* Ensure completion message doesn't block interactions */
#gallery-completion-message {
  pointer-events: none;
}

#gallery-completion-message .completion-message {
  pointer-events: auto;
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-background-secondary);
  border-radius: var(--radius-md);
}

/* Responsive lazy loading adjustments */
@media (max-width: 768px) {
  .lazy-placeholder {
    min-height: 150px;
  }

  .gallery-item-media img {
    height: 100%; /* Keep responsive, match container */
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.6;
  }
}

.loading-progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-sm);
}

.loading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-blue), var(--color-red));
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease-in-out;
}

/* Hero Image Transitions */
.gallery-hero-splash {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.hero-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-splash-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.5s ease-in-out;
}

.hero-splash-img.loading {
  opacity: 0.8;
}

.hero-splash-img.loaded {
  opacity: 1;
}

/* Mobile hero image optimization */
@media (max-width: 768px) {
  .gallery-hero-splash {
    height: 50vh;
    min-height: 300px;
  }
}

/* Mobile Loading States */
@media (max-width: 768px) {
  .loading-spinner {
    width: 36px;
    height: 36px;
    border-width: 3px;
  }

  .loading-text {
    font-size: var(--font-size-xs);
  }

  .loading-progress-bar {
    width: 150px;
    height: 3px;
  }
}

/* Navigation styles moved to navigation.css */

/* Button Components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-sm);
  border: 2px solid transparent;
  transition: all var(--transition-base);
  cursor: pointer;
  min-height: 44px;
}

.btn-primary {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border-color: var(--color-black);
}

[data-theme="dark"] .btn-primary {
  background-color: var(--color-blue) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue);
}

.btn-primary:hover {
  background-color: var(--color-blue) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--color-red) !important;
  color: var(--color-white) !important;
  border-color: var(--color-red);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

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

.btn-accent {
  background-color: var(--color-red);
  color: var(--color-text-inverse);
  border-color: var(--color-red);
}

.btn-accent:hover {
  background-color: transparent;
  color: var(--color-red);
}

/* Card Components */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-xl);
  transition: all var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.card-description {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Form styles moved to forms.css */

/* Gallery Components */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-md);
}

/* Gallery Detail Specific Styles */
.gallery-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.gallery-detail-section {
  padding: var(--space-2xl) 0;
}

.gallery-loading {
  text-align: center;
  padding: var(--space-3xl) 0;
  color: var(--color-text-secondary);
}

.gallery-back-nav {
  padding: var(--space-xl) 0;
}

.gallery-back-nav .back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: all var(--transition-base);
}

.gallery-back-nav .back-link:hover {
  transform: translateX(-5px);
  color: var(--color-blue);
}

/* Gallery item consolidated styles - removed duplicate definitions */
.gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3; /* More natural photo ratio instead of square */
  cursor: pointer;
  pointer-events: auto;
  z-index: 1;
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover .gallery-image {
  transform: scale(1.05);
}

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Updated to 90% opacity */
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.lightbox.is-open {
  display: flex; /* Show when open */
  opacity: 1;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity var(--transition-base);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  color: var(--color-text-inverse);
  font-size: var(--font-size-3xl);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  background: transparent;
  border: none;
  backdrop-filter: none;
}

.lightbox-close:hover {
  opacity: 0.7;
  transform: scale(1.2);
}

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 0.7;
  transform: translateY(-50%) scale(1.4);
}

.lightbox-close {
  top: var(--space-lg);
  right: var(--space-lg);
}

.lightbox-prev {
  left: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
}

/* Lightbox content and media container */
.lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

.lightbox-media-container {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--color-text-inverse);
  background: rgba(0, 0, 0, 0.8);
  padding: var(--space-md) var(--space-lg);
}

.lightbox-title {
  margin: 0;
  font-size: var(--font-size-lg);
}

.lightbox-counter {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-xs);
  opacity: 0.9;
}

/* Loading States */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-background-secondary) 25%,
    var(--color-background-tertiary) 50%,
    var(--color-background-secondary) 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-slow);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Page Transitions */
.page-transition {
  transition: opacity var(--transition-base);
}

.page-exiting {
  opacity: 0;
}

.page-entering {
  opacity: 0;
  animation: fadeIn var(--transition-base) forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Responsive - Navigation handled by navigation.css */
@media (max-width: 768px) {
  /* Mobile navigation is fully handled by navigation.css */

  .nav-link {
    font-size: var(--font-size-base);
    padding: var(--space-sm) 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-sm);
  }
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* ==========================================================================
   FESTIVAL YEAR CARDS - Gallery Navigation
   ========================================================================== */

.festival-years-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-2xl);
  margin: var(--space-3xl) 0;
}

.festival-year-card {
  position: relative;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-2xl);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-slow);
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.festival-year-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  transition: all var(--transition-slow);
  z-index: 0;
  opacity: 0;
}

.festival-year-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-blue);
}

.festival-year-card:hover::before {
  left: 0;
  opacity: 0.05;
}

.year-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.year-number {
  font-family: var(--font-display);
  font-size: var(--font-size-6xl);
  font-weight: 900;
  line-height: var(--line-height-none);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.year-subtitle {
  font-family: var(--font-accent);
  font-size: var(--font-size-xl);
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.year-highlight {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-red);
  font-weight: 700;
}

.year-card-hover {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: all var(--transition-base);
  z-index: 2;
}

.festival-year-card:hover .year-card-hover {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.view-gallery-text {
  font-family: var(--font-code);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-blue);
  font-weight: 700;
}

/* Coming Soon Cards */
.festival-year-card.coming-soon {
  opacity: 0.7;
  cursor: default;
  border-style: dashed;
}

.festival-year-card.coming-soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
}

.festival-year-card.coming-soon::before {
  display: none;
}

.festival-year-card.coming-soon .year-number {
  color: var(--color-text-tertiary);
}

.festival-year-card.coming-soon .year-highlight {
  color: var(--color-text-tertiary);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .festival-years-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin: var(--space-2xl) 0;
  }

  .festival-year-card {
    padding: var(--space-2xl) var(--space-lg);
    min-height: 160px;
  }

  .year-number {
    font-size: var(--font-size-5xl);
  }

  .year-subtitle {
    font-size: var(--font-size-lg);
  }

  .year-highlight {
    font-size: var(--font-size-xs);
  }
}

/* ==========================================================================
   MULTI-YEAR GALLERY MANAGER
   ========================================================================== */

.multi-year-gallery {
  position: relative;
  width: 100%;
}

/* Year Selector Container */
.year-selector-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
  padding: var(--space-lg) 0;
  border-bottom: 2px solid var(--color-border);
}

/* Year Selector Buttons */
.year-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.year-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: 2px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  min-width: 80px;
  min-height: 60px;
}

.year-button:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-color);
}

.year-button.active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-color-strong);
}

.year-button.active:hover {
  background: var(--color-blue);
  color: var(--color-text-inverse);
}

/* Keyboard accessibility focus styles */
.year-button:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--color-background),
    0 0 0 5px var(--color-blue);
}

.year-label {
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1;
}

.year-count {
  font-size: var(--font-size-xs);
  opacity: 0.8;
  font-weight: 400;
}

.year-button.active .year-count {
  opacity: 1;
}

/* Year Statistics Display */
.year-statistics {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.year-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.stat-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.stat-label {
  font-weight: 400;
  opacity: 0.8;
}

.stat-value {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Gallery Container */
.gallery-container {
  position: relative;
  min-height: 400px;
}

.year-gallery-container {
  width: 100%;
}

.year-gallery-container[aria-hidden="true"] {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.year-gallery-container[aria-hidden="false"] {
  position: relative;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: fadeInGallery 0.4s ease-in-out;
}

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

/* Loading Indicator */
.multi-year-gallery .loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  z-index: 10;
  background: var(--color-surface-overlay);
  padding: var(--space-3xl);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px var(--shadow-color);
}

.multi-year-gallery .loading-indicator[aria-hidden="false"] {
  display: flex;
}

.multi-year-gallery .loading-text {
  color: var(--color-text-secondary);
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-weight: 500;
}

/* Error Display */
.error-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  text-align: center;
  z-index: 10;
  background: var(--color-surface);
  padding: var(--space-3xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-red);
  box-shadow: 0 10px 40px var(--shadow-color);
  max-width: 400px;
  width: 90%;
}

.error-display[aria-hidden="false"] {
  display: flex;
}

.error-message {
  color: var(--color-red);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.error-retry {
  background: var(--color-red);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: 44px;
}

.error-retry:hover {
  background: var(--color-text-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-color);
}

/* Keyboard Navigation Hints */
.multi-year-gallery::after {
  content: "Use arrow keys to navigate between years";
  position: absolute;
  bottom: calc(-1 * var(--space-lg));
  left: 0;
  font-family: var(--font-code);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.multi-year-gallery:focus-within::after,
.multi-year-gallery:hover::after {
  opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .year-selector-container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    text-align: center;
  }

  .year-selector {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .year-button {
    min-width: 70px;
    min-height: 50px;
    padding: var(--space-sm) var(--space-md);
  }

  .year-label {
    font-size: var(--font-size-sm);
  }

  .year-count {
    font-size: 10px;
  }

  .year-statistics {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .year-stats {
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  .stat-item {
    justify-content: center;
  }

  .multi-year-gallery .loading-indicator,
  .error-display {
    padding: var(--space-xl);
    border-radius: var(--radius-md);
  }

  .multi-year-gallery::after {
    display: none; /* Hide keyboard hint on mobile */
  }
}

/* ==========================================================================
   DARK MODE COMPONENT OVERRIDES
   ========================================================================== */

/* Dark mode support for components */
[data-theme="dark"] {
  /* Loading Overlays */
  --hero-loading-overlay-bg: rgba(17, 17, 17, 0.8);
  
  /* Lazy Loading Components */
  --lazy-placeholder-bg: var(--color-gray-700);
  --loading-spinner-color: var(--color-gray-300);
  
  /* Gallery Components */
  --gallery-year-banner-bg: var(--color-gray-800);
  --gallery-stats-bg: var(--color-gray-800);
  
  /* Button Components - Enhanced contrast */
  --btn-primary-bg: var(--color-blue);
  --btn-primary-hover-bg: var(--color-primary-hover);
  --btn-secondary-border: var(--color-gray-400);
  --btn-accent-bg: var(--color-red);
  
  /* Card Components - Better contrast */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  
  /* Lightbox - Proper dark background */
  --lightbox-bg: rgba(0, 0, 0, 0.95);
  --lightbox-caption-bg: rgba(0, 0, 0, 0.9);
  
  /* Festival Year Cards - Enhanced visibility */
  --festival-card-bg: var(--color-surface);
  --festival-card-border: var(--color-border);
  --festival-card-hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  
  /* Multi-Year Gallery */
  --year-button-bg: transparent;
  --year-button-border: var(--color-border-medium);
  --year-button-active-bg: var(--color-blue);
  --year-stats-bg: var(--color-surface);
  --loading-indicator-bg: var(--color-surface-overlay);
  --error-display-bg: var(--color-surface);
  --error-display-border: var(--color-red);
}

/* Hero Loading Overlay */
[data-theme="dark"] .hero-loading-overlay {
  background: var(--hero-loading-overlay-bg);
}

/* Lazy Loading Components */
[data-theme="dark"] .lazy-placeholder {
  background: var(--lazy-placeholder-bg);
}

[data-theme="dark"] .lazy-placeholder .loading-spinner {
  color: var(--loading-spinner-color);
}

/* Gallery Year Banner */
[data-theme="dark"] .gallery-year-banner {
  background: var(--gallery-year-banner-bg);
  border-bottom-color: var(--color-border);
}

/* Gallery Stats */
[data-theme="dark"] .gallery-stats {
  background: var(--gallery-stats-bg);
}

/* Button Components */
[data-theme="dark"] .btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--btn-primary-hover-bg);
  color: var(--color-text-inverse);
  border-color: var(--btn-primary-hover-bg);
}

[data-theme="dark"] .btn-secondary {
  border-color: var(--btn-secondary-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .btn-accent {
  background-color: var(--btn-accent-bg);
  border-color: var(--btn-accent-bg);
}

[data-theme="dark"] .btn-accent:hover {
  background-color: transparent;
  color: var(--btn-accent-bg);
  border-color: var(--btn-accent-bg);
}

/* Card Components */
[data-theme="dark"] .card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

[data-theme="dark"] .card:hover {
  box-shadow: var(--card-hover-shadow);
}

/* Lightbox - Enhanced dark mode support */
[data-theme="dark"] .lightbox {
  background-color: var(--lightbox-bg);
}

[data-theme="dark"] .lightbox-caption {
  background: var(--lightbox-caption-bg);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .lightbox-title {
  color: var(--color-text-inverse);
}

[data-theme="dark"] .lightbox-counter {
  color: var(--color-text-inverse);
  opacity: 0.8;
}

/* Enhanced lightbox navigation visibility in dark mode */
[data-theme="dark"] .lightbox-close,
[data-theme="dark"] .lightbox-prev,
[data-theme="dark"] .lightbox-next {
  color: var(--color-text-inverse);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  backdrop-filter: blur(4px);
}

[data-theme="dark"] .lightbox-close:hover,
[data-theme="dark"] .lightbox-prev:hover,
[data-theme="dark"] .lightbox-next:hover {
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

/* Video player controls visibility in dark mode */
[data-theme="dark"] video {
  background: var(--color-background-tertiary);
}

/* Enhanced media container visibility */
[data-theme="dark"] .lightbox-media-container {
  background: transparent;
}

/* Gallery image overlays and metadata in dark mode */
[data-theme="dark"] .gallery-item-media::after {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

/* Loading placeholder visibility in dark mode */
[data-theme="dark"] .lazy-placeholder {
  background: var(--lazy-placeholder-bg);
  color: var(--loading-spinner-color);
}

/* Gallery completion message visibility in dark mode */
[data-theme="dark"] #gallery-completion-message .completion-message {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* Virtual gallery scroll indicators in dark mode */
[data-theme="dark"] .virtual-gallery::-webkit-scrollbar {
  width: 8px;
  background: var(--color-background-tertiary);
}

[data-theme="dark"] .virtual-gallery::-webkit-scrollbar-thumb {
  background: var(--color-border-medium);
  border-radius: 4px;
}

[data-theme="dark"] .virtual-gallery::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* Image loading transitions in dark mode */
[data-theme="dark"] .lazy-image {
  background: var(--color-background-tertiary);
}

[data-theme="dark"] .gallery-item.loaded .lazy-image {
  background: transparent;
}

/* Loading progress indicators in dark mode */
[data-theme="dark"] .loading-progress-bar {
  background: var(--color-background-tertiary);
}

[data-theme="dark"] .loading-progress-fill {
  background: linear-gradient(90deg, var(--color-blue), var(--color-red));
}

/* Festival Year Cards */
[data-theme="dark"] .festival-year-card {
  background: var(--festival-card-bg);
  border-color: var(--festival-card-border);
}

[data-theme="dark"] .festival-year-card:hover {
  box-shadow: var(--festival-card-hover-shadow);
  border-color: var(--color-blue);
}

[data-theme="dark"] .festival-year-card.coming-soon {
  border-color: var(--color-border);
  opacity: 0.6;
}

[data-theme="dark"] .festival-year-card.coming-soon:hover {
  border-color: var(--color-border);
}

/* Multi-Year Gallery */
[data-theme="dark"] .year-button {
  background: var(--year-button-bg);
  border-color: var(--year-button-border);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .year-button:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
  box-shadow: 0 4px 12px var(--shadow-color);
}

[data-theme="dark"] .year-button.active {
  background: var(--year-button-active-bg);
  border-color: var(--color-blue);
  color: var(--color-text-inverse);
  box-shadow: 0 6px 20px var(--shadow-color-strong);
}

[data-theme="dark"] .year-statistics {
  background: var(--year-stats-bg);
}

[data-theme="dark"] .loading-indicator {
  background: var(--loading-indicator-bg);
  box-shadow: 0 10px 40px var(--shadow-color);
}

[data-theme="dark"] .error-display {
  background: var(--error-display-bg);
  border-color: var(--error-display-border);
  box-shadow: 0 10px 40px var(--shadow-color);
}

/* Skeleton Loading */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--color-background-secondary) 25%,
    var(--color-background-tertiary) 50%,
    var(--color-background-secondary) 75%
  );
}

/* Ticket Selection Components */
[data-theme="dark"] .ticket-card {
  background: var(--color-surface);
}

[data-theme="dark"] .ticket-card:hover {
  box-shadow: 0 4px 12px var(--shadow-color);
}


[data-theme="dark"] .ticket-card.unavailable,
[data-theme="dark"] .ticket-card.disabled {
  background: var(--color-background-tertiary);
  opacity: 0.5;
}

/* Quantity Selector */
[data-theme="dark"] .qty-btn {
  background: var(--color-surface);
  border-color: var(--color-border-medium);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .qty-btn:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background: var(--color-info-light);
}

/* Add to Cart Buttons */
[data-theme="dark"] .add-to-cart-btn {
  background: var(--color-blue);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .add-to-cart-btn:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 2px 8px var(--shadow-color);
}

[data-theme="dark"] .add-to-cart-btn:disabled {
  background: var(--color-text-muted);
  color: var(--color-text-tertiary);
}

/* Donation Selection Interface */
[data-theme="dark"] .donation-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .donation-card:hover {
  border-color: var(--color-blue);
  box-shadow: 0 8px 25px var(--shadow-color-strong);
}

[data-theme="dark"] .donation-card.selected {
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: var(--color-text-inverse);
  box-shadow: 0 8px 25px var(--shadow-color-strong);
}

[data-theme="dark"] .custom-amount-input {
  color: inherit;
  background: transparent;
}

[data-theme="dark"] .custom-amount-input::placeholder {
  color: inherit;
  opacity: 0.6;
}

[data-theme="dark"] .donation-card.selected .custom-amount-input {
  color: var(--color-text-inverse);
}

[data-theme="dark"] .donation-card.selected .custom-amount-input::placeholder {
  color: var(--color-text-inverse);
  opacity: 0.8;
}

/* Confetti Colors - Adjust for dark theme */
[data-theme="dark"] .confetti-piece {
  filter: brightness(1.2) contrast(1.1);
}

/* TBA Notices */
[data-theme="dark"] .tba-notice {
  background-color: rgba(91, 107, 181, 0.15);
  color: var(--color-blue);
}

/* Contact Page Components */
[data-theme="dark"] .contact-item {
  background: var(--color-background-secondary);
  border-left-color: var(--color-blue);
}

[data-theme="dark"] .contact-item:hover {
  box-shadow: 0 8px 25px var(--shadow-color-light);
}

[data-theme="dark"] .contact-link {
  background: var(--color-surface);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

[data-theme="dark"] .contact-link:hover {
  background: var(--color-blue);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .location-info,
[data-theme="dark"] .response-info {
  background: var(--color-surface);
  box-shadow: 0 2px 10px var(--shadow-color-light);
}

/* Social Icons - Adjust filters for dark theme */
[data-theme="dark"] .social-icon {
  filter: brightness(0) saturate(100%) invert(45%) sepia(93%) saturate(558%)
    hue-rotate(202deg) brightness(93%) contrast(86%);
}

[data-theme="dark"] .contact-link:hover .social-icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(109deg) brightness(107%) contrast(107%);
}

/* Phase 1: New Layout Components - Dark Mode */
[data-theme="dark"] .expectations__item {
  background: var(--color-surface);
  border-color: var(--color-text-primary);
}

[data-theme="dark"] .volunteer-benefits__card {
  background: var(--color-surface);
}

[data-theme="dark"] .volunteer-benefits__card:hover {
  box-shadow: var(--shadow-lg);
}

/* Print optimizations for dark mode */
@media print {
  [data-theme="dark"] * {
    background: white !important;
    color: black !important;
    border-color: black !important;
    box-shadow: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  [data-theme="dark"] .card,
  [data-theme="dark"] .donation-card {
    border-width: 2px;
    border-color: var(--color-text-primary);
  }

  [data-theme="dark"] .ticket-card {
    border: none;
  }
  
  [data-theme="dark"] .btn {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .year-button,
  .year-gallery-container,
  .multi-year-gallery .loading-indicator,
  .error-display {
    transition: none;
    animation: none;
  }

  .year-button:hover,
  .year-button.active,
  .error-retry:hover {
    transform: none;
  }

  @keyframes fadeInGallery {
    from,
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Phase 1: New Layout Components - BEM Convention */

/* Hero Block */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--font-size-6xl);
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  color: var(--color-text-primary);
}

.hero__subtitle {
  font-family: var(--font-accent);
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: 1.4;
  margin-top: var(--space-sm);
  color: var(--color-text-primary);
}

/* Expectations Block */
.expectations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.expectations__item {
  padding: var(--space-lg);
  border: 2px solid var(--color-text-primary);
  background: var(--color-surface);
}

.expectations__item-title {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 900;
  margin: 0 0 var(--space-md) 0;
  color: var(--color-text-primary);
}

.expectations__item-description {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin: 0;
  color: var(--color-text-primary);
}

/* Volunteer Benefits Block */
.volunteer-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  justify-content: center;
}

.volunteer-benefits__tag {
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-blue);
  color: var(--color-text-inverse);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  font-family: var(--font-code);
  font-weight: 500;
  display: inline-block;
  text-align: center;
}

.volunteer-benefits__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}

.volunteer-benefits__card {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--color-surface);
  transition: all var(--transition-base);
}

.volunteer-benefits__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.volunteer-benefits__card-emoji {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  display: block;
}

.volunteer-benefits__card-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: var(--space-md) 0;
  letter-spacing: var(--letter-spacing-wide);
}

.volunteer-benefits__card-description {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Donation Selection Interface */
.donation-selection {
  margin: var(--space-2xl) 0;
}

.donation-amounts {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.donation-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  width: 140px;
  min-height: 140px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.donation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-color-strong);
  border-color: var(--color-blue);
}

.donation-card.selected {
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-color-strong);
}

.donation-card:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.donation-amount {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 900;
  margin: 0;
  color: inherit;
}

/* Removed donation-label styles since labels are removed */

/* Custom donation input inside card */
.custom-amount-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.dollar-sign {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 900;
  color: inherit;
}

.custom-amount-input {
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 900;
  color: inherit;
  text-align: left;
  width: 60px;
  padding: 0;
  outline: none;
  -moz-appearance: textfield; /* Firefox */
}

/* Hide number input spinners */
.custom-amount-input::-webkit-outer-spin-button,
.custom-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.custom-amount-input::placeholder {
  color: inherit;
  opacity: 0.6;
}

.donation-card.selected .custom-amount-input {
  color: var(--color-text-inverse);
}

.donation-card.selected .custom-amount-input::placeholder {
  color: var(--color-text-inverse);
  opacity: 0.8;
}

/* Removed donation total styles since total display is removed */

/* Donation celebration animation */
@keyframes celebrationPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes celebrationGlow {
  0% {
    box-shadow: 0 8px 25px var(--shadow-color);
  }
  50% {
    box-shadow:
      0 8px 25px var(--shadow-color-strong),
      0 0 30px var(--shadow-color);
  }
  100% {
    box-shadow: 0 8px 25px var(--shadow-color);
  }
}

.donation-celebration {
  animation:
    celebrationPulse 0.6s ease-in-out,
    celebrationGlow 0.6s ease-in-out;
}

.celebration-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  color: var(--color-blue);
  padding: var(--space-2xl) var(--space-4xl);
  border-radius: 20px;
  border: 3px solid var(--color-blue);
  box-shadow: 0 10px 40px var(--shadow-color-strong);
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 900;
  text-align: center;
  z-index: 1000;
  animation: celebrationMessage 2s ease-in-out forwards;
  pointer-events: none;
  line-height: 1.2;
}

@keyframes celebrationMessage {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .celebration-message {
    animation: celebrationMessageReduced 2s ease-in-out forwards;
  }

  @keyframes celebrationMessageReduced {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%);
    }
    20% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
    80% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%);
    }
  }
}

/* Confetti Animation */
.confetti-piece {
  position: fixed;
  width: 16px;
  height: 16px;
  background: #ff0080;
  top: -20px;
  z-index: 9999;
  animation: confettiFall linear forwards;
  pointer-events: none;
}

.confetti-piece:nth-child(odd) {
  width: 14px;
  height: 14px;
  animation-name: confettiFallRotate;
}

.confetti-piece:nth-child(3n) {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.confetti-piece:nth-child(4n) {
  width: 20px;
  height: 8px;
}

.confetti-piece:nth-child(5n) {
  width: 18px;
  height: 6px;
  border-radius: 3px;
}

.confetti-piece:nth-child(6n) {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) rotateZ(0deg);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotateZ(360deg);
    opacity: 0;
  }
}

@keyframes confettiFallRotate {
  0% {
    transform: translateY(-100vh) rotateZ(0deg) rotateY(0deg);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotateZ(360deg) rotateY(720deg);
    opacity: 0;
  }
}

/* Respect user's preference for reduced motion - disable confetti animation */
@media (prefers-reduced-motion: reduce) {
  .confetti-piece {
    animation: none;
    display: none; /* Hide confetti entirely for users who prefer reduced motion */
  }
}

/* TBA Notices */
.tba-notice {
  font-style: italic;
  color: var(--color-blue);
  text-align: center;
  padding: var(--space-lg);
  background-color: rgba(91, 107, 181, 0.1);
  border-radius: 8px;
  font-family: var(--font-accent);
  font-size: var(--font-size-lg);
  margin: var(--space-xl) 0;
}

/* ==========================================================================
   TICKET SELECTION COMPONENTS
   ========================================================================== */

/* Ticket Cards */
.ticket-card {
  padding: var(--space-lg);
  border: none;
  border-radius: 8px;
  background: var(--color-surface);
  transition: all 0.3s ease;
  position: relative;
}


.ticket-card.disabled,
.ticket-card.unavailable {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-background-secondary);
}

.ticket-card.disabled:hover,
.ticket-card.unavailable:hover {
  transform: none;
  box-shadow: none;
}

/* Ticket Card Content */
.ticket-card h4 {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-text-primary);
}

.ticket-price {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: 900;
  color: var(--color-blue);
  margin-bottom: var(--space-sm);
}

.ticket-description {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.ticket-savings {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-red);
  background: rgba(227, 72, 73, 0.1);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  display: inline-block;
  margin-bottom: var(--space-md);
}

/* Quantity Selector */
.quantity-selector {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-medium);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qty-btn:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background: var(--color-info-light);
}

.qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity {
  min-width: 24px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Add to Cart Buttons */
.add-to-cart-btn {
  width: 100%;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-blue);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.add-to-cart-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.add-to-cart-btn:active {
  transform: translateY(0);
}

.add-to-cart-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-text-muted);
}

.add-to-cart-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Ticket Category Sections */
.ticket-category {
  margin-bottom: var(--space-4xl);
}

.ticket-category h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: 900;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.category-description {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

.ticket-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .ticket-options {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .ticket-card {
    padding: var(--space-md);
  }
  
  .ticket-card h4 {
    font-size: var(--font-size-base);
  }
  
  .ticket-price {
    font-size: var(--font-size-xl);
  }
}

/* Section Spacing Adjustments */
.section {
  margin-bottom: var(--space-xl); /* Reduced from var(--space-3xl) */
}

.hero-section {
  margin-bottom: var(--space-lg); /* Tighter hero spacing */
}

.content-section + .content-section {
  margin-top: var(--space-lg); /* Reduced from var(--space-3xl) */
}

.content-section p + p {
  margin-top: var(--space-md); /* Reduced from var(--space-lg) */
}

/* Year Section Headers */
.artists-2025 h2,
.artists-2026 h2,
.schedule-2025 h2,
.schedule-2026 h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: 900;
  margin: var(--space-xl) 0 var(--space-lg) 0;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .hero-title {
    font-size: var(--font-size-5xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .section {
    margin-bottom: var(--space-lg);
  }

  .expectations-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .volunteer-benefits {
    justify-content: center;
  }

  .volunteer-benefits-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-2xl) 0;
  }

  .benefit-card {
    padding: var(--space-lg) var(--space-md);
  }

  .benefit-emoji {
    font-size: 2.5rem;
  }

  .benefit-title {
    font-size: var(--font-size-base);
  }

  .expectation-item {
    padding: var(--space-md);
  }

  .expectation-item h3 {
    font-size: var(--font-size-2xl);
  }
}

/* Ticket Selection Interface Styling */
.tickets-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.tickets-header h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-6xl);
  margin-bottom: var(--space-md);
}

.tickets-subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-blue);
  font-weight: 500;
}

/* Ticket Selection Interface */
.ticket-selection {
  margin: var(--space-2xl) 0;
}

.ticket-selection h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  color: var(--color-black);
  margin-bottom: var(--space-xl);
  text-align: center;
}

/* Dark mode override for Select Your Tickets */
[data-theme="dark"] .ticket-selection h2 {
  color: var(--color-white);
}

/* Ticket Categories */
.ticket-category {
  margin-bottom: var(--space-3xl);
}

.ticket-category h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  color: var(--color-black);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Dark mode ticket category headers */
[data-theme="dark"] .ticket-category h3 {
  color: var(--color-gray-100);
}

.category-description {
  color: var(--color-gray-600);
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-base);
}

/* Dark mode category descriptions */
[data-theme="dark"] .category-description {
  color: var(--color-gray-300);
}

.ticket-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

/* Ticket Card Styling - Smaller Box Style */
.ticket-card {
  background: var(--color-surface);
  border: none;
  border-radius: 12px;
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ticket-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-color-strong);
}


.ticket-card h4 {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ticket-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  flex-grow: 1;
}

.ticket-price {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  color: var(--color-red);
  font-weight: bold;
  margin-bottom: var(--space-sm);
}

.ticket-savings {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-text-inverse);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: bold;
  margin-bottom: var(--space-md);
}

/* Consolidated disabled/unavailable ticket styles */
.ticket-card.unavailable,
.ticket-card.disabled {
  position: relative;
  opacity: 0.6;
  background: var(--color-background-tertiary);
  cursor: not-allowed;
  overflow: hidden;
  pointer-events: none;
}

.ticket-card.unavailable:hover,
.ticket-card.disabled:hover {
  transform: none;
  box-shadow: 0 4px 15px var(--shadow-color-light);
}

.ticket-card.unavailable .qty-btn,
.ticket-card.unavailable .quantity-selector,
.ticket-card.disabled .qty-btn,
.ticket-card.disabled .quantity-selector {
  pointer-events: none;
  opacity: 0.3;
}

/* Availability Indicators */
.availability-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.3s ease-out;
}

.availability-indicator.availability-sold-out {
  background: var(--color-red, #ef4444);
  color: white;
}

.availability-indicator.availability-low-stock {
  background: var(--color-yellow, #f59e0b);
  color: var(--color-gray-900, #1f2937);
}

.availability-indicator.availability-limited {
  background: var(--color-blue, #3b82f6);
  color: white;
}

/* Availability Error Toast */
.availability-error-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-red, #ef4444);
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  z-index: 10000;
  max-width: 90%;
  text-align: center;
  animation: slideInUp 0.3s ease-out;
}

.availability-error-toast.fade-out {
  animation: slideOutDown 0.3s ease-out;
}

/* Ticket Card Error State */
.ticket-card.availability-error {
  animation: shake 0.5s ease-in-out;
  border-color: var(--color-red, #ef4444);
}

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

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes slideOutDown {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Diagonal banner overlay for coming soon items */
.coming-soon-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: var(--color-red);
  color: var(--color-text-inverse);
  padding: 12px 0;
  width: 150%;
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  box-shadow: 0 4px 10px var(--shadow-color-strong);
  z-index: 10;
  will-change: transform;
}

.coming-soon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  background: var(--color-red);
  color: var(--color-text-inverse);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  box-shadow: 0 4px 10px var(--shadow-color);
  z-index: 10;
}

/* Quantity Selector */
.quantity-selector {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  justify-content: center;
}

.qty-btn {
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-blue);
  background: var(--color-surface);
  color: var(--color-blue);
  border-radius: 50%;
  font-size: var(--font-size-lg);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qty-btn:hover {
  background: var(--color-blue);
  color: var(--color-text-inverse);
}

.qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity {
  font-size: var(--font-size-lg);
  font-weight: bold;
  min-width: 30px;
  text-align: center;
}

/* Pricing Summary */
.pricing-summary {
  background: var(--color-background-secondary);
  padding: var(--space-lg);
  border-radius: 8px;
  margin-top: var(--space-xl);
}

.total-section h3 {
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
}

.order-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.order-item:last-child {
  border-bottom: none;
  margin-bottom: var(--space-md);
}

.total-final {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-lg);
  border-top: 2px solid var(--color-border);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
}

.checkout-btn {
  width: 100%;
  background: var(--color-red);
  color: var(--color-text-inverse);
  border: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: 8px;
  font-size: var(--font-size-lg);
  font-weight: bold;
  cursor: pointer;
  margin-top: var(--space-lg);
  transition: all 0.2s ease;
}

.checkout-btn:hover:not(:disabled) {
  background: var(--color-red);
  transform: translateY(-1px);
}

.checkout-btn:disabled {
  background: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Mobile responsiveness for tickets */
@media (max-width: 768px) {
  .ticket-options {
    grid-template-columns: 1fr;
  }

  .ticket-card {
    min-height: 180px;
  }

  .qty-btn {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-base);
  }
}

/* Contact Page Styling */
.contact-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("/images/hero-default.jpg") center/cover;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-inverse);
}

.contact-info {
  margin: var(--space-3xl) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.contact-item {
  background: var(--color-background-secondary);
  padding: var(--space-xl);
  border-radius: 12px;
  border-left: 4px solid var(--color-blue);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-color-light);
}

.contact-item h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.contact-item p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 2px solid var(--color-blue);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-blue);
  font-weight: 500;
  transition: all 0.2s ease;
  margin-bottom: var(--space-sm);
}

.contact-link:hover {
  background: var(--color-blue);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}

.contact-link:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-info-light);
}

.email-link {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
}

.contact-icon {
  font-size: var(--font-size-lg);
}

.social-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(45%) sepia(93%) saturate(558%)
    hue-rotate(202deg) brightness(93%) contrast(86%);
  transition: filter 0.2s ease;
}

.contact-link:hover .social-icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(109deg) brightness(107%) contrast(107%);
}

.whatsapp-note,
.feedback-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* Location and Response Info */
.location-info,
.response-info {
  background: var(--color-surface);
  padding: var(--space-xl);
  border-radius: 12px;
  box-shadow: 0 2px 10px var(--shadow-color-light);
  margin: var(--space-xl) 0;
}

.location-info h2,
.response-info h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-blue);
  padding-bottom: var(--space-sm);
}

.location-details h3 {
  font-family: var(--font-accent);
  font-size: var(--font-size-lg);
  color: var(--color-red);
  margin-bottom: var(--space-sm);
}

.address {
  font-family: var(--font-code);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.location-note {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Footer link styling */
.footer-link {
  color: var(--color-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--color-red);
  text-decoration: underline;
}

/* Mobile Responsiveness for Contact Page */
@media (max-width: 768px) {
  .contact-hero {
    min-height: 30vh;
    padding: var(--space-lg);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .contact-item {
    padding: var(--space-lg);
  }

  .location-info,
  .response-info {
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
  }

  .contact-link {
    font-size: var(--font-size-sm);
    padding: var(--space-sm);
  }
}

/* Print Styles for Contact Page */
@media print {
  .contact-hero {
    background: none;
    color: var(--color-text-primary);
    min-height: auto;
    padding: var(--space-md);
  }

  .contact-item {
    break-inside: avoid;
    background: none;
    border: 1px solid var(--color-text-muted);
  }

  .contact-link {
    border: 1px solid var(--color-text-primary);
    background: none;
  }
}

/* Schedule Components */
.schedule-day {
  margin-bottom: var(--space-3xl);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.schedule-day h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
}

.schedule-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-3xl);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.schedule-item:last-child {
  border-bottom: none;
}

.schedule-time {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

.schedule-content h4 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.schedule-content p {
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 800px;
}

@media (max-width: 768px) {
  .schedule-item {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
  }

  .schedule-time {
    font-weight: 600;
    margin-bottom: var(--space-xs);
  }
}

/* Site Logo Responsive */
.site-logo {
  height: clamp(60px, 8vw, 78px);
  width: clamp(60px, 8vw, 78px); /* Fixed width matching height for consistent sizing */
  object-fit: contain; /* Ensures logo fits within dimensions without distortion */
}

/* ==========================================================================
   FEEDBACK SURVEY - Minimal Implementation
   ========================================================================== */

/* Simple feedback link styling - inherits from contact-link */
.feedback-link {
  /* Uses existing contact-link styles */
}

/* ==========================================================================
   VERTICAL TICKET CARD DESIGN - November 2025 Weekender & 2026 Festival
   ========================================================================== */

.ticket-card.vertical-design {
  width: 380px;
  height: 520px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Faded logo background watermark */
.ticket-card.vertical-design::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: url('/images/logo.png') no-repeat center;
  background-size: contain;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.ticket-card.vertical-design .ticket-header {
  background: #000000;
  padding: 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.ticket-card.vertical-design .ticket-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #DC143C;
}

.ticket-card.vertical-design .event-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  font-weight: 600;
}

.ticket-card.vertical-design .event-name {
  color: white;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.ticket-card.vertical-design .ticket-body {
  flex: 1;
  padding: 30px 25px 25px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.ticket-card.vertical-design .ticket-type-section {
  margin-bottom: 25px;
}

.ticket-card.vertical-design .field-label {
  color: #666;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: 600;
}

.ticket-card.vertical-design .ticket-type {
  color: #002868;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.ticket-card.vertical-design .ticket-price {
  color: #DC143C !important;
  font-size: 32px !important;
  font-weight: bold;
  margin-top: 8px;
  display: block;
}

.ticket-card.vertical-design .ticket-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ticket-card.vertical-design .detail-row {
  display: flex;
  flex-direction: column;
}

.ticket-card.vertical-design .detail-value {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.ticket-card.vertical-design .ticket-footer {
  border-top: 1px dashed #ddd;
  padding-top: 20px;
  margin-top: auto;
}

.ticket-card.vertical-design .venue-section {
  text-align: center;
}

.ticket-card.vertical-design .venue-name {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

/* Cart controls integration */
.ticket-card.vertical-design .quantity-selector {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.ticket-card.vertical-design .add-to-cart-btn {
  margin-top: var(--space-sm);
  width: 100%;
  padding: var(--space-sm);
  background: var(--color-blue);
  color: white;
  border: none;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ticket-card.vertical-design .add-to-cart-btn:hover {
  background: var(--color-blue-dark, #0040a0);
}

/* Dark mode support */
[data-theme="dark"] .ticket-card.vertical-design {
  background: var(--color-surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .ticket-card.vertical-design .ticket-header {
  background: #000000;
}

[data-theme="dark"] .ticket-card.vertical-design .detail-value {
  color: var(--color-text-primary);
}

[data-theme="dark"] .ticket-card.vertical-design .ticket-footer {
  border-top-color: var(--color-border);
}

[data-theme="dark"] .ticket-card.vertical-design .venue-name {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .ticket-card.vertical-design .ticket-type {
  color: #4A90E2; /* Lighter blue for dark mode visibility */
}

[data-theme="dark"] .ticket-card.vertical-design .field-label {
  color: var(--color-text-secondary);
}

/* Dark mode availability indicators */
[data-theme="dark"] .availability-indicator.availability-sold-out {
  background: var(--color-red, #ef4444);
}

[data-theme="dark"] .availability-indicator.availability-low-stock {
  background: var(--color-yellow, #f59e0b);
  color: var(--color-gray-900, #1f2937);
}

[data-theme="dark"] .availability-indicator.availability-limited {
  background: var(--color-blue-light, #60a5fa);
}

[data-theme="dark"] .availability-error-toast {
  background: var(--color-red, #ef4444);
}

/* Dark mode schedule item titles */
[data-theme="dark"] .schedule-content h4 {
  color: var(--color-text-primary);
}

/* Dark mode logo watermark adjustments */
[data-theme="dark"] .ticket-card.vertical-design::before {
  background: url('/images/logo-dark.png') no-repeat center;
  background-size: contain;
  opacity: 0.05; /* Keep subtle watermark */
}

/* Visual feedback for quantity buttons when updating cart */
.qty-btn {
  transition: all 0.2s ease;
}

.qty-btn:active {
  transform: scale(0.95);
  background: var(--color-blue) !important;
  color: white !important;
  border-color: var(--color-blue) !important;
}

/* Pulse animation for cart update feedback */
@keyframes cartUpdatePulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 112, 233, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0, 112, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 112, 233, 0); }
}

.qty-btn.cart-updating {
  animation: cartUpdatePulse 0.5s ease-out;
}

/* Quantity number flash when changed */
.quantity.updating {
  animation: quantityFlash 0.3s ease-out;
  color: var(--color-blue);
}

@keyframes quantityFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); font-weight: 700; }
  100% { transform: scale(1); }
}

/* Container styling for vertical design tickets */
.ticket-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  justify-content: flex-start;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ticket-card.vertical-design {
    width: 100%;
    max-width: 380px;
  }

  .ticket-options {
    justify-content: center;
  }
}