/*
 * Prairie Harvest Fest - Custom Styles
 * Colors from official logo - no Bootstrap text utility dependencies
 * Works consistently across ALL screen sizes
 */

/* ===== CSS VARIABLES ===== */
:root {
    /* Brand Colors - FROM LOGO */
    --phf-primary: #2E828A;        /* Teal (logo water) */
    --phf-primary-dark: #1F5B61;   /* Darker teal */
    --phf-primary-light: #5BA89C;  /* Lighter teal (logo water highlight) */
    --phf-secondary: #E87456;      /* Coral/orange (logo text outline) */
    --phf-secondary-dark: #D65A3A; /* Darker coral */
    --phf-gold: #F4D58D;           /* Golden yellow (logo outer ring) */
    --phf-sage: #A8B89D;           /* Sage green (logo prairie grass) */
    
    /* Text Colors */
    --phf-text-dark: #2C3E3E;      /* Navy/dark from logo foreground */
    --phf-text-body: #495057;      /* Body text */
    --phf-text-light: #6c757d;     /* Lighter text */
    --phf-text-white: #ffffff;     /* White text */
    
    /* Neutral Colors */
    --phf-white: #ffffff;
    --phf-light: #f8f9fa;
    --phf-gray-100: #f8f9fa;
    --phf-gray-200: #e9ecef;
    --phf-gray-300: #dee2e6;
    
    /* Typography */
    --phf-font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --phf-font-heading: 'Merriweather', Georgia, serif;
    
    /* Spacing & Effects */
    --phf-border-radius: 0.5rem;
    --phf-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --phf-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --phf-transition: all 0.3s ease;
}

/* ===== GLOBAL RESETS ===== */
body {
    font-family: var(--phf-font-primary);
    color: var(--phf-text-body);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--phf-font-heading);
    font-weight: 700;
    color: var(--phf-text-dark);
    line-height: 1.2;
}

/* ===== CUSTOM TEXT COLORS (Replace Bootstrap utilities) ===== */
.text-phf-primary { color: var(--phf-primary) !important; }
.text-phf-coral { color: var(--phf-secondary) !important; }
.text-phf-dark { color: var(--phf-text-dark) !important; }
.text-phf-body { color: var(--phf-text-body) !important; }
.text-phf-light { color: var(--phf-text-light) !important; }
.text-phf-white { color: var(--phf-text-white) !important; }

/* ===== SECTION-LEVEL COLOR CONTROL ===== */
/* Dark sections - all text white by default */
.section-dark,
.hero-section,
.cta-section,
.group-volunteering,
.final-cta,
.volunteer-cta,
.sponsor-cta,
.bg-primary,
.bg-dark {
    color: var(--phf-text-white);
}

.section-dark *,
.hero-section *,
.cta-section *,
.bg-primary *,
.bg-dark * {
    color: inherit;
}

.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6,
.hero-section h1, .hero-section h2,
.cta-section h1, .cta-section h2, .cta-section h3 {
    color: var(--phf-text-white);
}

/* Light sections - all text dark gray by default */
.section-light,
.featured-activities,
.participation-section,
.community-impact,
.morris-section,
.impact-section,
.history-section,
.faq-section,
.why-volunteer,
.why-donate,
.other-ways,
.bg-light {
    color: var(--phf-text-body);
}

.section-light h1, .section-light h2, .section-light h3,
.featured-activities h2,
.participation-section h2,
.morris-section h2 {
    color: var(--phf-primary);
}

/* ===== BOOTSTRAP OVERRIDES ===== */
.btn-primary {
    background: linear-gradient(135deg, var(--phf-primary) 0%, var(--phf-primary-dark) 100%);
    border: none;
    color: var(--phf-text-white);
    font-weight: 600;
    border-radius: var(--phf-border-radius);
    transition: var(--phf-transition);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, var(--phf-primary-dark) 0%, var(--phf-primary) 100%);
    color: var(--phf-text-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 130, 138, 0.3);
}

.btn-outline-primary {
    border: 2px solid var(--phf-primary);
    color: var(--phf-primary);
    background: transparent;
    font-weight: 600;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--phf-primary);
    border-color: var(--phf-primary);
    color: var(--phf-text-white);
}

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

/* ===== HEADER & NAVIGATION ===== */
.navbar {
    padding: 1rem 0;
    box-shadow: var(--phf-box-shadow);
}

.navbar-brand {
    font-family: var(--phf-font-heading);
    font-weight: 700;
    color: var(--phf-primary) !important;
}

.navbar-nav .nav-link {
    font-weight: 600;
    padding: 0.75rem 1rem;
    color: var(--phf-text-dark);
    transition: var(--phf-transition);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--phf-primary);
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--phf-secondary);
    border-radius: 2px;
}

.dropdown-menu {
    border: none;
    box-shadow: var(--phf-box-shadow-lg);
    border-radius: var(--phf-border-radius);
}

.dropdown-item:hover {
    background-color: var(--phf-gray-100);
    color: var(--phf-primary);
}

/* ===== FIX MOBILE NAVIGATION ===== */
@media (max-width: 991px) {
    .navbar-collapse {
        background: #ffffff;
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    
    /* Make dropdowns work on mobile */
    .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 1rem;
        background: #f8f9fa;
        margin-top: 0.5rem;
		border-radius: 0.5rem;
    }
	
	/* Show dropdown when expanded */
    .navbar-nav .dropdown-menu.show {
        display: block;
    }
    
    .navbar-nav .dropdown-toggle::after {
        float: right;
        margin-top: 0.5rem;
    }
}

/* ===== COUNTDOWN BANNER ===== */
.countdown-gradient {
    background: linear-gradient(135deg, #2E828A 0%, #1F5B61 100%);
    color: #ffffff;
    padding: 1rem 0;
}

.countdown-gradient h4,
.countdown-gradient span {
    color: #ffffff;
}

#countdown-display {
    font-family: 'Courier New', monospace;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===== HERO SECTION ===== */
.hero-bg {
    background-image: url('/assets/images/hero/festival-hero.jpg');
    background-size: cover;
    background-position: center;
}

.hero-section {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero-overlay {
    background: linear-gradient(135deg, rgba(46, 130, 138, 0.8) 0%, rgba(31, 91, 97, 0.9) 100%);
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    color: var(--phf-text-white);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: clamp(1.25rem, 4vw, 2rem);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-description {
    color: var(--phf-text-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===== CARDS ===== */
.card {
    border: none;
    border-radius: var(--phf-border-radius);
    transition: var(--phf-transition);
}

.card-hover:hover,
.activity-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--phf-box-shadow-lg);
}

.card-title {
    color: var(--phf-primary);
}

/* ===== QUICK INFO BAR ===== */
.quick-info-item h6 {
    color: var(--phf-primary);
    text-transform: uppercase;
    font-size: 0.875rem;
}

.quick-info-item small {
    color: var(--phf-text-body);
}

/* ===== FORMS ===== */
.form-control,
.form-select {
    border-radius: var(--phf-border-radius);
    border: 2px solid var(--phf-gray-300);
    padding: 0.75rem 1rem;
    transition: var(--phf-transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--phf-primary);
    box-shadow: 0 0 0 0.2rem rgba(46, 130, 138, 0.25);
}

.form-check-input:checked {
    background-color: var(--phf-primary);
    border-color: var(--phf-primary);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--phf-primary) !important;
    color: var(--phf-text-white);
}

.footer h5,
.footer h6 {
    color: var(--phf-gold);
}

.footer p,
.footer li,
.footer small,
.footer a {
    color: var(--phf-text-white);
}

.footer a:hover {
    color: var(--phf-gold);
}

.footer-links a {
    display: block;
    padding: 0.25rem 0;
    transition: var(--phf-transition);
}

.footer-links a:hover {
    padding-left: 0.5rem;
    color: var(--phf-gold);
}

/* ===== SCHEDULE PAGE ===== */
.event-card {
    border-left: 4px solid var(--phf-secondary);
    transition: var(--phf-transition);
}

.event-card:hover {
    transform: translateX(5px);
    box-shadow: var(--phf-box-shadow-lg);
}

.time-badge {
    background: var(--phf-primary) !important;
    color: var(--phf-text-white);
}

/* ===== SPONSORS ===== */
.sponsor-logo {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--phf-transition);
}

.sponsor-link:hover .sponsor-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* ===== BACK TO TOP BUTTON ===== */
#backToTop {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--phf-primary);
    color: var(--phf-text-white);
    border: none;
    transition: var(--phf-transition);
}

#backToTop:hover {
    background: var(--phf-primary-dark);
    transform: translateY(-3px);
}

/* ===== ANIMATIONS ===== */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

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

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

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 767.98px) {
    .hero-section {
        min-height: 60vh;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    #countdown-display {
        font-size: 1rem;
    }
    
    .navbar-nav .nav-link.active::after {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 1.75rem;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .navbar, .footer, .hero-section, .countdown-banner,
    .btn, #backToTop {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
    }
    
    .event-card {
        break-inside: avoid;
        border: 1px solid #ddd;
        padding: 1rem;
    }
}
/* ===== SKIP LINK (Accessibility) ===== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--phf-primary);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}