/**
 * 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-submenu-indicator-size: 10px;
    --twb-submenu-indicator-gap: 4px;
    --twb-submenu-indicator-duration: 250ms;
    --twb-mobile-indicator-hit-size: 44px;
    --twb-mobile-motion-duration: 340ms;
    --twb-mobile-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --twb-mobile-item-duration: 460ms;
    --twb-mobile-item-stagger: 42ms;
    --twb-mobile-panel-width: min(88vw, 420px);
    --twb-mobile-submenu-indent: 16px;
}

.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: var(--twb-submenu-indicator-gap);
    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 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--twb-submenu-indicator-color, currentColor);
    fill: currentColor;
    transition:
        color var(--twb-submenu-indicator-duration) ease,
        transform var(--twb-submenu-indicator-duration) ease;
    line-height: 1;
    font-size: 0.75em;
}

.twb-submenu-indicator svg {
    display: block;
    width: var(--twb-submenu-indicator-size);
    height: var(--twb-submenu-indicator-size);
    fill: currentColor;
    transition: transform var(--twb-submenu-indicator-duration) ease;
}

.twb-menu-link:hover > .twb-submenu-indicator,
.twb-open-parent > .twb-menu-link > .twb-submenu-indicator,
.twb-showcase-open > .twb-menu-link > .twb-submenu-indicator {
    color: var(
        --twb-submenu-indicator-active-color,
        var(--twb-submenu-indicator-color, currentColor)
    );
}

/* ==========================================================================
   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);
}

.twb-nav-menu--layout-vertical > ul > .twb-showcase-parent > .twb-showcase-shell {
    top: 0;
    left: var(--twb-showcase-left, 100%);
}

/* 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;
}

/* ==========================================================================
   5B. SHOWCASE SUBMENU — NATIVE SCROLL/SNAP
   ========================================================================== */

/* Showcase only changes selected top-level branches. The WordPress menu tree,
 * traditional dropdowns and the proven 4.9.9 mobile accordion remain owners
 * of navigation state. No Swiper/carousel library is used here. */
.twb-showcase-shell {
    --twb-showcase-columns: 5;
    --twb-showcase-gap: 0px;
    --twb-showcase-card-basis: 20%;
    --twb-showcase-card-ratio: 16 / 9;
    --twb-showcase-image-position: center center;
}

.twb-showcase-parent > .twb-showcase-shell {
    position: absolute;
    top: 100%;
    left: var(--twb-showcase-left, 0px);
    z-index: 9999;
    width: var(--twb-showcase-width, 100vw);
    margin: 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.twb-nav-menu > ul > .twb-showcase-parent.twb-showcase-open > .twb-showcase-shell {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* The closed desktop shell owns the state of its entire hit-test subtree.
 * A descendant must never make an opacity:0 Showcase card hoverable/clickable;
 * otherwise the invisible card also activates the top-level li:hover state. */
.twb-nav-wrap[data-twb-nav-init] .twb-nav-menu > ul > .twb-showcase-parent:not(.twb-showcase-open) > .twb-showcase-shell,
.twb-nav-wrap[data-twb-nav-init] .twb-nav-menu > ul > .twb-showcase-parent:not(.twb-showcase-open) > .twb-showcase-shell * {
    visibility: hidden;
    pointer-events: none;
}

/* While JS is deferred, only explicit keyboard input may reveal Showcase.
 * Passive/restored focus and CSS :hover do not own OPEN. */
html.twb-keyboard-input .twb-nav-wrap:not([data-twb-nav-init]) .twb-nav-menu > ul > .twb-showcase-parent:focus-within > .twb-showcase-shell {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* A real no-script browser still gets the visible-trigger hover/focus fallback.
 * `scripting:none` keeps this path out of LiteSpeed defer/delay runtime, where
 * layout shifts under a stationary cursor must never open the panel. */
@media (scripting: none) {
    .twb-nav-menu > ul > .twb-showcase-parent:focus-within > .twb-showcase-shell {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    @supports selector(.twb-showcase-parent:has(> .twb-menu-link > .twb-menu-text:hover)) {
        .twb-nav-menu > ul > .twb-showcase-parent:has(> .twb-menu-link > .twb-menu-text:hover) > .twb-showcase-shell,
        .twb-nav-menu > ul > .twb-showcase-parent:has(> .twb-menu-link > .twb-submenu-indicator:hover) > .twb-showcase-shell {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }
    }
}

.twb-showcase-viewport {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.twb-showcase-viewport::-webkit-scrollbar {
    display: none;
}

.twb-showcase-shell .twb-nav-showcase {
    position: relative;
    inset: auto;
    z-index: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    gap: var(--twb-showcase-gap, 0px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;
    pointer-events: inherit;
    transform: none;
    overflow: visible;
}

.twb-nav-showcase > .twb-showcase-card {
    position: relative;
    display: flex;
    flex: 0 0 var(--twb-showcase-card-basis, 20%);
    align-items: stretch;
    min-width: 0;
    margin: 0;
    border: 0;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.twb-nav-showcase > .twb-showcase-card > .twb-showcase-link {
    position: relative;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 120px;
    aspect-ratio: var(--twb-showcase-card-ratio, 16 / 9);
    padding: 0;
    overflow: hidden;
    white-space: normal;
    color: #fff;
    background: #252a31;
    isolation: isolate;
}

.twb-showcase-media,
.twb-showcase-link::after,
.twb-showcase-content {
    position: absolute;
    inset: 0;
}

.twb-showcase-media {
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #2c3440, #505b69);
}

.twb-showcase-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--twb-showcase-image-position, center center);
    border: 0;
    box-shadow: none;
    transform: scale(1);
    transition: transform 0.3s ease;
}

/* Elementor ships `.elementor img { height:auto; max-width:100%; }`. Keep the
 * higher-specificity integration rule deliberately narrow: only the two
 * properties that need to beat Elementor live here. Design controls and hover
 * effects stay on normal-specificity Showcase rules and remain overridable. */
.twb-nav-wrap .twb-showcase-media > img.twb-showcase-image,
.elementor .twb-nav-wrap .twb-showcase-media > img.twb-showcase-image {
    height: 100%;
    max-width: none;
}

.twb-showcase-link::after {
    content: '';
    z-index: 1;
    background: rgba(0,0,0,0.24);
    pointer-events: none;
}

.twb-showcase-content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 5px;
    padding: 16px;
    pointer-events: none;
}

.twb-showcase-content .twb-menu-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
}

.twb-showcase-description {
    display: block;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.9;
}

.twb-showcase-link:hover .twb-showcase-image,
.twb-showcase-link:focus-visible .twb-showcase-image {
    transform: scale(1.035);
}

.twb-showcase-nav {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #222;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.14);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.twb-showcase-prev { left: 10px; }
.twb-showcase-next { right: 10px; }

.twb-showcase-nav svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
}

.twb-showcase-nav:hover {
    transform: translateY(-50%) scale(1.04);
}

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

.twb-showcase-nav.twb-showcase-nav-hidden {
    display: none;
}

.twb-showcase-nav[aria-disabled="true"] {
    opacity: 0.34;
}

.twb-nav-showcase-overlay {
    position: fixed;
    top: var(--twb-showcase-overlay-top, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9970;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.twb-nav-showcase-overlay.twb-showcase-overlay-open {
    opacity: var(--twb-showcase-overlay-opacity, 0.45);
    visibility: visible;
    pointer-events: auto;
}

.twb-nav-wrap.twb-showcase-layer-active {
    z-index: 9980;
}

/* Mobile/tablet keep 4.9.9 accordion ownership. The shell itself is the open
 * panel; its horizontal viewport is native scroll-snap, so no transform-based
 * slider can fight the accordion's height calculations. */
.twb-nav-mobile .twb-showcase-parent > .twb-showcase-shell {
    position: relative;
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    margin: 0;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transform: translateY(-6px);
    background: transparent;
    /* The mobile shell is only a zero-to-one-row animation container. Panel
     * spacing belongs to its viewport after opening, never to the closed row. */
    padding: 0;
    transition:
        grid-template-rows 300ms var(--twb-mobile-motion-ease),
        opacity 220ms ease,
        transform 300ms var(--twb-mobile-motion-ease);
}

.twb-nav-mobile .twb-showcase-shell.twb-open {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.twb-nav-mobile .twb-showcase-viewport {
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.twb-nav-mobile .twb-showcase-shell:not(.twb-open) .twb-showcase-viewport {
    margin: 0;
    padding: 0;
}

.twb-nav-mobile .twb-showcase-shell.twb-open .twb-showcase-viewport {
    overflow-x: auto;
    overflow-y: hidden;
}

.twb-nav-mobile .twb-nav-dropdown.twb-nav-showcase {
    display: flex;
    flex-direction: row;
    max-height: none;
    min-width: 100%;
    background: transparent;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transition: none;
}

.twb-nav-mobile .twb-showcase-card > .twb-showcase-link {
    display: block;
    padding: 0;
}

.twb-nav-mobile .twb-showcase-card {
    border-bottom: 0;
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition:
        opacity var(--twb-mobile-item-duration) ease,
        transform var(--twb-mobile-item-duration) var(--twb-mobile-motion-ease);
}

.twb-nav-mobile .twb-showcase-shell.twb-open .twb-showcase-card {
    opacity: 1;
    transform: none;
}

.twb-nav-mobile .twb-showcase-shell.twb-open .twb-showcase-card:nth-child(2) { transition-delay: var(--twb-mobile-item-stagger); }
.twb-nav-mobile .twb-showcase-shell.twb-open .twb-showcase-card:nth-child(3) { transition-delay: calc(var(--twb-mobile-item-stagger) + var(--twb-mobile-item-stagger)); }
.twb-nav-mobile .twb-showcase-shell.twb-open .twb-showcase-card:nth-child(4) { transition-delay: calc(var(--twb-mobile-item-stagger) + var(--twb-mobile-item-stagger) + var(--twb-mobile-item-stagger)); }
.twb-nav-mobile .twb-showcase-shell.twb-open .twb-showcase-card:nth-child(n+5) { transition-delay: calc(var(--twb-mobile-item-stagger) + var(--twb-mobile-item-stagger) + var(--twb-mobile-item-stagger) + var(--twb-mobile-item-stagger)); }

@media (max-width: 1024px) {
    .twb-nav-showcase > .twb-showcase-card { flex-basis: var(--twb-showcase-card-basis, 50%); }
}

@media (max-width: 767px) {
    .twb-nav-showcase > .twb-showcase-card { flex-basis: var(--twb-showcase-card-basis, 100%); }
}

@media (prefers-reduced-motion: reduce) {
    .twb-showcase-parent > .twb-showcase-shell,
    .twb-showcase-image,
    .twb-showcase-nav,
    .twb-nav-showcase-overlay,
    .twb-showcase-viewport {
        transition: none;
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   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,
.twb-nav-floating-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,
.twb-nav-floating-toggle:focus,
.twb-menu-link:focus {
    outline: 0;
}

.twb-nav-toggle:focus-visible,
.twb-nav-floating-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),
.twb-nav-floating-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),
.twb-nav-floating-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),
.twb-nav-floating-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;
    min-height: var(--twb-mobile-indicator-hit-size);
}

.twb-nav-mobile .twb-submenu-indicator {
    align-self: stretch;
    min-width: var(--twb-mobile-indicator-hit-size);
    border-radius: var(--twb-mobile-indicator-radius, 8px);
    background-color: var(--twb-mobile-indicator-background, transparent);
}

.twb-nav-mobile .twb-submenu-indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--twb-mobile-indicator-hit-size);
    height: var(--twb-mobile-indicator-hit-size);
    transform: translate(-50%, -50%);
}

.twb-nav-mobile .twb-open-parent > a .twb-submenu-indicator {
    background-color: var(
        --twb-mobile-indicator-active-background,
        var(--twb-mobile-indicator-background, transparent)
    );
}

/* Sub-items indent */
.twb-nav-mobile .twb-nav-dropdown {
    position: static;
    pointer-events: auto;
    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;
    transform: translateY(-5px);
    transition:
        max-height 0.3s var(--twb-mobile-motion-ease),
        opacity 0.22s ease,
        visibility 0.3s ease,
        transform 0.3s var(--twb-mobile-motion-ease);
}

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

.twb-nav-mobile .twb-nav-dropdown li > a.twb-menu-link {
    padding-left: calc(20px + var(--twb-mobile-submenu-indent));
}

.twb-nav-mobile .twb-nav-dropdown .twb-nav-dropdown li > a.twb-menu-link {
    padding-left: calc(20px + (var(--twb-mobile-submenu-indent) * 2));
}

/* 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: var(--twb-submenu-indicator-size);
    height: var(--twb-submenu-indicator-size);
    font-size: 0;
    color: inherit;
}
.twb-submenu-angle::before,
.twb-submenu-angle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--twb-submenu-indicator-duration) 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-nav-offcanvas {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--twb-mobile-motion-duration) ease;
}

.twb-nav-offcanvas::backdrop {
    background: transparent;
}

.twb-nav-offcanvas.twb-layer-mounted,
.twb-nav-offcanvas:popover-open {
    display: block;
}

.twb-nav-offcanvas.twb-layer-open {
    opacity: 1;
    pointer-events: auto;
}

.twb-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.46);
    opacity: 0;
    transition: opacity var(--twb-mobile-motion-duration) ease;
}

.twb-nav-offcanvas.twb-layer-open .twb-nav-backdrop {
    opacity: 1;
}

.twb-nav-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(var(--twb-mobile-panel-width), 100vw);
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
    transition:
        transform var(--twb-mobile-motion-duration) var(--twb-mobile-motion-ease),
        opacity var(--twb-mobile-motion-duration) ease;
}

.twb-nav-offcanvas.twb-layer-mounted .twb-nav-panel {
    will-change: transform;
}

.twb-nav-mobile-offcanvas-right .twb-nav-panel {
    right: 0;
    transform: translate3d(104%, 0, 0);
}

.twb-nav-mobile-offcanvas-left .twb-nav-panel {
    left: 0;
    transform: translate3d(-104%, 0, 0);
}

.twb-nav-motion-fade-slide .twb-nav-panel {
    opacity: 0;
}

.twb-nav-offcanvas.twb-layer-open .twb-nav-panel {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.twb-nav-panel__body {
    min-height: 100%;
    padding: 24px 20px;
}

.twb-nav-panel__title {
    margin: 0 56px 20px 0;
    color: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.twb-nav-floating-toggle {
    position: fixed;
    top: var(--twb-floating-toggle-top, 16px);
    left: var(--twb-floating-toggle-left, auto);
    z-index: 3;
    width: var(--twb-floating-toggle-width, 44px);
    height: var(--twb-floating-toggle-height, 44px);
    min-width: 0;
    margin: 0;
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
    transition:
        opacity 180ms ease,
        transform 280ms var(--twb-mobile-motion-ease),
        color 200ms ease,
        background-color 200ms ease,
        border-color 200ms ease;
}

.twb-nav-offcanvas.twb-layer-open .twb-nav-floating-toggle {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.twb-nav-offcanvas .twb-nav-mobile {
    display: none;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.twb-nav-offcanvas .twb-nav-mobile.twb-open {
    display: block;
    max-height: none;
}

.twb-nav-offcanvas .twb-nav-mobile > .twb-menu-list > li {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--twb-mobile-item-duration) ease,
        transform var(--twb-mobile-item-duration) var(--twb-mobile-motion-ease);
    transition-delay: var(--twb-mobile-item-delay, 60ms);
}

.twb-nav-offcanvas.twb-layer-open .twb-nav-mobile > .twb-menu-list > li {
    opacity: 1;
    transform: none;
}

.twb-nav-motion-none .twb-nav-offcanvas,
.twb-nav-motion-none .twb-nav-panel,
.twb-nav-motion-none .twb-nav-backdrop,
.twb-nav-motion-none .twb-nav-floating-toggle,
.twb-nav-motion-none .twb-nav-mobile > .twb-menu-list > li {
    transition: none;
}

html.twb-nav-scroll-lock,
html.twb-nav-scroll-lock body {
    overflow: hidden;
}

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

@media (prefers-reduced-motion: reduce) {
    .twb-nav-offcanvas,
    .twb-nav-panel,
    .twb-nav-backdrop,
    .twb-nav-floating-toggle,
    .twb-nav-offcanvas .twb-nav-mobile > .twb-menu-list > li,
    .twb-nav-mobile .twb-nav-dropdown,
    .twb-nav-mobile .twb-showcase-shell,
    .twb-nav-mobile .twb-showcase-card {
        transition: none;
    }
}

/* ==========================================================================
   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. */

/* The top-layer floating button owns close while the panel is open. */
.twb-nav-wrap.twb-nav-offcanvas-active>.twb-nav-toggle-wrap{visibility:hidden;}