/**
 * TWB Nav Menu Widget — Frontend Styles
 * Tương thích Elementor Free, không cần Pro.
 */

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */

.twb-nav-wrap *,
.twb-nav-wrap *::before,
.twb-nav-wrap *::after {
    box-sizing: border-box;
}

.twb-nav-wrap {
    position: relative;
}

.twb-nav-menu ul,
.twb-nav-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.twb-nav-menu,
.twb-nav-mobile {
    position: relative;
}

/* ==========================================================================
   2. MENU LINK BASE
   ========================================================================== */

.twb-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    position: relative;
    transition: color 0.25s ease, background-color 0.25s ease;
    white-space: nowrap;
}

.twb-menu-text {
    display: inline-block;
}

.twb-submenu-indicator {
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
    line-height: 1;
    font-size: 0.75em;
}

.twb-submenu-indicator svg {
    display: block;
    transition: transform 0.25s ease;
}

/* ==========================================================================
   3. HORIZONTAL LAYOUT
   ========================================================================== */

.twb-nav-menu--layout-horizontal > ul.twb-menu-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.twb-nav-menu--layout-horizontal > ul > li {
    position: relative;
}

/* ==========================================================================
   4. VERTICAL LAYOUT
   ========================================================================== */

.twb-nav-menu--layout-vertical > ul.twb-menu-list {
    display: flex;
    flex-direction: column;
}

.twb-nav-menu--layout-vertical > ul > li {
    position: relative;
}

.twb-nav-menu--layout-vertical .twb-menu-link {
    display: flex;
    justify-content: space-between;
}

.twb-nav-menu--layout-vertical .twb-submenu-indicator svg {
    transform: rotate(-90deg);
}

/* ==========================================================================
   5. DROPDOWN
   ========================================================================== */

.twb-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 200px;
    background-color: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    border-radius: 4px;
    overflow: hidden;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity    0.22s ease,
        visibility 0.22s ease,
        transform  0.22s ease;
}

/* Nested dropdowns: right-side */
.twb-nav-dropdown .twb-nav-dropdown {
    top: 0;
    left: 100%;
    transform: translateX(8px) translateY(0);
}

/* Show on hover (desktop) */
.twb-nav-menu .menu-item-has-children:hover > .twb-nav-dropdown,
.twb-nav-menu .menu-item-has-children:focus-within > .twb-nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.twb-nav-dropdown .menu-item-has-children:hover > .twb-nav-dropdown,
.twb-nav-dropdown .menu-item-has-children:focus-within > .twb-nav-dropdown {
    transform: translateX(0) translateY(0);
}

.twb-nav-dropdown li {
    display: block;
}

.twb-nav-dropdown li > a.twb-menu-link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap;
}

/* Vertical dropdown: appear to the right */
.twb-nav-menu--layout-vertical > ul > li > .twb-nav-dropdown {
    top: 0;
    left: 100%;
    transform: translateX(8px) translateY(0);
}

.twb-nav-menu--layout-vertical > ul > li:hover > .twb-nav-dropdown,
.twb-nav-menu--layout-vertical > ul > li:focus-within > .twb-nav-dropdown {
    transform: translateX(0) translateY(0);
}

/* Always dropdown layout */
.twb-nav-menu--layout-dropdown > ul > li > .twb-nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border-radius: 0;
}

/* ==========================================================================
   6. POINTER EFFECTS
   ========================================================================== */

/* Shared line pseudo-element */
[class*="twb-pointer-"]:not(.twb-pointer-none):not(.twb-pointer-background):not(.twb-pointer-text)
.twb-nav-menu > ul > li > a::before,
[class*="twb-pointer-"]:not(.twb-pointer-none):not(.twb-pointer-background):not(.twb-pointer-text)
.twb-nav-menu > ul > li > a::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: currentColor;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- Underline --- */
.twb-pointer-underline .twb-nav-menu > ul > li > a::before {
    transform: scaleX(0);
    transform-origin: left center;
}

.twb-pointer-underline.twb-animation-fade .twb-nav-menu > ul > li > a::before {
    transform: scaleX(1);
    opacity: 0;
}
.twb-pointer-underline.twb-animation-fade .twb-nav-menu > ul > li:hover > a::before,
.twb-pointer-underline.twb-animation-fade .twb-nav-menu > ul > li.current-menu-item > a::before,
.twb-pointer-underline.twb-animation-fade .twb-nav-menu > ul > li.current-menu-ancestor > a::before {
    opacity: 1;
}

.twb-pointer-underline.twb-animation-slide .twb-nav-menu > ul > li > a::before {
    transform: scaleX(0);
    transform-origin: left center;
}
.twb-pointer-underline.twb-animation-slide .twb-nav-menu > ul > li:hover > a::before,
.twb-pointer-underline.twb-animation-slide .twb-nav-menu > ul > li.current-menu-item > a::before,
.twb-pointer-underline.twb-animation-slide .twb-nav-menu > ul > li.current-menu-ancestor > a::before {
    transform: scaleX(1);
}

.twb-pointer-underline.twb-animation-grow .twb-nav-menu > ul > li > a::before {
    transform: scaleX(0);
    transform-origin: center center;
}
.twb-pointer-underline.twb-animation-grow .twb-nav-menu > ul > li:hover > a::before,
.twb-pointer-underline.twb-animation-grow .twb-nav-menu > ul > li.current-menu-item > a::before {
    transform: scaleX(1);
}

/* --- Overline --- */
.twb-pointer-overline .twb-nav-menu > ul > li > a::before {
    bottom: auto;
    top: 0;
}

/* --- Double Line --- */
.twb-pointer-double-line .twb-nav-menu > ul > li > a::after {
    bottom: auto;
    top: 0;
}

/* --- Framed --- */
.twb-pointer-framed .twb-nav-menu > ul > li > a {
    position: relative;
}
.twb-pointer-framed .twb-nav-menu > ul > li > a::before,
.twb-pointer-framed .twb-nav-menu > ul > li > a::after {
    content: '';
    position: absolute;
    background: transparent;
    border: 2px solid transparent;
    top: 2px; right: 2px; bottom: 2px; left: 2px;
    border-radius: inherit;
    transition: border-color 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    height: auto;
}

.twb-pointer-framed.twb-animation-grow .twb-nav-menu > ul > li > a::before {
    transform: scale(0.8);
}
.twb-pointer-framed.twb-animation-grow .twb-nav-menu > ul > li:hover > a::before {
    transform: scale(1);
    border-color: currentColor;
}

.twb-pointer-framed.twb-animation-fade .twb-nav-menu > ul > li > a::before {
    opacity: 0;
    border-color: currentColor;
}
.twb-pointer-framed.twb-animation-fade .twb-nav-menu > ul > li:hover > a::before {
    opacity: 1;
}

/* --- Background --- */
.twb-pointer-background .twb-nav-menu > ul > li > a::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.25s ease;
    z-index: -1;
    height: auto;
}

.twb-pointer-background .twb-nav-menu > ul > li:hover > a::before,
.twb-pointer-background .twb-nav-menu > ul > li.current-menu-item > a::before {
    opacity: 0.1;
}

/* --- Text (color change only) --- */
/* Handled via color controls in the widget */

/* ==========================================================================
   7. TOGGLE BUTTON
   ========================================================================== */

.twb-nav-toggle-wrap {
    display: none; /* Hidden on desktop */
}

.twb-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    font-size: 22px;
    line-height: 1;
}

.twb-nav-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Hamburger icon */
.twb-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1em;
    height: 0.75em;
    gap: 0;
}

.twb-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

/* Toggle active state — animate to X */
.twb-nav-toggle.twb-active .twb-hamburger span:nth-child(1) {
    transform: translateY(calc(0.375em)) rotate(45deg);
}
.twb-nav-toggle.twb-active .twb-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.twb-nav-toggle.twb-active .twb-hamburger span:nth-child(3) {
    transform: translateY(calc(-0.375em)) rotate(-45deg);
}

/* ==========================================================================
   8. MOBILE MENU
   ========================================================================== */

.twb-nav-mobile {
    display: none;
    overflow: hidden;
    transition: max-height 0.35s ease;
    max-height: 0;
}

.twb-nav-mobile.twb-open {
    display: block;
    max-height: 1000px; /* JS will set exact height for smooth animation */
}

.twb-nav-mobile ul {
    display: flex;
    flex-direction: column;
}

.twb-nav-mobile li {
    border-bottom: 1px solid #ddd;
}

.twb-nav-mobile li:last-child {
    border-bottom: none;
}

.twb-nav-mobile li > a.twb-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
}

/* Sub-items indent */
.twb-nav-mobile .twb-nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: rgba(0,0,0,0.04);
    display: none;
    min-width: auto;
}

.twb-nav-mobile .twb-nav-dropdown.twb-open {
    display: block;
}

.twb-nav-mobile .twb-nav-dropdown li > a.twb-menu-link {
    padding-left: 36px;
}

.twb-nav-mobile .twb-nav-dropdown .twb-nav-dropdown li > a.twb-menu-link {
    padding-left: 52px;
}

/* Rotate indicator arrow when sub-menu open */
.twb-nav-mobile .twb-open-parent > a .twb-submenu-indicator svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    .twb-nav-breakpoint-tablet .twb-nav-toggle-wrap {
        display: block;
    }
    .twb-nav-breakpoint-tablet > .twb-nav-menu {
        display: none;
    }
    .twb-nav-breakpoint-tablet.twb-nav-open > .twb-nav-menu {
        display: block;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .twb-nav-breakpoint-mobile .twb-nav-toggle-wrap {
        display: block;
    }
    .twb-nav-breakpoint-mobile > .twb-nav-menu {
        display: none;
    }
    .twb-nav-breakpoint-mobile.twb-nav-open > .twb-nav-menu {
        display: block;
    }
}

/* ==========================================================================
   10. ACCESSIBILITY — FOCUS VISIBLE
   ========================================================================== */

.twb-menu-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   11. ELEMENTOR EDITOR HELPERS
   ========================================================================== */

.elementor-editor-active .twb-nav-dropdown {
    /* Visible in editor so designer can style them */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    position: static;
    box-shadow: none;
}