/* Header main menu — modern look + smooth multi-level dropdowns.
   Loaded globally after base.css; overrides the display:none/flex mechanism
   with opacity/visibility/transform so every level animates. Desktop only
   (>=1025px); the existing mobile menu styles are untouched. */

@media (min-width: 1025px) {

    .nav-menu {
        padding: 12px 32px;
    }

    .header-menu {
        gap: 6px;
        align-items: center;
    }

    /* ---------- Top level ---------- */
    .header-menu > li {
        align-items: center;
    }

    .header-menu > li > a {
        position: relative;
        padding: 10px 16px !important;
        border-radius: 12px;
        font-weight: 500 !important;
        font-size: 15px !important;
        line-height: 1 !important;
        transition: color .18s ease, background-color .18s ease;
    }

    .header-menu > li:hover > a {
        background-color: rgba(102, 89, 154, .09);
    }

    /* active-page indicator */
    .header-menu > li > a::before {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 3px;
        height: 2px;
        border-radius: 2px;
        background: var(--main-lime, #cdea68);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .22s ease;
    }

    .header-menu > li.current-menu-item > a::before,
    .header-menu > li.current-menu-parent > a::before,
    .header-menu > li.current-menu-ancestor > a::before,
    .header-menu > li.current_page_item > a::before,
    .header-menu > li.current_page_parent > a::before {
        transform: scaleX(1);
    }

    /* dropdown caret rotates on open */
    .nav-menu .header-menu > li.menu-item-has-children > a:after {
        display: inline-block;
        transition: transform .2s ease;
    }

    .nav-menu .header-menu > li.menu-item-has-children:hover > a:after {
        transform: rotate(180deg);
    }

    /* ---------- Sub-menus (all levels) ---------- */
    .header-menu .sub-menu {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
        width: auto !important;
        min-width: 244px;
        padding: 8px !important;
        margin: 0;
        background: #fff;
        border: 1px solid #edecf5;
        border-radius: 16px;
        box-shadow: 0 18px 44px rgba(40, 30, 80, .16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
        z-index: 70;
    }

    /* let 3rd-level flyouts anchor to their own item */
    .header-menu .sub-menu > li {
        position: relative !important;
        display: block;
    }

    /* 2nd level: below its parent, with an invisible hover bridge */
    .header-menu > li > .sub-menu {
        top: calc(100% + 10px);
        left: 0;
    }

    .header-menu > li > .sub-menu::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }

    /* 3rd+ level: fly out to the right */
    .header-menu .sub-menu .sub-menu {
        top: -9px;
        left: calc(100% + 8px);
        transform: translateX(10px);
    }

    .header-menu .sub-menu .sub-menu::before {
        content: "";
        position: absolute;
        top: 0;
        left: -10px;
        width: 10px;
        height: 100%;
    }

    /* reveal on hover of the *direct* parent */
    .header-menu > li:hover > .sub-menu,
    .header-menu .sub-menu > li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(0, 0);
        pointer-events: auto;
    }

    /* sub-menu items */
    .header-menu .sub-menu li a {
        padding: 11px 14px !important;
        border-radius: 10px;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        white-space: nowrap;
        transition: background-color .15s ease, color .15s ease;
    }

    .header-menu .sub-menu li:hover > a,
    .header .nav-menu li .sub-menu li:hover > a {
        background-color: rgba(102, 89, 154, .09);
        color: var(--main-lavanda, #66599a) !important;
    }

    /* has-children caret inside sub-menus points right */
    .nav-menu .header-menu .sub-menu li.menu-item-has-children > a {
        justify-content: space-between;
    }

    .nav-menu .header-menu .sub-menu li.menu-item-has-children > a:after {
        content: "\e900";
        transform: rotate(-90deg);
        right: auto;
        left: auto;
        top: 0;
        margin-left: 8px;
    }

    /* dark header variant keeps the light dropdown card */
    .header.dark .header-menu .sub-menu {
        background: #fff;
        border-color: #edecf5;
    }

    .header.dark .header-menu .sub-menu li a {
        color: var(--body-text, #2a2a2a) !important;
    }
}