/* ==========================================================================
   Header
   WIO Presentation System
   Mobile First
   ========================================================================== */


/* --------------------------------------------------------------------------
   Site Header
   -------------------------------------------------------------------------- */

.site-header {

    width: 100%;

    background: var(--theme-color-menu);

    border-bottom: 1px solid var(--theme-header-border);

}


/* --------------------------------------------------------------------------
   Header Bar
   -------------------------------------------------------------------------- */

.header-bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 5rem;

    padding: var(--space-sm);

    box-sizing: border-box;

}


/* --------------------------------------------------------------------------
   Navigation Button
   -------------------------------------------------------------------------- */
.header-navigation {

    display: flex;

    justify-content: flex-start;

    flex: 0 0 5rem;

}

.theme-logo {

    display: flex;

    justify-content: center;

    flex: 1;

}

.theme-logo a {

    display: flex;

    justify-content: center;

}


.theme-logo img {

    display: block;

    max-height: 6rem;

    width: auto;

}


/* --------------------------------------------------------------------------
   Language Switch
   -------------------------------------------------------------------------- */

.header-language {

    display: flex;

    justify-content: flex-end;

    flex: 0 0 5rem;

}


/* --------------------------------------------------------------------------
   Navigation Panel
   -------------------------------------------------------------------------- */
.navigation-panel {

    display: none;
    width: 100%;

}

.navigation-panel.is-open {

    display: block;

}
/* --------------------------------------------------------------------------
   Language Switch
   -------------------------------------------------------------------------- */

.language-switch-button {

    display: flex;

    align-items: center;

    gap: 0.35rem;

    padding: 0;

    border: none;

    background: transparent;

    cursor: pointer;

    font: inherit;

    color: var(--theme-color-text);

}
.header-navigation,
.theme-logo,
.header-language {

    min-width: 0;

}
/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 769px) {

    .site-header {
        position: relative;
    }

    .navigation-panel {
        width: 400px;
    }

    .navigation-panel.is-open {
        position: absolute;
        top: 100%;
        left: 0;
        width: 400px;
        z-index: 100;
        background: var(--theme-header-background);
    }

     .language-switch-menu.is-open {
        position: absolute;
        top: 100%;
        right: 0;
        width: 400px;
        z-index: 100;
        background: var(--theme-header-background);
    }

    .site-header:has(.navigation-panel.is-open) + .site-content {
        margin-left: 400px;
    }

}