/* Boston AI Week 2025 - Improved Light Theme Stylesheet */

/* Import Work Sans font for professional typography */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* CSS Variables for Navy Blue Color Theory Design System */
:root {
    /* Navy Blue Color Theory Palette */
    --primary-bg: #ffffff;
    --secondary-bg: #f8fafc;
    --tertiary-bg: #f1f5f9;
    
    /* Navy Blue Primary Colors */
    --navy-primary: #042756;
    --navy-secondary: #1e40af;
    --navy-light: #3b82f6;
    --navy-dark: #1e293b;
    
    /* Color Theory Complementary Colors */
    --coral-primary: #f97316;
    --coral-secondary: #ea580c;
    --coral-light: #fb923c;
    
    /* Color Theory Analogous Colors */
    --teal-primary: #0e74902;
    --teal-secondary: #0e7490;
    --teal-light: #22d3ee;
    
    --purple-primary: #7c3aed;
    --purple-secondary: #6d28d9;
    --purple-light: #a855f7;
    
    /* Text Colors */
    --primary-text: var(--navy-primary);
    --secondary-text: #374151;
    --body-text: #4b5563;
    --light-text: #6b7280;
    --white-text: #ffffff;
    
    /* Functional Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: var(--teal-primary);
    
    /* Border Colors */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #9ca3af;
    
    /* Box Shadow Colors */
    --shadow-navy: rgba(30, 58, 138, 0.1);
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    
    /* Typography */
    --font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Spacing */
    --container-max-width: 1200px;
    --section-padding: 3rem 0;
    --section-padding-mobile: 2rem 0;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 var(--shadow-light);
    --shadow-md: 0 4px 6px -1px var(--shadow-medium), 0 2px 4px -1px var(--shadow-light);
    --shadow-lg: 0 10px 15px -3px var(--shadow-medium), 0 4px 6px -2px var(--shadow-light);
    --shadow-xl: 0 20px 25px -5px var(--shadow-medium), 0 10px 10px -5px var(--shadow-light);
    --shadow-navy-md: 0 4px 6px -1px var(--shadow-navy), 0 2px 4px -1px var(--shadow-light);
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
  --accent-blue: #2563eb;
  --accent-blue-hover: #1e40af;

  /* Refined colors for warmth and energy */
  --coral-primary: #fb6f3d;
  --coral-secondary: #ea580c;

  --teal-primary: #0ea5e9;
  --teal-secondary: #0e7490;

  /* Additional civic and highlight tones */
  --warm-yellow: #facc15;
  --community-green: #10b981;
  --highlight-bg: #fefce8;

  /* Updated gray backdrop for modern polish */
  --neutral-light: #f3f4f6;

}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--body-text);
    background-color: var(--primary-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--primary-text);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
}

h4 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 600;
}

p {
    margin-bottom: 1rem;
    color: var(--body-text);
}

a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-blue-hover);
    text-decoration: underline;
}

/* Container and Layout */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .container {
        padding: 0 2rem;
    }
}

/* Squark-Inspired Navigation Header */
.navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 70px;
    position: relative;
}

.nav-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
}

/* Logo Section */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-logo:hover .logo-img,
.nav-logo:hover .nav-logo-img {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.logo-img,
.nav-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    color: #374151;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 0 0.25rem;
    position: relative;
}

/* NAVBAR BASE */
.navbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* NAV LINKS */
.nav-link {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background-color: #000000;
  color: #ffffff;
}

/* PRIMARY BUTTON (Host an Event) */
.btn.btn-primary {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn.btn-primary:hover {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}

/* Optional: Adjust nav-menu layout */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

/* Active state */
.nav-link.active {
    background-color: #1e40af !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Hover effects */
.nav-link:hover:not(.active) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Focus states for accessibility */
.nav-link:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Mobile Navigation Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.5rem;
    background: none;
    border: none;
    gap: 4px;
}

.nav-toggle .bar,
.bar {
    width: 24px;
    height: 3px;
    background-color: #374151;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 1rem;
        height: 60px;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background-color: #ffffff;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        gap: 0.5rem;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-link {
        width: 100%;
        justify-content: center;
        padding: 1rem;
        margin: 0;
        border-radius: 8px;
    }
    
    .logo-img,
    .nav-logo-img {
        height: 35px;
    }
}

/* Ensure body has top padding to account for fixed header */
body {
    padding-top: 70px;
}

@media (max-width: 768px) {
    body {
        padding-top: 60px;
    }
}

/* Buttons - Squark-/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    border: 2px solid #1f2937;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-primary {
    background-color: #1f2937;
    color: #ffffff;
    border: 2px solid #1f2937;
}

.btn-primary:hover {
    background-color: #ffffff;
    color: #1f2937;
    border: 2px solid #1f2937;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.btn-secondary {
    background-color: #ffffff;
    color: #1f2937;
    border: 2px solid #1f2937;
}

.btn-secondary:hover {
    background-color: #1f2937;
    color: #ffffff;
    border: 2px solid #1f2937;
    text-decoration: none;
    transform: translateY(-1px);
}
.btn-large {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-icon {
    width: 1rem;
    height: 1rem;
}

/* Mobile button adjustments */
@media (max-width: 768px) {
    .nav-menu .btn-primary {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
}

/* Hero Section */
.hero {
    background: var(--primary-bg);
    color: var(--primary-text);
    padding: 6rem 0 4rem 0;
    text-align: left;
    position: relative;
    border-bottom: 1px solid var(--border-light);
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    margin-bottom: 1rem;
}

.title-boston {
    display: block;
    font-weight: 900;
    color: var(--primary-text);
}

.title-ai {
    display: block;
    font-weight: 900;
    color: var(--accent-blue);
}

.title-year {
    display: block;
    font-weight: 700;
    color: var(--secondary-text);
    font-size: 0.8em;
}

.hero-subtitle {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: 0.5rem;
}

.hero-date {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--accent-blue);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.hero-description {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--body-text);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Hero Image Section */
.hero-image-section {
    padding: 4rem 0;
    background-color: var(--secondary-bg);
}

.hero-image-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.hero-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(30, 58, 138, 0.9));
    color: white;
    padding: 2rem;
}

.overlay-title {
    color: white;
    margin-bottom: 0.5rem;
}

.overlay-description {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
}

/* Sections */
.section {
    padding: var(--section-padding);
}

@media (max-width: 768px) {
    .section {
        padding: var(--section-padding-mobile);
    }
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    margin-bottom: 1rem;
}

.section-description {
    font-size: 1.125rem;
    color: var(--body-text);
    max-width: 600px;
    margin: 0 auto;
}

/* About Section */
.about-section {
    background-color: var(--primary-bg);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.about-card {
    background-color: var(--secondary-bg);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-light);
    transition: all var(--transition-normal);
}

.about-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.about-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--accent-blue-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.about-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-blue);
}

.about-card-title {
    color: var(--primary-text);
    margin-bottom: 0.5rem;
}

.about-card-description {
    color: var(--body-text);
    margin-bottom: 0;
}

/* Mission Statement */
.mission-statement {
    background-color: var(--secondary-bg);
    padding: 3rem;
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: 3rem;
    border: 1px solid var(--border-light);
}

.mission-title {
    color: var(--primary-text);
    margin-bottom: 1rem;
}

.mission-description {
    font-size: 1.125rem;
    color: var(--body-text);
    margin-bottom: 0;
}

/* Call to Action */
.about-cta {
    text-align: center;
}

.cta-title {
    color: var(--primary-text);
    margin-bottom: 0.5rem;
}

.cta-description {
    color: var(--body-text);
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Calendar Section */
.calendar-section {
    background-color: var(--tertiary-bg);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.calendar-container {
    background-color: var(--primary-bg);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.calendar-header {
    text-align: center;
    margin-bottom: 2rem;
}

.calendar-title {
    color: var(--primary-text);
    margin-bottom: 0.5rem;
}

.calendar-description {
    color: var(--body-text);
    margin-bottom: 0;
}

.calendar-embed {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
}

.calendar-embed iframe {
    width: 100%;
    height: 600px;
    border: none;
}

.calendar-cta {
    text-align: center;
}

/* Events Section */
.events-section {
    background-color: var(--primary-bg);
}

.event-highlights {
    margin-bottom: 3rem;
}

.highlights-title {
    text-align: center;
    color: var(--primary-text);
    margin-bottom: 2rem;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.highlight-card {
    background-color: var(--secondary-bg);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: all var(--transition-normal);
}

.highlight-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.highlight-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.highlight-title {
    color: var(--primary-text);
    margin-bottom: 0.5rem;
}

.highlight-description {
    color: var(--body-text);
    margin-bottom: 1rem;
}

.highlight-link {
    color: var(--accent-blue);
    font-weight: 600;
    text-decoration: none;
}

.highlight-link:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero {
        padding: 6rem 0 3rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .highlights-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .mission-statement {
        padding: 2rem;
    }
    
    .calendar-container {
        padding: 1rem;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.text-white {
    color: white;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

/* Focus States for Accessibility */
.btn:focus,
.nav-link:focus,
a:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .navbar,
    .hero-buttons,
    .cta-buttons {
        display: none;
    }
    
    body {
        color: black;
        background: white;
    }
    
    .hero {
        background: white;
        color: black;
    }
}


/* Join Page Specific Styles */
.join-hero {
    background: var(--primary-bg);
    color: var(--primary-text);
    padding: 4rem 0;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--border-light);
}

.join-hero-content {
    position: relative;
    z-index: 1;
}

.participation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.participation-card {
    background-color: var(--primary-bg);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-light);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.participation-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.participation-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
}

.participation-title {
    color: var(--primary-text);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.participation-description {
    color: var(--body-text);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.participation-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.participation-cta:hover {
    color: var(--accent-blue-hover);
}

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

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.step-card {
    background-color: var(--primary-bg);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    position: relative;
}

.step-number {
    position: absolute;
    top: -1rem;
    left: 2rem;
    background-color: var(--accent-blue);
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.step-title {
    color: var(--primary-text);
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.step-description {
    color: var(--body-text);
    margin-bottom: 0;
}

.event-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.event-type-card {
    background-color: var(--secondary-bg);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.event-type-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.event-type-title {
    color: var(--primary-text);
    margin-bottom: 1rem;
}

.event-type-description {
    color: var(--body-text);
    margin-bottom: 1.5rem;
}

.event-list {
    list-style: none;
    padding: 0;
}

.event-list li {
    color: var(--body-text);
    padding: 0.25rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.event-list li::before {
    content: '•';
    color: var(--accent-blue);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.faq-section {
    background-color: var(--tertiary-bg);
}

.faq-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--primary-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.faq-question {
    background-color: var(--secondary-bg);
    padding: 1.5rem;
    margin: 0;
    font-weight: 600;
    color: var(--primary-text);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.faq-question:hover {
    background-color: var(--tertiary-bg);
}

.faq-answer {
    padding: 1.5rem;
    color: var(--body-text);
    margin: 0;
    border-top: 1px solid var(--border-light);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.benefit-card {
    background-color: var(--secondary-bg);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-light);
    transition: all var(--transition-normal);
}

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

.benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.benefit-title {
    color: var(--primary-text);
    margin-bottom: 0.5rem;
}

.benefit-description {
    color: var(--body-text);
    margin-bottom: 0;
}

.final-cta {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
    color: white;
    text-align: center;
    padding: 4rem 2rem;
    border-radius: var(--radius-lg);
    margin-top: 2rem;
}

.final-cta h2 {
    color: white;
    margin-bottom: 1rem;
}

.final-cta p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-size: 1.125rem;
}

.final-cta .btn {
    background-color: white;
    color: var(--accent-blue);
}

.final-cta .btn:hover {
    background-color: var(--secondary-bg);
    color: var(--accent-blue-hover);
}

/* Breadcrumb Navigation */
.breadcrumb {
    background-color: var(--secondary-bg);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
    margin-top: 4rem;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    color: var(--body-text);
}

.breadcrumb-item a {
    color: var(--accent-blue);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

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

.breadcrumb-current {
    color: var(--primary-text);
    font-weight: 500;
}


/* Two-Column Layout System */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin: 4rem 0;
}

.two-column-content {
    padding: 2rem 0;
}

.two-column-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.square-logo {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-navy-md);
}

@media (max-width: 768px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .two-column-visual {
        order: -1;
    }
    
    .square-logo {
        max-width: 300px;
    }
}

/* Boxed Content System */
.content-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
    max-width: 100%;
}

.content-boxes.max-4 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (min-width: 1200px) {
    .content-boxes.max-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .content-boxes.max-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.content-box {
    background: var(--primary-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.content-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-navy-md);
    border-color: var(--navy-light);
}

.content-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--navy-primary), var(--teal-primary), var(--purple-primary), var(--coral-primary));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.content-box-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--navy-light), var(--teal-primary));
    border-radius: var(--radius-lg);
    color: var(--white-text);
    font-size: 1.5rem;
    font-weight: 600;
}

.content-box-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy-primary);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.content-box-description {
    color: var(--body-text);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.content-box-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--navy-light);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.content-box-link:hover {
    color: var(--navy-primary);
    text-decoration: none;
}

.content-box-link::after {
    content: '→';
    transition: transform var(--transition-fast);
}

.content-box-link:hover::after {
    transform: translateX(4px);
}

/* Color-coded content boxes */
.content-box.navy {
    border-left: 4px solid var(--navy-primary);
}

.content-box.teal {
    border-left: 4px solid var(--teal-primary);
}

.content-box.purple {
    border-left: 4px solid var(--purple-primary);
}

.content-box.coral {
    border-left: 4px solid var(--coral-primary);
}

/* Professional Icons */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.icon-microphone::before { content: '🎤'; }
.icon-volunteer::before { content: '🙋'; }
.icon-workshop::before { content: '🛠️'; }
.icon-network::before { content: '🌐'; }
.icon-academic::before { content: '🎓'; }
.icon-rocket::before { content: '🚀'; }
.icon-brain::before { content: '🧠'; }

/* Section Headers with Navy Blue Color Theory */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--navy-primary);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.section-subtitle {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 600;
    color: var(--teal-primary);
    margin-bottom: 1rem;
}

.section-description {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--body-text);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Enhanced Typography with Color Theory */
h1 {
    color: var(--navy-primary);
    font-weight: 800;
}

h2 {
    color: var(--teal-primary);
    font-weight: 700;
}

h3 {
    color: var(--purple-primary);
    font-weight: 600;
}

h4 {
    color: var(--coral-primary);
    font-weight: 600;
}

/* Page-specific layouts */
.page-hero {
    padding: 4rem 0;
    background: var(--primary-bg);
    color: var(--primary-text);
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--border-light);
}

.page-content {
    position: relative;
    z-index: 1;
}

/* Consistent page structure */
.page-section {
    padding: var(--section-padding);
}

@media (max-width: 768px) {
    .page-section {
        padding: var(--section-padding-mobile);
    }
}

/* Enhanced buttons with color theory */
.btn-navy {
    background-color: var(--navy-primary);
    color: var(--white-text);
}

.btn-navy:hover {
    background-color: var(--navy-secondary);
    color: var(--white-text);
}

.btn-teal {
    background-color: var(--teal-primary);
    color: var(--white-text);
}

.btn-teal:hover {
    background-color: var(--teal-secondary);
    color: var(--white-text);
}

.btn-coral {
    background-color: var(--coral-primary);
    color: var(--white-text);
}

.btn-coral:hover {
    background-color: var(--coral-secondary);
    color: var(--white-text);
}



/* Footer Styles */
.footer {
    background-color: #1f2937;
    color: #ffffff;
    padding: 3rem 0 2rem;
    margin-top: 4rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.footer-logo-icon {
    width: 48px;
    height: 48px;
    background-color: #3b82f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    color: white;
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
}

.footer-event-info {
    font-size: 1.125rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.footer-copyright {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 2rem;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-nav a {
    color: #d1d5db;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: #3b82f6;
}

@media (max-width: 768px) {
    .footer {
        padding: 2rem 0 1.5rem;
    }
    
    .footer-logo {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-nav {
        gap: 1rem;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-event-info {
        font-size: 1rem;
    }
    
    .footer-logo-text {
        font-size: 1.25rem;
    }
}


/* Sponsor Logo Placeholder Styles */
.sponsor-logo {
    width: 200px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.sponsor-logo-placeholder {
    width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.2rem;
    color: white;
    text-align: center;
}

/* Ensure consistent sponsor card layout */
.sponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 280px;
}

.sponsor-card .sponsor-name {
    margin: 1rem 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.sponsor-card .sponsor-description {
    flex-grow: 1;
    display: flex;
    align-items: center;
}



/* Event Cards Styles */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.event-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

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

.event-category {
    display: inline-block;
    background: #fed7aa;
    color: #ea580c;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.event-category.conference {
    background: #ddd6fe;
    color: #7c3aed;
}

.event-category.workshop {
    background: #bbf7d0;
    color: #059669;
}

.event-category.showcase {
    background: #fecaca;
    color: #dc2626;
}

.event-category.panel {
    background: #bfdbfe;
    color: #2563eb;
}

.event-date-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.event-date-time svg {
    width: 16px;
    height: 16px;
}

.event-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--navy-blue);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.event-host {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.event-host svg {
    width: 16px;
    height: 16px;
}

.event-description {
    color: #4b5563;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.event-location {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.event-register-btn {
    background: #2563eb;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.event-register-btn:hover {
    background: #1d4ed8;
    transform: translateX(2px);
}

.event-register-btn svg {
    width: 16px;
    height: 16px;
}

/* Events Section */
.events-section {
    padding: 3rem 0;
}

.events-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--navy-blue);
}

@media (max-width: 768px) {
    .events-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .event-card {
        padding: 1.25rem;
    }
}



/* ===== IMPROVED VISUAL HIERARCHY & SECTIONS ===== */

/* Main Content Layout */
.main-content {
    padding: 0;
    background: #ffffff;
}

.content-section {
    padding: 4rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.content-section:last-child {
    border-bottom: none;
}

/* Typography Improvements */
.intro-text {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #475569;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 1rem;
    text-align: center;
}

.section-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #475569;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Expectations Grid */
.expectations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.expectation-item {
    text-align: center;
    padding: 2rem;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.expectation-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.expectation-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e3a8a;
    margin: 1.5rem 0 1rem 0;
}

.expectation-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #64748b;
}

/* CTA Buttons */
.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Founder Credit Section */
.founder-credit {
    background: #f8fafc;
    text-align: center;
    padding: 3rem 0;
}

.founder-text {
    font-size: 1.125rem;
    color: #475569;
    margin-bottom: 1rem;
}

.founder-text a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.founder-text a:hover {
    text-decoration: underline;
}

.disclaimer-text {
    font-size: 0.875rem;
    color: #64748b;
    font-style: italic;
}

/* Content Box Icon Improvements */
.content-box-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1e3a8a);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    color: white;
}

.content-box-icon svg {
    width: 28px;
    height: 28px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .content-section {
        padding: 3rem 0;
    }
    
    .expectations-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .expectation-item {
        padding: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    .intro-text {
        font-size: 1.125rem;
    }
    
    .section-text {
        font-size: 1rem;
    }
}


/* ===== SPONSORS PAGE STYLES ===== */

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    margin-top: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Sponsor Grid */
.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

/* Sponsor Cards */
.sponsor-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sponsor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.sponsor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #1e3a8a);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sponsor-card:hover::before {
    opacity: 1;
}

/* Sponsor Logo Placeholders */
.sponsor-logo-placeholder {
    width: 120px;
    height: 60px;
    margin: 0 auto 1.5rem auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sponsor Names */
.sponsor-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Sponsor Descriptions */
.sponsor-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* Sponsor CTA Section */
.sponsor-cta {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    text-align: center;
    padding: 4rem 0;
    margin-top: 2rem;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive Design for Sponsors */
@media (max-width: 768px) {
    .sponsor-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .sponsor-card {
        padding: 1.5rem;
    }
    
    .sponsor-logo-placeholder {
        width: 100px;
        height: 50px;
        font-size: 1rem;
    }
    
    .sponsor-name {
        font-size: 1.25rem;
    }
    
    .sponsor-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .sponsor-grid {
        gap: 1rem;
    }
    
    .sponsor-card {
        padding: 1.25rem;
    }
    
    .sponsor-logo-placeholder {
        width: 80px;
        height: 40px;
        font-size: 0.875rem;
    }
    
    .sponsor-name {
        font-size: 1.125rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
}



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

/* Optimize font loading */
@font-face {
    font-family: 'Work Sans';
    font-display: swap;
}

/* Reduce layout shifts */
img {
    height: auto;
    max-width: 100%;
}

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

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus indicators */
*:focus {
    outline: 2px solid var(--navy-light);
    outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--navy-primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
    border-radius: 4px;
}

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

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .content-box {
        border: 2px solid var(--navy-primary);
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* ===== CRO OPTIMIZATIONS ===== */

/* Improved button hover states for better conversion */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.15);
}

/* Call-to-action emphasis */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

/* Trust indicators */
.trust-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--light-text);
    margin-top: 1rem;
}

/* Social proof styling */
.social-proof {
    background: var(--secondary-bg);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    margin: 2rem 0;
}

/* ===== RESPONSIVE DESIGN ENHANCEMENTS ===== */

/* Container queries for better responsive design */
@container (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

/* Touch-friendly design */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link {
        padding: 12px 16px;
    }
}

/* Print styles */
@media print {
    .navbar,
    .footer,
    .btn {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .hero,
    .page-hero {
        background: white !important;
        color: black !important;
    }
}



/* Performance Optimizations */
* {
    box-sizing: border-box;
}

/* Reduce layout shifts */
img {
    height: auto;
    max-width: 100%;
}

/* Optimize font loading */
@font-face {
    font-family: 'Work Sans';
    font-display: swap;
}

/* Accessibility improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus indicators for accessibility */
*:focus {
    outline: 2px solid var(--navy-primary);
    outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--navy-primary);
    color: var(--white-text);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
    font-weight: 600;
}

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

/* Organizer avatar styles for founder's story */
.organizer-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--navy-primary);
    color: var(--white-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

.organizer-title {
    color: var(--teal-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
}

.founder-story-footer {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

/* Step number styling for getting started */
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--navy-primary);
    color: var(--white-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

/* Event examples styling */
.event-examples {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.event-examples p {
    margin-bottom: 0.5rem;
}

.event-examples p:first-child {
    font-weight: 600;
    color: var(--navy-primary);
}

/* Performance: Reduce repaints */
.content-box {
    will-change: transform;
    backface-visibility: hidden;
}

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

/* Print styles */
@media print {
    .navbar,
    .footer,
    .btn {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
}


/* Day events styling - convert lists to boxes */
.day-events {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.day-events li {
    background: var(--primary-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.day-events li:hover {
    border-color: var(--navy-light);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.1);
    transform: translateY(-1px);
}

.day-events li strong {
    color: var(--navy-primary);
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Day summary improvements */
.day-summary {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--secondary-bg);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.day-summary h3 {
    color: var(--navy-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--teal-primary);
}

/* Week at a glance tab styling */
.week-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-light);
}

.week-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--secondary-text);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.week-tab:hover {
    color: var(--navy-primary);
    background: var(--secondary-bg);
}

.week-tab.active {
    color: var(--navy-primary);
    border-bottom-color: var(--navy-primary);
    background: var(--secondary-bg);
}

/* Responsive improvements for day events */
@media (max-width: 768px) {
    .day-events li {
        padding: 0.75rem;
    }
    
    .day-summary {
        padding: 1rem;
    }
    
    .week-tabs {
        flex-direction: column;
    }
    
    .week-tab {
        text-align: left;
        padding: 0.5rem 1rem;
    }
}




/* Tag badge for events, access, and scale indicators */
.tag {
  display: inline-block;
  background: linear-gradient(to right, var(--accent-blue), var(--teal-primary));
  color: white;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}

/* Optional highlight backgrounds for callouts or stats */
.highlight-bg {
  background-color: var(--highlight-bg);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

/* Optional gradient hero background */
.hero-gradient {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
}

<section class="hero hero-gradient full-height center">
  <div class="hero-inner">
    <h1 class="hero-title">Boston AI Week 2025</h1>
    <p class="hero-tagline">One State. One Week. All Things AI.</p>
    <p class="hero-date">100+ Events. 10,000+ Participants.</p>
    <div class="hero-cta">
      <a class="btn btn-primary" href="./calendar.html">Explore the Schedule</a>
    </div>
  </div>
</section>


.hero {
  background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
}

.hero-text {
  flex: 1 1 50%;
  min-width: 300px;
}

.hero-image {
  flex: 1 1 40%;
  display: flex;
  justify-content: center;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  max-height: 420px;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.hero-buttons {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.date-pill {
  display: inline-block;
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  padding

/* Horizontal row for planning‑tools cards */
.planning-tools-row{
  display:flex;
  gap:2rem;                 /* space between cards   */
  flex-wrap:wrap;           /* wrap on smaller widths */
  justify-content:center;   /* center the row         */
}

.planning-tools-row .card{
  flex:0 1 280px;           /* fixed‑width cards; shrink if needed */
  max-width:280px;
}

/* Single‑column on narrow screens */
@media (max-width: 768px){
  .planning-tools-row{
    flex-direction:column;
    align-items:center;
  }
}

/* NAV colours: use --navy-primary for brand blue */
:root{ --brand-blue: var(--navy-primary); }

/* minimalist links */
.nav-link{
  padding: .75rem 1rem;
  font-weight:600;
  color:#374151;
  position:relative;
  transition:color .2s;
}
.nav-link:hover,
.nav-link:focus{ color:var(--brand-blue); }
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--brand-blue); transition:width .2s;
}
.nav-link:hover::after{ width:100%; }

/* larger logo */
.nav-logo-img{ max-height:80px; height:auto; }

/* sticky nav hide/reveal */
.navbar{ transition:transform .3s; }
.navbar.hide{ transform:translateY(-100%); }

/* countdown ribbon */
.countdown-ribbon{
  background:var(--brand-blue);
  color:#fff;
  text-align:center;
  font-weight:700;
  padding:.25rem 1rem;
  font-size:.875rem;
}

/* hero grid using 12‑col proportions */
.hero-grid{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:2rem; padding:64px 0;
}
.hero-text{ flex:0 1 600px; }
.hero-image{ flex:0 1 480px; text-align:center; }
.hero-image img{ max-width:100%; height:auto; }

/* navy primary everywhere */
.btn-primary{ background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
.btn-primary:hover{ background:#163172; }   /* slightly darker navy */

/* sponsor proof strip */
.sponsor-strip{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:2rem; padding:2rem 0; border-top:1px solid var(--border-light);
}
.sponsor-strip img{ height:40px; width:auto; opacity:.7; filter:grayscale(100%); }
@media(max-width:768px){ .sponsor-strip img{ height:32px; } }

/* remove motion for compliance – will respect system setting */
*{ transition: none !important; }

/*DELETE IF UNCESSARY:

/* ================= NAVBAR MONOCHROME STYLE ================= */

/* NAVBAR BASE */
.navbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

/* NAV MENU (desktop layout) */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* NAV LINKS (white buttons, black border, black text) */
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link:focus {
  background-color: #000000;
  color: #ffffff;
}

/* ACTIVE STATE (optionally blue) */
.nav-link.active {
  background-color: #1e40af !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* HOST AN EVENT BUTTON ONLY — primary monochrome treatment */
.nav-menu .btn.btn-primary {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.nav-menu .btn.btn-primary:hover,
.nav-menu .btn.btn-primary:focus {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}

/* MOBILE NAV TOGGLE BUTTON (hamburger) */
.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 0.5rem;
  background: none;
  border: none;
  gap: 4px;
}

.nav-toggle .bar {
  width: 24px;
  height: 3px;
  background-color: #000000;
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* MOBILE NAV MENU */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 1rem;
    height: 60px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #ffffff;
    flex-direction: column;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
  }

  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-link {
    width: 100%;
    justify-content: center;
    padding: 1rem;
    margin: 0;
    border-radius: 8px;
  }

  .nav-menu .btn.btn-primary {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
  }

  .nav-logo-img {
    height: 35px;
  }
}

.navbar {
  background-color: #ffffff !important;
}

.hero {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}


.sponsor-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem; /* tighter spacing */
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-light);
}

.sponsor-strip img {
  height: 50px;              /* uniform height */
  width: auto;               /* maintain aspect ratio */
  max-width: 120px;          /* prevent oversized logos */
  object-fit: contain;       /* clean scaling */
  filter: grayscale(100%);   /* optional aesthetic */
  opacity: 0.85;             /* optional subtlety */
  transition: transform 0.2s ease;
}

.sponsor-strip img:hover {
  transform: scale(1.05);    /* optional hover effect */
  opacity: 1;
}

@media (max-width: 768px) {
  .sponsor-strip {
    gap: 1rem;
  }

  .sponsor-strip img {
    height: 40px;
    max-width: 90px;
  }
}

.footer-logo img {
  height: 40px;
  width: auto;
}

.footer-logo-img {
  max-height: 50px;
  width: auto;
  margin-bottom: 0.5rem;
}

.nav-logo-img {
  height: 600px; /* or try 80px for larger */
  width: auto;
}

.event-card.hidden {
  display: none;
}

/* Override any layout rule when the card is hidden */
.event-card[hidden] { 
  display: none !important; 
}