/* =========================================================
   SITE HEADER
========================================================= */

.site-header {
    position: sticky;
    z-index: 1000;

    top: 0;

    width: 100%;

    background:
        #ffffff;

    border-bottom:
        1px solid
        #e4e8eb;

    transform:
        translateY(0);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease;

    will-change:
        transform;
}


/* =========================================================
   HEADER CONTAINER
========================================================= */

.site-header .site-header__container {
    width: 100%;
    max-width: 1440px;

    margin-inline: auto;

    padding-inline:
        28px;

    box-sizing: border-box;
}


.site-header.is-scrolled {
    box-shadow:
        0 7px 24px
        rgba(20, 35, 48, 0.10);
}


.site-header.is-hidden {
    transform:
        translateY(-100%);
}


/* =========================================================
   ADMIN BAR
========================================================= */

.admin-bar
.site-header {
    top: 32px;
}


/* =========================================================
   HEADER INNER
========================================================= */

.site-header__inner {
    display: grid;

    grid-template-columns:
        minmax(240px, 1fr)
        auto
        minmax(360px, 1fr);

    min-height: 96px;

    align-items: center;

    gap: 28px;
}


/* =========================================================
   LOGO
========================================================= */

.site-header__logo {
    display: flex;

    width: 100%;
    max-width: 220px;

    align-items: center;

    justify-self: start;
}


.site-header__logo-image {
    display: block;

    width: auto;
    max-width: 100%;
    height: 62px;

    object-fit: contain;
    object-position: left center;
}


.site-header__logo-text {
    color:
        var(--color-text);

    font-size: 26px;
    line-height: 1;
    font-weight: 700;
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-header__nav {
    min-width: 0;
}


.site-header__nav-inner {
    width: 100%;
}


/* =========================================================
   SERVICE BUTTONS
========================================================= */

.site-header__menu {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 20px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.site-header__menu li {
    margin: 0;
    padding: 0;
}


.site-header__menu a {
    display: inline-flex;

    min-height: 44px;

    align-items: center;
    justify-content: center;

    padding:
        0
        20px;

    color:
        var(--service-primary-hover);

    background:
        #ffffff;

    border:
        1px solid
        var(--service-primary);

    border-radius:
        4px;

    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;

    text-align: center;
    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}


.site-header__menu a:hover {
    color:
        #ffffff;

    background:
        var(--service-primary-hover);

    border-color:
        var(--service-primary-hover);
}


.site-header__menu
.current-menu-item > a,
.site-header__menu
.current_page_item > a {
    color:
        #ffffff;

    background:
        var(--service-primary);

    border-color:
        var(--service-primary);
}


/* =========================================================
   DESKTOP CONTACT GRID

   LEFT:
   schedule 1
   schedule 2
   languages

   RIGHT:
   phone 1
   phone 2
   phone 3
========================================================= */

.site-header__contacts {
    display: grid;

    grid-template-columns:
        max-content
        max-content;

    grid-template-rows:
        repeat(
            3,
            25px
        );

    column-gap: 40px;
    row-gap: 4px;

    width: max-content;

    align-items: center;

    justify-self: end;
    align-self: center;
}


/* =========================================================
   SCHEDULE POSITION
========================================================= */

.site-header__schedule--1 {
    grid-column: 1;
    grid-row: 1;
}


.site-header__schedule--2 {
    grid-column: 1;
    grid-row: 2;
}


/* =========================================================
   SCHEDULE
========================================================= */

.site-header__schedule {
    display: grid;

    grid-template-columns:
        17px
        max-content;

    width: 100%;

    align-items: center;

    column-gap: 8px;

    color:
        #697176;

    font-size: 14px;
    line-height: 1.3;

    white-space: nowrap;
}


/* =========================================================
   SCHEDULE ICON
========================================================= */

.site-header__schedule-icon {
    display: flex;

    width: 17px;
    height: 17px;

    align-items: center;
    justify-content: center;

    color:
        var(--service-primary);
}


.site-header__schedule-icon svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================================
   SCHEDULE VALUE
========================================================= */

.site-header__schedule-value {
    text-align: left;

    white-space: nowrap;
}


/* =========================================================
   LANGUAGES
========================================================= */

.site-header__languages {
    display: flex;

    grid-column: 1;
    grid-row: 3;

    width: 100%;
    height: 25px;

    align-items: center;
    justify-content: center;
}


.site-header__language {
    position: relative;

    display: inline-flex;

    min-width: 29px;
    height: 25px;

    align-items: center;
    justify-content: center;

    color:
        #8a9195;

    font-size: 14px;
    line-height: 1;
    font-weight: 700;

    text-decoration: none;

    transition:
        color var(--transition-fast);
}


.site-header__language
+ .site-header__language::before {
    content: '';

    position: absolute;

    top: 7px;
    bottom: 7px;
    left: 0;

    width: 1px;

    background:
        #dce1e4;
}


.site-header__language:hover {
    color:
        var(--service-primary-hover);
}


.site-header__language.is-active {
    color:
        var(--service-primary);
}


/* =========================================================
   PHONES POSITION
========================================================= */

.site-header__phone--1 {
    grid-column: 2;
    grid-row: 1;
}


.site-header__phone--2 {
    grid-column: 2;
    grid-row: 2;
}


.site-header__phone--3 {
    grid-column: 2;
    grid-row: 3;
}


/* =========================================================
   PHONE
========================================================= */

.site-header__phone {
    display: flex;

    height: 25px;

    align-items: center;
    justify-content: flex-start;

    color:
        #262d31;

    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;

    text-align: left;
    text-decoration: none;

    white-space: nowrap;

    transition:
        color
        var(--transition-fast);
}


.site-header__phone:hover {
    color:
        var(--service-primary-hover);
}


/* =========================================================
   MOBILE ELEMENTS
========================================================= */

.site-header__toggle,
.site-header__mobile-info {
    display: none;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .site-header .site-header__container {
        padding-inline:
            22px;
    }


    .site-header__inner {
        grid-template-columns:
            minmax(180px, 1fr)
            auto
            minmax(320px, 1fr);

        min-height: 90px;

        gap: 18px;
    }


    .site-header__logo {
        max-width:
            180px;
    }


    .site-header__logo-image {
        height:
            48px;
    }


    .site-header__menu {
        gap:
            8px;
    }


    .site-header__menu a {
        min-height:
            42px;

        padding:
            0
            14px;

        font-size:
            14px;
    }


    /* =====================================================
       CONTACT GRID
    ===================================================== */

.site-header__contacts {
    grid-template-columns:
        max-content
        max-content;

    grid-template-rows:
        repeat(
            3,
            24px
        );

    column-gap: 28px;
    row-gap: 3px;
}


.site-header__schedule {
    grid-template-columns:
        16px
        max-content;

    column-gap: 6px;

    font-size: 12px;
}


.site-header__schedule-icon {
    width: 16px;
    height: 16px;
}


.site-header__languages {
    height: 24px;
}


.site-header__language {
    height: 24px;

    font-size: 12px;
}


.site-header__phone {
    height: 24px;

    font-size: 13px;
}

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 900px) {

    .site-header__inner {
        display: flex;

        min-height: 68px;

        align-items: center;

        gap: 16px;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .site-header__logo {
        width: 160px;
        max-width: 160px;
    }


    .site-header__logo-image {
        height: 42px;
    }


    /* =====================================================
       HIDE DESKTOP CONTACTS
    ===================================================== */

    .site-header__contacts {
        display: none;
    }


    /* =====================================================
       TOGGLE
    ===================================================== */

    .site-header__toggle {
        display: flex;

        width: 42px;
        height: 42px;

        flex:
            0
            0
            42px;

        margin-left: auto;

        align-items: center;
        justify-content: center;
        flex-direction: column;

        gap: 5px;

        padding: 0;

        background:
            #ffffff;

        border:
            1px solid
            #dfe5e9;

        border-radius:
            4px;

        cursor: pointer;
    }


    .site-header__toggle span {
        display: block;

        width: 20px;
        height: 2px;

        background:
            #30373c;

        transition:
            opacity var(--transition-fast),
            transform var(--transition-fast);
    }


    .site-header__toggle.is-active
    span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .site-header__toggle.is-active
    span:nth-child(2) {
        opacity: 0;
    }


    .site-header__toggle.is-active
    span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* =====================================================
       NAV PANEL
    ===================================================== */

    .site-header__nav {
        position: absolute;
        z-index: 50;

        top: 100%;
        right: 0;
        left: 0;

        display: block;

        width: 100%;

        max-height:
            calc(100vh - 68px);

        overflow-y: auto;

        background:
            #ffffff;

        border-top:
            1px solid
            #e6eaed;

        border-bottom:
            2px solid
            var(--service-primary);

        box-shadow:
            0 14px 30px
            rgba(18, 34, 44, 0.12);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-7px);

        transition:
            opacity 180ms ease,
            visibility 180ms ease,
            transform 180ms ease;
    }


    .site-header__nav.is-open {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }


    .site-header__nav-inner {
        width:
            min(
                calc(
                    100%
                    -
                    (
                        var(--container-padding) * 2
                    )
                ),
                var(--container-width)
            );

        margin-inline: auto;

        padding:
            18px
            0
            22px;
    }


    /* =====================================================
       SERVICE BUTTONS
    ===================================================== */

    .site-header__menu {
        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 10px;

        width: 100%;
    }


    .site-header__menu a {
        width: 100%;
        min-height: 46px;

        padding:
            8px
            12px;

        white-space: normal;
    }


    /* =====================================================
       MOBILE INFO
    ===================================================== */

    .site-header__mobile-info {
        display: grid;

        gap: 14px;

        margin-top: 18px;
        padding-top: 18px;

        border-top:
            1px solid
            #e6eaed;
    }


    /* =====================================================
       MOBILE PHONES
    ===================================================== */

    .site-header__mobile-phones {
        display: grid;

        gap: 7px;
    }


    .site-header__mobile-phone {
        display: flex;

        min-height: 34px;

        align-items: center;

        gap: 9px;

        color:
            #30373c;

        font-size: 16px;
        line-height: 1.2;
        font-weight: 700;

        text-decoration: none;
    }


    .site-header__mobile-phone svg {
        display: block;

        width: 20px;
        height: 20px;

        flex:
            0
            0
            20px;

        color:
            var(--service-primary);
    }


    /* =====================================================
       MOBILE SCHEDULE
    ===================================================== */

    .site-header__mobile-schedule {
        color:
            #6b7378;

        font-size: 13px;
        line-height: 1.5;
    }


    .site-header__mobile-schedule p {
        margin: 0;
    }


    /* =====================================================
       MOBILE LANGUAGES
    ===================================================== */

    .site-header__mobile-languages {
        display: flex;

        align-items: center;

        gap: 4px;
    }


    .site-header__mobile-language {
        display: inline-flex;

        min-width: 38px;
        height: 34px;

        align-items: center;
        justify-content: center;

        color:
            #6c7479;

        background:
            #f5f7f8;

        border:
            1px solid
            #e0e5e8;

        border-radius:
            3px;

        font-size: 12px;
        line-height: 1;
        font-weight: 700;

        text-decoration: none;
    }


    .site-header__mobile-language.is-active {
        color:
            #ffffff;

        background:
            var(--service-primary);

        border-color:
            var(--service-primary);
    }


    body.header-menu-open {
        overflow: hidden;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .site-header__inner {
        min-height: 64px;
    }


    .site-header__logo {
        width: 145px;
        max-width: 145px;
    }


    .site-header__logo-image {
        height: 38px;
    }


    .site-header__nav {
        max-height:
            calc(100vh - 64px);
    }


    .site-header__menu {
        grid-template-columns:
            1fr;
    }


    .site-header__menu a {
        min-height: 44px;

        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .site-header__logo {
        width: 132px;
        max-width: 132px;
    }


    .site-header__logo-image {
        height: 35px;
    }

}


/* =========================================================
   WORDPRESS ADMIN BAR
========================================================= */

@media (max-width: 782px) {

    .admin-bar
    .site-header {
        top: 46px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .site-header {
        transition: none;
    }

}