/* ============================================
   ПЕРЕМЕННЫЕ ЦВЕТОВ
   Используем var(--имя) вместо #кода
   ============================================ */
:root {
  /* Фон и текст */
  --color-bg: #f0f0f0;          /* Цвет фона всей страницы */
  --color-text: #3a3a3a;        /* Основной цвет текста на странице */

  /* Таблицы */
  --color-table-even: #f9f9f9;  /* Фон чётных строк таблицы */
  --color-table-odd: #ffffff;   /* Фон нечётных строк таблицы */
  --color-table-hover: #DDF5AD;/* Фон строки при наведении курсора */

  /* Основной — фиолетовый */
  --purple-pale: #CFA6E6;      /* Самый светлый фиолетовый — текст в подвале/меню */
  --purple-light: #BA6BE6;     /* Светло-фиолетовый */
  --purple-middle: #9341C0;    /* Средний фиолетовый — рамка при наведении */
  --purple: #6B1799;           /* Основной фиолетовый — заголовки, маркеры, рамки */
  --purple-dark: #4E2D60;      /* Тёмно-фиолетовый — фон меню, подвала, баннера */
  --purple-deep: #300349;      /* Самый тёмный — фон при наведении на пункт меню */

  /* Вторичный A — зелёный */
  --green-pale: #DDF5AD;       /* Бледно-зелёный */
  --green-light: #C7F56B;      /* Светло-зелёный */
  --green: #96D615;            /* Основной зелёный — ссылки, активный пункт меню */
  --green-dark: #6D863B;       /* Тёмно-зелёный */
  --green-deep: #456603;       /* Самый тёмный зелёный */

  /* Вторичный B — оранжевый */
  --orange-pale: #F9ECB0;      /* Бледно-оранжевый */
  --orange-light: #F9E16D;     /* Светло-оранжевый — текст при наведении в меню/подвале */
  --orange: #E6C217;           /* Основной оранжевый — ссылки при наведении */
  --orange-dark: #8F823F;      /* Тёмно-оранжевый */
  --orange-deep: #6D5B03;      /* Самый тёмный оранжевый */
}

/* ============================================
   СБРОС И БАЗА
   Убираем отступы браузера по умолчанию
   ============================================ */
* {                            /* Звёздочка — применяем ко всем элементам */
  margin: 0;                   /* Убираем внешний отступ у всех элементов */
  padding: 0;                  /* Убираем внутренний отступ у всех элементов */
  box-sizing: border-box;       /* Padding и border включаются в ширину, не добавляются сверх */
}

html, body {                    /* Применяем к html и body одновременно */
  height: 100%;                /* Высота 100% — нужно для flex-вёрстки страницы */
}

body {
  background-color: var(--color-bg);  /* Цвет фона страницы из переменной */
  color: var(--color-text);           /* Основной цвет текста из переменной */
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* Семейство шрифтов: Verdana → запасные */
  font-size: 16px;                    /* Базовый размер шрифта для всей страницы */
  line-height: 1.5;                   /* Межстрочный интервал — 1.5 × размер шрифта */
}

/* ============================================
   ОБЁРТКА — центррует контент по 1280px
   ============================================ */
.wrapper {                     /* Главный контейнер страницы — обнимает баннер, меню, контент, подвал */
  max-width: 1280px;           /* Максимальная ширина контейнера — не шире 1280px */
  margin: 0 auto;              /* Авто-отступы слева/справа — центрирует контейнер */
  min-height: 100vh;           /* Минимум 100% высоты экрана — чтобы подвал был внизу */
  display: flex;               /* Включаем flexbox — дочерние элементы выстраиваются в колонку */
  flex-direction: column;      /* Элементы идут сверху вниз: баннер → меню → контент → подвал */
}

/* ============================================
   БАННЕР — 1280×220, сверху
   ============================================ */
.banner {                      /* Верхний баннер с фоновым изображением */
  width: 100%;                  /* Ширина — 100% от .wrapper */
  aspect-ratio: 1280 / 220;    /* Сохраняет пропорции 1280×220 при любом масштабе */
  background: var(--purple-dark) url('../images/Banner_1280x220.jpg') no-repeat center / cover;
  /* Разбор background:
     var(--purple-dark) — фоновый цвет (виден, пока грузится картинка)
     url(...) — путь к фоновому изображению
     no-repeat — не повторять картинку
     center — центрировать по обоим осям
     cover — масштабировать так, чтобы покрыть весь блок без искажения */
}

/* ============================================
   НАВИГАЦИЯ — 50px, липкая, по центру
   ============================================ */
.nav-bar {                     /* Контейнер панели навигации */
  height: 50px;                /* Высота панели меню — 50px */
  background-color: var(--purple-dark); /* Фон панели — тёмно-фиолетовый */
  position: sticky;            /* Прилипает к верху при прокрутке страницы */
  top: 0;                      /* Прилипает к самой верхней точке экрана */
  z-index: 1000;               /* Слой поверх остального контента — меню не перекрывается */
  overflow: hidden;            /* Обрезает всё, что выходит за края панели — фиксит hover-фон */
}

/* Скрытый чекбокс для мобильного меню (CSS-only, без JS) */
.nav-toggle {                  /* Сам чекбокс — технический элемент, всегда невидим */
  display: none;               /* Скрываем чекбокс — он работает за кадром */
}

/* Кнопка "МЕНЮ" — видна только на мобильных */
.nav-toggle-label {            /* Текстовая кнопка, связанная с чекбоксом через for="nav-toggle" */
  display: none;               /* По умолчанию скрыта — видна только при ширине ≤768px */
  color: var(--purple-pale);   /* Цвет текста кнопки — бледно-фиолетовый */
  font-weight: bold;           /* Жирный шрифт */
  text-align: center;          /* Текст по центру кнопки */
  text-transform: uppercase;   /* Все буквы заглавные */
  cursor: pointer;             /* Курсор в виде руки — намекает, что кликабельно */
  padding: 0 20px;             /* Отступы внутри кнопки: 0 сверху/снизу, 20px слева/справа */
  height: 50px;                /* Высота кнопки — совпадает с высотой панели */
  line-height: 50px;           /* Высота строки = высоте кнопки — вертикальное центрирование текста */
  align-items: center;         /* Доп. центрирование для flex-режима */
}

/* Список пунктов меню */
.nav-list {                    /* Список <ul> с пунктами меню */
  list-style: none;            /* Убираем маркеры списка (точки) */
  display: flex;               /* Flexbox — пункты выстраиваются в строку */
  justify-content: center;     /* Пункты центрируются по горизонтали */
  height: 50px;                /* Высота списка = высоте панели */
}

/* Каждый пункт меню */
.nav-list a {                  /* Ссылка <a> внутри пункта меню */
  display: flex;               /* Flexbox — для вертикального центрирования текста */
  align-items: center;         /* Текст по вертикали по центру */
  height: 50px;                /* Высота ссылки = высоте панели */
  padding: 0 20px;             /* Отступы: 0 сверху/снизу, 20px слева/справа */
  color: var(--purple-pale);   /* Цвет текста пункта — бледно-фиолетовый */
  text-decoration: none;        /* Убираем подчёркивание ссылки */
  text-transform: uppercase;   /* Все буквы заглавные */
  font-size: 16px;             /* Размер шрифта пункта меню */
  transition: background 0.2s, color 0.2s; /* Плавный переход фона и цвета за 0.2с */
  white-space: nowrap;         /* Запрет переноса текста на вторую строку */
}

/* Наведение на пункт меню */
.nav-list a:hover {            /* При наведении курсора на пункт */
  background-color: var(--purple-deep); /* Фон становится очень тёмным фиолетовым */
  color: var(--orange-light);  /* Текст становится светло-оранжевым */
}

/* Текущая страница (добавляем класс .current) */
.nav-list a.current {         /* Пункт меню текущей страницы — класс ставится вручную в HTML */
  color: var(--green);         /* Текст зелёный — выделяет текущую страницу */
  background-color: var(--purple-deep); /* Фон тёмно-фиолетовый */
}

/* ============================================
   ТЕЛО СТРАНИЦЫ — 90% ширины, занимает всё пространство
   ============================================ */
.content {                     /* Основной блок с текстом страницы */
  flex: 1 0 auto;              /* Растягивается, занимая свободное место — подвал прижат вниз */
  width: 90%;                  /* Ширина 90% от .wrapper (≈1152px при максимуме) */
  margin: 0 auto;              /* Центрирование по горизонтали */
  padding: 20px 0;            /* Отступы сверху и снизу — 20px */
}

/* Заголовки внутри тела */
.content h1 {                  /* Заголовок первого уровня */
  font-size: 24px;             /* Размер шрифта */
  margin-bottom: 8px;          /* Отступ снизу до следующего элемента */
  margin-top: 16px;            /* Отступ сверху от предыдущего элемента */
  color: var(--purple);        /* Цвет — основной фиолетовый */
  text-align: center;          /* Текст по центру */
}

.content h2 {                  /* Заголовок второго уровня */
  font-size: 20px;             /* Размер шрифта — меньше, чем у h1 */
  margin-bottom: 8px;          /* Отступ снизу */
  margin-top: 16px;            /* Отступ сверху */
  color: var(--purple);        /* Цвет — основной фиолетовый */
}

/* Обычные абзацы */
.content p {                   /* Абзац текста */
  margin-bottom: 12px;         /* Отступ снизу между абзацами */
}

/* ============================================
   ССЫЛКИ В ТЕЛЕ СТРАНИЦЫ
   ============================================ */
.content a {                   /* Любая ссылка внутри контента */
  color: var(--green);         /* Цвет ссылки — зелёный */
}

.content a:hover {            /* При наведении на ссылку */
  color: var(--orange);        /* Цвет меняется на оранжевый */
}

/*
.content a:visited {          — отключено, но оставлено для будущей правки
  color: var(--green-deep);     — цвет посещённой ссылки (тёмно-зелёный)
}>
*/

/* ============================================
   ССЫЛКИ НА МЕССЕНДЖЕРЫ (страница контактов)
   ============================================ */
.messenger-links {             /* Контейнер с кнопками мессенджеров */
  display: flex;               /* Flexbox — кнопки в строку */
  gap: 16px;                   /* Расстояние между кнопками — 16px */
  flex-wrap: wrap;             /* Если не влезают — переносятся на следующую строку */
  margin: 20px 0;              /* Отступы сверху и снизу от контейнера */
}

.messenger-links a {          /* Каждая кнопка-ссылка */
  font-weight: bold;           /* Жирный текст */
  text-decoration: none;       /* Без подчёркивания */
  padding: 8px 20px;           /* Внутренние отступы: 8px сверху/снизу, 20px слева/справа */
  border-radius: 6px;          /* Скругление углов — 6px */
  color: #fff;                 /* Белый текст на цветном фоне */
  transition: opacity 0.2s;    /* Плавное изменение прозрачности при наведении */
}

.messenger-links a:hover {    /* При наведении на кнопку мессенджера */
  color: var(--orange);        /* Текст становится оранжевым */
  opacity: 0.8;               /* Прозрачность 80% — эффект "потухания" */
}

/* Цвета фона для каждой кнопки */
.link-phone {                 /* Кнопка телефона */
  color: #fff;                 /* Белый текст */
  background-color: var(--purple-dark); /* Фон — тёмно-фиолетовый */
}

.link-max {                   /* Кнопка Maxim */
  color: #fff;
  background-color: #471AFF;   /* Фирменный синий-фиолетовый Maxim */
}

.link-whatsapp {              /* Кнопка WhatsApp */
  color: #fff;
  background-color: #25D366;   /* Фирменный зелёный WhatsApp */
}

.link-telegram {              /* Кнопка Telegram */
  color: #fff;
  background-color: #0088CC;   /* Фирменный голубой Telegram */
}

.link-vk {                    /* Кнопка ВКонтакте */
  color: #fff;
  background-color: #0077FF;   /* Фирменный синий ВКонтакте */
}

.link-email {                 /* Кнопка Email */
  color: #fff;
  background-color: #0077FF;   /* Синий (как у ВК — можно поменять) */
}

/* ============================================
   ПОДВАЛ — 50px, внизу
   ============================================ */
.footer {                     /* Нижняя панель страницы */
  flex-shrink: 0;              /* Не сжимается — всегда 50px высоты */
  height: 50px;                /* Высота подвала */
  background-color: var(--purple-dark); /* Фон — тёмно-фиолетовый */
  color: var(--purple-pale);   /* Цвет текста в подвале — бледно-фиолетовый */
  display: flex;               /* Flexbox */
  justify-content: center;     /* Содержимое по центру горизонтали */
  align-items: center;         /* Содержимое по центру вертикали */
  font-size: 13px;             /* Размер шрифта — меньше основного */
}

.footer a {                   /* Ссылки в подвале */
  color: var(--purple-pale);   /* Цвет — бледно-фиолетовый */
  text-decoration: none;        /* Без подчёркивания */
}

.footer a:hover {             /* При наведении на ссылку в подвале */
  color: var(--orange-light); /* Цвет — светло-оранжевый */
}

/* ============================================
   АДАПТИВ — Для экранов от 769px до 1280px
   ============================================ */
@media (min-width: 769px) and (max-width: 1280px) {
    /* Применяется на экранах от 769 до 1280 пикселей — планшеты и небольшие мониторы */

    .wrapper {
        width: 100%;            /* Занимает всю ширину экрана */
        padding: 0 20px;        /* Отступы по 20px слева и справа */
    }

    .content {
        width: 100%;            /* Контент на всю ширину обёртки */
        padding: 0 20px;        /* Отступы внутри контента */
    }

    /* Скрываем кнопку меню на больших экранах */
    .nav-toggle-label {
        display: none;          /* Кнопка "МЕНЮ" не нужна — показываем полное меню */
    }
}

/* ============================================
   АДАПТИВ — экраны уже 768px (мобильные)
   ============================================ */
@media (max-width: 768px) {
  /* Применяется на экранах 768px и уже — смартфоны */

  /* Прячем обычное меню, показываем кнопку "МЕНЮ" */
  .nav-toggle-label {
    display: block;             /* Показываем кнопку "МЕНЮ" */
  }

  /* Меню сворачивается в колонку, скрыто по умолчанию */
  .nav-list {
    flex-direction: column;    /* Пункты выстраиваются сверху вниз, а не в строку */
    height: auto;               /* Высота не фиксирована — зависит от количества пунктов */
    display: none;              /* Скрыто по умолчанию — пока чекбокс не нажат */
    background-color: var(--purple-dark); /* Фон списка — тёмно-фиолетовый */
  }

  /* Когда чекбокс включён — показываем меню */
  .nav-toggle:checked ~ .nav-list {
    /* ~ — соседний селектор: если .nav-toggle отмечен,
       берём соседний .nav-list и показываем его */
    display: flex;              /* Показываем меню как flex-колонку */
  }

  /* Каждый пункт меню на мобильном — во всю ширину */
  .nav-list a {
    height: 44px;               /* Чуть ниже, чем на десктопе — удобнее тыкать пальцем */
    justify-content: center;    /* Текст пункта по центру */
  }

  /* Тело страницы — почти вся ширина на мобильном */
  .content {
    width: 100%;                /* Контент на всю ширину — отступы минимальны */
  }
}

/* ============================================
   СПИСКИ
   ============================================ */

/* 1. САМ СПИСОК — контейнер с пунктами */
.content ul {                   /* Маркированный список внутри контента */
  margin: 16px 0;              /* Отступ списка сверху и снизу от соседних элементов */
  padding-left: 24px;          /* Сдвигает весь список вправо от левого края блока */
  list-style: none;            /* Убираем стандартные маркеры браузера (точки) */
}

/* 2. ПУНКТ СПИСКА — отдельная строка с текстом */
.content ul li {                /* Один пункт списка */
  position: relative;          /* Включаем координаты — маркер будет привязан к этому пункту */
  margin-bottom: 8px;          /* Расстояние между пунктами списка */
  padding-left: 20px;          /* Отступ текста от левого края — чтобы не наезжал на маркер */
  color: var(--color-text);    /* Базовый цвет текста пункта */
}

/* 3. МАРКЕР — кружок/символ слева от текста */
.content ul li::before {       /* Псевдоэлемент — рисует маркер перед каждым пунктом */
  content: "•";                /* Символ маркера — жирная точка */
  position: absolute;          /* Привязываем маркер к пункту — не влияет на поток текста */
  left: 0;                     /* Маркер прижат к левому краю пункта */
  color: var(--purple);        /* Цвет маркера — фиолетовый */
  font-size: 18px;             /* Размер маркера — чуть больше текста */
  line-height: 1;              /* Чтобы маркер не увеличивал высоту строки */
  transition: color 0.2s ease, transform 0.2s ease; /* Плавная смена цвета и масштаба */
}

.content ul li:hover::before { /* При наведении на пункт списка */
    color: var(--green);       /* Маркер становится зелёным */
    transform: scale(1.2);     /* Увеличивается на 20% */
}

/* ============================================
   ОТДЕЛЬНЫЕ КАРТИНКИ В КОНТЕНТЕ
   ============================================ */

/* Базовый класс — рамка, тень, скругление */
.content img.standalone {     /* Картинка с классом .standalone внутри контента */
  max-width: 100%;             /* Не вылазит за пределы родительского блока */
  height: auto;                /* Высота — авто, сохраняет пропорции */
  border: 2px solid var(--purple); /* Рамка 2px, цвет — основной фиолетовый */
  /*
  border-radius: 6px;          — скругление углов (отключено)
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); — тень (отключено)
  */
  display: block;              /* Блочный элемент — убирает отступ снизу (gap под картинкой) */
}

/* Обтекание слева — текст справа */
.content img.standalone.left { /* Картинка прижата влево, текст обтекает справа */
  float: left;                 /* Обтекание слева */
  margin: 0 16px 8px 0;        /* Отступы: 0 сверху, 16px справа, 8px снизу, 0 слева */
  max-width: 40%;              /* Не больше 40% ширины блока */
}

/* Обтекание справа — текст слева */
.content img.standalone.right { /* Картинка прижата вправо, текст обтекает слева */
  float: right;                 /* Обтекание справа */
  margin: 0 0 8px 16px;        /* Отступы: 0 сверху, 0 справа, 8px снизу, 16px слева */
  max-width: 40%;              /* Не больше 40% ширины блока */
}

/* Картинка по центру */
.content img.standalone.center { /* Картинка отцентрирована */
  margin: 16px auto;           /* Отступы: 16px сверху/снизу, auto слева/справа — центрирование */
}

/* Картинка на всю ширину */
.content img.standalone.full {  /* Картинка во всю ширину контента */
  width: 100%;                  /* Ширина 100% */
  margin: 16px 0;               /* Отступы сверху и снизу — 16px */
}

/* Лёгкое увеличение при наведении */
.content img.standalone {       /* Повторное правило — добавляем transition */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавная анимация */
}

.content img.standalone:hover { /* При наведении на картинку */
  border: 2px solid var(--purple-middle); /* Рамка становится средне-фиолетовой */
  /*transform: scale(1.02);     — увеличение на 2% (отключено) */
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); — тень (отключено) */
}

/* Очистка обтекания — вставлять после абзаца с картинкой */
.clearfix::after {             /* Псевдоэлемент для очистки обтекания (float) */
  content: "";                 /* Пустой контент — нужен для срабатывания */
  display: block;              /* Блочный элемент — обеспечивает очистку */
  clear: both;                 /* Запрещает обтекание слева и справа */
}