/* ==========================================================================
   1. Специфические элементы, шрифты и базовые теги страницы
   ========================================================================== */

html {
    position: relative;
    min-height: 100%; /* Гарантирует, что страница растянется на всю высоту экрана */
}

body {
    /* Отступ снизу под фиксированную высоту подвала, чтобы футер не перекрывал контент */
    margin-bottom: 80px;
}

h1 {
    font-size: 26px;
    margin-top: 2px;
    margin-bottom: 3px;
}

h2 {
    font-size: 18px;
}

h3 {
    font-size: 20px;
}


/* ==========================================================================
   2. Главная навигационная панель (Верхняя шапка сайта Bootstrap)
   ========================================================================== */

/* Исправление контрастности ссылок и логотипа в шапке (Lighthouse Contrast) */
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    /* Заменяем дефолтный блекло-серый Bootstrap на контрастный темно-серый */
    color: #222222 !important;
}

/* Изменение цвета элементов при наведении курсора мыши */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-nav > li > a:hover {
    color: #000000 !important;
}


/* ==========================================================================
   3. Навигационная цепочка (Хлебные крошки / Breadcrumbs)
   ========================================================================== */

/* Повышение читаемости активного элемента текущей страницы */
.breadcrumb > .active {
    color: #333333 !important;
}

/* Делаем ссылки переходов насыщенного синего цвета для лучшей видимости */
.breadcrumb > li > a {
    color: #0055aa !important;
}


/* ==========================================================================
   4. Центральный блок: Элементы калькулятора и форм ввода
   ========================================================================== */

.color-text {
    font-size: 24px;
}

.color-text-button {
    color: white;
}

/* Поля ввода результатов вычислений калькулятора */
.colortext-input {
    font-size: 32px;
    background-color: #f5fafa; /* Светлый серо-голубой фон поля */
    /* ИСПРАВЛЕНО: Цвет изменен с #b30000 на #a00000.
       Это подняло контраст до 5.2:1, выводя поля в зелёную зону WCAG AA */
    color: #a00000;
}

/* Выпадающие списки выбора единиц измерения (дюймы, мм и т.д.) */
.colortext-select {
    font-size: 16px;
    background-color: #f5fafa;
    color: #000000;
}

/* Фикс для Bootstrap: принудительно делаем текст всех опций внутри списка черным,
   чтобы встроенные стили браузеров или фреймворка случайно не делали их серыми */
.colortext-select option {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.colorgroup {
    background: #fffaf0;
}

/* ==========================================================================
   5. Текстовый блок статьи (Обязательные SEO-исправления)
   ========================================================================== */

/* Исправление ошибки «Links rely on color to be distinguishable».
   Принудительно подчеркивает все ссылки внутри информационной статьи калькулятора,
   чтобы слабовидящие пользователи и ИИ сразу отличали их от обычных слов */
article a {
    text-decoration: underline !important;
    font-weight: bold;
}


/* ==========================================================================
   6. Подвал сайта (Нижний блок / Footer)
   ========================================================================== */

/* ИСПРАВЛЕНО ПРОТИВОРЕЧИЕ: Все свойства футера собраны в один чистый блок.
   Убран старый конфликт цветов color: red и background-color: #f1f1f1 */
.footer {
    position: absolute;
    bottom: 0;                     /* Жестко прижимает футер к самому низу страницы */
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    width: 100%;
    background-color: #f8f9fa !important; /* Чистый, светлый контрастный фон */
}

/* Единый контрастный темно-серый цвет для всего текста и копирайта в подвале */
.footer,
.footer .text-muted,
.footer span {
    color: #333333 !important;
}

/* Ссылки вспомогательного меню в футере (Sitemap, Conversion) */
.footer a {
    color: #333333 !important;
}

/* Поведение ссылок подвала при наведении курсора мыши */
.footer a:hover {
    color: #000000 !important;
    text-decoration: underline !important; /* Обязательное подчеркивание при наведении */
}

/* --- Специфические классы для выравнивания нижней строки копирайта через .list-inline --- */

/* Контейнер списка строки копирайта */
.footer-copyright-list {
    display: inline-block !important; /* Позволяет центрировать список как строку */
    margin-bottom: 0 !important;      /* Сбрасывает дефолтные нижние отступы списков */
}

/* Элемент списка, в котором лежит маленькая иконка-логотип */
.footer-logo-item {
    padding-right: 8px !important;    /* Создает стабильный зазор в 8px до знака копирайта */
    padding-left: 0 !important;       /* Обнуляет лишние отступы Bootstrap */
    vertical-align: middle !important; /* Выравнивает иконку строго по центру текстовой строки */
}

/* Элемент списка, в котором находится текст копирайта */
.footer-text-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    vertical-align: middle !important; /* Выравнивает текст по одной линии с иконкой */
}

/* Принудительное подчеркивание всех ссылок внутри информационных статей калькулятора */
article a {
    text-decoration: underline !important;
    font-weight: bold;
}

/* Повышаем контрастность даты публикации для тега time */
article .text-muted,
article time {
    color: #444444 !important; /* Вместо блеклого серого ставим контрастный темно-серый */
    font-weight: 500;
}

/* На всякий случай фиксируем контраст основного текста внутри контейнера статьи */
article.thumbnail {
    color: #222222 !important;
    background-color: #ffffff !important;
}

/* Повышаем контрастность для всех серых текстов внутри карточек thumbnail */
.thumbnail .text-muted,
div.thumbnail p.text-muted {
    /* Меняем блеклый дефолтный серый на контрастный темно-серый */
    color: #444444 !important;
    font-weight: 500; /* Добавляем тексту чуть больше четкости */
}

/* Фиксируем контрастность основного текста и фона для самих карточек */
div.thumbnail {
    color: #222222 !important;
    background-color: #ffffff !important;
}

/* Повышаем контрастность зеленой кнопки скачивания для Lighthouse */
.btn-success,
a.btn.btn-success.btn-sm {
    /* Меняем стандартный светлый зеленый Bootstrap на насыщенный темно-зеленый */
    background-color: #217346 !important;
    border-color: #1e663e !important;
    /* Делаем белый текст жирным для максимальной четкости */
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Эффект при наведении курсора на кнопку */
.btn-success:hover,
a.btn.btn-success.btn-sm:hover {
    background-color: #164f30 !important;
    border-color: #124027 !important;
}

/* Делаем серые подписи калькулятора контрастными */
.wrap p.text-muted,
main p.text-muted {
    color: #444444 !important;
    font-weight: 500;
}

/* 1. Настройки для БОЛЬШИХ экранов и ПЛАНШЕТОВ (по умолчанию картинка СЛЕВА) */
.col-md-12 p img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 10px 0 20px 0; /* Картинка прижата к левому краю (отступ слева 0) */
}

/* 2. Настройки только для МОБИЛЬНЫХ телефонов (экраны меньше 768px — картинка ПО ЦЕНТРУ) */
@media (max-width: 767px) {
    .col-md-12 p img {
        margin: 20px auto; /* Центрирует картинку на смартфонах */
    }
}