/* =========================================================
   HAPPY CHILD
   HEADER 2
   DESKTOP VERSION
   ========================================================= */


/* =========================================================
   FONT
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');


/* =========================================================
   HEADER BASE
   ========================================================= */

.hc2-header {
    width: 100%;

    background: #ffffff;
    color: #222222;

    font-family: "Montserrat", Arial, sans-serif;

    box-sizing: border-box;
}


.hc2-header *,
.hc2-header *::before,
.hc2-header *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN CONTAINER

   Один контейнер используется для:
   - верхнего ряда
   - разделителя
   - меню

   Поэтому геометрия всего header имеет общие границы.
   ========================================================= */

.hc2-container {
    width: 100%;
    max-width: 1540px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 32px;
    padding-right: 32px;
}


/* =========================================================
   TOP ROW
   ========================================================= */

.hc2-top {
    width: 100%;
    min-height: 154px;

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


/* =========================================================
   BRAND
   ========================================================= */

.hc2-brand {
    flex: 0 0 auto;

    padding-right: 26px;
}


.hc2-logo {
    display: flex;
    align-items: center;

    color: inherit;
    text-decoration: none;
}


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

   Используем родной .logo__img сайта.
   Именно на его <i> старый CSS вешает изображение логотипа.
   ========================================================= */

.hc2-logo__image {
    width: 90px;
    height: 90px;

    min-width: 90px;
    min-height: 90px;

    flex: 0 0 90px;

    display: block;

    margin: 0 20px 0 0;
    padding: 0;
}


.hc2-logo__image i {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================================
   BRAND TEXT
   ========================================================= */

.hc2-logo__text {
    display: flex;
    flex-direction: column;

    white-space: nowrap;
}


.hc2-logo__name {
    display: block;

    color: #ff5a00;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 31px;
    font-weight: 700;
    line-height: 1.15;
}


.hc2-logo__description {
    display: block;

    margin-top: 8px;

    color: #ff6b28;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}


/* =========================================================
   ADDRESS
   ========================================================= */

.hc2-address {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 82px;

    display: flex;
    align-items: flex-start;

    padding-top: 9px;
    padding-right: 26px;
    padding-bottom: 9px;
    padding-left: 26px;

    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}


.hc2-address .hc2-icon {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

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

    margin-top: 2px;
    margin-right: 15px;

    color: #ff5a00;
}


.hc2-address .hc2-icon svg {
    display: block;

    width: 23px;
    height: 23px;

    fill: currentColor;
}


.hc2-address__text {
    width: 390px;
    max-width: 390px;

    color: #222222;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;

    white-space: normal;
}


/* =========================================================
   CONTACTS
   ========================================================= */

.hc2-contacts {
    flex: 0 0 300px;

    min-height: 82px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding-top: 7px;
    padding-right: 26px;
    padding-bottom: 7px;
    padding-left: 26px;

    border-right: 1px solid #dddddd;
}


/*
   Каждая строка контактов имеет одинаковую структуру:

   [ 24px icon ] [ 14px gap ] [ content ]

   Никаких индивидуальных отступов для VK.
*/

.hc2-contact {
    min-height: 25px;

    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    color: #222222;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;

    white-space: nowrap;
}


.hc2-contact + .hc2-contact {
    margin-top: 2px;
}


.hc2-contact a {
    color: #222222;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;

    text-decoration: none;
}


.hc2-contact a:hover,
.hc2-contact a:focus {
    color: #ff5a00;
    text-decoration: none;
}


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

.hc2-contact a.hc2-contact__phone {
    font-weight: 700;
}


/* =========================================================
   CONTACT ICON CELL

   Одинаковая ячейка 24 × 24 для:
   - телефона
   - почты
   - VK

   Именно она определяет положение иконки.
   ========================================================= */

.hc2-contact__icon {
    width: 24px;
    height: 24px;

    min-width: 24px;

    flex: 0 0 24px;

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

    margin: 0 14px 0 0;
    padding: 0;

    border: 0;

    color: #ff5a00;

    line-height: 0;
    text-decoration: none;
}


/* =========================================================
   PHONE + EMAIL SVG
   ========================================================= */

.hc2-contact__icon > svg {
    display: block;

    width: 21px;
    height: 21px;

    margin: 0;
    padding: 0;

    fill: currentColor;
}


/* =========================================================
   VK

   SVG находится в ТОЙ ЖЕ ячейке 24 × 24.
   Поэтому центр VK совпадает с центром остальных иконок.

   Сам круг немного меньше телефона/конверта,
   потому что визуально залитый круг выглядит крупнее.
   ========================================================= */

.hc2-contact__vk-link {
    color: #ff5a00;
}


.hc2-contact__icon > .hc2-contact__vk {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    display: block;

    margin: 0;
    padding: 0;

    fill: none;
}


.hc2-contact__vk-circle {
    fill: #ff5a00;
}


.hc2-contact__vk-mark {
    fill: #ffffff;
}


/*
   Не меняем цвет VK при hover.
   Иначе наследуемый цвет ссылки может вмешиваться
   в оформление SVG.
*/

.hc2-contact__vk-link:hover,
.hc2-contact__vk-link:focus {
    color: #ff5a00;
}


/* =========================================================
   CTA
   ========================================================= */

.hc2-cta {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-left: 26px;
}


.hc2-cta__button {
    width: 300px;
    min-width: 300px;
    min-height: 60px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding-left: 24px;
    padding-right: 24px;

    background: #ff5a00;

    border: 0;
    border-radius: 7px;

    color: #ffffff;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;

    text-decoration: none;

    transition:
        background-color .18s ease,
        transform .18s ease;
}


.hc2-cta__button:hover,
.hc2-cta__button:focus {
    background: #e95000;

    color: #ffffff;
    text-decoration: none;
}


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

.hc2-nav {
    width: 100%;
    min-height: 70px;

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

    border-top: 1px solid #e2e2e2;
}


/* =========================================================
   DLMENU

   Тут !important пока оставляем намеренно.
   Это не костыль для нашей геометрии, а защита от старых
   глобальных стилей сайта, которые уже применяются к меню.
   ========================================================= */

.hc2-menu {
    display: flex !important;

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

    gap: 24px;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


.hc2-menu li {
    display: block;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


.hc2-menu li::before,
.hc2-menu li::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   MENU LINKS
   ========================================================= */

.hc2-menu a {
    display: block;

    padding: 9px 11px;

    border-radius: 6px;

    color: #222222;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        color .18s ease,
        background-color .18s ease;
}


.hc2-menu a:hover,
.hc2-menu a:focus {
    color: #ff5a00;

    background: #fff3ec;

    text-decoration: none;
}


/* =========================================================
   RESET OLD SITE STYLES
   ========================================================= */

.hc2-header ul,
.hc2-header ol {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.hc2-header a {
    text-decoration: none;
}


.hc2-header a:hover,
.hc2-header a:focus {
    text-decoration: none;
}


/* =========================================================
   DESKTOP ONLY

   Media queries пока не добавляем.
   Сначала фиксируем desktop.
   ========================================================= */