.page__header {
    --header-bg-color: var(--color-surface);
    --header-logo-width: 96px;
    --header-logo-min-width: 76px;

    /* Navigation */
    --header-navigation--bg-color: #fff;

    /* Single navigation item */
    --header-navigation-parent-text-color: var(--color-on-surface);
    --header-navigation-parent-hover-text-color: #5e6572;
    --header-navigation-child-text-color: var(--header-navigation-parent-text-color);
    --header-navigation-child-hover-text-color: var(--header-navigation-parent-hover-text-color);
    --header-navigation-font-size: 1.125rem;
    --header-navigation-font-weight: 700;
    --header-navigation-current-page-text-color: var(--color-primary);
    --header-navigation-hover-underline-color: var(--color-primary);

    /* Submenu */
    --header-navigation-submenu-bg-color: #fff;
}

.l-header__navigation--desktop {
    display: none;
}

.l-header__inner {
    display: flex;
    flex-direction: column;
    width: 96%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    border: none;
}

.header-inner__top {
    display: flex;
    justify-content: space-between;
    column-gap: var(--space-md);
}

.l-header__logo--mobile {
    width: fit-content;
}

.header__logo {
    width: var(--header-logo-width);
    min-width: var(--header-logo-min-width);
}

.l-header__logo {
    display: none;
}

/* Reset */
.header__navigation {
    padding: 0 !important;
}

.header__navigation .menu-item {
    list-style: none !important;
}

.header__navigation .menu-item a {
    text-decoration: none !important;
}
/* Reset - end */

.header__nav {
    display: flex;
    position: fixed;
    height: 0;
    width: 100vw;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 999999;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.header__nav.header__nav--active {
    height: 100vh;
    transition: all .5s ease;
}

.header__nav.header__nav--not-active {
    height: 0;
    transition: all .5s ease;
}

.header__nav a {
    color: #000;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    padding: var(--space-xs);
}

.header__nav li.current-menu-item a {
    color: var(--color-primary) !important;
}

.header__nav .header__navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

/* ========================================
                Header->
            Social buttons
                [START]
========================================= */

.header__social-buttons.header__social-buttons--desktop {
    display: none;
}

.header__social-buttons {
    display: flex;
    align-items: center;
    margin-top: var(--space-xl);
    justify-content: center;
}

.social-buttons__inner {
    display: flex;
    gap: var(--space-xs);
}

.header__social-buttons .social-button {
    height: 40px;
    width: 40px;   
}

.header__social-buttons .social-button__icon,
.header__social-buttons .social-button__icon::before {
    margin: auto; /* Reset margin */
}

.header__social-buttons .social-button__icon--facebook {
    /*! Fine tuned - can't use variable */
    font-size: 19px;
}

.header__social-buttons .social-button__icon--email {
    /*! Fine tuned - can't use variable */
    font-size: 16px;
}

.header__social-buttons .social-button__icon--phone {
    /*! Fine tuned - can't use variable */
    font-size: 14px;
}

/* ========================================
                Header->
            Social buttons
                [END]
========================================= */