/* === Сброс всех стандартных стилей браузера для унификации === */
*,
*::before,
*::after {
    margin: 0; /* Убираем внешние отступы у всех элементов */
    padding: 0; /* Убираем внутренние отступы у всех элементов */
    box-sizing: border-box; /* Включаем в размер элемента его отступы и границы */
}

/* цвета */
:root {
    --background_white: #ffefcd;
    --background: #ceaf8c;
    --tonal: #ffa90a;
    --tonal_up: #ff8724;
    --green: #717754;

    --background_dark: #1f1d1d;   /* Темно-графитовый фон */
    --background_no: #4a4a4a;     /* Глубокий черный фон */
    --tonal_d: #6d6d6d;           /* Светлый графит для акцентов */
    --tonal_up_d: #505050;        /* Темнее серый для ховеров */
    --green_d: #b0b0b0;           /* Светло-серый текст */
    --gray: #ddd;
}

/* Стили для вкладок меню в темной теме */
.dark-mode .menu__tab {
    background-color: #4b4b4b;  /* Темно-серый фон */
    color: var(--gray);  /* Светло-серый текст */
    border: 1px solid #5c5c5c;  /* Тонкая граница */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dark-mode .menu__tab:hover {
    background-color: #5e5e5e;  /* Светло-графитовый при наведении */
    border-color: #777;  /* Подсветка границы */
}

.dark-mode .menu__tab.active {
    background-color: #6c6c6c;  /* Цвет активной вкладки */
    color: #fff;  /* Яркий текст активной вкладки */
    border-color: #888;  /* Ярче граница */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);  /* Легкая тень для эффекта "выпуклости" */
}
  
/* Темная тема */
body.dark-mode {
    background-color: var(--background_no);  /* Цвет фона для темной темы */
    color: var(--background_white);             /* Цвет текста для темной темы */
}

.dark-mode main {
    background-color: var(--background_dark) ;  /* Цвет фона для темной темы */
    color: var(--background_white);             /* Цвет текста для темной темы */
}

/* Стили для фиксированной кнопки переключения темы */
.theme-toggle {
    position: fixed;  /* Фиксированное положение — кнопка остаётся на одном месте при прокрутке страницы. */
    left: 20px;       /* Расположение кнопки на 20 пикселей от левого края окна. */
    top: 90%;         /* Расположение кнопки по центру экрана по вертикали (50% от высоты окна). */
    transform: translateY(-50%); /* Смещает кнопку вверх на 50% её высоты, чтобы центрировать её точно по вертикали. */
    z-index: 1000;    /* Устанавливает приоритет отображения кнопки выше других элементов (чем больше число, тем выше элемент). */
    background-color: var(--tonal);  /* цвет фона кнопки. */
    /* border: 1px solid var(--tonal_up);  Граница кнопки толщиной 1 пиксель с серым цветом. */
    border-radius: 50%;  /* Делает кнопку круглой. Радиус 50% превращает квадрат в круг. */
    width: 60px;   /* Ширина кнопки — 60 пикселей. */
    height: 60px;  /* Высота кнопки — 60 пикселей. */
    display: flex;  /* Применяет flexbox для внутреннего содержимого кнопки (например, иконки). */
    justify-content: center;  /* Центрирует содержимое кнопки (иконку) по горизонтали. */
    align-items: center;      /* Центрирует содержимое кнопки по вертикали. */
    cursor: pointer;  /* Изменяет вид курсора на "указатель руки" при наведении, показывая, что кнопка кликабельна. */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Усиленная тень */
}

/* Изменения для темной темы */
.dark-mode .header {
    background-color: var(--background_dark);  /* Темный фон в темной теме */
    color: var(--tonal_d);                     /* Темный тон для текста */
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
}

/* Темная тема для карточек */
.dark-mode .card-list .card-item .card-link {
    background-color: var(--background_no);  /* Темный фон карточек */
    color: var(--green_d);                   /* Тон текста */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Усиленная тень */
}

/* Наведение на карточку */
.card-link:hover {
    background-color: var(--tonal_up);  /* Подсветка при наведении в светлой теме */
}

.dark-mode .card-link:hover {
    background-color: var(--tonal_up_d);  /* Подсветка в темной теме */
}

/* Стили для заголовков h2 в темной теме */
.dark-mode .contacts h2 {
    color: var(--gray);  /* Светло-серый текст */
    font-size: 1.8rem;  /* Размер шрифта */
    font-weight: 600;  /* Полужирный текст */
}

/* Стили для абзацев p в темной теме */
.dark-mode .contacts p {
    color: var(--gray);  /* Светло-серый текст */
    font-size: 1rem;  /* Обычный размер шрифта */
}

/* Дополнительно для ссылок внутри абзацев */
.dark-mode p a {
    color: #8ab4f8;  /* Голубой цвет ссылок */
    text-decoration: none;  /* Убираем подчеркивание */
    transition: color 0.3s ease;  /* Плавное изменение цвета */
}

.dark-mode p a:hover {
    color: #a6c8ff;  /* Светлее при наведении */
    text-decoration: underline;  /* Добавляем подчеркивание */
}

/* Стили для заголовков h2 в темной теме */
.dark-mode .about h2 {
    color: var(--gray);  /* Светло-серый текст */
    font-size: 1.8rem;  /* Размер шрифта */
    margin-bottom: 10px;
    font-weight: 600;  /* Полужирный текст */
}

/* Стили для абзацев p в темной теме */
.dark-mode .about p {
    color: var(--gray);  /* Светло-серый текст */
    font-size: 1rem;  /* Обычный размер шрифта */
}

/* Стили для заголовков h2 в темной теме */
.dark-mode .section_menu h2 {
    color: var(--gray);  /* Светло-серый текст */
    font-size: 1.8rem;  /* Размер шрифта */
    margin-bottom: 10px;
    font-weight: 600;  /* Полужирный текст */
}

body.dark-mode .contacts {
    background-color: var(--background_no);
    color: var(--background_dark);  /* Светло-серый текст */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Усиленная тень */
}

/* Темная тема */  
.dark-theme .header__nav-link:hover {
    color: var(--tonal_up); /* Цвет при наведении в темной теме */
    text-decoration: underline; /* Подчеркивание при наведении */
}
.dark-mode .header__nav-link {
    color: var(--gray); /* Цвет текста ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    font-size: 1rem; /* Размер шрифта */
    font-weight: 500; /* Толщина текста */
    transition: color 0.3s ease; /* Плавный переход для изменения цвета */
}

.dark-mode .card-list .card-link .badge {
    color: var(--tonal_d); /* Цвет текста бейджа */
    margin: 16px 0 18px; /* Отступы сверху и снизу */
    padding: 8px 16px; /* Внутренние отступы бейджа */
    font-weight: 500; /* Толщина шрифта */
    font-size: 0.95rem; /* Размер текста бейджа */
    background: var(--gray); /* Фон бейджа */
    width: fit-content; /* Ширина подстраивается под текст */
    border-radius: 50px; /* Скругляем бейдж */
}

.dark-mode .card-link .description {
    font-size: 16px;
    color: var(--gray);
    margin-top: 5px;
    text-align: left;
}

.dark-mode .modal-badge, .modal-description {
    margin: 10px 0;
    color: var(--gray);
}

.dark-mode .modal-extra-info {
    color: var(--gray)
}

body.dark-mode .swiper-slide-button {
    color: var(--gray);
}

.dark-mode .theme-toggle-btn {
    background-color: var(--green_d);
}









/* === Основные стили для body === */
/* светлая тема(по-умолчанию) */
body {
    font-family: 'Montserrat', sans-serif; /* Устанавливаем основной шрифт */
    font-weight: 200;
    line-height: 1.6; /* Увеличиваем межстрочный интервал для удобства чтения */
    color: var(--green); /* Основной цвет текста */
    padding: 0; /* Убираем внутренние отступы */
    margin: 0; /* Убираем внешние отступы */
    display: flex; /* Используем флексбокс для центровки содержимого */
    flex-direction: column; /* Размещаем элементы в колонку */
    align-items: center; /* Центрируем элементы по горизонтали */
    justify-content: center; /* Центрирование по горизонтали */
    min-height: 100vh; /* Минимальная высота страницы — 100% от высоты окна */
    background-color: var(--background);
    transition: background-color 0.3s, color 0.3s; /* Плавное изменение фона и текста при смене темы */

}

/* === Ограничиваем ширину основного контента === */
.container {
    max-width: 1200px; /* Максимальная ширина контейнера */
    width: 100%; /* Контейнер занимает всю доступную ширину */
    padding: 0 20px; /* Внутренние отступы по бокам */
}

/* === Стили для хедера (панель навигации) === */
.header {
    background-color: var(--green); /* Фон хедера */
    color: var(--background_white); /* Цвет текста в хедере */
    width: 100%; /* Хедер растягивается на всю ширину */
    position: sticky; /* Хедер "прилипает" к верхней части страницы при прокрутке */
    top: 0; /* Расположение хедера — сверху */
    z-index: 1000; /* Устанавливаем приоритет отображения */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Тень под хедером */
}

.header__container {
    max-width: 1200px; /* Ограничиваем ширину контента в хедере */
    margin: 0 auto; /* Центрируем хедер */
    display: flex; /* Используем флексбокс для распределения элементов */
    justify-content: space-between; /* Распределяем элементы по краям */
    align-items: center; /* Выравниваем элементы по центру */
    padding: 10px 20px; /* Внутренние отступы */
    transition: background-color 0.3s, color 0.3s;  /* Плавное переключение темы */
    position: relative;
    z-index: 10; /* Меньше, чем у кнопки смены темы*/
}

.header__logo {
    width: 25px; /* Ширина логотипа */
    height: 25px; /* Высота логотипа */
    border-radius: 50%; /* Скругляем изображение до круга */
    object-fit: cover; /* Сохраняем пропорции изображения */
}

.header__nav,
.header__navigation {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.header__nav-link {
    color: var(--background_white); /* Цвет текста ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    font-size: 1rem; /* Размер шрифта */
    font-weight: 500; /* Толщина текста */
    transition: color 0.3s ease; /* Плавный переход для изменения цвета */
}

.header__nav-link:hover {
    color: var(--tonal_up); /* Цвет ссылки при наведении */
}

.header__contacts {
    display: flex; /* Используем флексбокс для контактов */
    align-items: center; /* Выравниваем элементы по вертикали */
    gap: 10px; /* Расстояние между элементами */
}

.contacts__social-link {
    display: flex; /* Используем флексбокс для иконок контактов */
    align-items: center; /* Центрируем содержимое по вертикали */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    width: 32px; /* Ширина иконки */
    height: 32px; /* Высота иконки */
    border-radius: 50%; /* Скругляем до круга */
    background-color: var(--tonal_up); /* Фон иконки */
    color: var(--background_white); /* Цвет иконки */
    text-decoration: none; /* Убираем подчеркивание */
    font-size: 1rem; /* Размер текста (если используется текстовая иконка) */
    transition: background-color 0.3s ease; /* Плавный переход для изменения фона */
    box-sizing: border-box; /* Включаем отступы и границы в общий размер */
}

.contacts__social-link img {
    width: 16px;
    height: 16px;
    color: var(--background_white)
}

.dark-mode .modal-content {
    background-color: var(--background_no);
}

/* === Основной контент сайта === */
main {
    width: 100%; /* Контент занимает всю ширину */
    max-width: 1200px; /* Ограничиваем максимальную ширину */
    margin-top: 20px; /* Отступ сверху */
    padding: 20px; /* Внутренние отступы */
    background-color: var(--background_white); /*  фон */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Усиленная тень */
    border-radius: 8px; /* Скругленные углы */
}
/* === Секция "О нас" === */
.about {
    margin-bottom: 40px; /* Отступ снизу для разделения с другими секциями */
}

.about h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.8rem; /* Размер шрифта заголовка */
    margin-bottom: 10px; /* Отступ снизу для отделения от текста */
    color: var(--green); /* Цвет заголовка */
}

.about p {
    font-size: 1rem; /* Размер шрифта текста */
    font-weight: 500; /* Толщина текста */
    color: var(--green); /* Цвет текста */
}

.section_menu {
    margin-bottom: 40px; /* Отступ снизу для разделения с другими секциями */
}

.section_menu h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem; /* Размер шрифта заголовка */
    margin-bottom: 10px; /* Отступ снизу для отделения от текста */
    color: var(--green); /* Цвет заголовка */
}    
/* === Секция "Меню" === */
.menu {
    margin-bottom: 40px; /* Отступ снизу для разделения с другими секциями */
}

.menu h2 {
    font-size: 1.8rem; /* Размер шрифта заголовка */
    margin-bottom: 20px; /* Отступ снизу для отделения от вкладок */
    color: var(--green); /* Цвет текста заголовка */
}

/* === Вкладки меню === */
.menu__tabs {
    display: flex; /* Используем флексбокс для вкладок */
    justify-content: center; /* Центрируем вкладки по горизонтали */
    gap: 15px; /* Расстояние между вкладками */
    margin-bottom: 20px; /* Отступ снизу для отделения от содержимого меню */
}

.menu__tab {
    background-color: var(--tonal); /* Фон вкладки */
    color: var(--background_white); /* Цвет текста вкладки */
    border: none; /* Убираем рамки */
    border-radius: 5px; /* Скругляем углы вкладки */
    padding: 10px 15px; /* Внутренние отступы */
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem; /* Размер текста */
    font-weight: 500; /* Толщина шрифта */
    cursor: pointer; /* Указываем, что элемент кликабельный */
    transition: background-color 0.3s ease; /* Плавный переход при изменении фона */
}

.menu__tab.active {
    background-color: var(--tonal_up); /* Фон активной вкладки */
}

.menu__tab:hover {
    background-color: var(--tonal_up); /* Фон вкладки при наведении */
}

/* === Секция "Карусель" === */

.card-wrapper {
    max-width: 1100px; /* Максимальная ширина карусели */
    margin: 0 60px 35px; /* Отступы по бокам и снизу */
    padding: 20px 10px; /* Внутренние отступы */
    overflow: hidden; /* Обрезаем содержимое, выходящее за пределы */
}

.card-list .card-item {
    list-style: none; /* Убираем стандартные стили списков */
}

.card-list .card-item .card-link {
    user-select: none; /* Запрещаем выделение текста */
    display: block; /* Блочный элемент для карточек */
    background: var(--green); /* Белый фон карточки */
    padding: 18px; /* Внутренние отступы */
    border-radius: 12px; /* Скругляем углы карточки */
    text-decoration: none; /* Убираем подчеркивание */
    border: 2px solid transparent; /* Прозрачная рамка для эффекта при наведении */
    transition: 0.2s ease; /* Плавный переход для изменений */
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Усиленная тень */
}

.card-list .card-item .card-link:active {
    cursor: grabbing; /* Меняем курсор при нажатии */
}

.card-list .card-link .card-image {
    width: 100%; /* Ширина изображения равна ширине карточки */
    aspect-ratio: 1 / 1; /* Пропорции изображения */
    object-fit: cover; /* Изображение сохраняет пропорции */
    border-radius: 10px; /* Скругляем углы изображения */
}

.card-list .card-link .badge {
    color: var(--green); /* Цвет текста бейджа */
    margin: 16px 0 18px; /* Отступы сверху и снизу */
    padding: 8px 16px; /* Внутренние отступы бейджа */
    font-weight: 500; /* Толщина шрифта */
    font-size: 0.95rem; /* Размер текста бейджа */
    background: var(--background_white); /* Фон бейджа */
    width: fit-content; /* Ширина подстраивается под текст */
    border-radius: 50px; /* Скругляем бейдж */
}

.card-link .description {
    font-size: 16px;
    color: var(--background_white);
    margin-top: 5px;
    text-align: left;
}

.card-list .card-link .card-title {
    font-size: 16px; /* Размер текста заголовка карточки */
    color: #000; /* Цвет текста */
    font-weight: 100; /* Тонкий шрифт */
}

.card-list .card-link .card-button {
    height: 35px; /* Высота кнопки */
    width: 35px; /* Ширина кнопки */
    color: #5372f0; /* Цвет кнопки */
    border-radius: 50%; /* Скругленная кнопка */
    margin: 30px 0 5px; /* Отступы сверху и снизу */
    background: none; /* Прозрачный фон */
    cursor: pointer; /* Курсор для кликабельности */
    transform: rotate(-45deg); /* Поворот кнопки */
    border: 2px solid #5382f0; /* Цвет рамки */
    transition: 0.4s ease; /* Плавный переход при изменении стилей */
}

.card-list .card-link:hover .card-button {
    color: #fff; /* Цвет текста кнопки при наведении */
    background: #5372f0; /* Фон кнопки при наведении */
}

/* Пагинация слайдера */
.card-wrapper .swiper-pagination-bullet {
    height: 13px; /* Высота точки */
    width: 13px; /* Ширина точки */
    opacity: 0.5; /* Прозрачность */
    background: var(--green); /* Цвет точки */
}

.card-wrapper .swiper-pagination-bullet-active {
    opacity: 1; /* Прозрачность активной точки */
}

/* Кнопки переключения слайдов */
.card-wrapper .swiper-slide-button {
    color: var(--green); /* Цвет кнопок переключения */
    margin-top: -35px; /* Сдвиг кнопки вверх */
}

/* section contacts */

.contacts p {
    font-size: 1rem; /* Размер шрифта текста */
    font-weight: 500; /* Толщина текста */
    color: var(--green); /* Цвет текста */
}


/* Адаптивность для мобильных устройств */
@media screen and (max-width: 768px) {
    .card-wrapper {
        margin: 0 10px 25px; /* Уменьшаем отступы */
    }

    .card-wrapper .swiper-slide-button {
        display: none; /* Прячем кнопки переключения на маленьких экранах */
    }
}
/* === Секция "Контакты" === */
.contacts {
    background: var(--background); /* Тёмный фон для раздела контактов */
    border-radius: 8px; /* Скругляем углы блока */
    padding: 20px; /* Внутренние отступы блока */
    text-align: center; /* Центрируем текст внутри блока */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Усиленная тень */
}

.contacts__social a {
    margin: 0 10px; /* Отступы между ссылками на соцсети */
    color: var(--tonal_up); /* Цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
    font-weight: bold; /* Жирный шрифт */
    transition: color 0.3s; /* Плавный переход при изменении цвета */
}

.contacts__social a:hover {
    color: var(--background_white); /* Изменение цвета текста при наведении */
}

/* === Размер и цвет SVG-иконок === */
.icon {
    width: 18px; /* Ширина иконки */
    height: 18px; /* Высота иконки */
    fill: var(--background_white); /* Цвет заливки иконки */
}

/* === Общие стили для всех кнопок === */
button {
    background-color: #ffa500; /* Оранжевый фон кнопки */
    color: var(--background_white); /* Белый цвет текста */
    border: none; /* Убираем рамки */
    border-radius: 5px; /* Скругляем углы кнопки */
    padding: 10px 15px; /* Внутренние отступы */
    cursor: pointer; /* Указываем, что кнопка кликабельна */
    font-size: 1rem; /* Размер шрифта текста */
    font-weight: 500; /* Толщина шрифта */
    transition: background-color 0.3s ease; /* Плавный переход для фона */
}

button:hover {
    background-color: var(--tonal_up); /* Меняем фон кнопки при наведении */
}

.card-modal::backdrop {
    background: rgba(0, 0, 0, 0.5); /* Затемнение фона */
}

.card-modal {
    border: none;
    border-radius: 10px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Скрываем лишнее */

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-content {
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* Ограничиваем высоту окна */
    overflow-y: auto; /* Добавляем прокрутку */
    padding: 20px;
    background-color: var(--green);
    color: var(--background_white)
}

.modal-image {
    width: 100%;
    height: auto;
}

.modal-badge, .modal-description {
    margin: 10px 0;
    color: var(--background_white);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

#moon-icon {
    display: none;
}

.dark-mode #moon-icon {
    display: block;  /* Показываем луну в тёмной теме */
}

.dark-mode #sun-icon {
    display: none;  /* Скрываем солнце в тёмной теме */
}

#sun-icon {
    fill: var(--background_white); /* Красим солнце */
}

.dark-mode #sun-icon {
    fill: var(--gray);  /* В темной теме солнце белое */
}

#moon-icon {
    fill: var(--gray);  /* Луна серая */
}