/* ==========================================================================
   ClanyEco HTML Template - Custom Enhancements & WordPress Decoupling
   ========================================================================== */

/* 1. Global Typography and Colors */
:root {
    --e-global-color-vamtam_primary_font_color: #2d3748;
    --e-global-color-vamtam_h1_color: #111827;
    --e-global-color-vamtam_h2_color: #111827;
    --e-global-color-vamtam_h3_color: #111827;
    --e-global-color-vamtam_h4_color: #111827;
    --e-global-color-vamtam_h5_color: #111827;
    --e-global-color-vamtam_h6_color: #111827;
    --vamtam-primary-font-color: #2d3748;
}

body {
    color: #2d3748;
}

p, .elementor-text-editor, .elementor-widget-text-editor p {
    color: #4b5563;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    color: #111827;
}

/* 2. Animations and Element Visibility */
.elementor-invisible {
    visibility: visible !important;
}

/* 3. Fix text wrapping on icon lists and badges */
.elementor-icon-list-item,
.elementor-icon-list-text {
    white-space: nowrap !important;
}

.elementor-icon-list--layout-inline .elementor-icon-list-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.elementor-icon-list--layout-inline .elementor-icon-list-item {
    display: inline-flex !important;
    align-items: center !important;
}

/* 4. Smooth scrolling for internal anchor links */
html {
    scroll-behavior: smooth;
}

/* 5. Details/Summary FAQ animation */
details.e-n-accordion-item summary {
    cursor: pointer;
    user-select: none;
    transition: background 0.3s ease;
}

details.e-n-accordion-item[open] summary .e-opened {
    display: inline-block !important;
}

details.e-n-accordion-item[open] summary .e-closed {
    display: none !important;
}

details.e-n-accordion-item:not([open]) summary .e-opened {
    display: none !important;
}

details.e-n-accordion-item:not([open]) summary .e-closed {
    display: inline-block !important;
}

/* 6. Responsive mobile menu */
@media (max-width: 1024px) {
    .elementor-nav-menu--dropdown {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
}

/* 7. Floating Variant Switcher */
#clanyeco-variant-switcher {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#clanyeco-variant-switcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.2) !important;
}

/* 8. Hero Icon List fixes */
.elementor-element-59c144f {
    width: 100% !important;
    max-width: 100% !important;
    --width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.elementor-element-59c144f .elementor-widget-icon-list {
    width: auto !important;
    flex: none !important;
}

.elementor-icon-list-item,
.elementor-icon-list-text {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 9. Floating Leaf Animations */
@keyframes floatLeaf {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-6px) rotate(4deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes swayLeafSlow {
    0% {
        transform: rotate(-3deg) translateY(0px);
    }
    50% {
        transform: rotate(4deg) translateY(-8px);
    }
    100% {
        transform: rotate(-3deg) translateY(0px);
    }
}

.floating-leaf {
    animation: floatLeaf 4s ease-in-out infinite;
    will-change: transform;
}

/* 10. Swiper pagination bullets custom styling */
.swiper-pagination-bullet {
    width: 9px !important;
    height: 9px !important;
    transition: all 0.25s ease !important;
    background: #9CA3AF !important;
    opacity: 0.5 !important;
}

.swiper-pagination-bullet-active {
    width: 26px !important;
    border-radius: 6px !important;
    background: #111827 !important;
    opacity: 1 !important;
}