/* 
 * NOLA Scooter Elementor Widgets
 * Shared CSS Assets 
 */

:root {
    --nola-navy: #0A192F;
    --nola-ocean: #112D4E;
    --nola-electric: #00C2FF;
    --nola-warm: #FFB400;
    --nola-light: #F8FAFC;
    --nola-font-heading: 'Poppins', sans-serif;
    --nola-font-body: 'Inter', sans-serif;
}

/* Typography Base */
.nola-widget-container {
    font-family: var(--nola-font-body);
    color: var(--nola-navy);
    width: 100%;
}

.nola-reasons-grid {
    display: grid;
}

.nola-widget-container h1, 
.nola-widget-container h2, 
.nola-widget-container h3, 
.nola-widget-container h4, 
.nola-widget-container h5,
.nola-widget-container h6 {
    font-family: var(--nola-font-heading);
}

/* Aesthetic Gradient Text Utilities */
.nola-gradient-text-navy {
    background: linear-gradient(135deg, #0A192F 0%, #00C2FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.nola-gradient-text-electric {
    background: linear-gradient(135deg, #00C2FF 0%, #00E0A4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #00C2FF; /* Fallback */
}

.nola-gradient-text-warm {
    background: linear-gradient(135deg, #FFB400 0%, #FF8C00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #FFB400; /* Fallback */
}

/* Effects */
.nola-card-hover {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nola-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(10, 25, 47, 0.15);
}

.nola-cta-glow {
    box-shadow: 0 0 25px rgba(0, 194, 255, 0.4);
    transition: all 0.3s ease;
}

.nola-cta-glow:hover {
    box-shadow: 0 0 35px rgba(0, 194, 255, 0.7);
}

.nola-accent-line {
    display: inline-block;
    width: 40px;
    height: 4px;
    background: var(--nola-warm);
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 12px;
}

/* =========================================
   HERO SECTION CSS
   ========================================= */

.nola-hero-text-shadow {
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.nola-hero-heading {
    line-height: 1.2;
}

@media (min-width: 768px) {
    .nola-hero-heading {
        line-height: 1.3;
    }
}

.nola-hero-bg-wrapper {
    will-change: transform;
}

.nola-hero-bg-image {
    animation: nolaSlowZoom 20s ease-out forwards;
    filter: contrast(1.1) saturate(1.15) brightness(0.9);
}

@keyframes nolaSlowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* Dynamic Heading Effect */
.nola-dynamic-text-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    overflow: hidden;
}

.nola-dynamic-ghost {
    visibility: hidden;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.3;
}

.nola-dynamic-word {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.6s ease, transform 0.6s ease;
    line-height: 1.3;
}

.nola-dynamic-word.nola-active {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll Indicator */
.nola-scroll-indicator {
    animation: nolaBounce 2s infinite;
}

@keyframes nolaBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Animations without AOS */
.nola-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.nola-fade-up.nola-visible {
    opacity: 1;
    transform: translateY(0);
}

.nola-scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nola-scale-in.nola-visible {
    opacity: 1;
    transform: scale(1);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .nola-hero-bg-image, 
    .nola-scroll-indicator,
    .nola-fade-up,
    .nola-scale-in {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .nola-dynamic-word {
        transition: none !important;
        position: relative !important;
        display: none;
    }
    .nola-dynamic-word:nth-child(2) { 
        display: inline-block; 
        opacity: 1 !important; 
        transform: none !important; 
    }
}

/* FAQ Accordion Transitions */
.nola-faq-content {
    /* Use will-change so the browser promotes this to its own layer,
       preventing parent transition:none overrides from cascading in. */
    will-change: max-height, opacity;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Explicit transition on the element itself – not inherited */
    -webkit-transition: max-height 0.35s ease-out, opacity 0.35s ease-out, padding-top 0.35s ease-out, padding-bottom 0.35s ease-out;
    transition: max-height 0.35s ease-out, opacity 0.35s ease-out, padding-top 0.35s ease-out, padding-bottom 0.35s ease-out;
}

.nola-faq-content.nola-open {
    max-height: 1000px; /* generous cap for long answers */
    opacity: 1;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

/* =========================================
   ELEMENTOR EDITOR FIXES
   ========================================= */
/* Prevents widgets from being invisible (white/blank) inside the Elementor editor.
   Use > direct child combinator so the override does NOT cascade into
   .nola-faq-content children and kill their accordion transitions. */
body.elementor-editor-active .nola-fade-up,
body.elementor-editor-active .nola-scale-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Restore FAQ content transitions in editor so accordion still works */
body.elementor-editor-active .nola-faq-content {
    -webkit-transition: max-height 0.35s ease-out, opacity 0.35s ease-out, padding-top 0.35s ease-out, padding-bottom 0.35s ease-out !important;
    transition: max-height 0.35s ease-out, opacity 0.35s ease-out, padding-top 0.35s ease-out, padding-bottom 0.35s ease-out !important;
}

body.elementor-editor-active .nola-dynamic-word:nth-child(2) {
    opacity: 1 !important;
    transform: translateY(0) !important;
}