/* Trinidad Carnival Theme - PATH TT */
/* Vibrant, colorful design inspired by Trinidad Carnival */

/* Carnival Color Palette */
:root {
    --navbar-height: 170px;
    --hero-padding-top: calc(var(--navbar-height) + 20px);
    --carnival-primary: #FF6B35;      /* Vibrant Orange */
    --carnival-secondary: #FFD23F;    /* Bright Yellow */
    --carnival-accent1: #FF2E63;      /* Hot Pink */
    --carnival-accent2: #08D9D6;      /* Turquoise */
    --carnival-accent3: #FF9F1C;      /* Golden Orange */
    --carnival-accent4: #7209B7;      /* Purple */
    --carnival-accent5: #4ECDC4;      /* Mint Green */
    --carnival-dark: #2C1810;         /* Dark Brown */
    --carnival-light: #FFF8E7;        /* Cream */
    --carnival-white: #FFFFFF;
    --carnival-black: #1A1A1A;
}

/* Carnival Theme Overrides */
body.carnival-theme {
    background: linear-gradient(135deg, var(--carnival-light) 0%, #FFE5D9 100%);
    color: var(--carnival-dark);
}

/* Navigation - Carnival Style */
.carnival-theme .navbar {
    background: linear-gradient(90deg, var(--carnival-accent4) 0%, var(--carnival-accent1) 50%, var(--carnival-accent2) 100%);
    box-shadow: 0 4px 20px rgba(114, 9, 183, 0.3);
}

.carnival-theme .nav-link {
    color: var(--carnival-white);
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.carnival-theme .nav-link:hover,
.carnival-theme .nav-link.active {
    color: var(--carnival-secondary);
    transform: translateY(-2px);
}

.carnival-theme .nav-link::after {
    background: var(--carnival-secondary);
    box-shadow: 0 0 10px var(--carnival-secondary);
}

.carnival-theme .logo-text {
    color: var(--carnival-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 700;
}

/* Logo visibility improvements for carnival theme */
.carnival-theme .logo {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px;
    backdrop-filter: blur(5px);
}

.carnival-theme .nav-logo {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 8px 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Hero Section - Carnival Style */
.carnival-theme .hero {
    background: linear-gradient(135deg, 
        var(--carnival-primary) 0%, 
        var(--carnival-accent1) 25%, 
        var(--carnival-accent4) 50%, 
        var(--carnival-accent2) 75%, 
        var(--carnival-accent3) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--hero-padding-top) 20px 50px;
}

.carnival-theme .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 214, 63, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 46, 99, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(8, 217, 214, 0.3) 0%, transparent 50%);
    animation: carnivalFloat 8s ease-in-out infinite;
}

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

.carnival-theme .hero-text h1 {
    color: #E8E8E8;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    margin-top: 10px;
}

.carnival-theme .hero-text h2 {
    color: var(--carnival-secondary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.carnival-theme .hero-tagline {
    color: var(--carnival-light);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.carnival-theme .hero-description {
    color: var(--carnival-light);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Buttons - Carnival Style */
.carnival-theme .btn-primary {
    background: linear-gradient(45deg, var(--carnival-secondary), var(--carnival-accent3));
    color: var(--carnival-dark);
    box-shadow: 0 6px 20px rgba(255, 210, 63, 0.4);
    border: 2px solid var(--carnival-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.carnival-theme .btn-primary:hover {
    background: linear-gradient(45deg, var(--carnival-accent3), var(--carnival-secondary));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 210, 63, 0.6);
}

.carnival-theme .btn-secondary {
    background: linear-gradient(45deg, var(--carnival-accent2), var(--carnival-accent5));
    color: var(--carnival-white);
    box-shadow: 0 6px 20px rgba(8, 217, 214, 0.4);
    border: 2px solid var(--carnival-accent2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.carnival-theme .btn-secondary:hover {
    background: linear-gradient(45deg, var(--carnival-accent5), var(--carnival-accent2));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(8, 217, 214, 0.6);
}

/* Cultural Icons - Carnival Style */
.carnival-theme .cultural-icons i {
    color: var(--carnival-secondary);
    text-shadow: 0 0 20px var(--carnival-secondary);
    animation: carnivalPulse 2s ease-in-out infinite;
}

.carnival-theme .cultural-icons i:nth-child(1) { animation-delay: 0s; }
.carnival-theme .cultural-icons i:nth-child(2) { animation-delay: 0.5s; }
.carnival-theme .cultural-icons i:nth-child(3) { animation-delay: 1s; }
.carnival-theme .cultural-icons i:nth-child(4) { animation-delay: 1.5s; }

@keyframes carnivalPulse {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        color: var(--carnival-secondary);
    }
    50% { 
        transform: scale(1.2) rotate(10deg);
        color: var(--carnival-accent1);
    }
}

/* Section Headers - Carnival Style */
.carnival-theme .section-header h2 {
    color: var(--carnival-primary);
    text-shadow: 2px 2px 4px rgba(255, 107, 53, 0.3);
    position: relative;
}

.carnival-theme .section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--carnival-secondary), var(--carnival-accent1), var(--carnival-accent2));
    border-radius: 2px;
}

.carnival-theme .section-header p {
    color: var(--carnival-dark);
}

/* About Section - Carnival Style */
.carnival-theme .about {
    background: linear-gradient(135deg, var(--carnival-light) 0%, #FFF0E6 100%);
}

.carnival-theme .about-text h3 {
    color: var(--carnival-accent1);
    text-shadow: 1px 1px 2px rgba(255, 46, 99, 0.2);
}

.carnival-theme .about-text h3:first-child {
    color: var(--carnival-primary);
}

.carnival-theme .about-text li::before {
    color: var(--carnival-accent2);
}

/* Stat Cards - Carnival Style */
.carnival-theme .stat-card {
    background: linear-gradient(135deg, var(--carnival-white) 0%, var(--carnival-light) 100%);
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.15);
    position: relative;
    overflow: hidden;
}

.carnival-theme .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--carnival-primary), var(--carnival-accent1), var(--carnival-accent2));
}

.carnival-theme .stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(255, 107, 53, 0.25);
}

.carnival-theme .stat-card i {
    color: var(--carnival-accent1);
    text-shadow: 0 0 15px rgba(255, 46, 99, 0.3);
}

.carnival-theme .stat-card h4 {
    color: var(--carnival-primary);
}

/* Services Section - Carnival Style */
.carnival-theme .services {
    background: linear-gradient(135deg, #FFF0E6 0%, var(--carnival-light) 100%);
}

.carnival-theme .service-card {
    background: linear-gradient(135deg, var(--carnival-white) 0%, var(--carnival-light) 100%);
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.15);
    position: relative;
    overflow: hidden;
}

.carnival-theme .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--carnival-accent2), var(--carnival-accent5), var(--carnival-accent3));
}

.carnival-theme .service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(255, 107, 53, 0.25);
}

.carnival-theme .service-icon {
    background: linear-gradient(135deg, var(--carnival-accent2), var(--carnival-accent5));
    box-shadow: 0 8px 20px rgba(8, 217, 214, 0.3);
}

.carnival-theme .service-icon i {
    color: var(--carnival-white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.carnival-theme .service-card h3 {
    color: var(--carnival-accent1);
}

/* Membership Section - Carnival Style */
.carnival-theme .membership {
    background: linear-gradient(135deg, var(--carnival-light) 0%, #FFF0E6 100%);
}

.carnival-theme .membership-info h3,
.carnival-theme .membership-benefits h3 {
    color: var(--carnival-primary);
}

.carnival-theme .membership-info li::before {
    color: var(--carnival-accent2);
}

.carnival-theme .benefit-item i {
    color: var(--carnival-accent1);
    text-shadow: 0 0 10px rgba(255, 46, 99, 0.3);
}

.carnival-theme .membership-cta {
    background: linear-gradient(135deg, var(--carnival-primary) 0%, var(--carnival-accent1) 100%);
    border: 3px solid var(--carnival-secondary);
}

.carnival-theme .membership-cta h3 {
    color: var(--carnival-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.carnival-theme .membership-cta p {
    color: var(--carnival-light);
}

/* Contact Section - Carnival Style */
.carnival-theme .contact {
    background: linear-gradient(135deg, #FFF0E6 0%, var(--carnival-light) 100%);
}

.carnival-theme .contact-item {
    background: linear-gradient(135deg, var(--carnival-white) 0%, var(--carnival-light) 100%);
    border: 2px solid var(--carnival-accent2);
    box-shadow: 0 6px 20px rgba(8, 217, 214, 0.15);
}

.carnival-theme .contact-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(8, 217, 214, 0.25);
}

.carnival-theme .contact-icon {
    background: linear-gradient(135deg, var(--carnival-accent2), var(--carnival-accent5));
    box-shadow: 0 6px 15px rgba(8, 217, 214, 0.3);
}

.carnival-theme .contact-icon i {
    color: var(--carnival-white);
}

.carnival-theme .contact-details h4 {
    color: var(--carnival-primary);
}

.carnival-theme .contact-details a {
    color: var(--carnival-accent1);
}

.carnival-theme .contact-details a:hover {
    color: var(--carnival-accent2);
}

/* Form Elements - Carnival Style */
.carnival-theme .form-group input,
.carnival-theme .form-group textarea,
.carnival-theme .form-group select {
    border: 2px solid var(--carnival-accent2);
    background: var(--carnival-white);
}

.carnival-theme .form-group input:focus,
.carnival-theme .form-group textarea:focus,
.carnival-theme .form-group select:focus {
    border-color: var(--carnival-primary);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

/* Footer - Carnival Style */
.carnival-theme .footer {
    background: linear-gradient(135deg, var(--carnival-dark) 0%, #3D2C1A 100%);
    border-top: 4px solid var(--carnival-secondary);
}

.carnival-theme .footer-logo .logo-text {
    color: var(--carnival-secondary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 700;
}

/* Footer logo visibility improvements */
.carnival-theme .footer .logo {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px;
    backdrop-filter: blur(5px);
}

.carnival-theme .footer-logo {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 8px 12px;
    border: 2px solid rgba(255, 214, 63, 0.3);
}

.carnival-theme .footer-section h4 {
    color: var(--carnival-secondary);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.carnival-theme .footer-section a {
    color: var(--carnival-light);
}

.carnival-theme .footer-section a:hover {
    color: var(--carnival-accent2);
}

.carnival-theme .footer-section i {
    color: var(--carnival-accent2);
}

.carnival-theme .admin-link {
    background: linear-gradient(45deg, var(--carnival-accent1), var(--carnival-accent4));
    color: var(--carnival-white);
    box-shadow: 0 4px 15px rgba(255, 46, 99, 0.3);
}

.carnival-theme .admin-link:hover {
    background: linear-gradient(45deg, var(--carnival-accent4), var(--carnival-accent1));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 46, 99, 0.4);
}



/* Responsive Design for Carnival Theme */
@media (max-width: 1024px) {
    .carnival-theme .hero {
        padding: calc(var(--navbar-height) + 15px) 20px 45px;
    }
}

@media (max-width: 768px) {
    .carnival-theme .hero {
        padding: calc(var(--navbar-height) + 10px) 20px 40px;
    }
    
    .carnival-theme .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .carnival-theme .hero-text h2 {
        font-size: 2rem;
    }
    
    .carnival-theme .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Mobile Navigation for Carnival Theme */
    .carnival-theme .nav-menu {
        background: linear-gradient(135deg, var(--carnival-accent4) 0%, var(--carnival-accent1) 50%, var(--carnival-accent2) 100%);
        box-shadow: 0 10px 27px rgba(114, 9, 183, 0.3);
    }
    
    .carnival-theme .nav-menu .nav-link {
        color: var(--carnival-white);
        font-weight: 600;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .carnival-theme .nav-menu .nav-link:hover,
    .carnival-theme .nav-menu .nav-link.active {
        color: var(--carnival-secondary);
        background: rgba(255, 255, 255, 0.1);
        transform: translateX(10px);
    }
    
    .carnival-theme .nav-menu .nav-link::after {
        display: none;
    }
    
    .carnival-theme .hamburger .bar {
        background: var(--carnival-white);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
}

@media (max-width: 480px) {
    .carnival-theme .hero {
        padding: calc(var(--navbar-height) + 5px) 15px 30px;
    }
    
    .carnival-theme .hero-text h1 {
        font-size: 2rem;
        margin-top: 15px;
    }
    
    .carnival-theme .hero-text h2 {
        font-size: 1.5rem;
    }
    
    .carnival-theme .section-header h2 {
        font-size: 1.8rem;
    }
}

/* Carnival Theme Animation Classes */
.carnival-theme .fade-in {
    animation: carnivalFadeIn 0.8s ease-out;
}

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

/* Carnival Theme Loading Animation */
.carnival-theme .loading {
    background: linear-gradient(45deg, 
        var(--carnival-primary), 
        var(--carnival-accent1), 
        var(--carnival-accent2), 
        var(--carnival-accent3), 
        var(--carnival-primary));
    background-size: 400% 400%;
    animation: carnivalGradient 3s ease infinite;
}

/* Additional logo visibility improvements for different backgrounds */
.carnival-theme .hero .logo {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.carnival-theme .about .logo,
.carnival-theme .services .logo,
.carnival-theme .membership .logo,
.carnival-theme .contact .logo {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 107, 53, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Ensure logo text is always readable */
.carnival-theme .logo-text {
    position: relative;
    z-index: 2;
}

.carnival-theme .logo {
    position: relative;
    z-index: 1;
}

@keyframes carnivalGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Additional Carnival Animations */
.carnival-theme .service-card:hover .service-icon {
    animation: carnivalSpin 0.6s ease-in-out;
}

@keyframes carnivalSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

.carnival-theme .stat-card:hover i {
    animation: carnivalBounce 0.8s ease-in-out;
}

@keyframes carnivalBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.carnival-theme .contact-item:hover .contact-icon {
    animation: carnivalWiggle 0.5s ease-in-out;
}

@keyframes carnivalWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Carnival Confetti Effect for Special Elements */
.carnival-theme .hero-buttons .btn:hover::before {
    content: '🎉';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    animation: carnivalConfetti 1s ease-out;
    pointer-events: none;
}

@keyframes carnivalConfetti {
    0% { 
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0);
    }
    50% { 
        opacity: 1;
        transform: translateX(-50%) translateY(-30px) scale(1.2);
    }
    100% { 
        opacity: 0;
        transform: translateX(-50%) translateY(-60px) scale(0.8);
    }
}

/* Carnival Theme Scroll Indicator */
.carnival-theme .hero::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 50px;
    border: 3px solid var(--carnival-secondary);
    border-radius: 15px;
    opacity: 0.7;
}

.carnival-theme .hero::after::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--carnival-secondary);
    border-radius: 50%;
    animation: carnivalScroll 2s infinite;
}

@keyframes carnivalScroll {
    0% { 
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }
    50% { 
        opacity: 1;
        transform: translateX(-50%) translateY(20px);
    }
    100% { 
        opacity: 0;
        transform: translateX(-50%) translateY(30px);
    }
}