/* ==========================================================================
   Custom Navbar Widget – Base Styles
   ========================================================================== */
.elementor-widget-custom-navbar {
    box-shadow: none !important;
}

/* Wrapper container for navbar layout */
.elementor-widget-custom-navbar .navbar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    gap: 16px;
    margin-left: auto;
    margin-right: auto;
}

/* Generic section wrapper inside the navbar */
.elementor-widget-custom-navbar .navbar-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Logo + Toggle shared wrapper */
.elementor-widget-custom-navbar .logo-toggle-section {
    display: flex;
    /* justify-content: space-between; */ /* <-- comment out or remove this line */
    align-items: center;
    width: auto;
    height: auto;
    margin-bottom: 0px;
}

/* ==========================================================================
   Logo Section
   ========================================================================== */

.elementor-widget-custom-navbar .navbar-logo {
    width: 100%;
    text-align: center;
}

/* Default color for logo (for desktop and mobile closed state) */
.elementor-widget-custom-navbar .navbar-logo a {
    color: var(inherit, var(--e-global-color-white)); /* Fallback to white if no custom control */
}



/* Mobile open */
.elementor-widget-custom-navbar .navbar-logo-link.logo-state--mobile-open {
    color: var(--e-global-color-white);
    transition: none;
}

/* Mobile closed */
.elementor-widget-custom-navbar .navbar-logo-link.logo-state--mobile-closed {
    transition: none;
}

/* Desktop */
.elementor-widget-custom-navbar .navbar-logo-link.logo-state--desktop {
    transition: none;
}



.elementor-widget-custom-navbar .navbar-logo img {
    /*content: url(https://wieldvision.com/wp-content/uploads/2025/04/logo-mark-black-01.svg);*/
    display: block;
    height: auto;
    max-width: 100px;
}

.elementor-widget-custom-navbar .navbar-logo a {
    font-size: 20px;
    font-weight: bold;
    text-transform: lowercase;
    /*color: var(--e-global-color-white);*/
    text-decoration: none;
    display: inline-block;
    margin: 0 auto;
    line-height: 0; /* Remove extra spacing around the image */
}

.elementor-widget-custom-navbar .navbar-logo a:hover {
    color: var(--e-global-color-white);
}

/* ==========================================================================
   Navigation Menu
   ========================================================================== */

.elementor-widget-custom-navbar .navbar-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    min-width: min(600px, 100%);
}

.elementor-widget-custom-navbar .navbar-menu a {
    display: block;
    padding: 0;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--e-global-color-white);
    background-color: transparent;
    transition: color 0s;
    white-space: nowrap;
    line-height: normal;
    position: relative;
}

.elementor-widget-custom-navbar .navbar-menu a:hover {
    color: var(--e-global-color-accent);
    transition: color 0s;
}




/* 
==========================================================================
Desktop Hover Tab Switch Effect with Underline Animation
==========================================================================
*/
@media (min-width: 1024px) {
    
    /* Hide hamburger toggle on desktop */
    .elementor-widget-custom-navbar .navbar-toggle {
        display: none !important;
        width: 0 !important;
    }
    
    .elementor-widget-custom-navbar .navbar-menu a {
        position: relative;
        transition: color 0.01s ease-in-out; /* 0.25s */
    }

/*
    .elementor-widget-custom-navbar .navbar-menu a::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -4px;
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        width: 100%;
        height: 2px !important;
        background-color: var(--e-global-color-accent);
        transition: transform 0.1s ease-in-out; /* 0.3s */
/*
    }
*/

    .elementor-widget-custom-navbar .navbar-menu a:hover::after {
        transform: translateX(-50%) scaleX(1);
        height: 2px !important;
    }

    /* Optional: smoother switching for underline visibility across tabs */
    .elementor-widget-custom-navbar .navbar-menu a:not(:hover)::after {
        transform: translateX(-50%) scaleX(0);
        height: 2px !important;
    }
}




/* 
=================================================================================
Responsive (Mobile) Styles
=================================================================================
*/
@media (max-width: 1024px) {

    /* Main navbar container */
    .elementor-widget-custom-navbar .navbar-container {
        position: fixed; /* Fixes the navbar to the top */
        top: 0;
        left: 0;
        z-index: 10000; /* Ensure it stays on top */
        width: 100%;
        padding: 24px 20px;
        flex-direction: column; /* Stack the navbar items vertically */
        align-items: center; /* Center align items */
        justify-content: space-between;
        background-color: transparent; /* Initially transparent background */
        transition: background-color 0s ease; /* Smooth transition for background color */ /* 0.3s  ease*/
    }

    /* Active navbar container when opened */
    .elementor-widget-custom-navbar .navbar-container.active {
        background-color: var(--e-global-color-primary) !important; /* Change background color */
        height: 100vh;
        justify-content: flex-start; /* Vertically centers the content */
    }


    /* ==========================================================================
       Navbar Section Styles 
       */

    .elementor-widget-custom-navbar .navbar-section {
        width: 100%; /* Full width for the section */
        justify-content: center; /* Center content inside */
        margin-bottom: 0; /* Remove bottom margin */
        height: 100%;
    }


    /* ==========================================================================
       Logo and Toggle Section Styles 
       */

    /* Mobile version of logo and toggle button section */
    .elementor-widget-custom-navbar .logo-toggle-section {
        flex-direction: row; /* Align logo and toggle button in a row */
        justify-content: space-between; /* Space out the elements */
        align-items: center; /* Vertically center the items */
        margin-bottom: 0; /* Remove bottom margin */
        width: 100%; /* Full width */
        height: auto;
    }

    .elementor-widget-custom-navbar .logo-toggle-section.active {
        position: absolute; /* Position the logo-toggle section at the top */
        top: 40px; /* Adjust the distance from the top as needed */
        z-index: 10100; /* Ensure it's on top of the menu */
    }


    /* ==========================================================================
       Logo Styles
       */

    /* Navbar logo adjustments */
    .elementor-widget-custom-navbar .navbar-logo {
        justify-content: flex-start; /* Align logo to the left */
        text-align: left; /* Left align the text */
    }

    .elementor-widget-custom-navbar .navbar-logo a {
        margin-left: 0; /* Remove margin on the left of the logo */
    }
    
    /*
    .elementor-widget-custom-navbar .navbar-container.active .navbar-logo img {
        content: url(https://wieldvision.com/wp-content/uploads/2025/04/logo-mark-white-01@4x.png);
    }
    */    

    /* ==========================================================================
       Navbar Menu Styles
       */

    /* Mobile menu (hidden by default) */
    .elementor-widget-custom-navbar .navbar-menu {
        flex-direction: column; /* Stack menu items vertically */
        align-items: center; /* Center the items */
        gap: 0; /* Add space between items */
        width: 100%; /* Full width */
        height: 0; /* Initially, no height (hidden) */
        overflow: hidden; /* Hide content when collapsed */
        padding: 0;
        min-width: 0; /* Prevent overflow */
        opacity: 0; /* Make menu invisible */
        transform: translateY(-20px); /* Position the menu above the screen */
        background-color: transparent; /* var(--e-global-color-primary); /* Set background color */
        transition: opacity 0.3s ease, transform 0.3s ease, height 0.5s ease-in-out; /* Smooth transition for open/close animation *//*-------*//* opacity 0.3s ease, transform 0.3s ease, height 0.3s ease-in-out */
    }

    /* Active state for the menu (when open) */
    .elementor-widget-custom-navbar .navbar-menu.active {
        display: flex; /* Show menu as a flex container */
        opacity: 1; /* Make menu visible */
        transform: translateY(0); /* Position the menu in place */
        height: auto; /* Allow menu height to expand */
    }
    
    .elementor-widget-custom-navbar .navbar-menu-section .navbar-section.active{
        height: 100%;
    }


    /* ==========================================================================
       Navbar Menu Link Styles
       */

    /* Menu item styling */
    .elementor-widget-custom-navbar .navbar-menu a {
        padding: 24px 0; /* Add padding around menu items */
        width: 100%; /* Full width for each item */
        text-align: center; /* Center text inside items */
    }


    /* ==========================================================================
       Navbar Menu Link Divider Styles
       */

    /* Divider between each menu item */
    .elementor-widget-custom-navbar .navbar-menu a:not(:last-child)::after {
        content: ''; /* Create an empty divider */
        position: absolute; /* Position it absolutely */
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px; /* Set divider height */
        background-color: var(--e-global-color-secondary); /* Set divider color */
    }
    

    /* ========================================================================== 
       Hamburger Toggle Button 
    */
    
    /* Show hamburger toggle on mobile */
    .elementor-widget-custom-navbar .navbar-toggle {
        display: block !important;
    }

    .elementor-widget-custom-navbar .navbar-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: auto;
        cursor: pointer;
        z-index: 10001;
    }
    
    .elementor-widget-custom-navbar .navbar-toggle span {
        display: block;
        width: 30px;
        height: 4px;
        gap: 4px;
        /*margin: 2px auto;*/
        background-color: var(--toggle-bar-color, var(--e-global-color-primary)); /* Default color if not set */
        transition: all 0.3s ease-in-out;  /* 0.3s */
    }
    
    .elementor-widget-custom-navbar .navbar-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .elementor-widget-custom-navbar .navbar-toggle.active span:nth-child(2) {
        width: 0;
        opacity: 0;
        transition-delay: opacity 0s; /* 0.15s */
    }
    
    .elementor-widget-custom-navbar .navbar-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
}