/* ==========================================================================
   1. ПЕРЕМЕННЫЕ ЦВЕТОВ (СТРОГИЙ ЧЕРНО-БЕЛЫЙ ДИЗАЙН)
   ========================================================================== */

/* Цвета для светлой темы: чисто белый фон и абсолютно черный текст/линии */
:root {
    --bg-color: #ffffff;                       /* Чистый белый фон */
    --text-color: #000000;                     /* Глубокий черный текст */
    --line-color: #000000;                     /* Абсолютно черные линии */
    --hover-bg: #000000;                       /* Черный фон для активных элементов */
    --hover-text: #ffffff;                     /* Белый текст для активных элементов */
}

/* Цвета для темной темы: полная инверсия без серых оттенков и наворотов */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #000000;                   /* Абсолютно черный фон */
        --text-color: #ffffff;                 /* Чистый белый текст */
        --line-color: #ffffff;                 /* Белоснежные линии */
        --hover-bg: #ffffff;                   /* Белый фон для активных элементов */
        --hover-text: #000000;                 /* Черный текст для активных элементов */
    }
}


/* ==========================================================================
   2. БАЗОВЫЕ СБРОСЫ И СТРУКТУРА СТРАНИЦЫ
   ========================================================================== */

* {
    margin: 0;                                 /* Сбрасывает стандартные внешние отступы у всех тегов */
    padding: 0;                                /* Сбрасывает стандартные внутренние отступы у всех тегов */
    box-sizing: border-box;                    /* Заставляет браузер включать рамки и отступы в общую ширину элемента */
}

body {
    background-color: var(--bg-color);         /* Подставляет цвет фонда в зависимости от темы устройства */
    color: var(--text-color);                  /* Подставляет цвет текста в зависимости от темы устройства */
    min-height: 100vh;                         /* Минимальная высота страницы — 100% видимого экрана */
    display: flex;                             /* Включает технологию Flexbox для управления главными блоками */
    flex-direction: column;                    /* Выстраивает хедер, мейн и футер вертикально друг за другом */
}


/* ==========================================================================
   3. ГЛАВНЫЕ КАРКАСНЫЕ БЛОКИ
   ========================================================================== */

.header {
    width: 100%;                               /* Позволяет блоку сжиматься на смартфонах */
    max-width: 1200px;                         /* Жестко ограничивает предел ширины хедера на больших мониторах */
    margin: 0 auto;                            /* Автоматически центрирует сжатый хедер ровно посередине экрана */
    height: 80px;                              /* Фиксирует высоту шапки для наглядности структуры */
    padding: 0 20px;                           /* Делает зазоры по бокам, чтобы контент не лип к углам при сжатии */
    border-bottom: 1px solid var(--line-color);/* Линия разграничения хедера толщиной в 1 пиксель (меняет цвет под тему) */
    display: flex;                             /* Включает Flexbox для управления элементами внутри хедера */
    justify-content: flex-end;                 /* Прижимает иконку бутербродного меню строго к правому краю хедера */
    align-items: center;                       /* Выравнивает иконку меню строго по центру хедера по вертикали */
    
    /* Свойства фиксации хедера при прокрутке: */
    position: fixed;                           /* Вырывает хедер из общего потока и фиксирует его на экране при скролле */
    top: 0;                                    /* Прижимает зафиксированный хедер к самому верху окна браузера */
    left: 0;                                   /* Левая граница растяжения для работы margin: 0 auto */
    right: 0;                                  /* Правая граница растяжения для работы margin: 0 auto */
    background-color: var(--bg-color);         /* Задает фон подложки хедера, чтобы контент мейна не просвечивал под ним */
    z-index: 100;                              /* Поднимает хедер на верхний слой, чтобы текст страницы не перекрывал его при прокрутке */
}

.main-content {
    width: 100%;                               /* Позволяет основному контенту быть адаптивным на мобильных */
    max-width: 1200px;                         /* Ограничивает ширину контента в тон заданному размеру хедера и футера */
    margin: 80px auto 0 auto;                  /* Отступ сверху 80px (высота хедера), чтобы контент не прятался под зафиксированную шапку */
    flex: 1;                                   /* Заставляет этот блок забрать все свободное место по высоте, прижимая футер вниз */
    padding: 40px 20px;                        /* Задает внутренние отступы (40px сверху/снизу, 20px по бокам для мобильных) */
    display: flex;                             /* Включает Flexbox для управления будущими внутренними блоками */
    flex-direction: column;                    /* ВЫСТРАИВАЕТ БЛОКИ В СТОЛБИК ДЛЯ ПК И МОБИЛОК */
}

.footer {
    width: 100%;                               /* Позволяет подвалу быть отзывчивым и сжиматься на маленьких дисплеях */
    max-width: 1200px;                         /* Линия и контент футера не расползутся шире этой отметки */
    margin: 0 auto;                            /* Выравнивает блок футера ровно по центру горизонтальной оси экрана */
    height: 200px;                             /* Фиксирует высоту подвала для визуальной симметрии с хедером */
    padding: 0 20px;                           /* Задает внутренние защитные отступы для элементов внутри подвала */
    border-top: 1px solid var(--line-color);   /* Линия разграничения футера толщиной в 1 пиксель (меняет цвет под тему) */
    display: flex;                             /* Включает Flexbox для удобного выравнивания будущих элементов подвала */
    flex-direction: column;                    /* Выстраивает элементы вертикально в столбик */
    align-items: center;                       /* Выравнивает текст идеально по центру вертикальной оси футера */
    justify-content: center;                   /* Выравнивает текст ровно по центру горизонтальной оси экрана */
    font-size: 16px;                           /* Задает размер шрифта для всего содержимого подвала */
}

/* Стили для ссылок футера СВЕТЛОЙ темы (ПК и мобильник) */
@media (prefers-color-scheme: light) {
    .footer a, .footer a:visited {
        color: #0000ee;          /* Стандартный синий цвет для светлой темы */
    }
}

/* Стили для ссылок футера ТЁМНОЙ темы (ПК и мобильник) */
@media (prefers-color-scheme: dark) {
    .footer a, .footer a:visited {
        color: #ffcc00;          /* Твой желтый цвет для темной темы */
    }
}

/* Стили для ссылок контента майн СВЕТЛОЙ темы (ПК и мобильник) */
@media (prefers-color-scheme: light) {
    main a, main a:visited {
        color: #0000ee;          /* Стандартный синий цвет для светлой темы */
    }
}

/* Стили для ссылок контента майн ТЁМНОЙ темы (ПК и мобильник) */
@media (prefers-color-scheme: dark) {
    main a, main a:visited {
        color: #ffcc00;          /* Твой желтый цвет для темной темы */
    }
}


/* Контент с картинкой На ПК картинка слева, настраивается через HTML (row или row-reverse) */
.media-block {
    flex-direction: row;
}

/* Контент с картинкой На мобильных телефонах принудительно переключаем в столбик, чтобы текст не сжимался коряво */
@media (max-width: 768px) {
    .media-block {
        flex-direction: column !important;
    }
        .media-block > div:first-child {
        margin: 0 auto !important;             /* Выравнивает блок с картинкой ровно по центру экрана на мобильнике */
    }
}




/* ==========================================================================
   4. БУТЕРБРОДНОЕ МЕНЮ И ЕГО СТИЛИ
   ========================================================================== */

/* Скрываем стандартный квадратный чекбокс */
.menu-checkbox {
    display: none;
}

/* Кнопка-обертка для иконки меню */
.menu-btn {
    display: flex;                             /* Включает Flexbox для сборки линий меню внутри кнопки */
    flex-direction: column;                    /* Выстраивает три полоски вертикально друг под другом */
    justify-content: space-between;            /* Равномерно распределяет свободное пространство между полосками */
    width: 30px;                               /* Задает фиксированную ширину иконки бутерброда */
    height: 24px;                              /* Идеальная высота для гармоничного зазора между толстыми линиями */
    cursor: pointer;                           /* Меняет курсор мыши на «палец» при наведении на иконку */
    z-index: 102;                              /* Ставит иконку выше выпадающей панели, чтобы кнопка всегда была доступна */
}

/* Стили для каждой из трех линий бутерброда */
.burger-line {
    display: block;                            /* Гарантирует правильное отображение элемента во всех мобильных браузерах */
    width: 100%;                               /* Растягивает линию на всю ширину кнопки */
    height: 0;                                 /* Сбрасываем высоту, чтобы использовать чистый border */
    border-top: 4px solid var(--line-color);   /* Железная толщина линий в 4 пикселя через верхнюю границу */
}

/* Выезжающая панель с меню */
.nav-menu {
    position: fixed;                           /* Жестко фиксирует панель меню на экране */
    top: 80px;                                 /* Появляется строго под линией хедера (высота хедера 80px) */
    right: -100%;                              /* По умолчанию полностью прячется за правый край экрана */
    width: 320px;                              /* Задает фиксированную ширину для выпадающего меню */
    height: calc(100vh - 80px);                /* Занимает всю высоту экрана за вычетом высоты хедера */
    background-color: var(--bg-color);         /* Подстраивает цвет фонда панели под текущую тему */
    border-left: 1px solid var(--line-color);  /* Минималистичная вертикальная линия разделения слева в 1 пиксель */
    display: flex;                             /* Включает Flexbox для построения списка ссылок */
    flex-direction: column;                    /* Строит пункты меню вертикально в один столбик */
    padding: 40px;                             /* Задает внутренние отступы, чтобы ссылки не липли к границам панели */
    gap: 20px;                                 /* Создает одинаковое расстояние в 20 пикселей между ссылками */
    transition: right 0.4s ease;               /* Создает плавный эффект выезда меню справа */
    z-index: 101;                              /* Панель находится под кнопкой-бургер, но над основным контентом */
}

/* Заготовки для ссылок внутри меню */
.menu-item {
    color: var(--text-color);                  /* Цвет текста строго соответствует текущей теме */
    text-decoration: none;                     /* Убирает стандартное подчеркивание у ссылок */
    font-size: 16px;                           /* Задает аккуратный размер шрифта для пунктов навигации */
    letter-spacing: 1px;                       /* Слегка увеличивает межбуквенное расстояние для премиального вида */
    padding: 10px;                             /* Увеличивает зону клика для удобства на смартфонах */
    transition: background-color 0.2s ease, color 0.2s ease; /* Плавный переход цвета при наведении */
}

/* Бескомпромиссный черно-белый эффект при наведении курсора (инверсия) */
.menu-item:hover {
    background-color: var(--hover-bg);         /* Меняет фон на противоположный */
    color: var(--hover-text);                  /* Меняет цвет текста на противоположный */
}


/* ==========================================================================
   5. ЛОГИКА АКТИВАЦИИ ВЫЕЗДА ПАНЕЛИ
   ========================================================================== */

/* Показываем панель меню: если чекбокс нажат, находим в коде класс .nav-menu и выводим его */
.menu-checkbox:checked ~ .nav-menu {
    right: 0;                                  /* Возвращает панель меню на экран, сдвигая ее к правому краю хедера */
}

/* Класс для стилизации блоков кода в подвале сайта */
.footer-pre {
    /* Разрешает автоматический перенос длинных строк на новую строку */
    /* !important гарантирует, что перенос сработает вопреки другим правилам */
    white-space: pre-wrap !important;
    
    /* Разрывает слишком длинные слова и строки кода, если они не помещаются на экране */
    word-break: break-all;
    
    /* Ограничивает ширину блока, чтобы он не растягивал мобильный экран */
    max-width: 100%;
    
    /* Выравнивает весь текст и строки внутри блока строго по центру */
    text-align: center;
    
    /* Устанавливает базовый размер шрифта (оптимально для чтения) */
    font-size: 16px;
}



/* Класс для стилизации блоков кода в основной части страницы */
.content-pre {
    /* Заставляет длинный текст автоматически переноситься на мобильных устройствах */
    /* !important гарантирует, что перенос сработает вопреки другим правилам */
    white-space: pre-wrap !important;
    
    /* Разрывает слишком длинные слова и строки кода, если они не помещаются на экране */
    word-break: break-all;
    
    /* Ограничивает ширину блока, чтобы он не растягивал мобильный экран */
    max-width: 100%;
    
    /* Выравнивает контент внутри тега по центру */
    text-align: center;
    
    /* Задает размер шрифта (можно изменить на 14px или 18px под ваш дизайн) */
    font-size: 16px;
}


/* Класс для стилизации блоков hr */
.custom-line {
  border: none;              /* Сбрасывает стандартную рамку браузера */
  height: 2px;               /* Задает толщину линии */
  background-color: var(--line-color); /* Автоматически берет черный или белый цвет из ваших настроек темы */
  width: 80%;                /* Устанавливает ширину линии в % */
  margin: 20px auto;         /* Делает отступы сверху/снизу и центрирует линию */
}