@import url('/static/css/footer.css');
@import url('/static/css/top.css');
@import url('/static/css/variables.css');
@import url('/static/css/icons.css');
@import url('/static/css/header.css');

/* ===================================== ГЛОБАЛЬНЫЕ НАСТРОЙКИ ======================================== */
html, body{
    /*width: 100vw;*/
    /*height: 100vh;*/
    padding: 0;
    margin: 0;
}
body {
    background-color: var(--bg-main);
    /*display: flex;*/
    /*flex-direction: column;*/
}
header {
    /*background: var(--bg-top);*/
    padding: 0;
    margin: 0;
    /*min-height: var(--top-h);*/
}
main {
    /*background: var(--bg-main);*/
    padding: 0;
    margin: 0;
    /*flex: 1;*/
    /*overflow-y: auto;*/
}
footer {
    /*background: var(--bg-footer);*/
    padding: 0;
    margin: 0;
    /*min-height: var(--footer-h);*/
}
section{
    padding: 0;
    margin: 0;
}
.container{
    padding: 0;
    /*max-width: var(--body);*/
}
div {
    padding: 0;
    margin: 0;
}
img {
    padding: 0;
    margin: 0;
}
h1{
    font-family: var(--f-h1);
    font-size: var(--fs-h1);
    color: var(--fc-black);
    font-weight: 300;
    text-decoration: none;
    padding: 20px;
    text-transform: uppercase;
    /*border: #800114 1px solid;*/
}
video {
    max-width: 1280px;
}

@media (max-width: 767px) {
    h1 {
        font-size: calc(var(--fs-h1) - 18px);

    }
    video{
        max-width: 767px;
    }
}

@media (max-width: 480px) {
    video{
        max-width: 375px;
    }
}

/* Контейнер для «шапки» */
.header-container {
    font-family: var(--f-h1);
    font-size: var(--fs-h1);
    color: var(--color-black);
    font-weight: 100;
    text-decoration: none;
    text-transform: uppercase;
    position: sticky; /* «прилипает» к верхней границе окна */
    top: 0;
    text-align: center;
    padding:20px;    /* небольшой отступ, чтобы картинка не прилипала вплотную */
    z-index: 999;     /* чтобы элемент оставался поверх остального контента */
}

.header-container img{
    max-width: 800px;
}
.header-container .icons{
    margin-top: 50px;
    text-align: center;
}
.header-container .icons img{
    /*width: 100px;*/
    height: 60px;
    margin: 10px;
}

.header-container .phone {
    margin-top: 20px;
    text-align: center;
    font-family: var(--f-contacts);
    font-size: var(--fs-h3);
    color: var(--fc-black);
}

/* ======================== Mobile adjustments ======================== */
@media (max-width: 767px) {
    /* Уменьшаем отступы в шапке */
    .header-container {
        padding: 10px;
        text-align: center;
        font-size: calc(var(--fs-h1) - 12px);
    }

    /* Картинка становится резиновой */
    .header-container img {
        max-width: 100%;
        height: auto;
    }

    /* Иконки соцсетей: в ряд, с переносом и меньшим размером */
    .header-container .icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 15px;
    }
    .header-container .icons img {
        height: 40px;
        margin: 5px;
    }

    /* Телефон чуть меньше и по центру */
    .header-container .phone {
        font-size: calc(var(--fs-h3) - 2px);
        margin-top: 15px;
    }
}

/* Для совсем узких экранов (смартфоны ≤ 480px) можно ещё чуть уменьшить: */
@media (max-width: 480px) {
    .header-container{

        padding: 5px;
        font-size: calc(var(--fs-h1) - 20px);
    }
    .header-container .icons img {
        height: 32px;
        margin: 3px;
    }
    .header-container .phone {
        font-size: calc(var(--fs-h3) - 4px);
        text-transform: uppercase;
    }
}