/* Make the WP template part wrapper sticky to follow scroll */
header.wp-block-template-part:has(.main-nav) {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--wp--preset--color--white);
    width: 100%;
}

/* Only when a desktop mega-menu dropdown OR the mobile menu is open,
   raise the z-index of the whole header (and its dropdown/panels) */
header.wp-block-template-part:has(.mega-menu__item.is-open),
header.wp-block-template-part:has(.mega-menu__mobile-content.is-open) {
    z-index: 100000;
}

/* Accommodate the WordPress Admin Bar for logged-in users */
.admin-bar header.wp-block-template-part:has(.main-nav) {
    top: 32px;
}

@media screen and (max-width: 782px) {
    /* Force the WP Admin Bar to remain fixed on mobile so it doesn't scroll away and break the sticky header offset */
    #wpadminbar {
        position: fixed !important;
    }
    .admin-bar header.wp-block-template-part:has(.main-nav) {
        top: 46px;
    }
}

header.main-nav {
    /* Adding a small top/bottom padding ensures wrapped items don't hit the container bounds */
    padding: var(--wp--preset--spacing--spacing-sm) var(--wp--preset--spacing--spacing-lg);
    /* Set both row and column gap so spacing remains consistent even when items wrap */
    gap: var(--wp--preset--spacing--spacing-md) var(--wp--preset--spacing--spacing-lg);
    justify-content: space-between;
    align-items: center;
    /* Always allow dynamic wrapping so the layout never breaks with new content */
    flex-wrap: wrap;
}

header.main-nav > .wp-block-group {
    width: 100%;
}

header.main-nav > .wp-block-group > .wp-block-group {
    width: 100%;
}

/* Allow the mega menu container to flexibly take up space and align properly */
.site-header {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Prevent the logo container from shrinking */
.site-header__logo {
    flex: 0 0 auto;
}

/* Ensure the button maintains its intrinsic size and aligns to the right */
.main-nav__buttons {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
}

.mega-menu ul {
    list-style-type: none;
    padding: 0;
}

.mega-menu a {
    text-decoration: none;
    color: var(--wp--preset--color--brand-primary-navy);
    font-size: var(--wp--preset--font-size--body-default);
}

.mega-menu a:hover {
    text-decoration: underline;
}

.mega-menu .product-card .wp-block-button__link:hover {
    text-decoration: none;
}

.mega-menu__top-level {
    margin: 0;

    display: flex;
    flex-flow: row;
    gap: var(--wp--preset--spacing--spacing-xxsm);
}

.mega-menu__top-level > li.mega-menu__item {
    padding: 0;
}

.mega-menu__top-level > li.mega-menu__item > .mega-menu__link {
    font-size: var(--wp--preset--font-size--body-l);
    font-weight: 500;
    text-decoration: none;
    color: var(--wp--preset--color--brand-primary-navy);
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 24px;
    transition: background-color 0.2s ease;
}

/* --- Active State Highlighting (Mega Menu Only) --- */
.mega-menu__top-level > li.mega-menu__item > .mega-menu__link.is-current,
.mega-menu__top-level > li.mega-menu__item > .mega-menu__link.is-current-ancestor,
a.mega-menu__heading.is-current,
a.mega-menu__sub-link.is-current,
.drilldown-panel__link.is-current,
.drilldown-panel__trigger.is-current-ancestor {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

button.mega-menu__link {
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.mega-menu__top-level > li.mega-menu__item.is-open > .mega-menu__link,
.mega-menu__top-level > li.mega-menu__item:hover > .mega-menu__link {
    background-color: var(--wp--preset--color--violet-300);
}

.mega-menu__dropdown {
    display: none;
    position: absolute;
    /* Now display under the WP's main nav */
    left: 0;
    top: 100%;
    background-color: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--spacing-xxxbig) var(--wp--preset--spacing--spacing-lg);
    width: 100%;
    border-top: 1px solid var(--wp--preset--color--border-default);
    box-shadow: 0px 4px 12px 0px #00000026;
    z-index: 10;
    box-sizing: border-box;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior-y: contain; /* Prevent scrolling the page behind the menu */
}

.mega-menu__dropdown-inner {
    display: flex;
    gap: var(--wp--preset--spacing--spacing-xbig);
    justify-content: space-between;
}

.mega-menu__promo {
    flex-shrink: 0;
}

/* Accommodate the WordPress Admin Bar offsets dynamically */
.admin-bar .mega-menu__dropdown {
    max-height: calc(100vh - 100% - 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar .mega-menu__dropdown {
        max-height: calc(100vh - 100% - 46px);
    }
}

header.main-nav .block-editor-block-list__block {
    position: static;
}

/* Replaced hover interaction with js click toggle .is-open class */
.mega-menu__top-level > li.mega-menu__item.is-open .mega-menu__dropdown {
    display: block;
}

.mega-menu__toggle-icon {
    margin-left: var(--wp--preset--spacing--spacing-xxsm);
    transition: transform 0.3s ease;
    font-size: 0.8em;
}

/* Rotates the FontAwesome icon 180 degrees when open */
.mega-menu__item.is-open .mega-menu__toggle-icon {
    transform: rotate(180deg);
}

ul.mega-menu__columns {
    display: flex;
    flex-flow: row wrap;
    gap: var(--wp--preset--spacing--spacing-xbig);
    justify-content: flex-start;
    width: 100%;
    flex: 1;
    height: fit-content;
    margin: 0;
}

li.mega-menu__column {
    min-width: 256px;
}

.mega-menu__column--fast-links {
    display: flex;
    flex-direction: column;
}

/* Reset margins for h3 elements acting as menu items */
h3.mega-menu__link,
h3.mega-menu__heading,
h3.mega-menu__sub-heading,
h3.drilldown-panel__link {
    margin: 0;
}

a.mega-menu__heading,
h3.mega-menu__heading {
    display: block;
    margin-bottom: var(--wp--preset--spacing--spacing-md);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--body-l);
    color: var(--wp--preset--color--brand-primary-navy);
}

h3.mega-menu__sub-heading {
    font-size: inherit;
    font-weight: 500;
    color: var(--wp--preset--color--brand-primary-navy);
}

ul.mega-menu__sub {
}

ul.mega-menu__sub > li {
    padding: var(--wp--preset--spacing--spacing-xsm) 0;
}

ul.mega-menu__sub--fast-link {
    background-color: var(--wp--preset--color--violet-100);
    padding: var(--wp--preset--spacing--spacing-sm);
    padding-right: var(--wp--preset--spacing--spacing-big);
    flex-grow: 1;
}

ul.mega-menu__sub--fast-link .svg-inline--fa {
    padding: 0 var(--wp--preset--spacing--spacing-sm);
}

ul.mega-menu__sub--fast-link a {
    display: flex; /* tricks to have the link text aligned when breaking into new line */
}

.mega-menu .product-list__grid {
    grid-template-columns: unset;
}

.mega-menu .product-card {
    width: 250px;
}

.mega-menu section.product-card__description,
.mega-menu section.product-card__banner,
.mega-menu section.product-card__estimation {
    display: none;
}

.mega-menu .product-card__buttons {
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;
}

.mega-menu .wp-block-button {
    white-space: nowrap;
}

.mega-menu .product-card__read-more {
    display: block;
}

.mega-menu .product-card__sign-contract a,
.mega-menu .product-card__read-more a:hover {
    color: var(--wp--preset--color--white);
}

.mega-menu .product-card__read-more a.wp-block-button__link.wp-element-button {
    background-color: var(--wp--preset--color--white);
}

.mega-menu .product-card__read-more a.wp-block-button__link.wp-element-button:hover {
    color: var(--wp--preset--color--brand-primary-navy);
}

/* add gap to navigation editor */
.wp-block-navigation__container.block-editor-block-list__layout {
    gap: var(--wp--preset--spacing--spacing-sm);
}

/* Mobile view visibility */
@media screen and (max-width: 1070px) {
    header.top-nav {
        display: none !important;
    }

    header.main-nav {
        padding: var(--wp--preset--spacing--spacing-sm) var(--wp--preset--spacing--spacing-md) !important;
        justify-content: space-between;
        gap: var(--wp--preset--spacing--spacing-xbig);
    }

    .site-header {
        display: contents;
    }

    header.main-nav > .wp-block-group:first-child {
        display: flex;
        align-items: center;
        gap: 0 !important;
    }

    .mega-menu {
        display: none;
    }

    .mega-menu--mobile {
        display: flex;
        order: 1;
        margin-right: 20px;
    }

    .wp-block-site-logo {
        order: 2;
    }

    .main-nav__buttons {
        order: 3;
        margin-left: auto;
    }

    .mega-menu__mobile-content {
        display: none;
        position: fixed;
        top: 75px; /* header height */
        left: 0;
        width: 100vw;
        height: calc(100vh - 75px);
        background: white;
        z-index: 9;
        overflow-y: auto;
    }

    .admin-bar .mega-menu__mobile-content {
        top: calc(75px + 46px); /* header height + admin bar height */
        height: calc(100vh - 75px - 46px);
    }

    .mega-menu__mobile-content.is-open {
        display: block;
    }

    button.mega-menu__mobile-toggle {
        font-size: var(--wp--preset--font-size--heading-s);
        color: var(--wp--preset--color--brand-primary-navy);
        background: none;
        border: none;
        padding: 0;
        width: 30px; /* set width to prefent FontAwesome flash pushing the items */
    }

    .mega-menu__mobile-toggle[aria-expanded="false"] .toggle-close,
    .mega-menu__mobile-toggle[aria-expanded="true"] .toggle-open {
        display: none;
    }

    .mega-menu__mobile-top {
        padding: var(--wp--preset--spacing--spacing-sm) var(--wp--preset--spacing--spacing-md);
        background-color: var(--wp--preset--color--violet-200);
        display: flex;
        gap: var(--wp--preset--spacing--spacing-md);
    }

    .mega-menu__mobile-top .wp-block-search__button {
        padding: 0;
        width: 48px;
        height: 48px;
        background-color: var(--wp--preset--color--neutral-grey-100);
        color: var(--wp--preset--color--brand-primary-navy);
    }

    .mega-menu__mobile-top .wp-block-search__button svg {
        height: 48px;
    }

    .mega-menu__mobile-top .wp-block-button .wp-block-button__link {
        font-size: 0;
        padding: 0;
        margin-top: -2px; /* visual vertical align fix */
    }

    .mega-menu__mobile-top .wp-block-button .wp-block-button__link .wp-font-awesome-icon {
        font-size: var(--wp--preset--font-size--heading-xs);
        background-color: var(--wp--preset--color--neutral-grey-100);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .mega-menu__mobile-sectors ul {
        padding: var(--wp--preset--spacing--spacing-md) var(--wp--preset--spacing--spacing-md);
        border-bottom: 1px solid var(--wp--preset--color--border-light);
    }

    .mega-menu__mobile-sectors ul li.wp-block-navigation-item {
        padding: var(--wp--preset--spacing--spacing-xsm) var(--wp--preset--spacing--spacing-sm);
    }

    .mega-menu__mobile-sectors ul li.wp-block-navigation-item.current-menu-ancestor {
        background-color: var(--wp--preset--color--violet-200);
        border-radius: var(--wp--preset--spacing--spacing-xbig);
    }

    .mega-menu__mobile-sectors ul li.wp-block-navigation-item a {
        font-size: var(--wp--preset--font-size--body-s);
    }

    .mega-menu__mobile-spot-price {
        padding: var(--wp--preset--spacing--spacing-md) var(--wp--preset--spacing--spacing-xbig);
        border-bottom: 1px solid var(--wp--preset--color--border-light);
    }
}

@media screen and (min-width: 1071px) {
    .mega-menu {
        display: flex;
        flex: 1;
    }

    .site-header__logo {
        margin-right: var(--wp--preset--spacing--spacing-xbig);
    }

    .mega-menu--mobile,
    .mega-menu__mobile-content {
        display: none !important;
    }
}

@media screen and (max-width: 400px) {
    header.main-nav {
        gap: var(--wp--preset--spacing--spacing-xsm);
    }
}

@keyframes drilldown-in-right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes drilldown-in-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes drilldown-out-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes drilldown-out-right {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.mega-menu__mobile-main {
    position: relative;
    overflow-x: hidden;
    padding: 0 var(--wp--preset--spacing--spacing-md);
}

.drilldown-panel {
    display: none;
    width: 100%;
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--spacing-md);
}

.drilldown-panel.is-active {
    display: block;
}

.drilldown-panel.drilldown-slide-in-right {
    display: block;
    animation: drilldown-in-right 0.25s ease forwards;
}

.drilldown-panel.drilldown-slide-in-left {
    display: block;
    animation: drilldown-in-left 0.25s ease forwards;
}

.drilldown-panel.drilldown-slide-out-left {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: drilldown-out-left 0.25s ease forwards;
}

.drilldown-panel.drilldown-slide-out-right {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: drilldown-out-right 0.25s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .drilldown-panel.drilldown-slide-in-right,
    .drilldown-panel.drilldown-slide-in-left,
    .drilldown-panel.drilldown-slide-out-left,
    .drilldown-panel.drilldown-slide-out-right {
        animation: none;
    }
}

/* Panel header: back button + section title */

.drilldown-panel__header {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--spacing-xsm);
    padding: var(--wp--preset--spacing--spacing-sm) var(--wp--preset--spacing--spacing-md);
    margin-bottom: var(--wp--preset--spacing--spacing-md);
    border-radius: var(--wp--preset--spacing--spacing-xxsm);
    background-color: var(--wp--preset--color--violet-100);
}

.drilldown-panel__back {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--spacing-xsm);
    background: none;
    border: none;
    padding: 0;
    color: var(--wp--preset--color--brand-primary-navy);
    font-size: var(--wp--preset--font-size--body-l);
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

.drilldown-panel__back:hover {
    color: var(--wp--preset--color--deep-navy-600);
}

.drilldown-panel__heading-link {
    font-size: var(--wp--preset--font-size--body-l);
    font-weight: 500;
    color: var(--wp--preset--color--brand-primary-navy);
    text-decoration: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drilldown-panel__heading-link:hover {
    color: var(--wp--preset--color--deep-navy-600);
}

/* Panel list items */

.drilldown-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drilldown-panel__item {
    margin-bottom: var(--wp--preset--spacing--spacing-sm);
}

a.drilldown-panel__link,
button.drilldown-panel__trigger,
h3.drilldown-panel__link {
    font-family: inherit;
    display: flex;
    gap: var(--wp--preset--spacing--spacing-xsm);
    align-items: center;
    width: 100%;
    padding: var(--wp--preset--spacing--spacing-sm) 0;
    text-decoration: none;
    color: var(--wp--preset--color--brand-primary-navy);
    font-size: var(--wp--preset--font-size--body-l);
    line-height: 1.2;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: 500;
}

.drilldown-panel__item--level-3 .drilldown-panel__link {
    font-weight: 400;
}

.drilldown-panel__link:hover,
.drilldown-panel__trigger:hover {
    color: var(--wp--preset--color--deep-navy-600);
}

ul.drilldown-panel__list--fast-links {
    background-color: var(--wp--preset--color--violet-100);
    padding: var(--wp--preset--spacing--spacing-md);
    margin-top: var(--wp--preset--spacing--spacing-md);
    border-radius: var(--wp--preset--spacing--spacing-xxsm);
}

.drilldown-panel__list--fast-links .drilldown-panel__item {
    margin-bottom: 0;
}

.drilldown-panel__list--fast-links .drilldown-panel__link {
    gap: var(--wp--preset--spacing--spacing-xsm);
    justify-content: flex-start;
    font-weight: 400;
    padding: var(--wp--preset--spacing--spacing-xsm) 0;
}

.drilldown-panel__direction-icon {
    font-size: var(--wp--preset--font-size--body-xl);
    margin-top: -4px;
}

:is(.mega-menu--mobile, .mega-menu__mobile-content) .product-list {
    margin: var(--wp--preset--spacing--spacing-xbig) 0;
}

:is(.mega-menu--mobile, .mega-menu__mobile-content) .product-card {
    width: inherit;
}

/* ==========================================================================
   EDITOR OVERRIDE
   The Site Editor canvas is narrow due to UI panels. To make editing the
   desktop header easier, we forcefully reverse the mobile layout down to
   782px specifically inside the editor wrapper.
   ========================================================================== */

body.editor-styles-wrapper .wp-block:has(> .site-header),
body.editor-styles-wrapper .block-editor-block-list__block:has(> .site-header) {
    width: 100%;
    flex: 1 1 auto;
}

@media screen and (min-width: 783px) and (max-width: 1070px) {
    body.editor-styles-wrapper header.top-nav {
        display: block !important;
    }
    body.editor-styles-wrapper header.main-nav {
        padding: var(--wp--preset--spacing--spacing-sm) var(--wp--preset--spacing--spacing-lg) !important;
        gap: var(--wp--preset--spacing--spacing-md) var(--wp--preset--spacing--spacing-lg) !important;
    }
    body.editor-styles-wrapper .site-header {
        display: flex !important;
    }
    body.editor-styles-wrapper header.main-nav > .wp-block-group:first-child {
        display: block !important;
    }
    body.editor-styles-wrapper .mega-menu {
        display: flex !important;
        flex: 1 !important;
    }
    body.editor-styles-wrapper .mega-menu--mobile,
    body.editor-styles-wrapper .mega-menu__mobile-content {
        display: none !important;
    }
    body.editor-styles-wrapper .wp-block-site-logo {
        order: unset !important;
    }
    body.editor-styles-wrapper .site-header__logo {
        margin-right: var(--wp--preset--spacing--spacing-xbig) !important;
    }
    body.editor-styles-wrapper .main-nav__buttons {
        order: unset !important;
        margin-left: auto !important;
    }
}