/*
Theme Name: Ugrep theme
Author: Helovei
Description: For money
Requires at least: 5.9
Requires PHP: 5.6
Version: 0.1
*/
/* -------------- Header -------------- */
@import "./styles/navigation.css";
@import "./styles/top-bar.css";
@import "./styles/header.css";
@import "./styles/presentation.css";
@import "./styles/overlay-items.css";

/* -------------- Footer -------------- */
@import "./styles/footer.css";

/* -------------- Templates -------------- */
@import "./styles/home.css";
@import "./styles/jeses-info.css";
@import "./styles/contacts.css";
@import "./styles//schudule-page.css";
@import "./styles/phone-lines.css";
@import "./styles/archive.css";
@import "./styles/search.css";
@import "./styles/posters.css";
@import "./styles/news-page.css";

@import "./styles/news-slider.css";
@import "./styles/searchform.css";
@import "./styles/useful-features.css";
@import "./styles/service-block.css";
@import "./styles/links-carousel.css";


/* -------------- Plugins -------------- */
@import "./styles/collapse-plugin-custom.css";


:root {
    /* ------------------ Основные корпоративные цвета ------------------ */
    /* --color-primary: #3B5F8A; */
    --color-primary: #1f377d;
    /* Главный синий — основной цвет сайта, кнопки, ссылки, акценты */
    --color-primary-dark: #1E5589;
    /* Тёмный синий — hover/active для кнопок и ссылок */
    --color-primary-light: #8eb7db;
    /* Светлый синий — для hover подсветки, фонов небольших блоков */
    --color-bg-accent: #E6EFF9;
    /* Фоновый синий — лёгкий фон под карточки, блоки, разделители */

    /* ------------------ Нейтральные цвета ------------------ */
    --color-text: #F0F0F0;
    /* Основной текст — заголовки, основной контент */
    --color-text-secondary: #666666;
    /* Второстепенный текст — подписи, мелкий текст, описание */
    --color-bg: #F9F9F9;
    /* Основной фон сайта — страницы и секции */
    --color-grey: #333333;
    /* Белый цвет — текст на тёмных кнопках, иконки, элементы на темном фоне */

    --color-bg-2: var(--color-text);

    /* ------------------ Акцентные цвета ------------------ */
    --color-success: #28A745;
    /* Цвет успеха — активные элементы, подтверждение выбора языка, уведомления об успешном действии */
    --color-warning: #FFC107;
    /* Предупреждение — уведомления, предупреждающие иконки, сообщения о внимании */
    --color-error: #DC3545;
    /* Ошибка — кнопки отмены, сообщения об ошибках, некорректные действия */

    --color-border: var(--color-text-secondary);

    --border-radius-container: 10px;
}


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

body {
    margin: 20px;
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.6;
    background-color: var(--color-bg);
    color: var(--color-grey);
    line-height: 1.6;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-hover);
}

/* ul {
    list-style-type: none;
} */

p {
    text-indent: 25px;
}

h1 {
    font-size: clamp(28px, 3vw, 42px);
}

h2 {
    font-size: clamp(24px, 2.5vw, 34px);
}

h3 {
    font-size: clamp(20px, 2vw, 26px);
}

.container {
    width: 100%;
    border-radius: var(--border-radius-container);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.container h2{
    margin-top: 0;
}

.container h3{
    margin-top: 0;
}

.horizontal_center {
    align-items: center;
}

.container_medium {
    width: 70%;
}

.container_50 {
    width: 50%;
}

.container_65 {
    width: 65%;
}

.wpcp-single-item {
    border-radius: 10px;
}


@media (max-width:480px) {

    body {
        margin: 5px;
    }

    .container {
        padding: 10px 5px;
        gap: 5px;
    }


    .container_medium {
        width: auto;
    }

    .container_50 {
        width: auto;
    }

    .container_65 {
        width: auto;
    }

}

.container > * {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

/* когда появился */
.container > *.show {
    opacity: 1;
    transform: translateY(0);
}

/* задержка */
.container > *:nth-child(1) { transition-delay: 0.1s; }
.container > *:nth-child(2) { transition-delay: 0.2s; }
.container > *:nth-child(3) { transition-delay: 0.3s; }
.container > *:nth-child(4) { transition-delay: 0.4s; }
.container > *:nth-child(5) { transition-delay: 0.5s; }