.list-unstyled {list-style-type: none;}

/* :focus-visible {outline: 3px solid red;}*/

/* 1. Глобальне повернення видимого фокусу для всіх інтерактивних елементів */

.a11y-mode #modal-box a:focus-visible,
.a11y-mode button:focus,
.a11y-mode input:focus,
.a11y-mode textarea:focus,
.a11y-mode select:focus,
.a11y-mode [tabindex]:focus {
    outline: 3px solid #333; 
}

/* 2. ВИПРАВЛЕННЯ КРИТИЧНОЇ ПОМИЛКИ: display: none для кастомних інпутів */
/* Робимо їх "візуально прихованими" (visually-hidden), замість display: none, 
   щоб вони могли отримувати фокус з клавіатури (Tab) */
.a11y-mode .yesnobox input,
.a11y-mode .radiobox input,
.a11y-mode .checkbox input,
.a11y-mode .loadfile input[type="file"],
.a11y-mode .loadbox input[type="file"],
.a11y-mode .logofile input[type="file"] {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 3. Малюємо фокус навколо візуального кастомного елемента (label), 
      коли прихований справжній input отримує фокус */
.a11y-mode .yesnobox input:focus + label,
.a11y-mode .radiobox input:focus + label,
.a11y-mode .checkbox input:focus + label,
.a11y-mode .loadfile input:focus + label,
.a11y-mode .loadbox input:focus + label,
.a11y-mode .logofile input:focus + label {
    outline: 3px solid #2c2a25 !important;
    outline-offset: 2px !important;
    
    /* Підсвічуємо фон, щоб точно було видно, що елемент активний */
    background-color: #ffd900 !important; 
    border-radius: 4px !important;
}

/* Виняток: прибираємо box-shadow для інпутів, які мають специфічний дизайн, 
   щоб не ламати їхній зовнішній вигляд */
.a11y-mode input[type="radio"]:focus,
.a11y-mode input[type="checkbox"]:focus {
    box-shadow: none !important;
}

/* БАЗА */

.a11y-mode { filter: grayscale(100%);}
.a11y-mode body {font-size: 24px;}
.a11y-mode img { filter: contrast(150%); }

/* ЛОГОТИП */

.a11y-mode .logo-home:focus-within img {outline: 3px solid red;}
.a11y-mode .logo-top-line {height: 50px; margin-top: 0;}


/* ВИПРАВЛЕННЯ - СЛАЙДЕР НА ГОЛОВНІЙ СТОРІНЦІ ВИЛАЗИТЬ ЗА МЕЖІ ЕКРАНУ */

@media (min-width: 981px) {.container {max-width: 951px;}}
@media (min-width: 1024px) {.container {max-width: 994px;}}
@media (min-width: 1152px) {.container {max-width: 1122px;}}
@media (min-width: 1280px) {.container {max-width: 1250px;}}
@media (min-width: 1360px) {.container {max-width: 1330px;}}
@media (min-width: 1440px) {.a11y-mode .container {max-width: 1410px;}} 
@media (min-width: 1600px) {.a11y-mode .container {max-width: 1570px;}} 
@media (min-width: 1720px) {.a11y-mode .container {max-width: 1690px;}} 


/* ВИПРАВЛЕННЯ ЗАГОЛОВКІВ */

.h1 a,
.h2 a,
.h3 a {color: inherit;}

.a11y-mode .h1 a:focus-visible,
.a11y-mode .h1 a:hover,
.a11y-mode .h2 a:focus-visible,
.a11y-mode .h2 a:hover {text-decoration: underline !important; background-color: #ddd;}

.a11y-mode .h1 {font-size: 42px;}


/* СТАНДАРТНІ ЕЛЕМЕНТИ ІНТЕРФЕСУ */

.a11y-mode .arrow b {font-size: 21px; background-color: #ddd; padding: 2px 5px;}
.a11y-mode .arrow:hover b,
.a11y-mode .arrow:focus-visible b {background: #333; color: #fff;}

/* ПОСИЛАННЯ НА ІНФОРМАЦІЙНІ РЕСУРСИ */
.a11y-mode .newspaper-link:hover,
.a11y-mode .newspaper-link:focus-visible {outline: 3px solid #333;} 

/* СТРІЧКА НОВИН (АНОНСІВ) У САЙДБАРІ */

ul.news-list {margin: 0; padding: 0; list-style-type: none;}
ul.news-list li {margin: 0; padding: 0;}

.a11y-mode ul.news-list {margin: 0 -5px;}
.a11y-mode .top-news h2 {font-size: 1.2em; font-weight: normal;}
.a11y-mode .top-news .date {text-decoration: none; font-size: inherit;}
.a11y-mode .top-news a {display: block; font-size: 18px; padding: 10px 5px; color: #000; text-decoration: none; border-radius: 5px;}
.a11y-mode .top-news a:focus,
.a11y-mode .top-news a:hover {outline: 3px solid #333;}
.a11y-mode .top-news a .date {display: block; color: #000; font-weight: bold; font-size: 90%; font-family: inherit;}


/* СПИСОК НОВИН, СПИСОК ГАЛЕРЕЇ */

.news-box {list-style-type: none;}

.a11y-mode .news-box .item:hover,
.a11y-mode .news-box .item:focus-within,
.a11y-mode .gallery-box .item:hover,
.a11y-mode .gallery-box .item:focus-within { 
  border-radius: 13px;
  box-shadow: none;
  background-color: transparent; 
  outline: 3px solid #333;
}

.news-box-item h3 {
    font-size: 20px;
    line-height: 130%;
    font-weight: 500;
    color: #2c2a25;
    display: block;
    margin-bottom: 8px;
    line-height: 120%;
}

.a11y-mode .news-box-item a {font-size: 18px; padding-bottom: 40px;}
.a11y-mode .news-box-item time {color: #777; font-size: inherit;}
.a11y-mode .news-box-item h3 {font-size: 24px; margin: 12px 0;}
.a11y-mode .news-box-item a {color: #000;}

.a11y-mode .tags {}
.a11y-mode .tags > i {font-size: 14px;}


/* ГАЛЕРЕЯ */

.a11y-mode button.skey:focus-visible {
    outline: 3px solid #333 !important;
    outline-offset: 3px !important;
    background-color: #d8dedf !important; /* Трохи темніший фон при фокусі */
}

.a11y-mode .slick-arrow:focus-visible {outline: 3px solid #333;}


/* ГОЛОВНЕ МЕНЮ САЙТУ */

.a11y-mode .js-menu:focus-visible {outline: 3px solid #333;}

.a11y-mode .menu a,
.a11y-mode .menu .a,
.ally-mode .cabinet .sub li a {font-size: 20px; color: #000;}

.a11y-mode .nav-show .top-menu {background-color: #fff;}
.a11y-mode .top-menu .menu li .sub a {color: #000;}
.a11y-mode .menu .sub a:hover {outline: 3px solid #333; color: inherit !important;}

.cabinet.submenu:hover .sub,
.top-menu .menu li:hover .sub,
.top-menu .menu li:focus-within .sub {
    height: auto;
    opacity: 1;
    top: 25px;
    padding-top: 45px;
    overflow: visible;
}

.a11y-mode .top-menu .menu li .sub small {color: #333; font-size: 13px; font-family: sans-serif; text-transform: uppercase;}
.a11y-mode .top-menu .sub a:focus-visible {outline: 5px solid #333;}


/* НАВІГАЦІЯ В ФУТЕРІ */

.a11y-mode .container-footer .a {text-transform: uppercase;}
.a11y-mode .container-footer a {text-decoration: underline; display: inline-block; padding: 7px;}
.a11y-mode .container-footer a:hover {text-decoration: none;}
.a11y-mode .container-footer a:focus-visible {outline: 3px solid #333;}
.a11y-mode .container-footer li,
.a11y-mode .container-footer li > a,
.a11y-mode .container-footer li > .a {padding: 5px 10px; line-height: 1em;}

.a11y-mode .container-footer .active > a {text-decoration: none;}


/* ОСНОВНИЙ ТЕКСТ СТОРІНОК */

.a11y-mode article.text a {background: #ccc; color: #000; text-decoration: underline;}
.a11y-mode article.text a:hover {text-decoration: none; background-color: #eee;}
.a11y-mode article.text a:focus-visible {outline: 2px dotted #555; background-color: #eee;}
.a11y-mode article.text .date {color: #555;}
.a11y-mode article.text .reestr-text {font-size: 20px;}


/* КРИХТИ */

.a11y-mode .crumbs {font-size: 18px; margin-bottom: 10px;}
.a11y-mode .crumbs a {color: #777;}
.a11y-mode .crumbs a:hover {color: #000;}


/* КНОПКА АВТОРИЗАЦІЇ */
a.cabinet:focus-visible,
.a11y-mode a.cabinet:hover {outline: 3px solid #333;}


/* ДІАЛОГОВЕ ВІКНО */
.a11y-mode #modal-box .h5 {font-size: 24px;}
.js-close {font-size: 24px;}


/* ПОСТОРІНКОВА НАВІГАЦІЯ */

.a11y-mode ul.paginator a,
.a11y-mode ul.paginator .current,
.a11y-mode ul.paginator li > span[aria-hidden="true"] {
    font-size: 20px;       /* Збільшуємо шрифт (було 14px) */
    height: 40px;          /* Збільшуємо висоту кнопки (було 24px) */
    min-width: 40px;       /* Збільшуємо мінімальну ширину (було 24px) */
    margin: 0 4px;         /* Трохи збільшуємо відстань між кнопками */
    text-decoration: none !important;
}

.a11y-mode ul.paginator .current {background-color: #333; color: #fff;}

/* Додаємо чіткий outline при фокусі (для навігації з клавіатури) */
.a11y-mode ul.paginator a:hover,
.a11y-mode ul.paginator a:focus {
    outline: 3px solid #333;
    outline-offset: 2px;   /* Відсуває рамку на 2 пікселі від краю кружечка, щоб її було краще видно */
    background: #e3e4e4;   /* Додатково підсвічуємо фоном */
}

/* ПОШУК */

button.srchkey {
    border: none;
    font-family: inherit;
    padding: 5px 10px;
    border-radius: 5px;
}


/* КНОПКИ СОЦМЕРЕЖ */
.social {display: flex; justify-content: center;}
.social h5 {font-size: 16px; font-weight: normal; padding: 7px 0;}
.social ul {display: flex; list-style-type: none; margin: 15px 0; padding: 0;}
.social li {margin: 0 7px; padding: 0;}
.a11y-mode .sotial a:hover,
.a11y-mode .sotial a:focus,
.a11y-mode .sotial a:focus-visible {
    outline: 3px solid #333 !important;
    outline-offset: 3px !important; /* Відсуває контур від самої кнопки, щоб він не зливався з фоном */
    background-color: #2c2a25 !important; /* Робимо фон контрастнішим при фокусі/наведенні */
}
.a11y-mode h5 {font-size: 20px; padding: 5px 0;}
@media (min-width: 768px) {
    .social {justify-content: flex-end;} 
    .social h5 {text-align: left;}
    .social li {margin: 0 15px 0 0; padding: 0 !important;}
}


/* ІНФОРМАЦІЙНІ КАМПАНІЇ */

button.year {
    border: none;
    font-family: inherit;
}

.a11y-mode button.year:focus-visible {
    outline: 3px solid #333 !important;
    outline-offset: 2px !important;
    background-color: #ffd900 !important; 
    color: #2c2a25 !important;
}

.a11y-mode .icc-list a:hover,
.a11y-mode .icc-list a:focus-visible {
    box-shadow: none !important;
    outline: 3px solid #333 !important;
    outline-offset: -1px;
}


/* СПИСОК І КАРТА ХАБІВ */

/* 1. Список: затемнюємо ліву маркерну лінію */
.a11y-mode .hub-list a {
    border-left-color: #999 !important; /* Базовий сірий замість блідо-жовтого */
}

/* 1.1 Активний/наведений стан у списку */
.a11y-mode .hub-list a:hover,
.a11y-mode .hub-list a:focus,
.a11y-mode .hub-list a.active {
    border-left-color: #333 !important; /* Чіткий чорний колір маркерної лінії */
    color: #000 !important;
}

/* 1.2 Фокус з клавіатури для списку */
.a11y-mode .hub-list a:focus-visible {
    outline: 3px solid #333 !important;
    outline-offset: 4px;
}

/* 2. Інтерактивна карта (SVG) */
.a11y-mode #kyiv .district path {
    stroke: #666 !important; /* Чіткіші межі для всіх районів Києва */
}

.a11y-mode #kyiv a.district path {
    fill: #e0e0e0 !important; /* Трохи темніший базовий фон для районів з хабами */
}

/* 2.1 Контрастне виділення району на карті (Hover/Active) */
.a11y-mode #kyiv a.district:hover path,
.a11y-mode #kyiv a.district:focus path,
.a11y-mode #kyiv a.district.active path {
    fill: #333 !important; /* Заливаємо активний район темно-сірим */
    stroke: #000 !important; /* Посилюємо контур */
    stroke-width: 2px !important;
}

/* РЕЄСТР ІГС */

.a11y-mode #gorglist .attr {font-size: 16px;}
.a11y-mode #gorglist .typebox {font-size: 14px; margin-bottom: 10px;}
.a11y-mode #gorglist a.item {background-color: #fff;}

.a11y-mode .row-gorg .item:hover,
.a11y-mode .row-gorg .item:focus-visible {
    outline: 3px solid #333 !important;
    outline-offset: 2px !important;
    box-shadow: none !important; /* Прибираємо стандартну тінь при фокусі, щоб контур був чіткішим */
    background-color: #f6f6f6 !important; /* Легке підсвічування фону */
}

.a11y-mode .shadowbox a {color: #333; display: inline-block;}
.a11y-mode .shadowbox a:focus-visible {outline: 3px solid #333; outline-offset: 4px !important;}


/* КНОПКА ПЕРЕМИКАННЯ РЕЖИМІВ ТА ВІДОБРАЖЕННЯ ШАПКИ */

.btn-a11y {
    display: none;
    background: url(../img/a11y-mode.svg) no-repeat 6px center;
    background-size: 36px 36px;
    border: 2px solid #fff; 
    cursor: pointer;
    padding: 0;
}
.a11y-mode .btn-a11y { background-image: url(../img/normal-mode.svg); }

.btn-a11y:focus-visible {outline: 3px solid #333;}

.top-line {z-index: 100; position: fixed; width: 100%; top: -32px;}
.a11y-mode .top-line {position: static;}

#a11y-toggle-btn-mobile {
    display: inline-block;
    position: static;

    font-size: 18px; 
    font-weight: bold; 
            
    padding: 12px 7px 12px 52px;
    margin: 10px auto;

    text-align: left;
    white-space: nowrap;

    background-color: #5fcfe3;
    color: #000;
}

@media (min-width: 480px) {

    .btn-a11y {
        display: block;
        position: fixed;
        z-index: 20;
        right: 80px;
        top: 47px;
        width: 0;
        height: 0;
        padding: 48px 0 0 48px;
        overflow: hidden;
    }

    .a11y-mode .btn-a11y { 
        top: 15px;
    }

    #a11y-toggle-btn-mobile {display: none;}
}

@media (min-width: 760px) {

    .btn-a11y {
        
        font-size: 18px; 
        font-weight: bold; 
                
        padding: 3px 7px 3px 52px;
        width: min-content;
        height: auto;
        overflow: visible;

        top: 32px;
        height: 84px;

        text-align: left;
    }

    .a11y-mode .btn-a11y { 
        top: 0;
    }
}

@media (max-width: 980px) {

    .a11y-mode .nav-show .menu {margin: 0;}
    .a11y-mode .nav-show .top-menu .menu {}
    .a11y-mode .nav-show nav.top-menu,
    .a11y-mode .nav-show #content-wrapper {background-color: #333; transition: background .5s; }

    .a11y-mode .top-menu {
        position: relative;
        top: -32px;
    }

    .btn-a11y {
        position: absolute;
    }

}

@media (min-width: 981px) {

    .top-line {z-index: 100; position: static; width: 100%; top: 0;}

    .btn-a11y {
        position: fixed;
        background-size: 28px 28px;
        position: absolute;
        right: 10px;
        top: 35px;
        height: auto;
        width: auto;
        padding-left: 44px;
    }

    
    .a11y-mode .btn-a11y { top: 32px; }

    .a11y-mode .cabinet > i {font-size: 30px;}
}