/* ==========================================================================
   1. CSS ПЕРЕМЕННЫЕ (ГЛОБАЛЬНЫЕ НАСТРОЙКИ)
   ========================================================================== */
:root {
    /* Цветовая палитра */
    --color-primary: #005a9c;       /* Корпоративный синий (ИРНИТУ) */
    --color-accent: #00b4d8;        /* Спокойный лазурный (для активных ссылок, кнопок и линий) */
    --color-text-main: #2b2b2b;     /* Основной цвет текста */
    --color-text-muted: #475569;    /* Цвет второстепенного текста */
    --color-bg-light: #ffffff;      /* Белый фон секций */
    --color-bg-tint: #f8fafc;       /* Светло-серый фон секций */
    --color-bg-dark: #1e293b;       /* Темно-серый подвал сайта */
    
    /* Размеры и сетка */
    --max-content-width: 1000px;    /* Максимальная ширина текстового контента */
    --desktop-padding: 40px;        /* Боковые отступы текста на компьютерах */
    --mobile-padding: 20px;         /* Уменьшенные боковые отступы на смартфонах */
    --navbar-height: 60px;          /* Фиксированная высота панели навигации */
}

/* ==========================================================================
   2. ШРИФТЫ И БАЗОВЫЕ СБРОСЫ
   ========================================================================== */

@font-face {
    font-family: 'GolosText';
    src: local('GolosText'),
        url('fnt/GolosText-Regular.woff') format('woff'),
        url('fnt/GolosText-Regular.ttf') format('truetype'),
        url('fnt/GolosText-Regular.eot?#iefix') format('embedded-opentype'); 
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'GolosText';
    src: local('GolosText'),
        url('fnt/GolosText-Bold.woff') format('woff'),
        url('fnt/GolosText-Bold.ttf') format('truetype'),
        url('fnt/GolosText-Bold.eot?#iefix') format('embedded-opentype'); 
    font-weight: 700;
    font-style: normal;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    overflow-x: clip; /* Защита от бокового скролла, оживляет position: sticky */
}
body {
    font-family: 'GolosText', sans-serif;
    line-height: 1.7;
    color: var(--color-text-main);
    background-color: var(--color-bg-light);
    overflow-x: clip;
}
body.no-scroll {
    overflow: hidden; /* Блокировка фона при открытом меню во весь экран */
}

/* Ограничитель ширины контента */
.container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 var(--desktop-padding); /* Отступы для ПК по умолчанию */
}

/* ==========================================================================
   3. ГЛАВНАЯ ПЛАШКА (HERO) И КНОПКИ
   ========================================================================== */

.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: white;
    padding: 120px 0;
}
.hero-container {
    max-width: 800px;
    text-align: center;
}
.hero h1 {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hero-subtitle {
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 25px;
    color: #e0f7fa;
}
.hero-text {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 35px;
}
.hero-buttons {
    margin-top: 2rem; /* Воздух между текстом и кнопками */
    display: flex;
    justify-content: center;
}

/* Логотип в правом верхнем углу шапки с прозрачностью и ссылкой */
.hero {
    position: relative; /* База отсчета координат для логотипа */
}
.hero-logo-link {
    position: absolute;
    top: 30px; /* Фиксированный отступ сверху */
    right: var(--desktop-padding); /* Стандартный отступ для ПК */
    z-index: 10;
    display: inline-block;
    line-height: 0; /* Убирает лишние пиксели снизу инлайнового элемента */
}
.hero-logo {
    height: 25px; /* Высота по вашему ТЗ */
    width: auto;
    opacity: 0.7; /* Исходная прозрачность 0.7 */
    transition: opacity 0.3s ease; /* Плавный переход изменения прозрачности */
    display: block;
}

/* Эффект при наведении на логотип */
.hero-logo-link:hover .hero-logo {
    opacity: 1; /* Полная видимость при наведении мыши */
}

/* Корректировка отступа логотипа для мобильных устройств */
@media (max-width: 768px) {
    .hero-logo-link {
        right: var(--mobile-padding); /* Переключаем на стандартный отступ для смартфонов */
        top: 20px; /* На телефонах делаем верхний отступ чуть компактнее */
    }
}

/* Базовые стили для кнопок */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-family: 'GolosText', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 30px; /* Скругленные аккуратные углы */
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    border: none;
}

/* Кнопки на темном фоне (в Hero) */
.hero .btn {
    color: #ffffff;
    border: 2px solid #ffffff;
}
.hero .btn:hover {
    background-color: #ffffff;
    color: var(--color-primary);
}
.hero .btn-primary {
    margin-right: 15px;
}

/* ==========================================================================
   4. НАВИГАЦИЯ (STICKY NAVBAR И ДЕСКТОПНОЕ МЕНЮ)
   ========================================================================== */

.navbar {
    position: sticky;
    top: 0;
    background-color: var(--color-bg-light);
    border-bottom: 1px solid #e5e5e5;
    z-index: 1000;
    width: 100%;
}
.nav-container {
    max-width: var(--max-content-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 20px;
    height: var(--navbar-height);
}
.nav-menu {
    display: flex;
    list-style: none;
    flex-wrap: nowrap; /* Жесткий запрет на перенос пунктов */
    justify-content: center;
}
.nav-menu li a {
    display: block;
    padding: 20px 12px;
    color: #555;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.95rem;
    transition: color 0.3s;
    position: relative;
    white-space: nowrap;
}
.nav-menu li a:hover,
.nav-menu li a.active {
    color: var(--color-accent);
}

/* Линия подчеркивания активного пункта (строго по ширине букв текста) */
.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.nav-menu li a:hover::after,
.nav-menu li a.active::after {
    transform: scaleX(1);
}
/* Кнопка бургер-меню — по умолчанию скрыта на ПК */
.burger {
    display: none !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 0;
    background: transparent;
    border: none;
    z-index: 1100;
    height: 100%;
}
.burger-text {
    font-family: 'GolosText', sans-serif;
    font-size: 0.95rem;
    color: var(--color-accent);
    font-weight: 700;
}
.burger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
    position: relative;
}
.burger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--color-accent);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
    position: absolute;
}
.burger-icon span:nth-child(1) { top: 0; }
.burger-icon span:nth-child(2) { top: 7px; }
.burger-icon span:nth-child(3) { top: 14px; }

/* ==========================================================================
   5. КОНТЕНТНЫЕ СЕКЦИИ, СЕТКИ И ФОРМА
   ========================================================================== */

section {
    width: 100%;
    padding: 90px 0;
}
section:nth-child(even) {
    background-color: var(--color-bg-light);
}
section:nth-child(odd) {
    background-color: var(--color-bg-tint);
}
section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #1e293b;
}
section p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

/* Списки с маркером-тире */
section ul {
    list-style: none;
    margin-left: 0;
    margin-bottom: 30px;
    color: var(--color-text-muted);
}
section ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}
section ul li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* Текстовая схема */
.scheme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-bg-light);
    border: 1px solid #e2e8f0;
    padding: 25px;
    border-radius: 8px;
    margin: 40px 0;
    flex-wrap: wrap;
    gap: 15px;
}
.scheme-step {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.05rem;
    flex: 1;
    text-align: center;
    min-width: 120px;
}
.scheme-arrow {
    color: #94a3b8;
    font-weight: bold;
}

/* Информационные сетки (Цифры и Цели) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}
.stat-card {
    background-color: var(--color-bg-light);
    border: 1px solid #e2e8f0;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
}
.stat-number {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 10px;
    line-height: 1;
}
.stat-card p { font-size: 0.95rem; margin-bottom: 0; }

.goals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
.goal-item {
    background-color: var(--color-bg-light);
    border-left: 4px solid var(--color-primary);
    padding: 25px;
    border-radius: 0 8px 8px 0;
    border-top: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.goal-item h3 { font-size: 1.3rem; color: #1e293b; margin-bottom: 10px; }
.goal-item p { font-size: 0.95rem; margin-bottom: 0; }

.importance-block blockquote {
    border-left: 4px solid var(--color-accent);
    padding-left: 20px;
    margin: 25px 0;
}
.importance-block blockquote p { font-size: 1.15rem; margin-bottom: 15px; }

/* Форма взноса */
.donate-form {
    background-color: var(--color-bg-light);
    border: 1px solid #e2e8f0;
    padding: 40px;
    border-radius: 8px;
    max-width: 600px;
    margin-top: 30px;
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.95rem; }
.form-group input {
    width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px;
    font-family: 'GolosText', sans-serif; font-size: 1rem;
}
.form-group input:focus { outline: none; border-color: var(--color-accent); }
.btn-submit {
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    margin-top: 1.5rem; /* Отступ больше межстрочного интервала */
    width: 100%;
    padding: 14px;
}
.btn-submit:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}

/* Слайдер цитат */
.slider-outer-container { position: relative; width: 100%; max-width: 100%; }
.slider-main-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.slider-wrapper { flex: 1; overflow: hidden; width: 100%; }
.slider-track { display: flex; transition: transform 0.5s ease-in-out; width: 100%; }
.slide { width: 100%; min-width: 100%; max-width: 100%; flex-shrink: 0; text-align: center; padding: 10px 40px; }

/* Круглые аватары для спикеров в слайдере */
.quote-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Превращает изображение в идеальный круг */
    object-fit: cover;  /* Защищает пропорции лица от деформации при сжатии */
    margin: 0 auto 20px auto; /* Центрирует фото и делает отступ до текста цитаты */
    display: block;
    border: 3px solid #ffffff; /* Белая аккуратная рамка вокруг портрета */
}

.quote-text {
    font-size: 1.4rem; font-style: italic; color: #1e293b; line-height: 1.6;
    margin: 0 auto 25px auto !important; max-width: 100%; word-wrap: break-word;
}
.quote-author { font-weight: 700; font-size: 1.15rem; color: var(--color-primary); }
.quote-post { font-size: 0.95rem; color: #64748b; margin-top: 4px; }
.slider-arrow {
    background: transparent; border: none; font-size: 3rem; color: var(--color-accent);
    cursor: pointer; padding: 10px 20px; transition: color 0.3s; user-select: none;
}
.slider-arrow:hover { color: var(--color-primary); }
.slider-dots { display: flex; justify-content: center; gap: 12px; margin-top: 35px; width: 100%; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-accent); background-color: transparent; cursor: pointer; transition: all 0.3s ease; padding: 0; }
.dot.active { background-color: var(--color-accent); transform: scale(1.15); }

/* FAQ Аккордеон и документы */
.faq-accordion { margin-top: 30px; }
.faq-item { border-bottom: 1px solid #e2e8f0; }
.faq-question {
    width: 100%; text-align: left; background: transparent; border: none; padding: 20px 0;
    font-family: 'GolosText', sans-serif; font-size: 1.2rem; font-weight: 700; color: #1e293b;
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.faq-question::after { content: '+'; font-size: 1.5rem; color: var(--color-accent); }
.faq-item.active .faq-question::after { content: '−'; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer p { padding-bottom: 20px; margin-bottom: 0; }

.doc-links { display: flex; flex-direction: column; gap: 15px; margin-top: 25px; }
.doc-link { color: var(--color-primary); text-decoration: none; font-weight: 700; font-size: 1.05rem; transition: color 0.2s; }
.doc-link:hover { color: var(--color-accent); }

/* Подвал */
footer { background-color: var(--color-bg-dark); color: #94a3b8; padding: 60px 0; font-size: 0.95rem; }
.footer-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
footer h3 { color: #ffffff; font-weight: 700; margin-bottom: 15px; font-size: 1.15rem; }
footer p { margin-bottom: 10px; }

/* ==========================================================================
   6. ДИНАМИЧЕСКИЙ АДАПТИВНЫЙ МОБИЛЬНЫЙ РЕЖИМ
   ========================================================================== */

.navbar.menu-is-open { position: fixed; top: 0; left: 0; width: 100%; background-color: transparent; border-bottom: none; }
.navbar.menu-is-open .nav-container { max-width: var(--max-content-width); margin: 0 auto; }
.navbar.mobile-mode .burger { display: flex !important; }

/* Перестройка мобильного меню во весь экран */
.navbar.mobile-mode .nav-menu {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(255, 255, 255, 0.98); z-index: 1050; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; flex-wrap: wrap;
}
.navbar.mobile-mode .nav-menu.open { opacity: 1; visibility: visible; }
.navbar.mobile-mode .nav-menu li { width: 100%; text-align: center; margin: 12px 0; }
.navbar.mobile-mode .nav-menu li a { font-size: 1.35rem; padding: 10px 0; display: inline-block; }
.navbar.mobile-mode .nav-menu li a::after { display: none; }
.navbar.mobile-mode .nav-menu li a:hover, 
.navbar.mobile-mode .nav-menu li a.active { background-color: transparent; color: var(--color-accent); }

/* Бургер-крестик */
.navbar.mobile-mode .burger.toggle .burger-icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.navbar.mobile-mode .burger.toggle .burger-icon span:nth-child(2) { opacity: 0; }
.navbar.mobile-mode .burger.toggle .burger-icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Адаптивные сжатия элементов для смартфонов */
@media (max-width: 768px) {
    .container { padding: 0 var(--mobile-padding); } /* Переменная уменьшенного отступа */
    .hero { padding: 80px 0; }
    .hero h1 { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.15rem; }
    .hero-buttons { flex-direction: column; gap: 15px; margin-top: 2rem; }
    .hero .btn-primary { margin-right: 0; }
    .scheme { flex-direction: column; text-align: center; }
    .scheme-arrow { transform: rotate(90deg); margin: 5px 0; }
    .stats-grid, .goals-grid { grid-template-columns: 1fr; gap: 20px; }
    .donate-form { padding: 25px 20px; }
    footer .container { flex-direction: column; gap: 25px; }
    .slide { padding: 10px 0; }
    .quote-text { font-size: 1.15rem; line-height: 1.5; }
    .slider-arrow { display: none; }
    .nav-container { justify-content: flex-end; height: var(--navbar-height); width: 100%; }
    .navbar.mobile-mode .nav-container { justify-content: flex-end; }
    .navbar.mobile-mode { background-color: var(--color-bg-light) !important; }
}
/* ==========================================================================
   7. ПЛАШКА УВЕДОМЛЕНИЯ О COOKIES
   ========================================================================== */
.cookie-container {
    position: fixed;
    bottom: 0; /* Всегда прижата к нижнему краю */
    left: 0;
    width: 100%;
    background-color: var(--color-bg-dark);
    color: #ffffff;
    z-index: 2000;
    border-top: 1px solid var(--color-text-muted);
    /* ИСПРАВЛЕНИЕ: Прячем плашку сдвигом вниз ровно на 100% её собственной динамической высоты */
    transform: translateY(100%); 
    transition: transform 0.5s ease-in-out; /* Плавное выплывание */
}

/* Класс для активации плашки через JS */
.cookie-container.show {
    transform: translateY(0); /* Возвращаем в исходную позицию, плашка полностью видна */
}

.cookie-content {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 20px var(--desktop-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.cookie-content p {
    font-size: 0.95rem;
    color: #bdc3c7;
    margin-bottom: 0;
}
.cookie-link {
    color: var(--color-accent);
    text-decoration: underline;
    font-weight: 700;
}
.cookie-link:hover {
    color: #ffffff;
}
.cookie-btn {
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    padding: 8px 24px;
    font-size: 0.9rem;
    white-space: nowrap;
}
.cookie-btn:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}

/* Адаптивность для мобильных экранов */
@media (max-width: 768px) {
 .cookie-content {
        flex-direction: column;
        text-align: center;
        padding: 20px var(--mobile-padding);
        gap: 15px;
    }
    .cookie-btn {
        width: 100%; /* Кнопка растягивается на всю ширину экрана смартфона */
    }
}