/**
 * 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;
	width: 100%;
}

.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: visible;

    /* 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:not(.twb-nav-focus-closed) > .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:not(.twb-nav-focus-closed) > .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:not(.twb-nav-focus-closed) > .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
   ========================================================================== */

/* Line pointers: underline / overline / double line. Keep the normal state
 * hidden and reveal only on hover/current state. The previous implementation
 * created both pseudo-elements for every line style, which made Overline and
 * Double Line permanently visible and left several Animation choices inert. */
.twb-nav-menu.twb-pointer-underline > ul > li > a::before,
.twb-nav-menu.twb-pointer-overline > ul > li > a::before,
.twb-nav-menu.twb-pointer-double-line > ul > li > a::before,
.twb-nav-menu.twb-pointer-double-line > ul > li > a::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--twb-nav-pointer-width, 2px);
    background-color: currentColor;
    opacity: 0;
    transform: none;
    transform-origin: center center;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.twb-nav-menu.twb-pointer-overline > ul > li > a::before,
.twb-nav-menu.twb-pointer-double-line > ul > li > a::before {
    top: 0;
    bottom: auto;
}

/* Animation starting states for all line pointers. */
.twb-nav-menu.twb-animation-slide.twb-pointer-underline > ul > li > a::before,
.twb-nav-menu.twb-animation-slide.twb-pointer-overline > ul > li > a::before,
.twb-nav-menu.twb-animation-slide.twb-pointer-double-line > ul > li > a::before,
.twb-nav-menu.twb-animation-slide.twb-pointer-double-line > ul > li > a::after {
    transform: scaleX(0);
    transform-origin: left center;
}

.twb-nav-menu.twb-animation-grow.twb-pointer-underline > ul > li > a::before,
.twb-nav-menu.twb-animation-grow.twb-pointer-overline > ul > li > a::before,
.twb-nav-menu.twb-animation-grow.twb-pointer-double-line > ul > li > a::before,
.twb-nav-menu.twb-animation-grow.twb-pointer-double-line > ul > li > a::after {
    transform: scaleX(0);
    transform-origin: center center;
}

.twb-nav-menu.twb-animation-drop-in.twb-pointer-underline > ul > li > a::before,
.twb-nav-menu.twb-animation-drop-in.twb-pointer-overline > ul > li > a::before,
.twb-nav-menu.twb-animation-drop-in.twb-pointer-double-line > ul > li > a::before,
.twb-nav-menu.twb-animation-drop-in.twb-pointer-double-line > ul > li > a::after {
    transform: translateY(-5px);
}

.twb-nav-menu.twb-animation-drop-out.twb-pointer-underline > ul > li > a::before,
.twb-nav-menu.twb-animation-drop-out.twb-pointer-overline > ul > li > a::before,
.twb-nav-menu.twb-animation-drop-out.twb-pointer-double-line > ul > li > a::before,
.twb-nav-menu.twb-animation-drop-out.twb-pointer-double-line > ul > li > a::after {
    transform: translateY(5px);
}

.twb-nav-menu.twb-animation-none.twb-pointer-underline > ul > li > a::before,
.twb-nav-menu.twb-animation-none.twb-pointer-overline > ul > li > a::before,
.twb-nav-menu.twb-animation-none.twb-pointer-double-line > ul > li > a::before,
.twb-nav-menu.twb-animation-none.twb-pointer-double-line > ul > li > a::after {
    transition: none;
}

/* Hover/current state. */
.twb-nav-menu.twb-pointer-underline > ul > li:hover > a::before,
.twb-nav-menu.twb-pointer-underline > ul > li.current-menu-item > a::before,
.twb-nav-menu.twb-pointer-underline > ul > li.current-menu-parent > a::before,
.twb-nav-menu.twb-pointer-underline > ul > li.current-menu-ancestor > a::before,
.twb-nav-menu.twb-pointer-overline > ul > li:hover > a::before,
.twb-nav-menu.twb-pointer-overline > ul > li.current-menu-item > a::before,
.twb-nav-menu.twb-pointer-overline > ul > li.current-menu-parent > a::before,
.twb-nav-menu.twb-pointer-overline > ul > li.current-menu-ancestor > a::before,
.twb-nav-menu.twb-pointer-double-line > ul > li:hover > a::before,
.twb-nav-menu.twb-pointer-double-line > ul > li:hover > a::after,
.twb-nav-menu.twb-pointer-double-line > ul > li.current-menu-item > a::before,
.twb-nav-menu.twb-pointer-double-line > ul > li.current-menu-item > a::after,
.twb-nav-menu.twb-pointer-double-line > ul > li.current-menu-parent > a::before,
.twb-nav-menu.twb-pointer-double-line > ul > li.current-menu-parent > a::after,
.twb-nav-menu.twb-pointer-double-line > ul > li.current-menu-ancestor > a::before,
.twb-nav-menu.twb-pointer-double-line > ul > li.current-menu-ancestor > a::after {
    opacity: 1;
    transform: none;
}

/* Framed pointer. */
.twb-nav-menu.twb-pointer-framed > ul > li > a::before {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    height: auto;
    border: var(--twb-nav-pointer-width, 2px) solid currentColor;
    border-radius: inherit;
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.twb-nav-menu.twb-pointer-framed.twb-animation-slide > ul > li > a::before {
    transform: scaleX(0);
}
.twb-nav-menu.twb-pointer-framed.twb-animation-grow > ul > li > a::before {
    transform: scale(0.85);
}
.twb-nav-menu.twb-pointer-framed.twb-animation-drop-in > ul > li > a::before {
    transform: translateY(-5px);
}
.twb-nav-menu.twb-pointer-framed.twb-animation-drop-out > ul > li > a::before {
    transform: translateY(5px);
}
.twb-nav-menu.twb-pointer-framed.twb-animation-none > ul > li > a::before {
    transition: none;
}

.twb-nav-menu.twb-pointer-framed > ul > li:hover > a::before,
.twb-nav-menu.twb-pointer-framed > ul > li.current-menu-item > a::before,
.twb-nav-menu.twb-pointer-framed > ul > li.current-menu-parent > a::before,
.twb-nav-menu.twb-pointer-framed > ul > li.current-menu-ancestor > a::before {
    opacity: 1;
    transform: none;
}

/* Background pointer. The isolated stacking context keeps the animated layer
 * behind the link text without allowing a negative z-index to fall behind the
 * surrounding header/container. */
.twb-nav-menu.twb-pointer-background > ul > li > a {
    isolation: isolate;
    overflow: hidden;
}
.twb-nav-menu.twb-pointer-background > ul > li > a::before {
    content: '';
    position: absolute;
    inset: 0;
    height: auto;
    border-radius: inherit;
    background-color: currentColor;
    opacity: 0;
    transform: none;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.twb-nav-menu.twb-pointer-background > ul > li > a > .twb-menu-text,
.twb-nav-menu.twb-pointer-background > ul > li > a > .twb-submenu-indicator {
    position: relative;
    z-index: 1;
}
.twb-nav-menu.twb-pointer-background.twb-animation-slide > ul > li > a::before {
    transform: translateX(-12%);
}
.twb-nav-menu.twb-pointer-background.twb-animation-grow > ul > li > a::before {
    transform: scale(0.85);
}
.twb-nav-menu.twb-pointer-background.twb-animation-drop-in > ul > li > a::before {
    transform: translateY(-12%);
}
.twb-nav-menu.twb-pointer-background.twb-animation-drop-out > ul > li > a::before {
    transform: translateY(12%);
}
.twb-nav-menu.twb-pointer-background.twb-animation-none > ul > li > a::before {
    transition: none;
}
.twb-nav-menu.twb-pointer-background > ul > li:hover > a::before,
.twb-nav-menu.twb-pointer-background > ul > li.current-menu-item > a::before,
.twb-nav-menu.twb-pointer-background > ul > li.current-menu-parent > a::before,
.twb-nav-menu.twb-pointer-background > ul > li.current-menu-ancestor > a::before {
    opacity: 0.12;
    transform: none;
}

/* Text pointer: the color transition is the Fade behavior; the other exposed
 * Animation choices add a small transform without changing layout. */
.twb-nav-menu.twb-pointer-text > ul > li > a .twb-menu-text {
    transition: transform 0.25s ease;
    transform: none;
}
.twb-nav-menu.twb-pointer-text.twb-animation-none > ul > li > a,
.twb-nav-menu.twb-pointer-text.twb-animation-none > ul > li > a .twb-menu-text {
    transition: none;
}
.twb-nav-menu.twb-pointer-text.twb-animation-slide > ul > li:hover > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-slide > ul > li.current-menu-item > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-slide > ul > li.current-menu-parent > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-slide > ul > li.current-menu-ancestor > a .twb-menu-text {
    transform: translateX(3px);
}
.twb-nav-menu.twb-pointer-text.twb-animation-grow > ul > li:hover > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-grow > ul > li.current-menu-item > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-grow > ul > li.current-menu-parent > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-grow > ul > li.current-menu-ancestor > a .twb-menu-text {
    transform: scale(1.04);
}
.twb-nav-menu.twb-pointer-text.twb-animation-drop-in > ul > li:hover > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-drop-in > ul > li.current-menu-item > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-drop-in > ul > li.current-menu-parent > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-drop-in > ul > li.current-menu-ancestor > a .twb-menu-text {
    transform: translateY(2px);
}
.twb-nav-menu.twb-pointer-text.twb-animation-drop-out > ul > li:hover > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-drop-out > ul > li.current-menu-item > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-drop-out > ul > li.current-menu-parent > a .twb-menu-text,
.twb-nav-menu.twb-pointer-text.twb-animation-drop-out > ul > li.current-menu-ancestor > a .twb-menu-text {
    transform: translateY(-2px);
}

/* ==========================================================================
   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;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: rgba(0,0,0,0.04);
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    min-width: auto;
    transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0.28s ease;
}

.twb-nav-mobile .twb-nav-dropdown.twb-open {
    opacity: 1;
    visibility: visible;
}

.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;
}

/* Indicator state follows the actual icon geometry instead of rotating every
 * SVG by the same 180deg (which made a right-chevron point left). */
.twb-nav-mobile .twb-open-parent > a .twb-submenu-icon--caret {
    transform: rotate(180deg);
}
.twb-nav-mobile .twb-open-parent > a .twb-submenu-icon--chevron {
    transform: rotate(90deg);
}

.twb-submenu-angle {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    font-size: 0;
    color: inherit;
}
.twb-submenu-angle::before,
.twb-submenu-angle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}
.twb-submenu-angle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.twb-nav-mobile .twb-open-parent > a .twb-submenu-angle::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

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

/* Responsive visibility rules are emitted by TWB_Nav_Widget_Loader in the
 * critical head CSS using Elementor's current Site Settings breakpoints. */

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

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

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

/* Keep the editor preview faithful to frontend behavior.
 * Submenus stay absolute/hidden until hover or keyboard focus, exactly as on
 * the public page. Forcing them into normal flow makes the main row jump and
 * scatter when a menu contains children. */