/* =========================================================
   ZENVENTA HEADER
   Premium Corporate Header
   Uses centralized variables from style.css
========================================================= */


/* =========================================================
   TOP BAR
========================================================= */

.zenventa-topbar {
    width: 100%;

    background: var(--zv-primary);

    color: var(--zv-white);

    font-size: 13px;

    line-height: 1.4;
}


.zenventa-topbar-inner {
    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.zenventa-topbar-message {
    color: rgba(255, 255, 255, 0.90);

    font-weight: 500;
}


.zenventa-topbar-contact {
    display: flex;

    align-items: center;

    gap: 24px;
}


.zenventa-topbar-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--zv-white);

    text-decoration: none;

    transition:
        color var(--zv-transition-fast),
        opacity var(--zv-transition-fast);
}


.zenventa-topbar-link:hover {
    color: var(--zv-accent);

    opacity: 1;
}


.zenventa-topbar-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--zv-accent);

    font-size: 13px;
}


/* =========================================================
   MAIN HEADER
========================================================= */

.zenventa-main-header {
    position: sticky;

    top: 0;

    z-index: var(--zv-z-header);

    width: 100%;

    background: var(--zv-white);

    border-bottom: 1px solid var(--zv-border-light);

    transition:
        box-shadow var(--zv-transition),
        transform var(--zv-transition),
        background-color var(--zv-transition);
}


/* =========================================================
   SCROLLED HEADER
========================================================= */

.zenventa-main-header.is-scrolled {
    box-shadow:
        0 8px 30px rgba(6, 22, 49, 0.10);
}


/* =========================================================
   NAVBAR INNER
========================================================= */

.zenventa-navbar-inner {
    min-height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   LOGO
========================================================= */

.zenventa-site-logo {
    flex: 0 0 auto;

    display: flex;

    align-items: center;
}


.zenventa-site-logo a {
    display: inline-flex;

    align-items: center;
}


.zenventa-site-logo img {
    display: block;

    width: auto;

    max-width: 175px;

    max-height: 72px;

    height: auto;
}


/* =========================================================
   FALLBACK TEXT LOGO
========================================================= */

.zenventa-text-logo {
    font-size: 26px;

    font-weight: 800;

    color: var(--zv-primary);

    text-decoration: none;
}


.zenventa-text-logo:hover {
    color: var(--zv-primary);
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.zenventa-desktop-navigation {
    flex: 1 1 auto;

    display: flex;

    justify-content: flex-end;
}


.zenventa-primary-menu {
    margin: 0;

    padding: 0;

    list-style: none;

    display: flex;

    align-items: center;

    gap: 0;
}


.zenventa-primary-menu > li {
    position: relative;

    margin: 0;

    padding: 0;
}


/* =========================================================
   PRIMARY MENU LINKS
========================================================= */

.zenventa-primary-menu > li > a {
    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 88px;

    padding: 0 16px;

    color: var(--zv-primary);

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--zv-transition-fast),
        background-color var(--zv-transition-fast);
}


/* =========================================================
   NAV LINK HOVER UNDERLINE
========================================================= */

.zenventa-primary-menu > li > a::before {
    content: "";
    position: absolute;
    left: 15px;
    right: 16px;
    bottom: 26px;

    width: auto;

    height: 3px;

    border-radius: var(--zv-radius-pill);

    background: var(--zv-accent);

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform var(--zv-transition-fast);
}


.zenventa-primary-menu > li > a:hover::before,
.zenventa-primary-menu > li.current-menu-item > a::before,
.zenventa-primary-menu > li.current_page_item > a::before {
    transform: scaleX(1);
}


.zenventa-primary-menu > li > a:hover,
.zenventa-primary-menu > li.current-menu-item > a,
.zenventa-primary-menu > li.current_page_item > a {
    color: var(--zv-secondary);
}


/* =========================================================
   DROPDOWN ARROW
========================================================= */

.zenventa-primary-menu > li.menu-item-has-children > a::after {
    content: "";

    width: 7px;

    height: 7px;

    margin-top: -4px;

    border-right: 1.5px solid currentColor;

    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    transition:
        transform var(--zv-transition-fast);
}


.zenventa-primary-menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(225deg);

    margin-top: 4px;
}


/* =========================================================
   DESKTOP DROPDOWN
========================================================= */

.zenventa-primary-menu .sub-menu {
    position: absolute;

    top: calc(100% + 1px);

    left: 0;

    z-index: var(--zv-z-dropdown);

    min-width: 270px;

    margin: 0;

    padding: 10px;

    list-style: none;

    background: var(--zv-white);

    border: 1px solid var(--zv-border);

    border-radius: var(--zv-radius-sm);

    box-shadow:
        0 18px 45px rgba(6, 22, 49, 0.13);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity var(--zv-transition-fast),
        visibility var(--zv-transition-fast),
        transform var(--zv-transition-fast);
}


.zenventa-primary-menu > li:hover > .sub-menu {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   DROPDOWN ITEMS
========================================================= */

.zenventa-primary-menu .sub-menu li {
    position: relative;

    margin: 0;

    padding: 0;
}


.zenventa-primary-menu .sub-menu li a {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 14px;

    border-radius: var(--zv-radius-sm);

    color: var(--zv-text);

    font-size: 14px;

    font-weight: 500;

    line-height: 1.45;

    text-decoration: none;

    transition:
        color var(--zv-transition-fast),
        background-color var(--zv-transition-fast),
        padding-left var(--zv-transition-fast);
}


.zenventa-primary-menu .sub-menu li a:hover {
    color: var(--zv-secondary);

    background: var(--zv-light);

    padding-left: 18px;
}


/* =========================================================
   SECOND-LEVEL DROPDOWN
========================================================= */

.zenventa-primary-menu .sub-menu .menu-item-has-children > .sub-menu {
    top: -10px;

    left: calc(100% + 10px);
}


.zenventa-primary-menu
.sub-menu
.menu-item-has-children:hover
> .sub-menu {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   HEADER CTA
========================================================= */

.zenventa-header-actions {
    flex: 0 0 auto;
}


.zenventa-header-cta {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 25px;

    border: 1px solid var(--zv-secondary);

    border-radius: var(--zv-radius-sm);

    background: var(--zv-secondary);

    color: var(--zv-white);

    font-size: 14px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform var(--zv-transition-fast),
        background-color var(--zv-transition-fast),
        border-color var(--zv-transition-fast),
        box-shadow var(--zv-transition-fast);
}


.zenventa-header-cta:hover {
    color: var(--zv-white);

    background: var(--zv-primary);

    border-color: var(--zv-primary);

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(23, 105, 194, 0.20);
}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.zenventa-mobile-toggle {
    display: none;

    width: 46px;

    height: 46px;

    padding: 0;

    border: 1px solid var(--zv-border);

    border-radius: var(--zv-radius-sm);

    background: var(--zv-primary);

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    transition:
        background-color var(--zv-transition-fast),
        border-color var(--zv-transition-fast);
}


.zenventa-mobile-toggle:hover {
    background: var(--zv-secondary);

    border-color: var(--zv-secondary);
}


.zenventa-mobile-toggle span {
    display: block;

    width: 21px;

    height: 2px;

    background: var(--zv-white);

    border-radius: var(--zv-radius-pill);

    transition:
        transform var(--zv-transition-fast),
        opacity var(--zv-transition-fast);
}


/* =========================================================
   MOBILE NAVIGATION OVERLAY
========================================================= */

.zenventa-mobile-navigation {
    position: fixed;

    inset: 0;

    z-index: var(--zv-z-mobile-menu);

    background: rgba(6, 22, 49, 0.65);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity var(--zv-transition),
        visibility var(--zv-transition);
}


.zenventa-mobile-navigation.is-open {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   MOBILE NAVIGATION PANEL
========================================================= */

.zenventa-mobile-navigation-inner {
    width: min(400px, 90%);

    height: 100%;

    margin-left: auto;

    overflow-y: auto;

    background: var(--zv-white);

    box-shadow:
        -15px 0 45px rgba(6, 22, 49, 0.18);

    transform: translateX(100%);

    transition:
        transform var(--zv-transition);
}


.zenventa-mobile-navigation.is-open
.zenventa-mobile-navigation-inner {
    transform: translateX(0);
}


/* =========================================================
   MOBILE MENU HEADER
========================================================= */

.zenventa-mobile-navigation-header {
    min-height: 78px;

    padding: 0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid var(--zv-border);
}


.zenventa-mobile-navigation-title {
    color: var(--zv-primary);

    font-size: 18px;

    font-weight: 700;
}


.zenventa-mobile-close {
    width: 40px;

    height: 40px;

    padding: 0;

    border: 1px solid var(--zv-border);

    border-radius: 50%;

    background: var(--zv-white);

    color: var(--zv-primary);

    font-size: 27px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color var(--zv-transition-fast),
        color var(--zv-transition-fast),
        border-color var(--zv-transition-fast);
}


.zenventa-mobile-close:hover {
    background: var(--zv-primary);

    border-color: var(--zv-primary);

    color: var(--zv-white);
}


/* =========================================================
   MOBILE MENU
========================================================= */

.zenventa-mobile-menu-wrapper {
    padding: 15px 22px 25px;
}


.zenventa-mobile-menu {
    margin: 0;

    padding: 0;

    list-style: none;
}


.zenventa-mobile-menu li {
    position: relative;

    margin: 0;

    padding: 0;
}


.zenventa-mobile-menu li a {
    display: block;

    padding: 14px 0;

    border-bottom: 1px solid var(--zv-border-light);

    color: var(--zv-primary);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color var(--zv-transition-fast),
        padding-left var(--zv-transition-fast);
}


.zenventa-mobile-menu li a:hover,
.zenventa-mobile-menu li.current-menu-item > a,
.zenventa-mobile-menu li.current_page_item > a {
    color: var(--zv-secondary);

    padding-left: 5px;
}


/* =========================================================
   MOBILE SUBMENU
========================================================= */

.zenventa-mobile-menu .sub-menu {
    display: none;

    margin: 0;

    padding: 0 0 0 15px;

    list-style: none;
}


.zenventa-mobile-menu .sub-menu.is-open {
    display: block;
}


.zenventa-mobile-menu .sub-menu li a {
    font-size: 14px;

    font-weight: 500;

    color: var(--zv-text-light);
}


/* =========================================================
   MOBILE SUBMENU BUTTON
========================================================= */

.zenventa-mobile-menu
.menu-item-has-children {
    position: relative;
}


.zenventa-mobile-submenu-toggle {
    position: absolute;

    top: 5px;

    right: 0;

    width: 42px;

    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--zv-primary);

    font-size: 22px;

    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition:
        color var(--zv-transition-fast),
        transform var(--zv-transition-fast);
}


.zenventa-mobile-submenu-toggle:hover {
    color: var(--zv-accent);
}


/* =========================================================
   MOBILE CTA
========================================================= */

.zenventa-mobile-cta {
    padding: 0 22px 30px;
}


.zenventa-header-cta-mobile {
    width: 100%;

    min-height: 50px;

    background: var(--zv-secondary);

    border-color: var(--zv-secondary);
}


.zenventa-header-cta-mobile:hover {
    background: var(--zv-primary);

    border-color: var(--zv-primary);
}


/* =========================================================
   BODY LOCK
========================================================= */

body.zenventa-mobile-menu-open {
    overflow: hidden;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.zenventa-mobile-toggle:focus-visible,
.zenventa-mobile-close:focus-visible,
.zenventa-header-cta:focus-visible,
.zenventa-topbar-link:focus-visible,
.zenventa-primary-menu a:focus-visible,
.zenventa-mobile-menu a:focus-visible,
.zenventa-mobile-submenu-toggle:focus-visible {
    outline: 2px solid var(--zv-accent);

    outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .zenventa-navbar-inner {
        gap: 20px;
    }


    .zenventa-site-logo img {
        max-width: 155px;
    }


    .zenventa-primary-menu > li > a {
        padding-left: 11px;

        padding-right: 11px;

        font-size: 14px;
    }


    .zenventa-primary-menu > li > a::before {
        left: 11px;

        right: 11px;
    }


    .zenventa-header-cta {
        padding-left: 20px;

        padding-right: 20px;
    }

}


/* =========================================================
   SMALL TABLET / MOBILE
========================================================= */

@media (max-width: 991px) {

    .zenventa-topbar-inner {
        min-height: 38px;
    }


    .zenventa-topbar-contact {
        gap: 15px;
    }


    .zenventa-topbar-message {
        font-size: 12px;
    }


    .zenventa-topbar-link {
        font-size: 12px;
    }


    .zenventa-navbar-inner {
        min-height: 76px;
    }


    .zenventa-desktop-navigation,
    .zenventa-header-actions {
        display: none;
    }


    .zenventa-mobile-toggle {
        display: flex;
    }


    .zenventa-site-logo img {
        max-width: 155px;

        max-height: 65px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .zenventa-topbar-inner {
        min-height: 36px;

        justify-content: center;
    }


    .zenventa-topbar-message {
        font-size: 11px;

        text-align: center;
    }


    .zenventa-topbar-contact {
        display: none;
    }


    .zenventa-navbar-inner {
        min-height: 72px;

        gap: 15px;
    }


    .zenventa-site-logo img {
        max-width: 140px;

        max-height: 60px;
    }


    .zenventa-mobile-toggle {
        width: 44px;

        height: 44px;
    }


    .zenventa-mobile-navigation-inner {
        width: min(390px, 92%);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .zenventa-navbar-inner {
        min-height: 68px;
    }


    .zenventa-site-logo img {
        max-width: 125px;

        max-height: 55px;
    }


    .zenventa-mobile-toggle {
        width: 42px;

        height: 42px;
    }


    .zenventa-mobile-navigation-header {
        min-height: 70px;

        padding-left: 18px;

        padding-right: 18px;
    }


    .zenventa-mobile-menu-wrapper {
        padding-left: 18px;

        padding-right: 18px;
    }


    .zenventa-mobile-cta {
        padding-left: 18px;

        padding-right: 18px;
    }

}