/* =========================================================================
   px-desktop-menu — Overlay pill nav with submenu dropdowns (desktop only)
   Figma:
     - Pill:       284:2212 (1350x70)
     - Solutions:  285:3944 (panel 900x300 with categories + sub-items + featured)
     - Product:    285:3530 (panel 600x300 with items + featured)
     - About:      285:3760 (panel 600x300 with items + featured)
     - Language:   292:6947 (panel 200x180 simple list)
   ========================================================================= */

/* --- Wrapper --- */

.px-desktop-menu {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    padding-block-start: var(--D125);
    padding-block-end: var(--D125);
    pointer-events: none;
}

/* Overlay = vast (fixed) bovenaan, met wat lucht tot de schermrand. Figma 442:11080:
   de pill zweeft net onder de top en blijft tijdens scrollen in beeld. De gap tot
   de top komt uit padding-block-start (--D125) op .px-desktop-menu hierboven. */
.px-desktop-menu--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.px-desktop-menu__inner {
    pointer-events: auto;
}

/* --- Pill --- */

.px-desktop-menu__pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--D2);
    background-color: var(--Wit);
    border-radius: var(--R10);
    padding-inline: var(--D125);
    height: 70px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* --- Logo --- */

.px-desktop-menu__logo {
    display: flex;
    align-items: center;
    gap: var(--D075);
    flex-shrink: 0;
    text-decoration: none;
    color: var(--Zwart);
}

.px-desktop-menu__logo-img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.px-desktop-menu__logo-text {
    font-size: var(--Font-Size-H6);
    font-weight: var(--px-weight-bold);
    line-height: 1;
    color: var(--Zwart);
}

/* --- Nav --- */

.px-desktop-menu__nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.px-desktop-menu__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--D2);
}

.px-desktop-menu__nav-item {
    display: flex;
    align-items: center;
    position: static;
}

.px-desktop-menu__nav-link,
.px-desktop-menu__nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--D025);
    font-size: var(--Font-Size-H6);
    font-weight: var(--px-weight-semibold);
    line-height: 1;
    color: var(--Zwart);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--R5);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition:
        background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
        color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.px-desktop-menu__nav-item.has-submenu .px-desktop-menu__nav-trigger:hover,
.px-desktop-menu__nav-item.has-submenu.is-open .px-desktop-menu__nav-trigger {
    border-color: var(--Grijs-Licht);
    background-color: var(--Warm-Off-White);
}

.px-desktop-menu__nav-item:not(.has-submenu) .px-desktop-menu__nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.px-desktop-menu__nav-item.is-active .px-desktop-menu__nav-link,
.px-desktop-menu__nav-item.is-active .px-desktop-menu__nav-trigger {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.px-desktop-menu__nav-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 6px;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.px-desktop-menu__nav-chevron svg {
    width: 10px;
    height: 6px;
    display: block;
}

.px-desktop-menu__nav-item.is-open .px-desktop-menu__nav-chevron {
    transform: rotate(180deg);
}

/* --- End: language + CTA --- */

.px-desktop-menu__end {
    display: flex;
    align-items: center;
    gap: var(--D125);
    flex-shrink: 0;
}

.px-desktop-menu__lang-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.px-desktop-menu__lang {
    display: inline-flex;
    align-items: center;
    gap: var(--D025);
    padding: 6px 10px;
    border-radius: var(--R5);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--Zwart);
    font-family: inherit;
    transition:
        background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.px-desktop-menu__lang-wrap:hover .px-desktop-menu__lang,
.px-desktop-menu__lang-wrap.is-open .px-desktop-menu__lang {
    background-color: var(--Warm-Off-White);
    border-color: var(--Grijs-Licht);
}

.px-desktop-menu__lang-globe {
    width: 20px;
    height: 20px;
    display: block;
}

.px-desktop-menu__lang-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 6px;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.px-desktop-menu__lang-chevron svg {
    width: 10px;
    height: 6px;
    display: block;
}

.px-desktop-menu__lang-wrap.is-open .px-desktop-menu__lang-chevron {
    transform: rotate(180deg);
}

/* =========================================================================
   Submenu base
   ========================================================================= */

.px-desktop-menu__submenu {
    position: absolute;
    top: calc(100% + var(--D075));
    z-index: 90;
    background-color: var(--Wit);
    border-radius: var(--R10);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14), 0 6px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px) scale(0.975);
    transform-origin: top center;
    transition:
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 520ms;
    pointer-events: none;
}

.px-desktop-menu__nav-item.is-open .px-desktop-menu__submenu,
.px-desktop-menu__lang-wrap.is-open .px-desktop-menu__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
        opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

.px-desktop-menu__submenu-inner {
    display: grid;
    width: 100%;
    height: 100%;
}

/* --- Columns layout (Solutions, 900x300, 3 cols 300/300/300) --- */

.px-desktop-menu__submenu--columns {
    width: 900px;
    height: 300px;
    left: 50%;
    transform: translateX(-50%) translateY(-14px) scale(0.975);
}

.px-desktop-menu__nav-item.is-open .px-desktop-menu__submenu--columns {
    transform: translateX(-50%) translateY(0) scale(1);
}

.px-desktop-menu__submenu--columns .px-desktop-menu__submenu-inner {
    grid-template-columns: 300px 300px 300px;
}

/* --- Simple list layout (Product, About, 600x300, 2 cols 300/300) --- */

.px-desktop-menu__submenu--simple_list {
    width: 600px;
    height: 300px;
    left: 50%;
    transform: translateX(-50%) translateY(-14px) scale(0.975);
}

.px-desktop-menu__nav-item.is-open .px-desktop-menu__submenu--simple_list {
    transform: translateX(-50%) translateY(0) scale(1);
}

.px-desktop-menu__submenu--simple_list .px-desktop-menu__submenu-inner {
    grid-template-columns: 300px 300px;
}

/* --- Categories column (left in columns layout) --- */

.px-desktop-menu__submenu-col--cats {
    background-color: var(--Warm-Off-White);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding-inline: var(--D15);
}

/* --- Sub-items column (middle in columns layout) --- */

.px-desktop-menu__submenu-col--subs {
    position: relative;
    background-color: var(--Wit);
    padding: var(--D15);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.px-desktop-menu__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    gap: var(--D075);
    width: 100%;
    padding-block-start: 50px; /* aligns with active button top in cats column */
}

.px-desktop-menu__sublist.is-active {
    display: flex;
}

.px-desktop-menu__sublist-item {
    margin: 0;
    padding: 0;
}

.px-desktop-menu__sublist-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--Font-Size-H6);
    font-weight: var(--px-weight-semibold);
    line-height: 1.5;
    color: var(--Zwart);
    text-decoration: none;
    transition: color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.px-desktop-menu__sublist-link:hover {
    color: var(--Teal-Base);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.px-desktop-menu__sublist-link.is-active {
    color: var(--Accent-Company-100);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Items column (left in simple_list layout) --- */

.px-desktop-menu__submenu-col--items {
    background-color: var(--Warm-Off-White);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding-inline: var(--D15);
}

.px-desktop-menu__lang-link {
    transition: color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Link buttons (cat-btn + simple list items) --- */

.px-desktop-menu__link-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--D1);
    height: 38px;
    padding-inline: 12px;
    border-radius: var(--R5);
    background-color: var(--Wit);
    color: var(--Zwart);
    font-size: var(--Font-Size-H6);
    font-weight: var(--px-weight-semibold);
    text-decoration: none;
    transition:
        background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
        color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.px-desktop-menu__link-btn:hover {
    background-color: var(--Zwart);
    color: var(--Wit);
}

.px-desktop-menu__link-btn:hover .px-desktop-menu__link-arrow svg {
    color: var(--Wit);
}

.px-desktop-menu__link-btn.is-active {
    background-color: var(--Zwart);
    color: var(--Wit);
}

.px-desktop-menu__link-label {
    flex: 1 1 auto;
}

.px-desktop-menu__link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 11px;
    flex-shrink: 0;
}

.px-desktop-menu__link-arrow svg {
    width: 14px;
    height: 11px;
    display: block;
    color: currentColor;
}

/* --- Featured card (right column for solutions/product/about) --- */

.px-desktop-menu__featured {
    position: relative;
    width: 300px;
    height: 300px;
    background: linear-gradient(180deg, #2a3c3c 0%, #020e0e 100%);
    color: var(--Wit);
    overflow: hidden;
}

.px-desktop-menu__featured-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.px-desktop-menu__featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.px-desktop-menu__featured-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url('/wp-content/themes/business-radar-theme/components/px-desktop-menu/images/diagonal-stripes-cropped.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.5;
    pointer-events: none;
    filter: invert(1) brightness(2.5);
    mix-blend-mode: soft-light;
}

.px-desktop-menu__featured-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 24px;
    height: 100%;
    justify-content: flex-start;
    padding-block-start: 56px;
}

.px-desktop-menu__featured-eyebrow {
    display: block;
    font-size: 11px;
    line-height: 1;
    font-weight: var(--px-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--Accent-Company-100);
    margin-block-end: 8px;
}

.px-desktop-menu__featured-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    font-weight: var(--px-weight-bold);
    color: var(--Wit);
}

.px-desktop-menu__featured-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--Wit);
    margin-block-start: 10px;
}

.px-desktop-menu__featured-body .px-btn {
    margin-block-start: auto;
    align-self: flex-start;
}

/* =========================================================================
   Language submenu (small panel anchored to right)
   ========================================================================= */

.px-desktop-menu__submenu--language {
    width: 200px;
    height: auto;
    right: 0;
    left: auto;
    transform: translateY(-8px);
    padding: 16px;
    overflow: visible;
}

.px-desktop-menu__lang-wrap.is-open .px-desktop-menu__submenu--language {
    transform: translateY(0);
}

.px-desktop-menu__submenu--language .px-desktop-menu__submenu-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.px-desktop-menu__submenu-eyebrow {
    display: block;
    font-size: 11px;
    line-height: 1;
    font-weight: var(--px-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--Accent-Company-100);
    padding-block-end: 8px;
    border-block-end: 1px solid var(--Grijs-Licht);
}

.px-desktop-menu__lang-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.px-desktop-menu__lang-list .px-desktop-menu__lang-item {
    line-height: 31px;
}

.px-desktop-menu__lang-item {
    margin: 0;
    padding: 0;
}

.px-desktop-menu__lang-link {
    display: block;
    font-size: var(--Font-Size-H6);
    font-weight: var(--px-weight-semibold);
    line-height: 31px;
    color: var(--Zwart);
    text-decoration: none;
    transition: color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.px-desktop-menu__lang-link:hover {
    color: var(--Teal-Base);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.px-desktop-menu__lang-link.is-active {
    color: var(--Accent-Company-100);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================================================================
   Responsive: hide on mobile/tablet
   De pill toont alleen op echte desktop (>= 1200px). Op tablet en kleiner
   neemt px-mobile-menu het over (feedback #168: het brede desktop-pill
   liep op tablet over de viewport). Houd dit in sync met de min-width grens
   in px-mobile-menu/css/frontend.css (1200px) en het breakpoint-veld.
   ========================================================================= */

@media (max-width: 1199px) {
    .px-desktop-menu {
        display: none;
    }
}