@import url("../../../icomoon/style.css");

.wp-block-navigation ul.wp-block-navigation__container {
    gap: 0;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    left: 0;
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
    width: 16px;
    margin-left: -15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
    display: none;
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
    &:after {
        content: "\e973";
        font-family: "icomoon" !important;
        transition: all 0.3s ease-in-out;
        color: var(--wp--preset--color--primary);
    }
    &[aria-expanded="true"]::after{
        transform: rotate(180deg);
    }
}

.wp-block-navigation .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
    background-color: var(--wp--preset--color--base);
}

.wp-block-navigation .wp-block-navigation-item {
    padding-left: var(--wp--preset--spacing--30);
    padding-right: var(--wp--preset--spacing--30);
    position: relative;
}

.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle[aria-expanded="true"]+.wp-block-navigation__submenu-icon:after {
    transform: rotate(-180deg);
}

.wp-block-navigation .wp-block-navigation-item {
    position: relative;
}

.wp-block-navigation .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"])::before {
    display: block;
}


.wp-block-navigation .wp-block-navigation-item:before {
    content: "";
    width: 100%;
    left: 0;
    position: absolute;
    display: none;
    height: 5px;
    background-color: var(--wp--preset--color--base);
    bottom: 0;
    z-index: 20;
    pointer-events: none;
}

.wp-block-navigation .wp-block-navigation-item:after {
    content: '';
    display: block;
    width: calc(100% - var(--wp--preset--spacing--30) * 2);
    left: var(--wp--preset--spacing--30);
    height: 3px;
    background-color: var(--wp--preset--color--primary);
    position: absolute;
    bottom: 0;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item:after,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor:after {
    opacity: 1;
}

@media (max-width: 782px) {
    .wp-block-navigation .wp-block-navigation-item:after {
        display: none;
    }
    .wp-block-navigation-item:has(.wp-block-navigation__submenu-icon) .wp-block-navigation-item__content.wp-block-navigation-item__content {
        padding-right: 0 !important;
    }
    .wp-block-navigation .wp-block-navigation-item a {
        width: 100%;
        display: flex;
    }
    .wp-block-navigation .wp-block-navigation-item:has(> ul.wp-block-navigation__submenu-container) > a:after {
        position: relative;
        width: auto;
        height: auto;
        background-color: transparent;
        margin-left: auto;
        content: "\e975";
        font-family: "icomoon" !important;
        margin-right: 5px;
        width: 12px;
        display: inline-flex;
        color: var(--wp--preset--color--primary);
        align-items: center;
        transition: all 0.3s ease-in-out;
        position: relative;
        left: 0;
    }
}

.wp-block-navigation.is-vertical .wp-block-navigation-item {
    padding: 0;
    &:after {
        display: none;
    }
}

.wp-block-navigation .wp-block-navigation-item:hover:after {
    opacity: 1;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding-top: 16.5px;
    padding-bottom: 16.5px;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--normal);
}

.wp-block-navigation.is-vertical .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding: 0;
    display: inline-flex;
    align-items: center;
    font-size: var(--wp--preset--font-size--normal);
    font-weight: normal;
}

@media (max-width: 782px) {
    .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
        font-size: 18px
    }

    .wp-block-navigation__responsive-container button.wp-submenu-back {
        border: 0;
    }

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
    .wp-block-navigation ul.wp-block-navigation-submenu.wp-block-navigation__submenu-container {
        box-shadow: none !important;
    }
}

.wp-block-navigation-item:has(.wp-block-navigation__submenu-icon) .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding-right: 25px;
}

.wp-block-navigation ul.wp-block-navigation-submenu.wp-block-navigation__submenu-container {
    gap: var(--wp--preset--spacing--40);
    border: 0;
    width: auto;
    padding: var(--wp--preset--spacing--30);
    box-shadow: var(--wp--preset--shadow--subtle);
}

.wp-block-navigation ul.wp-block-navigation-submenu.wp-block-navigation__submenu-container .wp-block-navigation-item {
    padding-left: 0;
    padding-right: 0;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item__content {
    display: flex !important;
    align-items: flex-start;
    padding: 0;
    font-size: var(--wp--preset--font-size--normal);
}

@media (max-width: 782px) {
    .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item__content {
        font-size: var(--wp--preset--font-size--medium);
    }
    .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu .wp-parent-duplicate a.wp-block-navigation-item__content {
        font-weight: 700;
    }
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item__content:before,
.wp-block-navigation.is-vertical .wp-block-navigation-item:not(:has(.wp-block-navigation-submenu)) .wp-block-navigation-item__content::before {
    content: "\e975";
    font-family: "icomoon" !important;
    margin-right: 5px;
    width: 12px;
    display: flex;
    color: var(--wp--preset--color--primary);
    align-items: center;
    transition: all 0.3s ease-in-out;
    position: relative;
    left: 0;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item .wp-block-navigation-item__content {
    font-weight: normal;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item:after {
    display: none;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item__content span.wp-block-navigation-item__label,
.wp-block-navigation.is-vertical .wp-block-navigation-item:not(:has(.wp-block-navigation-submenu)) .wp-block-navigation-item__content span.wp-block-navigation-item__label {
    transition: all 0.3s ease-in-out;
    position: relative;
    left: 0;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item__content:hover span.wp-block-navigation-item__label,
.wp-block-navigation.is-vertical .wp-block-navigation-item .wp-block-navigation-item__content:hover span.wp-block-navigation-item__label {
    left: 5px;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item__content:hover:before,
.wp-block-navigation.is-vertical .wp-block-navigation-item .wp-block-navigation-item__content:hover:before {
    left: 10px;
}

/* Default navigation */
[class*="is-style-default"] .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item__content span.wp-block-navigation-item__label,
[class*="is-style-default"] .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) .wp-block-navigation-item__label {
    color: var(--wp--preset--color--contrast);
}

/* Black navigation */
[class*="is-style-nav-contrast"] .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]),
[class*="is-style-nav-contrast"] .wp-block-navigation .wp-block-navigation-item:before,
[class*="is-style-nav-contrast"] ul.wp-block-navigation-submenu.wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--contrast);
}

[class*="is-style-nav-contrast"] .wp-block-navigation-item .wp-block-navigation-submenu .wp-block-navigation-item__content span.wp-block-navigation-item__label,
[class*="is-style-nav-contrast"] .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) .wp-block-navigation-item__label {
    color: var(--wp--preset--color--base);
}

/* Mobile navigation */
@media (max-width: 782px) {
    html.has-modal-open .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open:after {
        content: "\ea43";
    }

    .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
        display: flex;
        align-items: center;
        gap: var(--wp--preset--spacing--20);
    }

    .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open:before {
        content: 'Menu';
        font-size: 18px;
        color: var(--wp--preset--color--contrast);
        font-weight: 700;
    }

    .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open:after {
        content: "\e943";
        font-family: "icomoon" !important;
        font-size: 22px;
        color: var(--wp--preset--color--primary);
    }

    /* Sluiten */
    :root {
        --header-height: 70px;
    }

    .wp-block-navigation__responsive-container {
        position: fixed;
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        overflow: hidden;
        width: 100%;
    }


    .wp-block-navigation__responsive-container-close {
        display: flex;
        align-items: center;
        display: none;
        gap: var(--wp--preset--spacing--20);
    }

    .wp-block-navigation__responsive-container-close:before {
        content: 'Sluiten';
        font-size: 18px;
        color: var(--wp--preset--color--contrast);
        font-weight: 700;
    }

    .wp-block-navigation__responsive-container-close:after {
        content: "\ea43";
        font-family: "icomoon" !important;
        font-size: 22px;
        color: var(--wp--preset--color--primary);
    }

    .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation__responsive-container-close svg {
        display: none;
    }

    .wp-block-navigation__responsive-container {
        align-items: flex-start;
        text-align: left;
        overflow: hidden !important;
        padding: var(--wp--custom--global--spacing--padding--background) !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content,
    .wp-block-navigation ul.wp-block-navigation__container,
    .wp-block-navigation .wp-block-navigation-item {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding-top: 0 !important;
    }

    .wp-block-navigation .wp-block-navigation-item {
        padding: 0 !important;
        width: 100% !important;
    }
}

header.transparant {
    z-index: 100;
    position: absolute !important;
    width: 100%;

    img {
        /* display: none; */
        content: url("../../../svg/stapintechniek-logo-white.svg");
    }

    * {
        background: transparent;
        color: #fff;
    }

    .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open::before {
        color: #fff;
    }

    .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
        background: var(--wp--preset--color--contrast);
    }

    .wp-block-navigation .wp-block-navigation-item,
    .wp-block-navigation .wp-block-navigation-item:before,
    .wp-block-navigation .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
        background: transparent;
    }
}

.site-arbeidsmatchplatform header.transparant img {
    content: url("../../../svg/arbeidsmatchplatform-logo-white.svg");
}

header.transparant:has(.is-menu-open) {
    background: var(--wp--preset--color--base) !important;
}
header.transparant:has(.is-menu-open) img {
    content: url("../../../svg/stapintechniek-logo.svg");
}
.site-arbeidsmatchplatform header.transparant:has(.is-menu-open) img {
    content: url("../../../svg/arbeidsmatchplatform-logo.svg");
}

header.transparant:has(.is-menu-open) .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open::before {
    color: var(--wp--preset--color--contrast);
}

@media (max-width: 782px) {
    header.transparant *,
    header:has(+ .wp-block-media-text) * {
        color: inherit !important;
    }
    header:has(+ .wp-block-media-text) {
        z-index: 100;
        position: absolute !important;
        width: 100%;

        img {
            content: url("../../../svg/stapintechniek-logo-white.svg");
        }

        * {
            background: transparent;
            color: #fff;
        }

        .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open::before {
            color: #fff;
        }

        .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
            background: var(--wp--preset--color--contrast);
        }

        .wp-block-navigation .wp-block-navigation-item,
        .wp-block-navigation .wp-block-navigation-item:before,
        .wp-block-navigation .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
            background: transparent;
        }
    }
    .site-arbeidsmatchplatform header:has(+ .wp-block-media-text) {
        img {
            content: url("../../../svg/arbeidsmatchplatform-logo-white.svg");
        }
    }
    header:has(.is-menu-open):has(+ .wp-block-media-text) {
        background: var(--wp--preset--color--base) !important;
    }
    header:has(.is-menu-open):has(+ .wp-block-media-text) img {
        content: url("../../../svg/stapintechniek-logo.svg");
    }
    .site-arbeidsmatchplatform header:has(.is-menu-open):has(+ .wp-block-media-text) img {
        content: url("../../../svg/arbeidsmatchplatform-logo.svg");
    }
}

/* Drillmenu */
@media (max-width: 782px) {

    .wp-block-navigation__responsive-dialog {
        margin-top: 0 !important;
        overflow: hidden !important;
    }

    .wp-block-navigation.items-justified-right .wp-block-navigation__container {
      position: relative !important;
      width: 100% !important;
      overflow: hidden !important;
    }

    .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: translateX(100%);
        width: 100% !important;
        height: 100% !important;
        padding: var(--wp--custom--global--spacing--padding--background) var(--wp--preset--spacing--30)  var(--wp--preset--spacing--30) !important;
        z-index: 99;
        display: flex !important;
        flex-direction: column !important;
        gap: var(--wp--preset--spacing--40) !important;
        background: var(--wp--preset--color--base) !important;
        transition: transform 0.3s ease !important;
    }
    
    .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container.active {
      transform: translateX(0);
    }
    
    .wp-submenu-back {
      display: inline-flex;
      margin-bottom: var(--wp--preset--spacing--60);
      font-family:  var(--wp--custom--global--typography--font-family--button);
      cursor: pointer;
      font-weight: 700;
      font-size: var(--wp--preset--font-size--normal);
    }

    .wp-submenu-back:before {
        content: "\e974";
        font-family: "icomoon" !important;
        margin-right: 5px;
        width: 12px;
        display: flex;
        color: var(--wp--preset--color--primary);
        align-items: center;
        transition: all 0.3s ease-in-out;
        position: relative;
        left: 0;
    }

}