/* =============================================================================
 * Kfir Builder — Nav Menu Widget  (kfb-nav-menu.css)
 * Scoped entirely under .kfb-nav-menu; no global overrides.
 * ============================================================================= */

/* ── CSS custom properties (defaults — overridden per-instance via style="") ── */
.kfb-nav-menu {
    --kfb-nav-text:         #1e293b;
    --kfb-nav-hover:        #6366f1;
    --kfb-nav-active:       #4f46e5;
    --kfb-nav-fs:           15px;
    --kfb-nav-fw:           600;
    --kfb-nav-ls:           0em;
    --kfb-nav-gap:          32px;
    --kfb-nav-px:           14px;
    --kfb-nav-py:           16px;
    --kfb-nav-bg:           transparent;
    --kfb-nav-pointer:      #6366f1;
    --kfb-nav-align:        flex-start;
    --kfb-nav-toggle-c:     #1e293b;
    --kfb-nav-toggle-bg:    transparent;
    --kfb-nav-toggle-sz:    22px;
    --kfb-nav-toggle-just:  flex-end;
    --kfb-nav-dd-bg:        #ffffff;
    --kfb-nav-dd-text:      #1e293b;
    --kfb-nav-dd-hover:     #f1f5f9;
    --kfb-nav-dd-r:         8px;
    --kfb-nav-dd-px:        16px;
    --kfb-nav-dd-py:        10px;
    --kfb-nav-z:            100;

    position: relative;
    z-index: var(--kfb-nav-z);
    background: var(--kfb-nav-bg);
    box-sizing: border-box;
}

/* ── Toggle button ─────────────────────────────────────────────────────────── */
.kfb-nav__toggle {
    display: none; /* shown via breakpoint rules below */
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--kfb-nav-toggle-bg);
    border: none;
    cursor: pointer;
    padding: 7px 8px;
    border-radius: 6px;
    color: var(--kfb-nav-toggle-c);
    font-size: var(--kfb-nav-toggle-sz);
    line-height: 1;
    transition: opacity .2s;
}
.kfb-nav__toggle:focus-visible {
    outline: 2px solid var(--kfb-nav-hover);
    outline-offset: 2px;
}

/* Three-bar hamburger icon */
.kfb-nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 1.1em;
    height: 1.1em;
}
.kfb-nav__hamburger span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
}

/* Animated X when open */
.kfb-nav-menu.is-open .kfb-nav__hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.kfb-nav-menu.is-open .kfb-nav__hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.kfb-nav-menu.is-open .kfb-nav__hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.kfb-nav__toggle-bar {
    display: flex;
    justify-content: var(--kfb-nav-toggle-just, flex-end);
}

/* ── Nav wrapper (flex row on desktop) ─────────────────────────────────────── */
.kfb-nav__wrapper {
    display: flex;
    width: 100%;
}

/* ── Menu list ──────────────────────────────────────────────────────────────── */
.kfb-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    justify-content: var(--kfb-nav-align, flex-start);
}

/* ── Menu item ──────────────────────────────────────────────────────────────── */
.kfb-nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* ── Menu link ──────────────────────────────────────────────────────────────── */
.kfb-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--kfb-nav-py) var(--kfb-nav-px);
    color: var(--kfb-nav-text);
    font-size: var(--kfb-nav-fs);
    font-weight: var(--kfb-nav-fw);
    letter-spacing: var(--kfb-nav-ls);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
    position: relative;
    cursor: pointer;
}
.kfb-nav-link:hover,
.kfb-nav-link:focus-visible {
    color: var(--kfb-nav-hover);
    outline: none;
}
.kfb-nav-link.is-active {
    color: var(--kfb-nav-active);
}

/* ── Hover pointer effects ──────────────────────────────────────────────────── */

/* underline / overline / double shared pseudo-element */
.kfb-nav--pointer-underline .kfb-nav__list > .kfb-nav-item > .kfb-nav-link::after,
.kfb-nav--pointer-overline  .kfb-nav__list > .kfb-nav-item > .kfb-nav-link::before,
.kfb-nav--pointer-double    .kfb-nav__list > .kfb-nav-item > .kfb-nav-link::before,
.kfb-nav--pointer-double    .kfb-nav__list > .kfb-nav-item > .kfb-nav-link::after {
    content: '';
    position: absolute;
    left: var(--kfb-nav-px);
    right: var(--kfb-nav-px);
    height: 2px;
    background: var(--kfb-nav-pointer);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform .25s ease;
}
.kfb-nav--pointer-underline .kfb-nav__list > .kfb-nav-item > .kfb-nav-link::after { bottom: 4px; }
.kfb-nav--pointer-overline  .kfb-nav__list > .kfb-nav-item > .kfb-nav-link::before { top: 4px; }
.kfb-nav--pointer-double    .kfb-nav__list > .kfb-nav-item > .kfb-nav-link::before { top: 4px; }
.kfb-nav--pointer-double    .kfb-nav__list > .kfb-nav-item > .kfb-nav-link::after  { bottom: 4px; }

.kfb-nav--pointer-underline .kfb-nav__list > .kfb-nav-item > .kfb-nav-link:hover::after,
.kfb-nav--pointer-underline .kfb-nav__list > .kfb-nav-item > .kfb-nav-link.is-active::after,
.kfb-nav--pointer-overline  .kfb-nav__list > .kfb-nav-item > .kfb-nav-link:hover::before,
.kfb-nav--pointer-overline  .kfb-nav__list > .kfb-nav-item > .kfb-nav-link.is-active::before,
.kfb-nav--pointer-double    .kfb-nav__list > .kfb-nav-item > .kfb-nav-link:hover::before,
.kfb-nav--pointer-double    .kfb-nav__list > .kfb-nav-item > .kfb-nav-link:hover::after,
.kfb-nav--pointer-double    .kfb-nav__list > .kfb-nav-item > .kfb-nav-link.is-active::before,
.kfb-nav--pointer-double    .kfb-nav__list > .kfb-nav-item > .kfb-nav-link.is-active::after {
    transform: scaleX(1);
}

/* Framed */
.kfb-nav--pointer-framed .kfb-nav__list > .kfb-nav-item > .kfb-nav-link:hover,
.kfb-nav--pointer-framed .kfb-nav__list > .kfb-nav-item > .kfb-nav-link.is-active {
    outline: 2px solid var(--kfb-nav-pointer);
    border-radius: 4px;
}

/* Colored Background */
.kfb-nav--pointer-background .kfb-nav__list > .kfb-nav-item > .kfb-nav-link:hover,
.kfb-nav--pointer-background .kfb-nav__list > .kfb-nav-item > .kfb-nav-link.is-active {
    background: var(--kfb-nav-pointer);
    color: #fff !important;
    border-radius: 5px;
}

/* ── Submenu arrow ──────────────────────────────────────────────────────────── */
.kfb-nav-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform .2s ease;
    margin-left: 2px;
}
.kfb-nav-item.has-submenu:hover > .kfb-nav-link > .kfb-nav-arrow,
.kfb-nav-item.has-submenu.is-open > .kfb-nav-link > .kfb-nav-arrow {
    transform: rotate(180deg);
}

/* ── Submenu / Dropdown ─────────────────────────────────────────────────────── */
.kfb-nav-submenu {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--kfb-nav-dd-bg);
    border-radius: var(--kfb-nav-dd-r);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 9999;
}

/* Shadow option */
.kfb-nav--dd-shadow .kfb-nav-submenu {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
}

/* Hover trigger (CSS) */
.kfb-nav--trigger-hover .kfb-nav-item.has-submenu:hover > .kfb-nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Click / JS trigger */
.kfb-nav-item.has-submenu.is-open > .kfb-nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Nested submenu — fly out to the right */
.kfb-nav-submenu .kfb-nav-submenu {
    top: -6px;
    left: calc(100% + 4px);
    transform: translateX(-6px);
}
.kfb-nav-submenu .kfb-nav-item.has-submenu:hover > .kfb-nav-submenu,
.kfb-nav-submenu .kfb-nav-item.has-submenu.is-open > .kfb-nav-submenu {
    transform: translateX(0);
}

/* Submenu item */
.kfb-nav-submenu .kfb-nav-item {
    display: block;
}
.kfb-nav-link--sub {
    display: flex !important;
    align-items: center;
    padding: var(--kfb-nav-dd-py) var(--kfb-nav-dd-px) !important;
    color: var(--kfb-nav-dd-text) !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    transition: background .15s ease, color .15s ease;
}
.kfb-nav-link--sub:hover,
.kfb-nav-link--sub:focus-visible {
    background: var(--kfb-nav-dd-hover) !important;
    color: var(--kfb-nav-hover) !important;
}
.kfb-nav-link--sub.is-active {
    color: var(--kfb-nav-active) !important;
    font-weight: 600;
}

/* ── Layout variants ────────────────────────────────────────────────────────── */

/* Vertical */
.kfb-nav--vertical .kfb-nav__list {
    flex-direction: column;
    align-items: flex-start;
}
.kfb-nav--vertical .kfb-nav-item {
    width: 100%;
    display: block;
}
.kfb-nav--vertical .kfb-nav-link {
    width: 100%;
}
.kfb-nav--vertical .kfb-nav-submenu {
    top: 0;
    left: 100%;
    transform: translateX(-6px);
}
.kfb-nav--vertical .kfb-nav-item.has-submenu:hover > .kfb-nav-submenu,
.kfb-nav--vertical .kfb-nav-item.has-submenu.is-open > .kfb-nav-submenu {
    transform: translateX(0);
}

/* Border bottom */
.kfb-nav--border-bottom {
    border-bottom: 1px solid #e2e8f0;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

/* breakpoint = tablet → switch at ≤1024 px */
@media (max-width: 1024px) {
    .kfb-nav--break-tablet .kfb-nav__toggle    { display: flex; }
    .kfb-nav--break-tablet .kfb-nav__wrapper   { display: none; }
    .kfb-nav--break-tablet.is-open .kfb-nav__wrapper { display: block; }

    /* Mobile: stack list vertically */
    .kfb-nav--break-tablet .kfb-nav__list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .kfb-nav--break-tablet .kfb-nav-item {
        width: 100%;
        display: block;
    }
    .kfb-nav--break-tablet .kfb-nav-link {
        width: 100%;
        box-sizing: border-box;
        white-space: normal;
    }

    /* Inline/accordion submenus on mobile */
    .kfb-nav--break-tablet .kfb-nav-submenu {
        position: static;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0;
        padding-left: 12px;
        background: rgba(0,0,0,.035);
        display: none;
        min-width: 0;
    }
    .kfb-nav--break-tablet .kfb-nav-item.has-submenu.is-open > .kfb-nav-submenu {
        display: block;
    }
    .kfb-nav--break-tablet .kfb-nav-arrow { margin-left: auto; }
}

/* breakpoint = mobile → switch at ≤767 px */
@media (max-width: 767px) {
    .kfb-nav--break-mobile .kfb-nav__toggle    { display: flex; }
    .kfb-nav--break-mobile .kfb-nav__wrapper   { display: none; }
    .kfb-nav--break-mobile.is-open .kfb-nav__wrapper { display: block; }

    .kfb-nav--break-mobile .kfb-nav__list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .kfb-nav--break-mobile .kfb-nav-item  { width: 100%; display: block; }
    .kfb-nav--break-mobile .kfb-nav-link  { width: 100%; box-sizing: border-box; white-space: normal; }
    .kfb-nav--break-mobile .kfb-nav-submenu {
        position: static;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0;
        padding-left: 12px;
        background: rgba(0,0,0,.035);
        display: none;
        min-width: 0;
    }
    .kfb-nav--break-mobile .kfb-nav-item.has-submenu.is-open > .kfb-nav-submenu {
        display: block;
    }
    .kfb-nav--break-mobile .kfb-nav-arrow { margin-left: auto; }
}

/* ── Mobile type: fullscreen overlay ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .kfb-nav--break-tablet.kfb-nav--mob-fullscreen.is-open .kfb-nav__wrapper {
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: var(--kfb-nav-dd-bg, #fff);
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        padding: 40px 24px;
    }
    .kfb-nav--break-tablet.kfb-nav--mob-fullscreen.is-open .kfb-nav__list {
        align-items: center;
        width: auto;
    }
    .kfb-nav--break-tablet.kfb-nav--mob-fullscreen.is-open .kfb-nav-item {
        width: auto;
        text-align: center;
    }
    .kfb-nav--break-tablet.kfb-nav--mob-fullscreen.is-open .kfb-nav-link {
        font-size: calc(var(--kfb-nav-fs) * 1.4);
        justify-content: center;
    }
}
@media (max-width: 767px) {
    .kfb-nav--break-mobile.kfb-nav--mob-fullscreen.is-open .kfb-nav__wrapper {
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: var(--kfb-nav-dd-bg, #fff);
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        padding: 40px 24px;
    }
    .kfb-nav--break-mobile.kfb-nav--mob-fullscreen.is-open .kfb-nav__list  { align-items: center; width: auto; }
    .kfb-nav--break-mobile.kfb-nav--mob-fullscreen.is-open .kfb-nav-item   { width: auto; text-align: center; }
    .kfb-nav--break-mobile.kfb-nav--mob-fullscreen.is-open .kfb-nav-link   { font-size: calc(var(--kfb-nav-fs) * 1.4); justify-content: center; }
}

/* ── Mobile type: off-canvas ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .kfb-nav--break-tablet.kfb-nav--mob-offcanvas.is-open .kfb-nav__wrapper {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(300px, 85vw);
        z-index: 99999;
        background: var(--kfb-nav-dd-bg, #fff);
        display: flex !important;
        flex-direction: column;
        overflow-y: auto;
        padding: 24px 0;
        box-shadow: -4px 0 32px rgba(0, 0, 0, .18);
        animation: kfb-slide-in-right .25s ease;
    }
}
@media (max-width: 767px) {
    .kfb-nav--break-mobile.kfb-nav--mob-offcanvas.is-open .kfb-nav__wrapper {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(300px, 85vw);
        z-index: 99999;
        background: var(--kfb-nav-dd-bg, #fff);
        display: flex !important;
        flex-direction: column;
        overflow-y: auto;
        padding: 24px 0;
        box-shadow: -4px 0 32px rgba(0, 0, 0, .18);
        animation: kfb-slide-in-right .25s ease;
    }
}

@keyframes kfb-slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

/* ── Backdrop (for offcanvas / fullscreen) ──────────────────────────────────── */
.kfb-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99997;
    background: rgba(0, 0, 0, .45);
    cursor: pointer;
    animation: kfb-fade-in .2s ease;
}
.kfb-nav-menu.is-open.kfb-nav--mob-offcanvas .kfb-nav-backdrop,
.kfb-nav-menu.is-open.kfb-nav--mob-fullscreen .kfb-nav-backdrop {
    display: block;
}
@keyframes kfb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Close button inside fullscreen / offcanvas */
.kfb-nav__close-btn {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--kfb-nav-text);
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
}
.kfb-nav-menu.is-open.kfb-nav--mob-fullscreen .kfb-nav__close-btn,
.kfb-nav-menu.is-open.kfb-nav--mob-offcanvas  .kfb-nav__close-btn {
    display: block;
}