/* ── NYEHS Mega Menu — matches baselsupercluster.com ── */

/* Strip browser list bullets from every ul/li inside the menu */
.nyehs-mm ul,
.nyehs-mm li,
body > .nyehs-mm__menu,
body > .nyehs-mm__menu li {
    list-style: none;
}

/* ─────────────────────────────────────────────────────────────────
   Nav wrapper
───────────────────────────────────────────────────────────────── */
.nyehs-mm {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* allow shrink below content min-width so siblings stay in row */
    justify-content: flex-end;
}

/* ─────────────────────────────────────────────────────────────────
   Top-level menu list
───────────────────────────────────────────────────────────────── */
.nyehs-mm__menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Top-level item
   position:relative so the absolute submenu is anchored here.
   border-radius so the white hover pill is clipped correctly.
───────────────────────────────────────────────────────────────── */
.nyehs-mm__item {
    position: relative;
    display: inline-block;
    border-radius: 999px;
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
}

/* Parent items use flex so the label and chevron are always vertically centred */
.nyehs-mm__item--parent {
    display: inline-flex;
    align-items: center;
}

.nyehs-mm__item:hover {
    background: rgba(255, 255, 255, 0.75);
}

/* ─────────────────────────────────────────────────────────────────
   Top-level link — label text (visual only on parent items)
───────────────────────────────────────────────────────────────── */
.nyehs-mm__link {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 15px;
    color: #000;
    font-family: var(--wp--preset--font-family--gt-eesti-display, sans-serif);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

.nyehs-mm__link:hover {
    color: #000;
    text-decoration: none;
}

.nyehs-mm__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #0d41ff);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The <p> inside .nyehs-mm__wrap resets browser margins */
.nyehs-mm__wrap p {
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Arrow-only toggle button (sits right of the label link)
───────────────────────────────────────────────────────────────── */
.nyehs-mm__arrow-wrap {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px 0 0;
    background: transparent;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    font-size: 0;   /* hides any accidental text nodes */
    cursor: pointer;
    color: inherit;
}

.nyehs-mm__arrow-wrap:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #0d41ff);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   Chevron arrow icon — rotates on parent hover / open
───────────────────────────────────────────────────────────────── */
.nyehs-mm__arrow {
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease-in-out;
}

.nyehs-mm__item--parent:hover .nyehs-mm__arrow,
.nyehs-mm__item--open .nyehs-mm__arrow {
    transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────
   Sub-menu
   position:absolute relative to .nyehs-mm__item (its nearest
   positioned ancestor).  top: calc(100% + 36px) leaves a 36px gap
   that is bridged by ::before so hover never breaks.
───────────────────────────────────────────────────────────────── */
.nyehs-mm__sub-menu {
    position: absolute;
    top: calc(100% + 36px);
    left: 0;
    width: max-content;
    min-width: 180px;
    /* Glassmorphism dropdown */
    background:
        linear-gradient(135deg, rgba(0, 23, 199, 0.08) 0%, rgba(0, 23, 199, 0.03) 100%),
        rgba(236, 242, 255, 0.7);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(100, 130, 255, 0.2);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: 25px 30px;
    list-style: none;
    margin: 0;
    z-index: 200;
    cursor: default;

    /* Hidden state — opacity/visibility/transform animate smoothly.
       No display:none so CSS transitions always fire. */
    opacity: 0;
    transform: scaleY(0.82) translateY(-8px);
    transform-origin: top;
    filter: blur(6px);
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity    0.2s  cubic-bezier(0.4, 0, 0.2, 1),
        transform  0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter     0.2s  cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.2s  cubic-bezier(0.4, 0, 0.2, 1);
}

/* 36px transparent bridge on the item itself — always present, not
   conditional on submenu visibility. Matches the submenu width (300px)
   to cover diagonal cursor paths to any part of the dropdown.
   Being inside the header stacking context (z-index:100) it wins
   pointer-events over the body-level overlay (z-index:5), so the
   cursor stays "inside" the <li> hover zone with no flicker. */
.nyehs-mm__item--parent::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 36px;
}

/* Secondary bridge on the submenu itself (belt-and-suspenders) */
.nyehs-mm__sub-menu::before {
    content: '';
    position: absolute;
    top: -36px;
    left: 0;
    right: 0;
    height: 36px;
}


/* JS-toggled open state (keyboard / mobile click) */
.nyehs-mm__item--open > .nyehs-mm__sub-menu {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    filter: blur(0);
    visibility: visible;
    pointer-events: auto;
}

/* Portalled sub-menu open state (desktop — body-level element) */
.nyehs-mm__sub-menu--open {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    filter: blur(0);
    visibility: visible;
    pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────────
   Sub-menu items — slide in from the right when submenu opens.
   Start state lives on the item itself (no [hidden] dependency).
───────────────────────────────────────────────────────────────── */
.nyehs-mm__sub-item {
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    pointer-events: none;
    transition:
        opacity   0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nyehs-mm__sub-item p {
    margin-block: 5px;
}

.nyehs-mm__sub-menu--open .nyehs-mm__sub-item {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* ─────────────────────────────────────────────────────────────────
   Sub-menu link
───────────────────────────────────────────────────────────────── */
.nyehs-mm__sub-link {
    display: block;
    padding: 0;
    text-decoration: none;
    color: #000;
    transition: color 0.3s ease-in-out;
}

.nyehs-mm__sub-link:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #0d41ff);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   Sub-menu wrap row (label + arrow icon) — slides right on hover
───────────────────────────────────────────────────────────────── */
.nyehs-mm__sub-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

.nyehs-mm .nyehs-mm__sub-wrap p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #000;
}

.nyehs-mm__sub-arrow {
    flex-shrink: 0;
    color: #0d41ff;
    transform: rotate(45deg);
}

/* ─────────────────────────────────────────────────────────────────
   Sub-menu description — slides right (slower) on hover
───────────────────────────────────────────────────────────────── */
.nyehs-mm .nyehs-mm__sub-desc {
    font-size: 0.9rem;
    font-weight: 400;
    color: #252422;
    line-height: 1.4;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

/* Hover slide effects — wrap slides 7px, desc slides 3px */
.nyehs-mm__sub-link:hover .nyehs-mm__sub-wrap {
    transform: translateX(7px);
}

.nyehs-mm__sub-link:hover .nyehs-mm__sub-desc {
    transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────────────
   Overlay — dims the full viewport behind an open sub-menu
───────────────────────────────────────────────────────────────── */
.nyehs-mm__overlay {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: transparent;
    pointer-events: none;
    transition: background 0.3s ease-in-out;
}

/* Desktop: overlay is moved to <body> by JS (escapes backdrop-filter
   containment in the pill row). body:has() targets it wherever it lives. */
body:has(.nyehs-mm__item--parent:hover) .nyehs-mm__overlay {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.15);
}

/* JS-toggled (mobile / keyboard) */
.nyehs-mm__overlay--active {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.15);
}

/* ─────────────────────────────────────────────────────────────────
   Mobile toggle button (hidden on desktop)
───────────────────────────────────────────────────────────────── */
.nyehs-mm__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #0f172a;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}

.nyehs-mm__mobile-toggle:hover {
    background: rgba(0, 0, 0, 0.07);
}

.nyehs-mm__mobile-toggle:focus-visible {
    outline: 2px solid #0d41ff;
    outline-offset: 2px;
}

/* Three-bar icon — 24 × 18 px bounding box */
.nyehs-mm__burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    pointer-events: none;
}

.nyehs-mm__burger span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform-origin: center;
    /*
     * Two independent transitions so each property can have its own timing.
     * `transform` uses a slightly longer easing to feel "physical".
     * `opacity` snaps faster for crisper feel on the middle bar.
     */
    transition:
        transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity   0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * X morph maths (container 24 × 18 px, bars 2 px tall):
 *   justify-content:space-between → bar centres at y = 1, 9, 17
 *   container centre = 9
 *   bar 1: translate +8 px down   then rotate  45°
 *   bar 3: translate  8 px up     then rotate -45°
 */
.nyehs-mm--mobile-open .nyehs-mm__burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.nyehs-mm--mobile-open .nyehs-mm__burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nyehs-mm--mobile-open .nyehs-mm__burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────────
   Responsive — mobile (≤ 960px)
───────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .nyehs-mm {
        flex: none;
        justify-content: flex-end;
        order: 999;
    }

    .nyehs-mm__mobile-toggle {
        display: flex;
    }

    /*
     * Floating glass panel.
     * The <ul> is moved to <body> by JS (escapes the header's
     * backdrop-filter containing block). Margins on all 4 sides
     * leave a visible reveal of the page around the edges.
     * The header (z:100) sits above the panel (z:99) so the
     * hamburger button stays accessible at all times.
     *
     * Glassmorphism: semi-transparent white + deep blur.
     */
    .nyehs-mm__menu {
        display: flex !important;
        position: fixed;
        /*
         * top / left / right / bottom are set by JS (positionMenu) so the
         * panel sits directly below the header row and matches its exact width.
         * These CSS values are fallbacks for the no-JS case only.
         */
        top: 80px;
        left: 16px;
        right: 16px;
        bottom: 16px;
        border-radius: 24px;
        /* Glass */
        background:
            linear-gradient(135deg, rgba(0, 23, 199, 0.08) 0%, rgba(0, 23, 199, 0.03) 100%),
            rgba(236, 242, 255, 0.7);
        backdrop-filter: blur(48px) saturate(200%);
        -webkit-backdrop-filter: blur(48px) saturate(200%);
        border: 1px solid rgba(100, 130, 255, 0.2);
        box-shadow:
            0 0 0 0.5px rgba(0, 0, 0, 0.06),
            0 24px 64px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
        /* Layout */
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 24px 40px;
        z-index: 99;
        overflow-y: auto;
        gap: 0;
        /* ── hidden state ── */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-14px) scale(0.96);
        pointer-events: none;
        transition:
            opacity    0.32s cubic-bezier(0.4, 0, 0.2, 1),
            transform  0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
            visibility 0s   linear 0.32s;
    }

    /* ── open state ── */
    .nyehs-mm__menu.nyehs-mm__menu--open {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition:
            opacity    0.32s cubic-bezier(0.4, 0, 0.2, 1),
            transform  0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
            visibility 0s   linear 0s;
    }

    /* Staggered entrance for top-level items */
    @keyframes nyehs-mm-item-in {
        from { opacity: 0; transform: translateX(-16px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    .nyehs-mm__menu--open .nyehs-mm__item {
        animation: nyehs-mm-item-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    .nyehs-mm__menu--open .nyehs-mm__item:nth-child(1) { animation-delay: 0.07s; }
    .nyehs-mm__menu--open .nyehs-mm__item:nth-child(2) { animation-delay: 0.12s; }
    .nyehs-mm__menu--open .nyehs-mm__item:nth-child(3) { animation-delay: 0.17s; }
    .nyehs-mm__menu--open .nyehs-mm__item:nth-child(4) { animation-delay: 0.22s; }
    .nyehs-mm__menu--open .nyehs-mm__item:nth-child(5) { animation-delay: 0.27s; }
    .nyehs-mm__menu--open .nyehs-mm__item:nth-child(6) { animation-delay: 0.32s; }
    .nyehs-mm__menu--open .nyehs-mm__item:nth-child(7) { animation-delay: 0.37s; }
    .nyehs-mm__menu--open .nyehs-mm__item:nth-child(8) { animation-delay: 0.42s; }

    /*
     * Top-level items.
     * Non-parent items: block, full-width link.
     * Parent items: flex row — label text on left, chevron on right.
     * Submenu wraps to a new line below the label row.
     */
    .nyehs-mm__item {
        display: block;
        width: 100%;
        border-radius: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .nyehs-mm__item--parent {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .nyehs-mm__item:last-child {
        border-bottom: none;
    }

    .nyehs-mm__item:hover {
        background: transparent;
    }

    /* Label link — full width for simple items */
    .nyehs-mm__link {
        display: block;
        padding: 18px 0;
        font-size: 1.125rem;
        width: 100%;
        color: #0f172a;
    }

    /* Label link — grows to fill row in parent items */
    .nyehs-mm__item--parent .nyehs-mm__link {
        flex: 1;
        width: auto;
    }

    /* Chevron button — compact, icon-only, right side of label row */
    .nyehs-mm__arrow-wrap {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 0;   /* keep desktop rule — only SVG shows */
        color: #334155;
    }

    /*
     * Sub-menu — full panel width.
     *
     * The panel has 24px horizontal padding. Using flex: 0 0 calc(100% + 48px)
     * and margin-left: -24px makes the submenu exactly as wide as the glass
     * panel itself — edge to edge, with the panel's border-radius clipping
     * the corners. Side padding mirrors the panel's 24px to keep text aligned.
     */
    .nyehs-mm__item--parent .nyehs-mm__sub-menu {
        flex: 0 0 calc(100% + 48px);
        max-width: calc(100% + 48px);
        margin-left: -24px;
        margin-right: 0;     /* right handled by flex-basis */
        border-radius: 0;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Disable CSS :hover on mobile — only .--open controls sub-menu */
    .nyehs-mm__item--parent:not(.nyehs-mm__item--open):hover > .nyehs-mm__sub-menu {
        opacity: 0 !important;
        transform: translateY(-6px) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        max-height: 0 !important;
    }

    /* Sub-menu: animated accordion — height + fade + slide.
       Borders and vertical padding are on the OPEN state only so the
       closed sub-menu contributes zero height to the parent flex row. */
    .nyehs-mm__sub-menu {
        position: static;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-6px);
        visibility: hidden;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.032);
        backdrop-filter: none;
        border: none;
        border-radius: 0;
        padding: 0 16px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        box-shadow:
            inset 0 2px 5px rgba(0, 0, 0, 0.055),
            inset 0 1px 2px rgba(0, 0, 0, 0.035),
            0 1px 0 rgba(255, 255, 255, 0.72);
        transition:
            max-height  0.36s cubic-bezier(0.4, 0, 0.2, 1),
            opacity     0.24s cubic-bezier(0.4, 0, 0.2, 1),
            transform   0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
            visibility  0s    linear 0.36s;
    }

    .nyehs-mm__item--parent::after,
    .nyehs-mm__sub-menu::before {
        display: none;
    }

    .nyehs-mm__item--open > .nyehs-mm__sub-menu,
    .nyehs-mm__sub-menu--open {
        max-height: 600px;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        transition:
            max-height  0.36s cubic-bezier(0.4, 0, 0.2, 1),
            opacity     0.24s cubic-bezier(0.4, 0, 0.2, 1),
            transform   0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
            visibility  0s    linear 0s;
    }

    /* Sub-items: re-use desktop fade+slide, staggered slightly after container opens */
    .nyehs-mm__sub-item {
        transition-delay: 0.1s;
    }


    /* Tiles and split sub-menus on mobile — max-height/opacity inherited from open rule */
    .nyehs-mm__item--open > .nyehs-mm__sub-menu--tiles,
    .nyehs-mm__item--open > .nyehs-mm__sub-menu--split,
    .nyehs-mm__sub-menu--open.nyehs-mm__sub-menu--tiles,
    .nyehs-mm__sub-menu--open.nyehs-mm__sub-menu--split {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .nyehs-mm__sub-menu--tiles {
        display: flex;
        flex-direction: column;
        gap: 6px;
        /* horizontal padding comes from the parent .nyehs-mm__item--parent rule */
        padding-top: 10px;
        padding-bottom: 10px;
        min-width: 0;
        width: 100%;
    }

    .nyehs-mm__sub-menu--split {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .nyehs-mm__sub-links {
        flex: none;
        padding: 4px 0;
    }

    .nyehs-mm__sub-tiles {
        flex: none;
        flex-direction: column;
        gap: 6px;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 0;
        padding: 10px 0;
        background: none;
    }

    /* Tiles inner row — vertical stack on mobile */
    .nyehs-mm__tiles-row {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    /* Tighter group separator on mobile */
    .nyehs-mm__tile-group + .nyehs-mm__tile-group {
        margin-top: 10px;
        padding-top: 10px;
    }

    /* Tiles become compact link rows — left accent border differentiates from plain links */
    .nyehs-mm__tile {
        width: 100%;
        height: auto;
        min-height: 0;
        flex-shrink: 1;
        border-radius: 0 !important;      /* base rule sets border-radius:20px later */
        background: none !important;
        background-image: none !important;
        border: none;
        border-left: 2px solid rgba(13, 98, 255, 0.35);
        padding: 7px 8px 7px 12px;
        overflow: visible;
        display: flex !important;         /* base rule sets display:block later */
        flex-direction: row !important;
        align-items: center !important;
        gap: 0;
        box-shadow: none !important;
        opacity: 1;
        transform: none;
        filter: none;
        pointer-events: auto;
        transition: border-color 0.18s ease;
        --tile-delay: 0ms;
    }

    .nyehs-mm__tile:hover {
        border-left-color: var(--wp--preset--color--accent, #0d41ff);
    }

    /* Shine sweep: hidden on mobile */
    .nyehs-mm__tile::after {
        display: none;
    }

    /* Gradient overlay repurposed as a small square thumbnail on mobile.
       Two-layer background: image on top, brand gradient underneath.
       When no image is set the gradient acts as the placeholder.
       translateZ(0) forces GPU compositing for smooth anti-aliased corners.
       !important needed: base ::before rule appears later in the file. */
    .nyehs-mm__tile::before {
        display: block !important;
        position: static !important;
        inset: auto !important;
        flex-shrink: 0;
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background-image:
            var(--nyehs-tile-bg, none),
            linear-gradient(
                135deg,
                var(--wp--preset--color--contrast)  0%,
                var(--wp--preset--color--accent-2)  50%,
                var(--wp--preset--color--accent)   100%
            ) !important;
        background-color: var(--wp--preset--color--contrast) !important;
        background-size: cover, cover !important;
        background-position: center, center !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        margin-right: 10px;
        z-index: auto !important;
        pointer-events: none;
        transform: translateZ(0);
    }

    /* Content: de-anchor from bottom, become a normal flex column */
    .nyehs-mm__tile .nyehs-mm__tile-content {
        position: static;
        padding: 0;
        z-index: auto;
        flex: 1;
        min-width: 0;
        transform: none !important;
        transition: none;
    }

    .nyehs-mm__tile .nyehs-mm__tile-label {
        color: var(--wp--preset--color--accent, #0d41ff);
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0;
    }

    .nyehs-mm__tile .nyehs-mm__tile-subtitle {
        color: rgba(15, 23, 42, 0.55);
        font-size: 0.75rem;
        margin-top: 1px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Tiles section label — embossed pill above the tile row
───────────────────────────────────────────────────────────────── */
/* Tile group wrapper — each group is label + tile row */
.nyehs-mm__tile-group {
    display: flex;
    flex-direction: column;
}

/* Space between consecutive groups */
.nyehs-mm__tile-group + .nyehs-mm__tile-group {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Header row: label pill on the left, fading rule extends to the right */
.nyehs-mm__tiles-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
}

/* The fading rule fills the space to the right of the label */
.nyehs-mm__tiles-header::after {
    content: '';
    flex: 1;
    min-width: 10px;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.14),
        transparent 85%
    );
}

.nyehs-mm__tiles-label {
    display: inline-block;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.11);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: rgba(15, 23, 42, 0.52);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────
   Tile card — base styles (all viewports)
   Width/height/animation are set per-breakpoint below.
───────────────────────────────────────────────────────────────── */
.nyehs-mm__tile {
    display: block;
    border-radius: 20px;
    background-image: var(--nyehs-tile-bg, none);
    background-color: #0f172a;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
}

/* Frosted glass panel (bottom) — anchored to tile, never translates with content on hover */
.nyehs-mm__tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(20px) brightness(0.62);
    -webkit-backdrop-filter: blur(20px) brightness(0.62);
    -webkit-mask-image: linear-gradient(to top, black 30%, transparent 58%);
    mask-image: linear-gradient(to top, black 30%, transparent 58%);
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.nyehs-mm__tile:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #0d41ff);
    outline-offset: 2px;
}

/* Diagonal shine sweep — slides across on hover */
.nyehs-mm__tile::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 65%
    );
    transform: translateX(-100%);
    z-index: 2;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.nyehs-mm__tile:hover::after {
    transform: translateX(100%);
}

/* Text content anchored to bottom — floats up on hover; frost lives on ::before */
.nyehs-mm__tile-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 14px 12px;
    z-index: 3;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nyehs-mm__tile:hover .nyehs-mm__tile-content {
    transform: translateY(-4px);
}

.nyehs-mm__tile-label {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

.nyehs-mm__tile-subtitle {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
    line-height: 1.3;
    margin-top: 3px;
    -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────
   Tile/split desktop layout (≥ 961px)
   Sized, animated, and structured for the dropdown panel.
   Mobile overrides live inside @media (max-width: 960px) above.
───────────────────────────────────────────────────────────────── */
@media (min-width: 961px) {

    /* Tiles-only sub-menu — column: optional label row + tile row */
    .nyehs-mm__sub-menu--tiles {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 16px;
        width: max-content;
    }

    /* Split sub-menu — auto-width from columns */
    .nyehs-mm__sub-menu--split {
        display: flex !important;
        flex-direction: row;
        gap: 0;
        padding: 0;
        width: max-content;
    }

    /* Left column — sizes to its longest link, no fixed width */
    .nyehs-mm__sub-links {
        flex: 0 0 auto;
        padding: 20px 24px;
        list-style: none;
        margin: 0;
        box-sizing: border-box;
    }

    /* Right column — column: optional label row + tile row */
    .nyehs-mm__sub-tiles {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 14px 16px 14px 12px;
        background: rgba(0, 0, 0, 0.025);
        border-left: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 0 20px 20px 0;
        box-sizing: border-box;
    }

    /* Tiles inner row — single nowrap row of tile cards */
    .nyehs-mm__tiles-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
    }

    /* Tile: desktop sizing + spring entrance */
    .nyehs-mm__tile {
        width: 160px;
        height: 192px;
        flex-shrink: 0;
        opacity: 0;
        transform: translateY(20px) scale(0.86);
        pointer-events: none;
        transition:
            opacity    0.4s  cubic-bezier(0.4, 0, 0.2, 1),
            transform  0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.3s  cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: var(--tile-delay, 0ms);
    }

    /* Per-tile stagger — cascades top-left to bottom-right */
    .nyehs-mm__tile:nth-child(1) { --tile-delay:  30ms; }
    .nyehs-mm__tile:nth-child(2) { --tile-delay:  75ms; }
    .nyehs-mm__tile:nth-child(3) { --tile-delay: 120ms; }
    .nyehs-mm__tile:nth-child(4) { --tile-delay: 165ms; }
    .nyehs-mm__tile:nth-child(5) { --tile-delay: 210ms; }
    .nyehs-mm__tile:nth-child(6) { --tile-delay: 255ms; }

    /* Open — animate to natural position */
    .nyehs-mm__sub-menu--open .nyehs-mm__tile {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    /* Hover lift — shadow only; scale transform causes backdrop-filter compositing artefacts */
    .nyehs-mm__sub-menu--open .nyehs-mm__tile:hover {
        box-shadow:
            0 14px 36px rgba(0, 0, 0, 0.42),
            0 4px 12px rgba(0, 0, 0, 0.22);
        transition-delay: 0ms;
    }

    /* Menu-body safety (also desktop-only) */
    body > .nyehs-mm__menu {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Reduced motion
───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .nyehs-mm__sub-menu,
    .nyehs-mm__sub-item,
    .nyehs-mm__arrow,
    .nyehs-mm__sub-wrap,
    .nyehs-mm__sub-desc,
    .nyehs-mm__burger span,
    .nyehs-mm__mobile-toggle,
    .nyehs-mm__tile,
    .nyehs-mm__tile::after,
    .nyehs-mm__tile-content {
        transition: none !important;
        animation: none !important;
    }
    .nyehs-mm__menu {
        transition: none !important;
    }
    /* Show tiles immediately, no entrance animation */
    .nyehs-mm__sub-menu--open .nyehs-mm__tile {
        opacity: 1;
        transform: none;
    }
}