/* ==========================================================================
   Main Navigation — Design Tokens
   ========================================================================== */

:root {
    --header-nav-surface-backdrop: blur(16px);
    --header-nav-surface-bg: rgba(255, 255, 255, 0.72);
    --header-nav-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --header-nav-surface-text: #1a1a1a;

    --header-nav-cat-hover-bg: #5f61ff;
    --header-nav-cat-hover-text: #ffffff;

    --header-nav-cta-primary-bg: #1a1a1a;
    --header-nav-cta-primary-text: #ffffff;
    --header-nav-cta-secondary-bg: transparent;
    --header-nav-cta-secondary-text: #1a1a1a;
    --header-nav-cta-secondary-hover-text: #ffffff;
    --header-nav-cta-secondary-border: #d0d0d0;

    --header-nav-overlay-bg: rgba(0, 0, 0, 0.16);
    --header-nav-overlay-blur: blur(24px);

    --header-nav-panel-bg: #ffffff;
    --header-nav-panel-radius: 40px;
    --header-nav-panel-padding-x: 60px;
    --header-nav-panel-padding-y: 40px;
    --header-nav-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --header-nav-panel-gap-to-bar: 40px;
    --header-nav-panel-bottom-gap: 80px;

    --header-nav-duration: 250ms;
    --header-nav-easing: cubic-bezier(0.4, 0, 0.2, 1);

    --header-nav-bar-height: 60px;
    --header-nav-bar-padding-x: 0px;
    --header-nav-bar-gap: 8px;
    --header-nav-bar-radius: 999px;

    --header-nav-offset-top: 20px;

    --z-nav-overlay: 9998;
    --z-nav-dropdown: 9999;
    --z-nav-bar: 10000;

    --scrollbar-width: 0px;
}

/* ==========================================================================
   Admin Bar
   ========================================================================== */

@media (min-width: 783px) {
    .admin-bar {
        --header-nav-offset-top: var(--wp-admin--admin-bar--height, 32px);
    }
}

.kf-nav__dropdown a {
    text-decoration: none;
    margin-top: 1em;
    margin-bottom: 1em;
}

.kf-nav__dropdown a:last-child {
    margin-bottom: 0;
}

.kf-nav__dropdown a:hover,
.kf-nav__dropdown a:focus-visible {
    text-decoration: underline;
}

/* ==========================================================================
   Header Shell — fixed, transparent, pointer-events pass-through
   ========================================================================== */

.kf-nav {
    position: sticky;
    /* top: var(--header-nav-offset-top); */
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-nav-bar);
    pointer-events: none;
    overflow: visible;

    padding-left: var(--wp--style--root--padding-left, 40px);
    padding-right: var(--wp--style--root--padding-right, 40px);
    
}

.kf-nav > nav {
    /* position: relative; */
    position: absolute;
    inset: 0;

    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(1400px - 20px * 2 + var(--wp--style--root--padding-left, 40px) + var(--wp--style--root--padding-right, 40px));

    padding-left: var(--wp--style--root--padding-left, 40px);
    padding-right: var(--wp--style--root--padding-right, 40px);

    margin-top: var(--header-nav-offset-top);
}

/* ==========================================================================
   Skip Link
   ========================================================================== */

.kf-nav__skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100001;
    padding: 8px 16px;
    background: var(--header-nav-cta-primary-bg);
    color: var(--header-nav-cta-primary-text);
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 0.15s ease;
    pointer-events: auto;
}

.kf-nav__skip:focus-visible {
    transform: translateY(0);
}

/* ==========================================================================
   Bar
   ========================================================================== */

.kf-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-nav-bar-height);
    padding: 0 var(--header-nav-bar-padding-x);
    gap: 12px;

    position: relative;
    z-index: var(--z-nav-bar);
}

/* ── Shared surface for bar groups ──────────────────────────────────────── */

.kf-nav__bar-start,
.kf-nav__bar-end {
    min-height: var(--header-nav-bar-height);
    box-sizing: content-box;
}

.kf-nav__bar-start:not(.liquidGlass-wrapper),
.kf-nav__bar-end:not(.liquidGlass-wrapper) {
    display: flex;
    align-items: center;
    gap: var(--header-nav-bar-gap);
    /* height: calc(var(--header-nav-bar-height) - 16px); */
    padding: 8px 8px 8px 12px;
    border-radius: var(--header-nav-bar-radius);
    backdrop-filter: var(--header-nav-surface-backdrop);
    -webkit-backdrop-filter: var(--header-nav-surface-backdrop);
    background-color: var(--header-nav-surface-bg);
    box-shadow: var(--header-nav-surface-shadow);
    color: var(--header-nav-surface-text);
    pointer-events: auto;
}


.kf-nav__bar-start.liquidGlass-wrapper,
.kf-nav__bar-end.liquidGlass-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--header-nav-bar-radius);
}

.kf-nav__bar-start-inner.liquidGlass-text,
.kf-nav__bar-end-inner.liquidGlass-text {
    display: flex;
    align-items: center;
    gap: var(--header-nav-bar-gap);
    height: calc(var(--header-nav-bar-height) - 16px);
    color: var(--header-nav-surface-text);
    pointer-events: auto;
    padding: 10px 40px;
}

.kf-nav__bar-end-inner.liquidGlass-text {
    padding: 10px;
}


.kf-nav__bar-start.liquidGlass-wrapper > div,
.kf-nav__bar-end.liquidGlass-wrapper > div {
  border-radius: var(--header-nav-bar-radius);
}

.kf-nav__bar-start.liquidGlass-wrapper:hover,
.kf-nav__bar-end.liquidGlass-wrapper:has(*:hover) {
  padding: 4px 6px;
  border-radius: var(--header-nav-bar-radius);
}

.kf-nav__bar-start.liquidGlass-wrapper:hover {
    margin: 0px 0px 0px -6px;
}

.kf-nav__bar-end.liquidGlass-wrapper:has(*:hover) {
    margin: 0px -6px 0px 0px;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.kf-nav__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    padding: 0 4px;
}

.kf-nav__logo-img {
    display: block;
    height: calc(var(--header-nav-bar-height) - 32px);
    width: auto;
    object-fit: contain;
}

.kf-nav__logo-text {
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
}

/* ==========================================================================
   Desktop Category Triggers
   ========================================================================== */

.kf-nav__categories {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;

    margin-left: 40px;
}

.kf-nav__cat-trigger {
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--header-nav-bar-radius);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: calc(var(--header-nav-bar-height) - 20px);
    transition:
        background-color var(--header-nav-duration) var(--header-nav-easing),
        color var(--header-nav-duration) var(--header-nav-easing);

    font-family: degular-variable, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;        
}

.kf-nav__cat-trigger:hover,
.kf-nav__cat-trigger:focus-visible,
.kf-nav__cat-trigger[aria-expanded="true"] {
    background-color: var(--header-nav-cat-hover-bg);
    color: var(--header-nav-cat-hover-text);
}

.kf-nav__cat-trigger:focus-visible {
    outline: 2px solid var(--header-nav-cat-hover-bg);
    outline-offset: 2px;
}

/* ==========================================================================
   CTA Buttons — expand/shrink hover animation
   Container width is locked by JS on init for stable animation.
   Without JS the animation still works but container width shifts slightly.
   ========================================================================== */

.kf-nav__ctas,
.kf-nav__ctas-clone,
.kf-nav__drawer-ctas,
.kf-nav__panel-ctas {
    display: flex;
    align-items: stretch;
}

.kf-nav__ctas,
.kf-nav__ctas-clone {
    border-radius: var(--header-nav-bar-radius);
    overflow: hidden;
}

.kf-nav__ctas {
    position: relative;
}

.kf-nav__cta > .kf-nav__cta {
    pointer-events: none;
}

.kf-nav__ctas-clone {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
}

.kf-nav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 0;
    min-height: 40px;
    /* padding: 10px 20px; */
    padding: 0;
    font-size: 14px;
    /* font-weight: 600; */
    text-decoration: none;
    border-radius: var(--header-nav-bar-radius);
    overflow: hidden;
    cursor: pointer;

    font-family: "degular-variable", sans-serif;
    /* font-weight: 500; */
    font-size: 16px;
    line-height: 100%;

    /* Default: visibility instant on appear */
    transition:
        flex var(--header-nav-duration) var(--header-nav-easing),
        opacity var(--header-nav-duration) var(--header-nav-easing),
        padding var(--header-nav-duration) var(--header-nav-easing),
        max-width var(--header-nav-duration) var(--header-nav-easing),
        border-width var(--header-nav-duration) var(--header-nav-easing),
        visibility 0s linear 0s;
}

.kf-nav__cta > span {
    display: block;
    padding: 10px 30px;
}

.kf-nav__cta--primary {
    background: var(--header-nav-cta-primary-bg);
    color: var(--header-nav-cta-primary-text);
    flex: 1 1 50%;
}

.kf-nav__cta--secondary {
    background: var(--header-nav-cta-secondary-bg);
    color: var(--header-nav-cta-secondary-text);
    /* border: 1px solid var(--header-nav-cta-secondary-border); */
    flex: 1 1 50%;
}

.kf-nav__cta:focus-visible {
    outline: 2px solid var(--header-nav-cat-hover-bg);
    outline-offset: -2px;
}

/* Hover primary → secondary shrinks */
.kf-nav__ctas:has(.kf-nav__cta--primary:hover) > .kf-nav__cta--secondary,
.kf-nav__ctas:has(.kf-nav__cta--primary:focus-visible) > .kf-nav__cta--secondary {
    /* flex: 0 0 0;
    max-width: 0; */
    padding-inline: 0;
    opacity: 0;
    border-width: 0;
    visibility: hidden;
    /* Delayed: stay visible while shrink plays, then hide */
    transition:
        background-color var(--header-nav-duration) var(--header-nav-easing),
        flex var(--header-nav-duration) var(--header-nav-easing),
        opacity var(--header-nav-duration) var(--header-nav-easing),
        padding var(--header-nav-duration) var(--header-nav-easing),
        max-width var(--header-nav-duration) var(--header-nav-easing),
        border-width var(--header-nav-duration) var(--header-nav-easing),
        visibility 0s linear var(--header-nav-duration);
}

.kf-nav__ctas:has(.kf-nav__cta--primary:hover) > .kf-nav__cta--primary,
.kf-nav__ctas:has(.kf-nav__cta--primary:focus-visible) > .kf-nav__cta--primary {
    flex: 1 0 100%;
}

/* Hover secondary → primary shrinks */
.kf-nav__ctas:has(.kf-nav__cta--secondary:hover) > .kf-nav__cta--primary,
.kf-nav__ctas:has(.kf-nav__cta--secondary:focus-visible) > .kf-nav__cta--primary {
    /* flex: 0 0 0;
    max-width: 0; */
    padding-inline: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        flex var(--header-nav-duration) var(--header-nav-easing),
        opacity var(--header-nav-duration) var(--header-nav-easing),
        padding var(--header-nav-duration) var(--header-nav-easing),
        max-width var(--header-nav-duration) var(--header-nav-easing),
        visibility 0s linear var(--header-nav-duration);
}

.kf-nav__ctas:has(.kf-nav__cta--secondary:hover) > .kf-nav__cta--secondary,
.kf-nav__ctas:has(.kf-nav__cta--secondary:focus-visible) > .kf-nav__cta--secondary {
    flex: 1 0 100%;
    background-color: var(--header-nav-cat-hover-bg);
    color: var(--header-nav-cta-secondary-hover-text);
}

/* ==========================================================================
   Hamburger Toggle
   ========================================================================== */

.kf-nav__toggle {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
    color: inherit;
    flex-shrink: 0;
}

.kf-nav__toggle:focus-visible {
    outline: 2px solid var(--header-nav-cat-hover-bg);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Icon: 3-line → X ──────────────────────────────────────────────────── */

.kf-nav__toggle-icon {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: background var(--header-nav-duration) var(--header-nav-easing);
}

.kf-nav__toggle-icon::before,
.kf-nav__toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition:
        transform var(--header-nav-duration) var(--header-nav-easing),
        top var(--header-nav-duration) var(--header-nav-easing);
}

.kf-nav__toggle-icon::before {
    top: -7px;
}

.kf-nav__toggle-icon::after {
    top: 7px;
}

.kf-nav__toggle[aria-expanded="true"] .kf-nav__toggle-icon {
    background: transparent;
}

.kf-nav__toggle[aria-expanded="true"] .kf-nav__toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.kf-nav__toggle[aria-expanded="true"] .kf-nav__toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ==========================================================================
   Dropdown / Drawer — shared
   ========================================================================== */

.kf-nav__dropdown[hidden] {
    display: none !important;
}

/* Desktop default */
.kf-nav__dropdown:not([hidden]) {
    position: fixed;
    top: calc(
        var(--header-nav-offset-top) +
        var(--header-nav-bar-height) +
        var(--header-nav-panel-gap-to-bar)
    );
    left: var(--header-nav-bar-padding-x);
    right: var(--header-nav-bar-padding-x);
    z-index: var(--z-nav-dropdown);
    pointer-events: auto;
    /* overflow visible so panel shadows are not clipped */

    position: relative;
    top: 30px;
}

/* ==========================================================================
   Panels — desktop default
   ========================================================================== */

.kf-nav__panel[hidden] {
    display: none !important;
}

.kf-nav__panel {
    padding: var(--header-nav-panel-padding-y) var(--header-nav-panel-padding-x);
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity var(--header-nav-duration) var(--header-nav-easing),
        transform var(--header-nav-duration) var(--header-nav-easing);
    background: var(--header-nav-panel-bg);
    border-radius: var(--header-nav-panel-radius);
    box-shadow: var(--header-nav-panel-shadow);
    overflow-y: auto;
    /* overscroll-behavior: contain; */
    max-height: calc( var(--max-height, calc(
        100vh -
        var(--header-nav-bar-height) -
        var(--header-nav-panel-gap-to-bar) -
        var(--header-nav-offset-top)
    )) - var(--header-nav-panel-bottom-gap));

    max-height: calc( var(--max-height, calc(
        100dvh -
        var(--header-nav-bar-height) -
        var(--header-nav-panel-gap-to-bar) -
        var(--header-nav-offset-top)
    )) - var(--header-nav-panel-bottom-gap));
}

.kf-nav__panel.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Panel Back Button — hidden on desktop
   ========================================================================== */

.kf-nav__panel-back {
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 0;
    margin-bottom: 16px;
}

.kf-nav__panel-back:focus-visible {
    outline: 2px solid var(--header-nav-cat-hover-bg);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   Panel CTAs — hidden on desktop
   ========================================================================== */

.kf-nav__panel-ctas {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

.kf-nav__panel-ctas .kf-nav__cta,
.kf-nav__drawer-ctas .kf-nav__cta {
    border-radius: 10px;
    justify-content: center;
    padding: 14px 24px;
    flex: 0 0 auto;
}

/* ==========================================================================
   Drawer Home — hidden on desktop
   ========================================================================== */

.kf-nav__drawer-home {
    display: none;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    transition:
        transform var(--header-nav-duration) var(--header-nav-easing),
        opacity var(--header-nav-duration) var(--header-nav-easing);
}

.kf-nav__drawer-home.is-hidden {
    /* transform: translateX(-100%); */
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ── Drawer category list ───────────────────────────────────────────────── */

.kf-nav__drawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
}

.kf-nav__drawer-cat {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e5e5e5;
    color: inherit;
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    cursor: pointer;
    text-align: left;
}

.kf-nav__drawer-list li:first-child .kf-nav__drawer-cat {
    /* border-top: 1px solid #e5e5e5; */
}

.kf-nav__drawer-cat:focus-visible {
    outline: 2px solid var(--header-nav-cat-hover-bg);
    outline-offset: -2px;
    border-radius: 4px;
}

/* ── Drawer CTAs ────────────────────────────────────────────────────────── */

.kf-nav__drawer-ctas {
    display: none;
    flex-direction: column;
    gap: 12px;
    /* margin-top: auto; */
    padding-top: 24px;
}

/* ==========================================================================
   SVG Icon
   ========================================================================== */

.kf-nav__icon {
    display: block;
    flex-shrink: 0;
}


.kf-nav-group {
    padding: 0;
    position: relative;
}

.kf-nav-group::after {
    content: url('data:image/svg+xml,<svg width="270" height="1" viewBox="0 0 270 1" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0.5H270" stroke="url(%23paint0_linear_9028_198)" stroke-opacity="0.15"/><defs><linearGradient id="paint0_linear_9028_198" x1="0" y1="1" x2="270" y2="1" gradientUnits="userSpaceOnUse"><stop stop-color="%23191919"/><stop offset="1" stop-color="%23191919" stop-opacity="0"/></linearGradient></defs></svg>');
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
}

.kf-nav__column--grid .wp-block-group:has(.kf-nav-group),
.kf-nav__column--grid .kf-nav-group {
    height: 100%;
}

/* ==========================================================================
   Overlay
   ========================================================================== */

.kf-nav__overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav-overlay);
    background: var(--header-nav-overlay-bg);
    backdrop-filter: var(--header-nav-overlay-blur);
    -webkit-backdrop-filter: var(--header-nav-overlay-blur);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--header-nav-duration) var(--header-nav-easing),
        visibility 0s linear var(--header-nav-duration);
}

.kf-nav__overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity var(--header-nav-duration) var(--header-nav-easing),
        visibility 0s linear 0s;
}


/* ==========================================================================
   Scroll Lock
   ========================================================================== */

html.kf-nav-open {
    /* overflow: hidden; */

    scrollbar-gutter: stable;
}

html.kf-nav-open body {
    /* iOS Safari scroll lock */
    /* position: fixed; */
    /* width: 100%; */

    height: 100%;  
    overflow: hidden;
}

html.kf-nav-open .kf-nav {
}

/* ==========================================================================
   RESPONSIVE — Tablet & Mobile  (< 1024)
   ========================================================================== */

@media (max-width: 1023px) {
    .kf-nav-group.kf-nav-group.kf-nav-group {
        background: #f1f1f1;
        padding: 20px;
        border-radius: 20px;
    }
    .kf-nav-group::after {
        display: none;
    }

    .kf-nav-hr {
        display: none;
    }

    .kf-nav__column--grid .has-global-padding {
        padding-right: 0;
        padding-left: 0;
    }

    .kf-nav__panel-content .kftheme-post-card {
        --height: 250px;
    }

    .kf-nav__categories {
        display: none;
    }

    .kf-nav__toggle {
        display: flex;
    }

    .kf-nav__drawer-home {
        display: flex;
    }

    .kf-nav__drawer-ctas {
        display: flex;
    }

    .kf-nav__panel-back {
        display: flex;
    }

    .kf-nav__panel-ctas {
        display: flex;
    }

    /* ── Bar tweaks ─────────────────────────────────────────────────────── */

    .kf-nav__bar-start {
        padding: 0 8px 0 12px;
    }

    /* ── Dropdown → full-screen drawer ──────────────────────────────────── */

    .kf-nav__dropdown:not([hidden]) {
        top: calc(var(--header-nav-offset-top));
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 20px;
        box-shadow: none;
        background: var(--header-nav-panel-bg);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        opacity: 0;
        transform: translateX(100%);
        transition:
            transform var(--header-nav-duration) var(--header-nav-easing),
            opacity var(--header-nav-duration) var(--header-nav-easing);
    }

    .kf-nav__dropdown.is-open {
        opacity: 1;
        transform: translateX(0);

        max-height: calc( var(--max-height, calc(
            100vh -
            var(--header-nav-panel-gap-to-bar) -
            var(--header-nav-offset-top)
        )) - var(--header-nav-panel-bottom-gap));
    }
    /* ── Panels → slide from right inside drawer ────────────────────────── */

    .kf-nav__panel {
        --header-nav-panel-padding-x: 24px;
        --header-nav-panel-padding-y: 24px;

        /* position: absolute; */
        inset: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        opacity: 0;
        z-index: 1;
        background: var(--header-nav-panel-bg);
        border-radius: 0;
        box-shadow: none;
        max-height: none;
    }

    .kf-nav__panel.is-active {
        transform: translateX(0);
        opacity: 1;
    }

    .kf-nav__panel-content {
        flex: 1 1 auto;
    }

    /* ── CTA expand animation is disabled inside drawer ─────────────────── */

    .kf-nav__drawer-ctas .kf-nav__cta,
    .kf-nav__panel-ctas .kf-nav__cta {
        flex: 0 0 auto;
        max-width: none;
        opacity: 1;
        visibility: visible;
        padding: 14px 24px;
        border-width: 1px;
    }

    .kf-nav__drawer-ctas .kf-nav__cta.kf-nav__cta--secondary,
    .kf-nav__panel-ctas .kf-nav__cta.kf-nav__cta--secondary {
        color: #1A1A1A;
        border: 1px solid #1A1A1A;
    }

    .kf-nav__drawer-ctas .kf-nav__cta,
    .kf-nav__panel-ctas .kf-nav__cta {
        margin: 0;
    }
}

/* ==========================================================================
   RESPONSIVE — Mobile only  (< 768)
   ========================================================================== */

@media (max-width: 767px) {
    :root {
        --header-nav-bar-height: 48px;
    }
    .kf-nav__bar-end .kf-nav__ctas {
        display: none;
    }

    .kf-nav__bar-end {
        padding: 0 4px;
    }

    .kf-nav__logo-img {
        width: 140px;
    }

    .kf-nav__bar-start-inner.liquidGlass-text, 
    .kf-nav__bar-end-inner.liquidGlass-text {
        padding: 24px 14px;    
    }

    .kf-nav__bar-end.liquidGlass-wrapper {
        padding: 0;
        width: var(--header-nav-bar-height);
        height: var(--header-nav-bar-height);
    }

    .kf-nav__toggle {
        scale: 0.8;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kf-nav,
    .kf-nav *,
    .kf-nav *::before,
    .kf-nav *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .kf-nav {
        position: static;
        pointer-events: none;
    }

    .kf-nav__dropdown,
    .kf-nav__overlay,
    .kf-nav__toggle {
        display: none !important;
    }

    .kf-nav__bar-start,
    .kf-nav__bar-end {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
        box-shadow: none;
    }
}

/* ==========================================================================
   Editor Preview
   ========================================================================== */

.kf-nav--editor {
    position: static;
    pointer-events: auto;
    border: 1px dashed #ccc;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
}

.kf-nav__editor-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.kf-nav__editor-logo-img {
    display: block;
}

.kf-nav__editor-site-name {
    font-size: 18px;
}





/* ==========================================================================
   Nav Category — Panel Columns Grid
   grid-template-columns and gap are set inline by render.php
   ========================================================================== */

.kf-nav__panel-columns {
    display: grid;
    align-items: stretch;
    width: 100%;
}

/* Mobile: collapse to single column, override inline styles */
@media (max-width: 1023px) {
    .kf-nav__panel-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
}

/* ==========================================================================
   Editor Preview
   ========================================================================== */

.kf-nav-category--editor {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 16px;
    background: #fff;
}

.kf-nav-category__editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.kf-nav-category__editor-title {
    font-size: 15px;
    color: #333;
}

.kf-nav-category__editor-meta {
    font-size: 12px;
    color: #999;
    font-family: monospace;
}

.kf-nav-category__editor-columns {
    min-height: 60px;
}




/* ==========================================================================
   Nav Column
   ========================================================================== */

.kf-nav__column {
    min-width: 0;
}

.kf-nav__column .has-global-padding {
    padding-right: 0;
    padding-left: 0;
}

/* ==========================================================================
   Grid Sub-Layout
   grid-template-columns, grid-template-rows, and gap are set inline
   ========================================================================== */

.kf-nav__column--grid {
    display: grid;
    align-items: start;

    height: 100%;
}

/* Mobile: collapse grid to single column */
@media (max-width: 1023px) {
    .kf-nav__column--grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
}


html.kf-nav-open #onetrust-consent-sdk,
html.kf-nav-open #q-messenger-frame {
    display: none !important;
}


/* ==========================================================================
   Editor Preview
   ========================================================================== */

.kf-nav-column--editor {
    border: 1px dashed #d0d0ff;
    padding: 12px;
    border-radius: 4px;
    min-height: 80px;
    background: #fafaff;
    margin-bottom: 8px;
}

.kf-nav-column--grid-editor {
    border-color: #b0b0ff;
    background: #f0f0ff;
}

.kf-nav-column__editor-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}



/* ========================
   Language Selector – Drawer
   ======================== */

.kf-nav__dropdown .country-selector {
    --wg-bg: #ffffff;
    --wg-bg-hover: #f4f6f8;
    --wg-border: #1A1A1A;
    --wg-text: #1d1f27;
    --wg-text-muted: #6b7280;
    --wg-accent: #1A1A1A;
    --wg-radius: 10px;
    --wg-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  
    position: relative;
    width: 100%;
    font-family: inherit;
    user-select: none;

    margin-top: 30px;
  }
  

  .kf-nav__dropdown .country-selector .wglanguage-name {
    width: 100%;
    display: inline-block;
    text-align: center;
  }

  /* ---- hide native checkbox ---- */
  .kf-nav__dropdown .country-selector .weglot_choice {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  
  /* ---- trigger / current language ---- */
  .kf-nav__dropdown .country-selector .wgcurrent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--wg-text);
    background: var(--wg-bg);
    border: 1px solid var(--wg-border);
    border-radius: var(--wg-radius);
    cursor: pointer;
    transition: border-color var(--wg-transition),
                box-shadow var(--wg-transition);
  }
  
  .kf-nav__dropdown .country-selector .wgcurrent:hover {
    border-color: var(--wg-accent);
  }
  
  /* chevron icon via pseudo-element */
  .kf-nav__dropdown .country-selector .wgcurrent::after {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform var(--wg-transition);
  }
  
  /* ---- globe icon before language name ---- */
  .kf-nav__dropdown .country-selector .wgcurrent .wglanguage-name::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    vertical-align: -3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  /* ---- dropdown list ---- */
  .kf-nav__dropdown .country-selector ul {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 0;
    overflow: hidden;
    background: var(--wg-bg);
    border: 1px solid transparent;
    border-radius: var(--wg-radius);
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height var(--wg-transition),
                opacity var(--wg-transition),
                transform var(--wg-transition),
                border-color var(--wg-transition),
                margin var(--wg-transition);
  }
  
  /* ---- open state ---- */
  .kf-nav__dropdown .country-selector .weglot_choice:checked ~ .wgcurrent {
    border-color: var(--wg-accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  }
  
  .kf-nav__dropdown .country-selector .weglot_choice:checked ~ .wgcurrent::after {
    transform: rotate(180deg);
  }
  
  .kf-nav__dropdown .country-selector .weglot_choice:checked ~ ul {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 8px;
    border-color: #cccccc;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }
  
  /* ---- individual language items ---- */
  .kf-nav__dropdown .country-selector ul li {
    border-radius: 6px;
    transition: background var(--wg-transition);
  }
  
  .kf-nav__dropdown .country-selector ul li:hover {
    background: var(--wg-bg-hover);
  }
  
  .kf-nav__dropdown .country-selector ul li + li {
    margin-top: 2px;
  }
  
  .kf-nav__dropdown .country-selector ul li a {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--wg-text);
    text-decoration: none;
    transition: color var(--wg-transition);
  }
  
  .kf-nav__dropdown .country-selector ul li a:hover {
    color: var(--wg-accent);
  }
  
  /* language code badge */
  .kf-nav__dropdown .country-selector ul li a::before {
    content: attr(class);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    margin-right: 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wg-accent);
    background: rgba(79, 70, 229, 0.08);
    border-radius: 4px;
    flex-shrink: 0;
  }
  
  /* override – display only lang code via specific classes */
  .kf-nav__dropdown .country-selector ul li a.weglot-language-fr::before { content: "FR"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-de::before { content: "DE"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-es::before { content: "ES"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-en::before { content: "EN"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-it::before { content: "IT"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-pt::before { content: "PT"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-nl::before { content: "NL"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-ja::before { content: "JA"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-zh::before { content: "ZH"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-ar::before { content: "AR"; }
  .kf-nav__dropdown .country-selector ul li a.weglot-language-ru::before { content: "RU"; }
  
  /* ---- focus-visible for a11y ---- */
  .kf-nav__dropdown .country-selector:focus-visible {
    outline: 2px solid var(--wg-accent);
    outline-offset: 2px;
    border-radius: var(--wg-radius);
  }
  
  /* ---- dark mode variant (optional) ---- */
  @media (prefers-color-scheme: dark) {
    /* .kf-nav__dropdown .country-selector {
      --wg-bg: #1e1e2e;
      --wg-bg-hover: #2a2a3c;
      --wg-border: #3b3b50;
      --wg-text: #e4e4ef;
      --wg-text-muted: #9191a8;
      --wg-accent: #818cf8;
    } */
  }
  
.kf-nav__light {
    --header-nav-surface-text: #ffffff;
    --header-nav-cta-secondary-text: #ffffff;
}

.kf-nav__light .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.10);
}

.kf-nav__light .kf-nav__logo-img {
    filter: brightness(0) invert(1);
}