/* =========================================
   БОКОВАЯ ПАНЕЛЬ ДОСТУПНОСТИ
   ========================================= */

.special-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 99990;
}

.special-overlay.is-open {
    opacity: 0.4;
    visibility: visible;
}

.special-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: calc(100vw - 16px);
    height: 100dvh;
    background: #ffffff;
    color: #111827;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 99991;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e5e7eb;
    font-family: Arial, Helvetica, sans-serif;
}

.special-drawer.is-open {
    transform: translateX(0);
}

.special-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 20px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.special-drawer__eyebrow {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
}

.special-drawer__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #111827;
}

.special-drawer__close {
    width: 42px;
    height: 42px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    border-radius: 12px;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    flex: 0 0 auto;
}

.special-drawer__close:hover {
    background: #f3f4f6;
}

.special-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #ffffff;
}

.special-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 16px;
}

.special-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #374151;
    margin-bottom: 12px;
}

.special-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Универсальная опция --- */
.special-option {
    min-height: 44px;
    min-width: 52px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #111827;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    font-family: Arial, Helvetica, sans-serif;
}

.special-option:hover {
    border-color: #111827;
}

.special-option.is-active {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.18);
}

/* Обычные (не-цветовые) активные кнопки — тёмный фон + белый текст */
.special-option:not(.special-option--scheme).is-active {
    background: #111827!important;
    color: #ffffff;
}

/* --- Кнопки цветовых схем (буква "А" на своём фоне) --- */
.special-option--scheme {
    width: 52px;
    padding: 0;
    font-size: 20px;
    font-weight: 800;
}

.special-option--bw {
    background: #ffffff;
    color: #000000;
    border-color: #000000;
}

body.special-mode .special-option--wb {
    background: #000000!important;
    color: #ffffff;
    border-color: #000000;
}

body.special-mode .special-option--yb {
    background: #000000!important;
    color: #ffff00;
    border-color: #000000;
}

body.special-mode .special-option--bb {
    background: #9dd1ff!important;
    color: #063462;
    border-color: #063462;
}

/* Активная цветовая схема — обводкой, не заливкой */
.special-option--scheme.is-active {
    box-shadow: 0 0 0 3px #111827;
    border-color: #111827;
}

.special-drawer__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px 20px 20px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.special-action {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 10px 14px;
    font-family: Arial, Helvetica, sans-serif;
}

.special-action--ghost {
    background: #ffffff;
    color: #111827;
}

.special-action--ghost:hover {
    background: #f3f4f6;
}

.special-action--danger {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

.special-action--danger:hover {
    background: #000000;
}

body.special-panel-open {
    overflow: hidden;
}

/* =========================================
   РЕЖИМ ДЛЯ СЛАБОВИДЯЩИХ
   ========================================= */

body.special-mode {
    font-family: Arial, Helvetica, sans-serif !important;

    --sp-bg: #ffffff;
    --sp-text: #111111;
    --sp-link: #111111;
    --sp-border: #111111;

    --sp-font-size: 18px;
    --sp-line-height: 1.6;
    --sp-letter-spacing: normal;

    --sp-h1: 30px;
    --sp-h2: 26px;
    --sp-h3: 22px;

    /* Логотип — маленький, аккуратный */
    --sp-logo-h1: 18px;
    --sp-logo-p: 14px;
    --sp-logo-img: 44px;
}

/* Размеры шрифта */
body.special-font-1 {
    --sp-font-size: 18px;
    --sp-h1: 30px;
    --sp-h2: 26px;
    --sp-h3: 22px;
    --sp-logo-h1: 18px;
    --sp-logo-p: 14px;
    --sp-logo-img: 44px;
}

body.special-font-2 {
    --sp-font-size: 20px;
    --sp-h1: 34px;
    --sp-h2: 28px;
    --sp-h3: 24px;
    --sp-logo-h1: 20px;
    --sp-logo-p: 15px;
    --sp-logo-img: 48px;
}

body.special-font-3 {
    --sp-font-size: 22px;
    --sp-h1: 38px;
    --sp-h2: 32px;
    --sp-h3: 26px;
    --sp-logo-h1: 22px;
    --sp-logo-p: 16px;
    --sp-logo-img: 52px;
}

/* Цветовые схемы */
body.special-color-bw {
    --sp-bg: #ffffff;
    --sp-text: #111111;
    --sp-link: #111111;
    --sp-border: #111111;
}

body.special-color-wb {
    --sp-bg: #000000;
    --sp-text: #ffffff;
    --sp-link: #ffffff;
    --sp-border: #ffffff;
}

body.special-color-yb {
    --sp-bg: #000000;
    --sp-text: #ffff00;
    --sp-link: #ffff00;
    --sp-border: #ffff00;
}

body.special-color-bb {
    --sp-bg: #9dd1ff;
    --sp-text: #063462;
    --sp-link: #063462;
    --sp-border: #063462;
}

/* Интервалы */
body.special-spacing-0 { --sp-letter-spacing: normal; }
body.special-spacing-1 { --sp-letter-spacing: 0.06em; }
body.special-spacing-2 { --sp-letter-spacing: 0.12em; }

body.special-line-0 { --sp-line-height: 1.6; }
body.special-line-1 { --sp-line-height: 1.9; }
body.special-line-2 { --sp-line-height: 2.2; }

/* Убираем декоративные эффекты */
body.special-mode *:not(.special-drawer):not(.special-drawer *):not(.special-overlay) {
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none !important;
    filter: none;
}

/* Цвета и границы */
body.special-mode,
body.special-mode *:not(.special-drawer):not(.special-drawer *):not(.special-overlay) {
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Фоны */
body.special-mode,
body.special-mode main,
body.special-mode header,
body.special-mode footer,
body.special-mode section,
body.special-mode article,
body.special-mode aside,
body.special-mode nav,
body.special-mode div,
body.special-mode ul,
body.special-mode ol,
body.special-mode li,
body.special-mode table,
body.special-mode thead,
body.special-mode tbody,
body.special-mode tfoot,
body.special-mode tr,
body.special-mode td,
body.special-mode th,
body.special-mode form,
body.special-mode fieldset,
body.special-mode input,
body.special-mode textarea,
body.special-mode select,
body.special-mode button {
    background-color: var(--sp-bg) !important;
}

/* Базовая типографика */
body.special-mode,
body.special-mode p,
body.special-mode li,
body.special-mode td,
body.special-mode th,
body.special-mode label,
body.special-mode input,
body.special-mode textarea,
body.special-mode select,
body.special-mode button,
body.special-mode a {
    font-size: var(--sp-font-size) !important;
    line-height: var(--sp-line-height) !important;
    letter-spacing: var(--sp-letter-spacing) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}
body.special-mode .special-action--danger {
    background: #111827 !important;
    color: #ffffff;
    border-color: #111827;
}
/* Заголовки */
body.special-mode h1 {
    font-size: var(--sp-h1) !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
}

body.special-mode h2 {
    font-size: var(--sp-h2) !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

body.special-mode h3 {
    font-size: var(--sp-h3) !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
}

/* Ссылки */
body.special-mode a:not(.special-drawer a) {
    color: var(--sp-link) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* =========================================
   ЛОГОТИП В ШАПКЕ И ФУТЕРЕ
   ========================================= */

/* Контейнер логотипа */
body.special-mode .header__logo,
body.special-mode .footer__logo,
body.special-mode a.header__logo,
body.special-mode a.footer__logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    text-decoration: none !important;
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Иконка герба */
body.special-mode .logo__icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.special-mode .logo__icon img {
    display: block !important;
    height: var(--sp-logo-img) !important;
    width: auto !important;
    max-height: var(--sp-logo-img) !important;
    max-width: none !important;
}

/* Текстовый блок логотипа */
body.special-mode .logo__text {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Название сайта */
body.special-mode .logo__text h1,
body.special-mode .logo__text h2 {
    font-size: var(--sp-logo-h1) !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
    text-transform: none !important;

    /* ВАЖНО: перенос ТОЛЬКО по словам, никаких переносов по буквам */
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;

    text-decoration: none !important;
}

body.special-mode .logo__text p {
    font-size: var(--sp-logo-p) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-decoration: none !important;

    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* =========================================
   АДАПТАЦИЯ ШАПКИ ПОД КРУПНЫЙ ШРИФТ
   Когда включён режим — шапка становится
   переносящейся, чтобы логотипу хватало места
   ========================================= */

body.special-mode .header,
body.special-mode header,
body.special-mode .site-header,
body.special-mode .header__inner,
body.special-mode .header__top,
body.special-mode .header__bottom,
body.special-mode .header__container,
body.special-mode .header__row,
body.special-mode .header-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Меню — переносится ниже логотипа при нехватке места */
body.special-mode .header nav,
body.special-mode .header .menu,
body.special-mode .header .main-menu,
body.special-mode header nav,
body.special-mode header .menu {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Пункты меню — тоже переносятся */
body.special-mode nav ul,
body.special-mode .menu ul,
body.special-mode .main-menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 16px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

body.special-mode nav a,
body.special-mode .menu a,
body.special-mode .main-menu a {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* На больших шрифтах логотип занимает ВСЮ ширину */
body.special-font-2 .header__logo,
body.special-font-3 .header__logo,
body.special-font-2 .footer__logo,
body.special-font-3 .footer__logo {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 0 !important;
}

/* На большом шрифте — не ограничиваем текст, пусть заполняет строку */
body.special-mode .logo__text {
    max-width: none !important;
}

/* Изображения */
body.special-images-gray img:not(.special-drawer img),
body.special-images-gray picture img,
body.special-images-gray video {
    filter: grayscale(100%) !important;
}

body.special-images-off img:not(.special-drawer img):not(.logo__icon img),
body.special-images-off picture,
body.special-images-off video,
body.special-images-off svg,
body.special-images-off canvas,
body.special-images-off iframe {
    display: none !important;
}

/* Логотип не пропадает даже при "Изображения: Выкл" */
body.special-images-off .logo__icon img {
    display: block !important;
    filter: grayscale(100%) !important;
}

/* Формы и таблицы */
body.special-mode table {
    border-collapse: collapse !important;
    width: 100% !important;
}

body.special-mode th,
body.special-mode td {
    border: 1px solid var(--sp-border) !important;
    padding: 8px 10px !important;
}

body.special-mode input,
body.special-mode textarea,
body.special-mode select,
body.special-mode button:not(.special-option):not(.special-action):not(.special-drawer__close) {
    border: 2px solid var(--sp-border) !important;
}

/* Слайдеры */
body.special-mode .swiper,
body.special-mode .slider,
body.special-mode .carousel,
body.special-mode .owl-carousel {
    height: auto !important;
    overflow: visible !important;
}

body.special-mode .swiper *,
body.special-mode .slider *,
body.special-mode .carousel *,
body.special-mode .owl-carousel * {
    transform: none !important;
    animation: none !important;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .special-drawer {
        width: 100%;
        max-width: 100%;
    }

    .special-drawer__footer {
        grid-template-columns: 1fr;
    }

    body.special-mode .header__logo,
    body.special-mode .footer__logo {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }

    body.special-font-1 { --sp-logo-h1: 16px; --sp-logo-p: 13px; --sp-logo-img: 40px; }
    body.special-font-2 { --sp-logo-h1: 18px; --sp-logo-p: 14px; --sp-logo-img: 44px; }
    body.special-font-3 { --sp-logo-h1: 20px; --sp-logo-p: 15px; --sp-logo-img: 48px; }
}