/* Simple Visually Impaired KB */

/* ==========================================================================
   Кнопка [svi_button]
   ========================================================================== */
.svi-btn-inline {
    --svi-bw: 50px;
    --svi-bh: 50px;
    --svi-bi: 28px;
    --svi-bt: 16px;
    --svi-bbg: #0073aa;
    --svi-bfg: #fff;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    box-sizing: border-box !important;
    min-width: var(--svi-bw) !important;
    height: var(--svi-bh) !important;
    padding: 0 10px !important;
    margin: 0;
    background: var(--svi-bbg) !important;
    color: var(--svi-bfg) !important;
    border: 2px solid var(--svi-bfg) !important;
    border-radius: 5px !important;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    transition: filter 0.2s;
}
.svi-btn-inline:hover { filter: brightness(1.12); }
.svi-btn-inline:focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
.svi-btn-inline .svi-eye { width: var(--svi-bi); height: var(--svi-bi); flex: none; }
.svi-btn-inline.svi-has-text { padding: 0 16px !important; }
.svi-btn-inline .svi-btn-text { font-size: var(--svi-bt, 16px); font-weight: 600; line-height: 1.2; white-space: nowrap; }

/* На телефоне надпись скрывается (остаётся значок), если не включено «Показывать надпись и на телефоне» */
@media (max-width: 640px) {
    .svi-btn-inline.svi-text-desktop .svi-btn-text { display: none; }
    .svi-btn-inline.svi-text-desktop.svi-has-text { padding: 0 10px !important; }
}

/* Когда режим включён, кнопка не нужна: панель уже открыта */
html.svi-on .svi-btn-inline { display: none !important; }

/* ==========================================================================
   Цветовые схемы (переменные)
   ========================================================================== */
html.svi-theme-white { --svi-bg: #fff;    --svi-fg: #000;    --svi-link: #00008b; }
html.svi-theme-black { --svi-bg: #000;    --svi-fg: #fff;    --svi-link: #ffff00; }
html.svi-theme-blue  { --svi-bg: #9dd1ff; --svi-fg: #063462; --svi-link: #000; }
html.svi-theme-beige { --svi-bg: #f7f3d6; --svi-fg: #4d4b43; --svi-link: #8b4513; }

/* ==========================================================================
   Панель настроек (в начале страницы)
   ========================================================================== */
#svi-panel {
    display: none;
    position: relative;
    z-index: 100000;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background: var(--svi-bg, #f1f1f1);
    color: var(--svi-fg, #222);
    border-bottom: 3px solid var(--svi-fg, #333);
    font: 16px/1.3 Arial, Helvetica, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none;
    outline: none;
}
html.svi-on #svi-panel { display: block; }

#svi-panel .svi-panel-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
}
#svi-panel .svi-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
#svi-panel .svi-label {
    font-size: 17px !important;
    font-weight: 700;
    color: var(--svi-fg, #222) !important;
}

#svi-panel .svi-btn,
#svi-panel #svi-close-btn {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 6px 14px;
    font: 700 16px/1.1 Arial, Helvetica, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--svi-fg, #333) !important;
    border-radius: 6px;
    background: var(--svi-bg, #fff) !important;
    color: var(--svi-fg, #333) !important;
    box-shadow: none;
    cursor: pointer;
}
#svi-panel .svi-btn:hover { outline: 2px solid var(--svi-fg, #333); outline-offset: 1px; }
#svi-panel .svi-btn:focus-visible,
#svi-panel #svi-close-btn:focus-visible { outline: 3px solid var(--svi-link, #00f); outline-offset: 2px; }
#svi-panel .svi-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Нажатая (выбранная) кнопка: инверсия цветов и галочка */
#svi-panel .svi-btn[aria-pressed="true"] {
    background: var(--svi-fg, #222) !important;
    color: var(--svi-bg, #fff) !important;
}
#svi-panel .svi-btn[aria-pressed="true"]::before { content: "\2713\00a0"; }

/* Образцы цветовых схем */
#svi-panel .svi-sw-white { background: #fff !important; color: #000 !important; border-color: #000 !important; }
#svi-panel .svi-sw-black { background: #000 !important; color: #fff !important; border-color: #fff !important; }
#svi-panel .svi-sw-blue  { background: #9dd1ff !important; color: #063462 !important; border-color: #063462 !important; }
#svi-panel .svi-sw-beige { background: #f7f3d6 !important; color: #4d4b43 !important; border-color: #4d4b43 !important; }
#svi-panel .svi-theme-btn[aria-pressed="true"] { outline: 4px solid var(--svi-link, #00f); outline-offset: 2px; }

#svi-panel #svi-close-btn {
    background: #b32d2e !important;
    color: #fff !important;
    border-color: #b32d2e !important;
    margin-left: auto;
}

/* ==========================================================================
   Режим для слабовидящих. Исключение панели: :where(:not(#svi-panel, #svi-panel *))
   не добавляет специфичности, поэтому правила панели выше всегда сильнее.
   ========================================================================== */
html.svi-on body {
    background-color: var(--svi-bg) !important;
    background-image: none !important;
    color: var(--svi-fg) !important;
    overflow-wrap: anywhere;
}

/* Цвет: всё сбрасывается к выбранной схеме */
html.svi-on body *:where(:not(#svi-panel, #svi-panel *, svg, svg *)) {
    background-color: var(--svi-bg) !important;
    background-image: none !important;
    color: var(--svi-fg) !important;
    border-color: var(--svi-fg) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/* Пустые декоративные слои (затемнение поверх фото, подложки) и псевдоэлементы остаются прозрачными,
   иначе сплошная заливка схемы закроет картинки */
html.svi-on body *:empty:where(:not(#svi-panel, #svi-panel *, svg, svg *, img, hr, br, input, textarea, iframe, video, canvas)) {
    background-color: transparent !important;
}
html.svi-on body *:where(:not(#svi-panel *))::before,
html.svi-on body *:where(:not(#svi-panel *))::after {
    background: none !important;
    box-shadow: none !important;
}

/* Ссылки */
html.svi-on body a:where(:not(#svi-panel *)),
html.svi-on body a *:where(:not(#svi-panel *, svg, svg *)) {
    color: var(--svi-link) !important;
    text-decoration: underline !important;
}

/* Поля и кнопки сайта: заметная рамка */
html.svi-on body :where(button, input, select, textarea):where(:not(#svi-panel *)) {
    border: 2px solid var(--svi-fg) !important;
}

/* Фокус с клавиатуры */
html.svi-on body :focus-visible:where(:not(#svi-panel *)) {
    outline: 3px solid var(--svi-link) !important;
    outline-offset: 2px !important;
}

/* Читаемый шрифт (значки-шрифты не трогаем) */
html.svi-on body *:where(:not(#svi-panel, #svi-panel *, .dashicons, i, [class*="icon"], [class*="fa-"], .fa, svg, svg *)) {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* ==========================================================================
   Размер шрифта: один абсолютный размер для всех элементов (без перемножения
   вложенных em), заголовки пропорционально крупнее
   ========================================================================== */
html.svi-size-large { --svi-fs: 22px; }
html.svi-size-extra { --svi-fs: 28px; }
html.svi-size-max   { --svi-fs: 36px; }

html:is(.svi-size-large, .svi-size-extra, .svi-size-max).svi-on body *:where(:not(#svi-panel, #svi-panel *, .dashicons, svg, svg *)) {
    font-size: var(--svi-fs) !important;
    line-height: 1.5 !important;
}
html:is(.svi-size-large, .svi-size-extra, .svi-size-max).svi-on body h1:where(:not(#svi-panel *)) { font-size: calc(var(--svi-fs) * 1.7) !important; line-height: 1.25 !important; }
html:is(.svi-size-large, .svi-size-extra, .svi-size-max).svi-on body h2:where(:not(#svi-panel *)) { font-size: calc(var(--svi-fs) * 1.45) !important; line-height: 1.3 !important; }
html:is(.svi-size-large, .svi-size-extra, .svi-size-max).svi-on body h3:where(:not(#svi-panel *)) { font-size: calc(var(--svi-fs) * 1.25) !important; }
html:is(.svi-size-large, .svi-size-extra, .svi-size-max).svi-on body :where(h4, h5, h6):where(:not(#svi-panel *)) { font-size: calc(var(--svi-fs) * 1.1) !important; }

/* Чтобы крупный текст не выталкивал страницу за край экрана */
html:is(.svi-size-large, .svi-size-extra, .svi-size-max).svi-on body :where(img, video, iframe, embed, object, figure, pre):where(:not(#svi-panel *)) {
    max-width: 100% !important;
    box-sizing: border-box;
}
html:is(.svi-size-large, .svi-size-extra, .svi-size-max).svi-on body :where(img):where(:not(#svi-panel *)) { height: auto !important; }
html:is(.svi-size-large, .svi-size-extra, .svi-size-max).svi-on body :where(.is-layout-flex, .wp-block-columns, .wp-block-group):where(:not(#svi-panel *)) {
    flex-wrap: wrap !important;
}
html:is(.svi-size-large, .svi-size-extra, .svi-size-max).svi-on body :where(.wp-block-column):where(:not(#svi-panel *)) {
    flex-basis: 100% !important;
}

/* Закреплённые баннеры (cookie и т. п.) не раздуваем: иначе при крупном шрифте они закрывают пол-экрана */
html.svi-on[class][class] body :where([class*="cookie"], [class*="lwpcng"], [class*="gdpr"], [class*="consent"], [id*="cookie"]) *:where(:not(#svi-panel *)),
html.svi-on[class][class] body :where([class*="cookie"], [class*="lwpcng"], [class*="gdpr"], [class*="consent"], [id*="cookie"]):where(:not(#svi-panel *)) {
    font-size: 18px !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* ==========================================================================
   Интервал между буквами и словами
   ========================================================================== */
html.svi-on.svi-spacing-medium body *:where(:not(#svi-panel, #svi-panel *)) { letter-spacing: 0.06em !important; word-spacing: 0.12em !important; }
html.svi-on.svi-spacing-big body *:where(:not(#svi-panel, #svi-panel *)) { letter-spacing: 0.12em !important; word-spacing: 0.25em !important; }

/* ==========================================================================
   Картинки
   ========================================================================== */
html.svi-on.svi-img-gray body :where(img, video, picture, canvas):where(:not(#svi-panel *)) { filter: grayscale(1) !important; }
html.svi-on.svi-img-hide body :where(img, video, picture, canvas):where(:not(#svi-panel *)) { display: none !important; }

/* ==========================================================================
   Телефон и печать
   ========================================================================== */
@media (max-width: 640px) {
    #svi-panel { padding: 8px 10px; }
    #svi-panel .svi-panel-inner { justify-content: flex-start; gap: 8px 12px; }
    #svi-panel .svi-group { width: 100%; gap: 6px; }
    #svi-panel .svi-label { font-size: 15px !important; flex: 0 0 auto; }
    #svi-panel .svi-btn,
    #svi-panel #svi-close-btn { min-width: 40px; min-height: 40px; padding: 4px 9px; font-size: 15px !important; }
    #svi-panel #svi-close-btn { margin-left: 0; width: 100%; }
}

@media print {
    #svi-panel { display: none !important; }
}