.lochaber-column-header-container {
    z-index: 100;
}

/* Submenu details for mobile */
header details {
    padding-inline: var(--wp--preset--spacing--small);

    & summary:hover {
        color: unset;
    }

    &[open] {
        background-color: var(--wp--preset--color--text-50);
        & summary {
            color: var(--wp--preset--color--accent);
        }
    }
}

/* Header desktop */
@media (min-width: 1000px) and (min-height: 500px) {
    header {
        & nav {
            /**** Menu ****/
            & .wp-block-navigation__container {
                width: 100%;
                position: relative;

                & .wp-block-navigation-item {
                    width: 100%;
                    position: unset;
                    background: linear-gradient(var(--wp--preset--color--text-15), var(--wp--preset--color--text-15)) left 100% no-repeat !important;
                    background-size: 100% 1px !important;

                    & .wp-block-navigation-item__content {
                        width: 100%;
                        padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium) !important;
                        position: relative !important;
                        background: linear-gradient(currentColor, currentColor) left 100% no-repeat !important;
                        background-size: 0 1px !important;
                        transition: all 0.3s !important;

                        &:hover {
                            background-size: 100% 1px !important;
                            color: var(--wp--preset--color--accent);
                        }
                    }
                }
            }

            /**** Submenu ****/
            & .wp-block-navigation__submenu-container {
                transition: opacity .3s ease-in;

                & .wp-block-navigation-item {
                    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15)) left 100% no-repeat !important;
                    background-size: 100% 1px !important;
                    z-index: 1;

                    & .wp-block-navigation-item__content:hover {
                        color: var(--wp--preset--color--accent);
                    }
                }
            }

            & .wp-block-navigation .wp-block-navigation__submenu-icon {
                transform: translateX(-1rem) rotate(270deg);
                transition: transform .1s ease-in;
            }

            & .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] {

                &~.wp-block-navigation__submenu-icon {
                    transform: translateX(-0.5rem) rotate(270deg);
                }

                &~.wp-block-navigation__submenu-container {
                    height: auto;
                    min-width: 30rem;
                    opacity: 1;
                    overflow: visible;
                    visibility: visible;
                    width: auto;
                    position: absolute;
                    left: 100%;
                    top: 0;

                    &::before {
                        content: '';
                        display: block;
                        position: fixed;
                        top: 50vh;
                        left: 18rem;
                        height: 100lvh;
                        width: 30rem;
                        background-color: var(--wp--preset--color--tertiary);
                        transform: translateY(-50%);
                        box-shadow: var(--wp--preset--shadow--normal);
                    }
                }
            }
        }

        /* Smaller sizes for small desktop */
        @media (max-height: 650px) {
            font-size: var(--wp--preset--font-size--x-small);
            & nav .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content {
                padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--medium) !important;
            }

            & .wp-block-site-logo:first-child img {
                width: 70px !important;
            }
        }
    }

    /* Nous joindre */
    .lochaber-header-nous-joindre {
        position: fixed;
        bottom: 0;
        z-index: 2;
    }
}

/* Header mobile */
@media (max-width: 999px) or (max-height: 499px) {
    body .wp-site-blocks>.wp-block-columns {
        flex-wrap: wrap !important;

        &>.wp-block-column {
            flex-basis: 100% !important;
        }
    }

    header {
        position: fixed !important;
        width: 100%;
        top: 0;
        box-shadow: var(--wp--preset--shadow--light);

        /* Header container */
        &>div:first-child {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small) !important;

            /* Header logo container */
            &>div:first-child {
                margin: 0 !important;

                & .wp-block-site-logo:first-child img {
                    width: 40px !important;
                }
            }

            /* Header nav container */
            & nav {
                margin: 0 !important;

                & .wp-block-navigation__responsive-container-open::before {
                    content: 'MENU';
                    display: block;
                    align-content: center;
                    padding-right: var(--wp--preset--spacing--x-small);
                    font-size: 0.8rem;
                }

                & .wp-block-navigation__container {
                    gap: var(--wp--preset--spacing--small);

                    & .wp-block-navigation-item {
                        font-size: 0.8rem !important;
                    }
                }
            }
        }

        & .lochaber-header-nous-joindre {
            display: none;
        }
    }

    header .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label {
        color: var(--wp--preset--color--text-70);
        font-family: var(--wp--preset--font-family--heading);
        font-weight: 600;
    }
}