/* --- Тема "Evo" --- */

/* 1. Переменные и базовые стили */
:root {
    --primary-color: #0a2540;
    --secondary-color: #f6f9fc;
    --accent-color: #635bff;
    --text-color: #333;
    --text-light: #fff;
    --border-radius: 12px;
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background-color: #fff;
    color: var(--text-color);
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Шапка сайта */
.site-header {
    background: #fff;
    padding: 15px 0;
    padding-top: calc(15px + env(safe-area-inset-top));
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    z-index: 1002;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

.main-nav a {
    text-decoration: none;
    color: var(--primary-color);
    padding: 10px 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.main-nav a:hover, .main-nav a.active {
    background-color: var(--accent-color);
    color: var(--text-light);
}


/* --- СТИЛИ ДЛЯ ВЫПАДАЮЩЕГО МОБИЛЬНОГО МЕНЮ --- */

.mobile-menu-toggle {
    display: none;
    width: 30px;
    height: 22px;
    position: relative;
    cursor: pointer;
    background: transparent;
    border: none;
    z-index: 1002;
}
.mobile-menu-toggle span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    left: 0;
    transition: all 0.3s ease-in-out;
}
.mobile-menu-toggle span:nth-child(1) { top: 0px; }
.mobile-menu-toggle span:nth-child(2) { top: 9px; }
.mobile-menu-toggle span:nth-child(3) { top: 18px; }

.mobile-menu-toggle.active span:nth-child(1) {
    top: 9px;
    transform: rotate(135deg);
}
.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    left: -30px;
}
.mobile-menu-toggle.active span:nth-child(3) {
    top: 9px;
    transform: rotate(-135deg);
}

.mobile-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease, opacity 0.3s ease, visibility 0s 0.4s;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s 0s;
}

.mobile-menu nav ul {
    list-style: none;
    padding: 20px;
    margin: 0;
}
.mobile-menu nav li {
    text-align: center;
}
.mobile-menu nav a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    padding: 15px;
    display: block;
    transition: background-color 0.2s ease;
}
.mobile-menu nav a:hover {
    background-color: var(--secondary-color);
}
/* --- КОНЕЦ СТИЛЕЙ МОБИЛЬНОГО МЕНЮ --- */

/* 3. Секции и утилиты */
.section {
    padding: 80px 0;
    border-top: 1px solid #e0e6ed;
}

.section-bg {
    background-color: var(--secondary-color);
}

/* Заголовок секции на главной странице */
section.section h2.section-title,
section.section h2.section-title a {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: var(--primary-color);
    text-decoration: none; /* Убирает подчеркивание, если заголовок является ссылкой */
    border-bottom: none; /* Убирает возможные линии от других стилей */
    padding-left: 0; /* Сбрасывает отступы от других стилей */
}

/* 4. Секция "Hero" (Главный экран) */
.hero {
    background-color: var(--primary-color);
    color: var(--text-light);
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center center;
    position: relative;
    border-top: none;
}

.hero .container {
    position: relative;
    background: rgba(10, 37, 64, 0.9);
    padding: 2rem 3rem;
    border-radius: var(--border-radius);
    max-width: 800px;
}

.hero h1 {
    font-size: 56px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    max-width: 600px;
    margin: 0 auto 30px;
}

.btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--text-light);
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(99, 91, 255, 0.3);
}

/* 5. Галерея */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}
.gallery-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease;
}
.gallery-item:hover {
    transform: scale(1.05);
}
.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}
.gallery-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--text-light);
    padding: 30px 20px 20px;
    font-size: 18px;
    font-weight: 500;
}

/* 6. Контакты и Форма */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.contact-info {
    background: var(--primary-color);
    color: var(--text-light);
    padding: 50px;
}

.contact-info h3 {
    color: var(--text-light);
    margin-top: 0;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    font-size: 18px;
}

.contact-info-item svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--accent-color);
}
.contact-info-item a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}
.contact-info-item a:hover {
    color: var(--accent-color);
}

.contact-map {
    margin-top: 30px;
}
.contact-map iframe {
    width: 100%;
    height: 250px;
    border: 0;
    border-radius: var(--border-radius);
}

.contact-form-wrapper {
    padding: 50px;
}

.contact-form-wrapper h3 {
    margin-top: 0;
}

.contact-form .form-group {
    margin-bottom: 20px;
}
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* 7. Анимации при прокрутке */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 8. Подвал */
.site-footer {
    background: var(--primary-color);
    color: #a9b8c7;
    text-align: center;
    padding: 40px 0;
    margin-top: 0;
    border-top: 1px solid #e0e6ed;
}

/* 9. Адаптивность */
@media (max-width: 768px) {
    .hero h1 { font-size: 40px; }
    .hero p { font-size: 18px; }
    .hero .container {
        padding: 2rem 1.5rem;
    }
    
    .contact-grid { grid-template-columns: 1fr; }
    
    .mobile-menu-toggle {
        display: block;
    }
    .main-nav {
        display: none;
    }
    /* --- ИСПРАВЛЕННЫЙ БЛОК ДЛЯ ЗАГОЛОВКОВ НА МОБИЛЬНЫХ --- */
    .section .container > h1 {
        font-size: 32px !important; /* Устанавливаем адекватный размер с высшим приоритетом */
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
        word-break: break-word; /* Добавляем правило для корректного переноса, если слово все же не помещается */
    }
}

.gallery-item {
    position: relative;
    display: block;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.4s ease;
    border: 5px solid #fff;
    text-decoration: none;
}

.gallery-item:hover {
    transform: scale(1.05) rotate(1deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* 10. Стили LIGHTBOX */
.basicLightbox__placeholder > * {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    border-radius: 8px;
}

.basicLightbox--visible .basicLightbox__close-button {
    position: fixed;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 50px;
    color: white;
    cursor: pointer;
    font-family: Arial, sans-serif;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    transition: transform 0.2s ease;
}

.basicLightbox--visible .basicLightbox__close-button:hover {
    transform: scale(1.1);
}

/* 11. Кнопка "Наверх" */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-color);
    color: var(--text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* 12. ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ НАВИГАЦИИ В ПОДВАЛЕ */
.site-footer nav {
    margin-bottom: 20px;
}

.site-footer nav ul {
    list-style: none; /* Убираем маркеры */
    padding: 0; /* Убираем внутренний отступ */
    margin: 0;
    display: flex; /* Включаем flexbox */
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* Добавляем отступ между ссылками */
}

.site-footer nav a {
    color: #a9b8c7;
    text-decoration: none;
}

.site-footer nav a:hover {
    color: #fff;
    background-color: transparent;
}
/* --- КОНЕЦ ИСПРАВЛЕНИЙ --- */

.form-status-success, .form-status-error {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
}
.form-status-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.form-status-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* 13. Универсальная стилизация контента из админки (Исправленная версия) */
.section .container article,
.section .container .reveal {
    color: #555;
    line-height: 1.8;
    font-size: 18px;
}
.section .container article h1, .section .container .reveal h1,
.section .container article h2, .section .container .reveal h2,
.section .container article h3, .section .container .reveal h3,
.section .container article h4, .section .container .reveal h4,
.section .container article h5, .section .container .reveal h5,
.section .container article h6, .section .container .reveal h6 {
    color: var(--primary-color);
    border: none;
    padding-left: 0;
}

/* Улучшенный заголовок H3 */
.section .container article h3,
.section .container .reveal h3 {
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 4px solid var(--accent-color);
    border-bottom: none;
}
.section .container article p,
.section .container .reveal p {
    margin-bottom: 15px;
}
.section .container article a,
.section .container .reveal a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}
.section .container article a:hover,
.section .container .reveal a:hover {
    text-decoration: underline;
}

/* Улучшенные списки */
.section .container article ul, .section .container .reveal ul,
.section .container article ol, .section .container .reveal ol {
    padding-left: 20px;
}
.section .container article ul,
.section .container .reveal ul {
    list-style: none;
}
.section .container article li,
.section .container .reveal li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
}
.section .container article ul > li::before,
.section .container .reveal ul > li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 18px;
}

/* Улучшенный блок кода */
.section .container article code,
.section .container .reveal code {
    background-color: rgba(99, 91, 255, 0.07);
    border: 1px solid rgba(99, 91, 255, 0.2);
    color: #5d55cc;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.9em; /* Немного уменьшим размер для лучшего вида */
}
.section .container article pre,
.section .container .reveal pre {
    background-color: #f6f9fc;
    border: 1px solid #e0e6ed;
    padding: 20px;
    border-radius: var(--border-radius);
    white-space: pre-wrap;
    word-break: break-all;
    color: #555;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Улучшенная цитата */
.section .container article blockquote,
.section .container .reveal blockquote {
    margin: 25px 0;
    padding: 20px;
    padding-left: 25px;
    border-left: 5px solid var(--accent-color);
    background-color: #f6f9fc;
    font-style: italic;
    color: #555;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
/* --- ИСПРАВЛЕННЫЙ БЛОК ДЛЯ ЗАГОЛОВКОВ НА ДЕСКТОПЕ --- */
/* 14. Стили для заголовков на статических страницах */
/* Главный заголовок H1 */
.section .container > h1 {
    font-size: 38px; /* Уменьшаем базовый размер */
    color: var(--primary-color);
    margin-bottom: 40px;
    border-bottom: 2px solid #e0e6ed;
    padding-bottom: 20px;
    word-wrap: break-word; /* Позволяет переносить длинные слова */
    text-align: center;
}

/* Подзаголовок H2 в тексте */
.section .container article h2,
.section .container .reveal h2 {
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e6ed;
}
/* 15. ИСПРАВЛЕНИЕ ЗАГОЛОВКОВ СЕКЦИЙ (H2) */
.section h2.section-title {
    text-align: center !important; /* !important гарантирует центральное выравнивание */
    font-size: 36px !important;   /* !important гарантирует правильный размер */
    color: var(--primary-color) !important;
    margin-bottom: 50px;

    /* Сбрасываем стили, которые мешали */
    border-bottom: none !important;
    border-left: none !important;
    padding-left: 0 !important;
}
/* --- Стили для иконок соцсетей в подвале --- */
/* --- Стили для текстовых ссылок в подвале --- */
.social-links {
    display: flex;
    flex-wrap: wrap; /* Для переноса на мобильных */
    justify-content: center;
    gap: 10px 15px; /* Вертикальный и горизонтальный отступы */
    margin-bottom: 20px;
}
.social-links a {
    color: #a9b8c7; /* Цвет по умолчанию */
    text-decoration: none;
    transition: all 0.3s ease;
}
.social-links a:hover {
    color: #fff; /* Цвет при наведении */
    text-decoration: underline;
}
/* --- Стили для переключателя тем --- */
.theme-switcher {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.theme-switcher:hover {
    transform: scale(1.1);
}
.theme-switcher svg {
    width: 24px;
    height: 24px;
    color: #fff;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.theme-switcher .moon {
    opacity: 0;
    transform: translateY(10px);
}
.theme-switcher .sun {
    opacity: 1;
    transform: translateY(0);
}

/* Когда активна темная тема */
body.dark-mode .theme-switcher .moon {
    opacity: 1;
    transform: translateY(0);
}
body.dark-mode .theme-switcher .sun {
    opacity: 0;
    transform: translateY(-10px);
}
/* --- Стили для иконок соцсетей в подвале --- */
.social-links {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 15px; /* Отступы между иконками */
    margin-bottom: 20px;
}
.social-links a {
    color: #a9b8c7; /* Цвет по умолчанию (из темы Nebula, но подойдет для обеих) */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block; /* Важно для правильного отображения */
}
.social-links a:hover {
    color: #fff; /* Цвет при наведении */
    transform: scale(1.1);
}
/* Задаем размер для SVG внутри ссылок */
.social-links a svg {
    width: 24px;
    height: 24px;
}
/* --- ИСПРАВЛЕНИЕ v2: Возвращаем белый цвет заголовку в блоке контактов --- */
.contact-grid .contact-info h3 {
    color: var(--text-light) !important; /* !important дает максимальный приоритет */
    border: none !important;
    padding: 0 !important;
}
/* Исправление для рваных углов карты */
#contacts .contact-map {
  overflow: hidden;
  border-radius: 15px; /* Убедитесь, что это значение совпадает со скруглением блока */
}
/* Убираем рамку у iframe карты для идеального скругления */
#contacts .contact-map iframe {
  border: 0;
}
/* Стили для отложенной загрузки карты */
.contact-map {
    position: relative;
    min-height: 400px; /* Высота-заглушка, чтобы избежать смещения контента */
    background-color: #e9e9e9; /* Цвет фона, пока карта не загрузилась */
}
.contact-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:0;
}
/* --- Reviews Section --- */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.review-card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.review-text {
    font-style: italic;
    color: var(--text-secondary-color);
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
    border-left: 3px solid var(--accent-color);
}

.review-text p {
    margin: 0;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto; /* Прижимает автора к низу карточки */
}

.review-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-color);
}

.author-info .author-name {
    font-weight: 700;
    color: var(--text-color);
    display: block;
}

.author-info .author-position {
    font-size: 0.9em;
    color: var(--text-secondary-color);
}
/* --- FAQ Section --- */
.faq-accordion {
    max-width: 800px;
    margin: 40px auto 0;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
}

.faq-question {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: var(--accent-color);
}

.faq-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Предотвращает сжатие иконки */
    margin-left: 15px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer p {
    margin: 0;
    padding: 0 5px 20px 5px; /* отступы внутри ответа */
    line-height: 1.7;
    color: var(--text-secondary-color);
}

/* Стили для активного состояния */
.faq-item.active .faq-question {
    color: var(--accent-color);
}
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}
.faq-item.active .faq-answer {
    /* max-height устанавливается через JS */
}
.faq-placeholder {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary-color);
    background: var(--glass-bg, rgba(246, 249, 252, 0.7));
    border: 1px solid var(--glass-border, #e0e6ed);
    border-radius: 12px;
    transition: all 0.3s ease;
}