/* =====================================================================
   Доповнення до style.css прототипу.
   Тут лежить усе, чого в прототипі не було: дії в шапці, живий пошук,
   растровий логотип, службові класи доступності.
   Підключається після style.css.
   ===================================================================== */

/* ---------- Доступність ---------- */
.screen-reader-text{
    position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.skip-link:focus{
    position:fixed !important;top:12px;left:12px;z-index:300;width:auto;height:auto;
    clip:auto;margin:0;padding:12px 20px;background:var(--white);color:var(--dark);
    border-radius:var(--r-sm);box-shadow:0 8px 30px rgba(0,37,53,.25)
}

/* Меню зроблене на <ul>/<li>, у прототипі були <div>. */
.nav,.nav__sub{list-style:none;margin:0}
.nav{padding:0}
@media (max-width:1024px){ .nav{padding:16px 24px 60px} }

/* ---------- Логотип-зображення ---------- */
.logo__img{display:block;height:52px;width:auto;flex:none}
@media (max-width:600px){ .logo__img{height:42px} }
/* Логотип один на весь сайт — з налаштувань теми. Автоматичну інверсію
   для темного тла не робимо: герб із кольорами вона зіпсує. */

/* ---------- Перемикач мов у шапці ---------- */
.header-lang{display:flex;align-items:center;gap:4px;flex:none;margin-right:6px}
.header-lang__item{
    padding:6px 8px;border-radius:8px;font-size:14px;line-height:1;
    color:var(--dark);transition:color .2s var(--ease),background .2s var(--ease)
}
.header-lang__item.is-current{font-weight:500;color:var(--teal)}
.header-lang__item:not(.is-current):hover{background:var(--grey)}

/* На темному банері — світлі підписи */
.header-home .header-lang__item{color:rgba(255,255,255,.72)}
.header-home .header-lang__item.is-current{color:var(--white)}
.header-home .header-lang__item:not(.is-current):hover{background:rgba(255,255,255,.14)}
.header-home.is-stuck .header-lang__item{color:var(--dark)}
.header-home.is-stuck .header-lang__item.is-current{color:var(--teal)}

/* Герб у списку документів — тепер картинка, а не інлайновий SVG */
.law-list img.tryzub{width:20px;height:auto;object-fit:contain}

/* ---------- Дії в шапці: Facebook, пошта, телефон, пошук ---------- */
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
/* На світлій шапці — біла іконка на бірюзовому колі. */
.header-actions__link,
.header-actions .search-toggle{
    width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
    background:var(--teal);color:var(--white);
    transition:background .2s var(--ease),color .2s var(--ease)
}
.header-actions__link:hover,
.header-actions__link:focus-visible,
.header-actions .search-toggle:hover,
.header-actions .search-toggle:focus-visible{background:var(--dark);color:var(--white)}
.header-actions svg{width:19px;height:19px}

/* На тлі банера — світлі іконки */
.header-home .header-actions__link,
.header-home .header-actions .search-toggle{background:rgba(255,255,255,.14);color:var(--white)}
.header-home .header-actions__link:hover,
.header-home .header-actions .search-toggle:hover{background:var(--teal)}

/* Шапка вже має margin-left:auto на search-toggle — перебиваємо,
   бо тепер відступ тримає весь блок .header-actions */
.header-inner .header-actions .search-toggle{margin-left:0}

/*
 * Мобільне меню вмикається на 1200px, а не на 1024px, як у прототипі:
 * з перемикачем мов і чотирма іконками горизонтальне меню перестає
 * вміщатися раніше. Правила нижче дублюють мобільний блок зі style.css,
 * бо перекрити чужий медіазапит іншою межею інакше не можна.
 */
@media (min-width:1025px) and (max-width:1200px){
    .nav{position:fixed;inset:var(--header-h) 0 0;background:var(--white);color:var(--dark);flex-direction:column;align-items:stretch;gap:0;padding:16px 24px 60px;overflow-y:auto;transform:translateX(100%);transition:transform .3s var(--ease);z-index:80}
    .nav.is-open{transform:none}
    .nav__link{padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0;justify-content:space-between;font-size:17px}
    .header-home .nav__link,
    .header-home.is-stuck .nav__link{color:var(--dark)}
    .header-home .nav__link:hover,.header-home .nav__item--open > .nav__link{background:none}
    .nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:4px 0 12px;display:none;min-width:0}
    .nav__item--open .nav__sub{display:block}
    .burger{display:grid}
    .header-home.is-stuck .nav{top:var(--header-h)}
}

/* На вузьких екранах лишаємо всі іконки, просто дрібніші —
   і стискаємо відступи в шапці, щоб усе вмістилося поруч із бургером. */
@media (max-width:1200px){
    .header-inner .topbar,
    .header-home .topbar{gap:12px}

    .header-actions{margin-left:auto;order:2;gap:6px}
    .burger{order:3;margin-left:4px}

    .header-actions__link{display:grid}
    .header-actions__link,
    .header-actions .search-toggle{width:38px;height:38px}
    .header-actions svg{width:17px;height:17px}
}

@media (max-width:420px){
    .header-actions{gap:4px}
    .header-actions__link,
    .header-actions .search-toggle{width:34px;height:34px}
    .header-actions svg{width:15px;height:15px}
    .logo__img{height:36px}
}

/* ---------- Живий пошук у попапі ---------- */
/* div.search-results, бо на сторінці результатів пошуку WordPress
   вішає клас search-results на <body> — голий селектор дав би
   зайвий відступ зверху всієї сторінки. */
div.search-results{margin-top:26px}
.search-results__status{font-size:14px;color:var(--muted);min-height:20px}
.search-results__list{display:grid;gap:2px;margin-top:10px}
.search-results__item{
    display:grid;gap:4px;padding:14px 16px;border-radius:var(--r-sm);
    transition:background .18s var(--ease)
}
.search-results__item:hover,
.search-results__item:focus-visible{background:var(--grey)}
.search-results__type{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--teal)}
.search-results__title{font-size:16px;font-weight:500;line-height:1.35}
.search-results__title mark{background:rgba(44,151,167,.22);color:inherit;padding:0 2px;border-radius:3px}
.search-results__all{margin-top:16px}
.search-results.is-loading .search-results__list{opacity:.5}

@media (max-width:600px){
    .search-results__item{padding:12px 10px}
}

/* ---------- Картки в слайдерах ---------- */
/* Swiper обрізає все, що виходить за межі контейнера, тому підйом
   картки на ховері й тінь під нею зрізалися. Даємо контейнеру відступи
   й компенсуємо їх від'ємними полями — розкладка не змінюється.

   Горизонтальні відступи рівно 16px: це найменший spaceBetween
   слайдера, тож наступний слайд починається рівно на межі обрізання
   і не визирає збоку. */
.news-swiper,
.tiles-swiper{
    padding:16px 16px 40px;
    margin:-16px -16px -40px
}

/* Тінь із від'ємним spread: по горизонталі вона виходить лише на 3px,
   тому повністю вміщається у відступ. Стандартна тінь із блюром 50px
   не влізла б і знову обрізалася б рівною лінією. */
.news-swiper .card:hover,
.tiles-swiper .card:hover{
    box-shadow:0 16px 34px -14px rgba(0,37,53,.30)
}

/* Страховка на випадок, якщо .swiper-slide-active знову опиниться
   в style.css: підсвітка активного слайда нам не потрібна.
   :not(:hover) тут обов'язковий — без нього це правило перебило б
   тінь при наведенні, бо специфічність у них однакова. */
.swiper-slide-active .card:not(:hover){box-shadow:none}

/* Слайд і картинка картки не призначені для фокуса з клавіатури
   (у картинки tabindex="-1"), тому системний контур на них лише заважає.
   Заголовок картки свій фокус зберігає — по ньому й ходить Tab. */
.swiper-slide:focus,
.swiper-slide:focus-visible,
.card__media:focus,
.card__media:focus-visible{outline:none;box-shadow:none}

/* ---------- Секція без слайдера на десктопі ---------- */
/* Swiper на широких екранах знищується в JS, тому inline-стилі з
   .swiper-wrapper зникають і grid спрацьовує. У DOM лишаються всі
   картки — зайві просто ховаємо, щоб на мобільному слайдер
   гортався по повному списку. */
@media (min-width:1024px){
    [data-desktop-static] .slider-nav,
    [data-desktop-static] .line-pagination{display:none}

    [data-desktop-static] .news-swiper .swiper-wrapper{
        display:grid;grid-template-columns:repeat(3,1fr);gap:24px
    }
    [data-desktop-static] .news-swiper .swiper-slide{width:auto;margin:0}
    [data-desktop-static] .news-swiper .swiper-slide:nth-child(n+4){display:none}
}

/* ---------- Фокус в полях пошуку ---------- */
/* Системний контур прибраний, але замість нього є власна помітна
   підсвітка — інакше клавіатурний користувач не бачив би, де він. */
.search-modal input:focus,
.banner-search input:focus{outline:none}

.search-modal form:focus-within{border-bottom-color:var(--teal)}
.banner-search:focus-within{box-shadow:0 0 0 3px rgba(44,151,167,.55)}
.banner-search{transition:box-shadow .2s var(--ease)}

/* ---------- Попередження (єдине місце для червоного) ---------- */
.notice-warning{
    display:flex;align-items:flex-start;gap:12px;
    padding:16px 20px;border-radius:var(--r-md);
    background:rgba(221,44,28,.08);border-left:3px solid var(--red);
    color:var(--black);font-size:15px;line-height:1.5
}
.notice-warning__title{font-weight:500;color:var(--red)}

/* Атрибут hidden має перемагати display з інших правил
   (наприклад .search-hints{display:flex}) */
[hidden]{display:none !important}

/* ---------- Анімований градієнт банера ---------- */
/* Окремий шар під вмістом: у нього overflow:hidden, тому плями не
   вилазять за межі хедера. Сам .header-home тримає overflow:visible,
   інакше обрізалася б випадайка пошуку.

   Плями рухаються через transform, а не через background-position:
   transform віддається відеокарті й не змушує браузер перемальовувати
   градієнт на кожному кадрі. */
.header-home{background-color:var(--dark)}

.aurora{
    position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    contain:paint;
    background:linear-gradient(135deg,#001a26 0%,#002535 42%,#0b3947 72%,#14555f 100%)
}
/*
 * М'якість дає сам радіальний градієнт, а не filter:blur().
 * Це принципово: blur перемальовується щокадру на всій площі плями
 * (на широкому екрані це понад мільйон пікселів двічі), а градієнт
 * растеризується один раз, далі рухається лише transform.
 */
.aurora::before,
.aurora::after{
    content:"";position:absolute;will-change:transform
}
.aurora::before{
    width:78vw;height:78vw;left:-20vw;top:-30vw;
    background:radial-gradient(circle at center,
    rgba(44,151,167,.60) 0%,
    rgba(44,151,167,.30) 34%,
    rgba(44,151,167,.08) 55%,
    rgba(44,151,167,0) 72%);
    animation:dib-aurora-a 26s ease-in-out infinite alternate
}
.aurora::after{
    width:72vw;height:72vw;right:-18vw;bottom:-32vw;
    background:radial-gradient(circle at center,
    rgba(79,179,193,.42) 0%,
    rgba(79,179,193,.20) 36%,
    rgba(79,179,193,.05) 58%,
    rgba(79,179,193,0) 74%);
    animation:dib-aurora-b 34s ease-in-out infinite alternate
}

/*
 * Затемнення поверх плям. Окремим елементом, а не фоном контейнера:
 * фон батька малюється ПІД дочірніми псевдоелементами, тож затемнення
 * опинилося б за плямами й не працювало. Тут z-index вирішує порядок.
 */
.aurora::before,
.aurora::after{z-index:0}

.aurora__veil{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
            radial-gradient(62% 68% at 50% 52%,
            rgba(0,18,26,.66) 0%,
            rgba(0,18,26,.34) 44%,
            rgba(0,18,26,0) 74%),
            linear-gradient(180deg,
            rgba(0,18,26,.38) 0%,
            rgba(0,18,26,0) 28%,
            rgba(0,18,26,0) 70%,
            rgba(0,18,26,.30) 100%)
}

/* Коли банер прокручено за межі екрана, анімація зупиняється —
   немає сенсу рахувати кадри для того, чого не видно. */
.aurora.is-paused::before,
.aurora.is-paused::after{animation-play-state:paused}

@keyframes dib-aurora-a{
    0%  {transform:translate3d(0,0,0) scale(1)}
    50% {transform:translate3d(20vw,9vh,0) scale(1.16)}
    100%{transform:translate3d(42vw,-7vh,0) scale(.94)}
}
@keyframes dib-aurora-b{
    0%  {transform:translate3d(0,0,0) scale(1.05)}
    50% {transform:translate3d(-24vw,-11vh,0) scale(.9)}
    100%{transform:translate3d(-46vw,7vh,0) scale(1.2)}
}

/* Рух вимикається для тих, хто просив менше анімації. */
@media (prefers-reduced-motion: reduce){
    .aurora::before,
    .aurora::after{animation:none}
}

/* Вміст банера — над шаром градієнта. */
.header-home .banner{position:relative;z-index:2}

/* ---------- Бічна колонка на вузьких екранах ---------- */
/* Причина виїзду за межі екрана: у grid колонка 1fr рахується як
   minmax(auto,1fr), а auto — це min-content. Довга пошта чи адреса
   в контактах роздувають цей min-content ширше за екран.
   minmax(0,1fr) плюс min-width:0 знімають обмеження. */
@media (max-width:1024px){
    .layout{grid-template-columns:minmax(0,1fr)}
    .layout > *{min-width:0}
    .sidebar{max-width:100%}

    .contact-list div{flex-wrap:wrap}
    .contact-list b{min-width:0}
    .contact-list a,
    .contact-list span{overflow-wrap:anywhere}

    .entry{overflow-wrap:break-word}
    .entry img{max-width:100%;height:auto}
    .entry table{display:block;overflow-x:auto;max-width:100%}
}

/* ---------- Два логотипи в шапці головної ---------- */
/* Світлий і темний лежать один над одним і перетікають через opacity.
   visibility у прихованого прибирає його з таб-порядку й з дерева
   доступності, тому скрінрідер бачить одне посилання, а не два. */
.logo-stack{position:relative;flex:none}
.logo-stack .logo--dark{position:absolute;left:0;top:0;height:100%}
.logo-stack .logo{
    transition:opacity var(--stick-time) var(--ease),
    visibility var(--stick-time) var(--ease)
}
.logo--dark{opacity:0;visibility:hidden}
.header-home.is-stuck .logo--light{opacity:0;visibility:hidden}
.header-home.is-stuck .logo--dark{opacity:1;visibility:visible}

/* ---------- Футер ---------- */
.footer__top{grid-template-columns:1.1fr 1fr 1fr;align-items:start}
.footer .logo{align-items:center;gap:14px}
.footer .logo__img{height:56px}
.footer .logo__text{font-size:15px;max-width:280px;line-height:1.3}
.footer__multiline{display:block}
.footer__contacts a{display:inline-block}

.footer__bottom{grid-template-columns:1fr auto;align-items:center}
.footer__bottom .lang{justify-self:end}
.footer__copy{font-size:11px;max-width:none;text-align:left;opacity:.75}
.footer__copy p{display:inline;margin:0}
.footer__copy p + p{display:block;margin-top:4px}
.footer__copy-year{white-space:nowrap}

@media (max-width:1024px){
    .footer__top{grid-template-columns:1fr 1fr;row-gap:36px}
}
@media (max-width:700px){
    .footer__top{grid-template-columns:1fr}
    .footer__bottom{grid-template-columns:1fr;row-gap:18px}
    .footer__bottom .lang{justify-self:start}
}

/* ---------- Банер: дві колонки ---------- */
/* Текст і пошук ліворуч, логотип праворуч. Банер перестає бути
   симетричною обкладинкою й читається як початок сторінки. */
.banner{text-align:left;padding:64px 0 88px}

.banner__grid{
    display:grid;grid-template-columns:minmax(0,1fr) 440px;
    align-items:center;gap:48px
}
.banner__main{display:flex;flex-direction:column;align-items:flex-start}

/* Заголовок трохи менший і ширший за рядком: при 52px і 18 символах
   назва департаменту розсипалася на п'ять рядків і перетягувала
   на себе всю увагу. */
.banner__title{margin:0;max-width:21ch;font-size:clamp(28px,3.1vw,44px);line-height:1.08}
.banner__sub{margin:18px 0 0;max-width:48ch}
.banner-search-wrap{margin:30px 0 0;max-width:600px;width:100%}
.banner-search{margin:0;max-width:600px;width:100%}

/* ---------- Логотип ---------- */
.banner__aside{position:relative;display:grid;place-items:center;min-height:420px;pointer-events:none}

/* Логотип нерухомий: він знак департаменту, а не декорація. */
.banner__logo{position:relative;width:260px;max-width:100%;height:auto;display:block}

/* Відлуння знака: той самий файл, більший і майже прозорий. Дає
   глибину без жодного нового зображення. */
.banner__logo--ghost{
    position:absolute;width:450px;max-width:none;opacity:.055;
    transform:translate(calc(var(--px) * 4px), calc(var(--py) * 4px));
    transition:transform 1.4s cubic-bezier(.22,.61,.36,1)
}

/* ---------- Реакція на курсор ---------- */
/* Відлуння знака ледь зміщується за мишею. Рух є, але він відповідь
   на дію людини, а не фон, який весь час смикає око. */
.header-home{--px:0;--py:0}

@media (prefers-reduced-motion: reduce){
    .banner__logo--ghost{transition:none;transform:none}
}

@media (max-width:1100px){
    .banner__grid{grid-template-columns:minmax(0,1fr) 340px;gap:36px}
    .banner__aside{min-height:340px}
    .banner__logo{width:200px}
    .banner__logo--ghost{width:340px}
}

/* На вузьких екранах логотип іде над текстом і зменшується:
   у дві колонки там не вміщається ані заголовок, ані пошук. */
@media (max-width:820px){
    .banner{text-align:center;padding:48px 0 64px}
    .banner__grid{grid-template-columns:1fr;gap:28px}
    .banner__main{align-items:center}
    .banner__title{max-width:24ch;margin:0 auto}
    .banner__sub{margin-left:auto;margin-right:auto}
    .banner__aside{min-height:0;order:-1}
    /* На вузькому екрані лишаємо дві фігури з чотирьох: решта
       перекривала б текст. */
    .banner__logo{width:150px}
    .banner__logo--ghost{width:250px;opacity:.045}
}
/* ---------- Живий пошук у банері ---------- */
/* Ширину й відступ задає блок банера вище; тут лишається тільки
   position:relative — від нього позиціонується випадайка підказок.
   Раніше тут стояло margin:36px auto, і auto зсувало пошук від краю
   колонки, через що він не збігався із заголовком. */
.banner-search-wrap{position:relative}
.banner-search-wrap .banner-search{margin:0}

.search-results--banner{
    position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:130;
    margin-top:0;padding:18px 20px 20px;
    background:var(--white);color:var(--black);
    border-radius:var(--r-md);box-shadow:0 24px 60px rgba(0,37,53,.28);
    text-align:left;max-height:min(60vh,520px);overflow-y:auto
}

@media (max-width:600px){
    .search-results--banner{padding:14px 12px 16px}
}

/* ---------- SVG-заглушка замість зображення ---------- */
/* preserveAspectRatio="xMidYMid slice" у самій розмітці працює як
   object-fit:cover, тому заглушка заповнює будь-яке співвідношення. */
.ph{display:block;width:100%;height:100%}

/* Заглушка в ролі головного зображення сінгла — пропорції як у фото */
.entry .ph.hero-img{aspect-ratio:16/9;border-radius:var(--r-lg);margin-bottom:36px}

/* ---------- Кнопка «наверх» ---------- */
.to-top-btn{
    position:fixed;right:24px;bottom:24px;z-index:120;
    width:52px;height:52px;display:grid;place-items:center;
    border-radius:50%;background:var(--dark);color:var(--white);
    box-shadow:0 10px 30px rgba(0,37,53,.28);
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),
    visibility .25s var(--ease),background .2s var(--ease)
}
.to-top-btn.is-visible{opacity:1;visibility:visible;transform:none}
.to-top-btn:hover,
.to-top-btn:focus-visible{background:var(--teal)}
.to-top-btn svg{width:20px;height:20px}

@media (max-width:600px){
    .to-top-btn{right:16px;bottom:16px;width:46px;height:46px}
}
@media (prefers-reduced-motion: reduce){
    .to-top-btn{transition:opacity .01s}
}

/* ---------- Липка панель на головній ---------- */
/* Панель зафіксована ОДРАЗУ, а не після скролу: якщо перемикати
   position у момент прокрутки, елемент випадає з потоку і сторінка
   смикається. Хедеру одразу дається padding зверху на висоту панелі,
   тому банер стоїть там само, де стояв. Клас is-stuck змінює лише
   кольори — розкладка від нього не залежить. */
.header-home{padding-top:var(--header-h);overflow:visible;position:relative;z-index:20}

/* Декоративне коло вимкнене: воно трималося на overflow:hidden,
   а той обрізав випадайку пошуку в банері. Підсвітку й так дає
   анімований градієнт. */
.header-home::after{display:none}

.header-home__bar{
    position:fixed;top:0;left:0;right:0;width:100%;max-width:none;
    padding:0;z-index:110;background:transparent
}
.header-home__bar .topbar{
    max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
    position:relative;z-index:1
}

/* ---------- Біла панель з блюром після скролу ---------- */
/* Тривалість переходу в одному місці — щоб фон, логотип, меню
   й іконки міняли стан синхронно. */
:root{--stick-time:.55s}

/* Фон винесений в окремий шар і проявляється через opacity.
   Так плавно наростає і блюр: перехід із backdrop-filter:none
   в blur() браузер не інтерполює, він просто вмикається різко. */
.header-home__bar::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 6px 24px rgba(0,37,53,.10);
    opacity:0;transition:opacity var(--stick-time) var(--ease)
}
.header-home.is-stuck .header-home__bar::before{opacity:1}

/*
 * position тут НЕ задаємо: у style.css стоїть position:sticky,
 * і будь-яке значення звідси його перебило б.
 *
 * Фон і блюр винесені на псевдоелемент, і це не косметика:
 * backdrop-filter створює containing block для нащадків із
 * position:fixed. Поки він висів на самій .header-inner, мобільне меню
 * (воно fixed) починало позиціонуватися відносно шапки, а не вікна —
 * і сторінка ламалася, щойно з'являвся клас is-stuck. У псевдоелемента
 * нащадків немає, тому там блюр нікому не шкодить. На головній так
 * було з самого початку — тому меню там і працювало.
 */
.header-inner{
    background:transparent;
    transition:border-color var(--stick-time) var(--ease)
}
.header-inner::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:var(--white);
    transition:background var(--stick-time) var(--ease),
    box-shadow var(--stick-time) var(--ease)
}
.header-inner .topbar{position:relative;z-index:1}

.header-inner.is-stuck{border-bottom-color:transparent}
.header-inner.is-stuck::before{
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 6px 24px rgba(0,37,53,.10)
}

/* Браузери без backdrop-filter отримують щільніший фон */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .header-home__bar::before,
    .header-inner.is-stuck::before{background:rgba(255,255,255,.96)}
}

@media (prefers-reduced-motion: reduce){
    :root{--stick-time:.01s}
}

/* Меню й іконки на білій панелі — та сама тривалість, що й фон */
.header-home .nav__link,
.header-home .burger,
.header-home .header-actions__link,
.header-home .header-actions .search-toggle{
    transition:background var(--stick-time) var(--ease),
    color var(--stick-time) var(--ease)
}
.header-home.is-stuck .nav__link{color:var(--dark)}
.header-home.is-stuck .nav__link:hover,
.header-home.is-stuck .nav__item--open > .nav__link{background:var(--grey)}
.header-home.is-stuck .header-actions__link,
.header-home.is-stuck .header-actions .search-toggle{background:var(--teal);color:var(--white)}
.header-home.is-stuck .header-actions__link:hover,
.header-home.is-stuck .header-actions .search-toggle:hover{background:var(--dark);color:var(--white)}
.header-home.is-stuck .burger{color:var(--dark)}

@media (max-width:1024px){
    /* Мобільне меню відкривається під панеллю */
    .header-home.is-stuck .nav{top:var(--header-h)}
}

/* ---------- Смуга прокрутки ---------- */
/* Тонка смуга: темна доріжка, світлий акцентний повзунок.
   Та сама пара, що й у прикладі, тільки в кольорах сайту. */
html{
    scrollbar-width:thin;
    scrollbar-color:var(--teal) var(--dark)
}

/* Chrome, Edge, Safari. Якщо на елементі задані scrollbar-width або
   scrollbar-color, Chrome ігнорує ::-webkit-scrollbar — тому всередині
   стандартні властивості скидаються. */
@supports selector(::-webkit-scrollbar){
    html{scrollbar-width:auto;scrollbar-color:auto}

    ::-webkit-scrollbar{width:5px;height:5px}
    ::-webkit-scrollbar-track{background-color:var(--dark)}
    ::-webkit-scrollbar-thumb{
        background-color:var(--teal);
        border-radius:0;
        border:0
    }
    /* Ховер світлішає, а не темніє: на темній доріжці темний повзунок
       просто зник би. */
    ::-webkit-scrollbar-thumb:hover{background-color:#4fb3c1}
    ::-webkit-scrollbar-corner{background-color:var(--dark)}
}

/* ---------- Секція «Корисні посилання» ---------- */
/* Три блоки в бічній колонці йдуть один під одним, тому відступ
   задається через сусідній селектор — у першого блоку його немає. */
.useful__aside-block + .useful__aside-block{margin-top:34px}
.useful__aside-block .law-list{margin-top:0}
.useful__head{margin-bottom:34px}

/* Назви програм довші за пункти напрямків — даємо їм переносити рядки
   й тримаємо стрілку притиснутою до правого краю. */
.useful__aside-block .dir-list a{align-items:flex-start}
.useful__aside-block .dir-list svg{margin-top:4px}

/* Тло: секція --paper (клас section--paper у шаблоні),
   сам блок білий, картки посилань знову --paper.
   Виходить три рівні глибини на двох кольорах. */
/* Кольори секції корисних посилань лишаються як у прототипі:
   блок бежевий, картки білі. Окремі кольори має лише блок документів
   на сторінці «Про департамент» — див. .about-docs нижче. */

/* Текст у секції на 2px дрібніший і без напівжирного. */
/* Кольори секції — тільки на головній: сама секція сіра (section--grey),
   блок білий, картки бежеві, плашка бірюзова. Правила прив'язані до
   .useful, тому картки .doc у пошуку, в архіві програм і на сторінці
   «Про департамент» лишаються як були. */
.useful{background:var(--white)}
.useful .doc{background:var(--paper)}
.useful .doc__num{background:var(--teal);color:var(--white)}

.useful .doc__title{font-size:14px;font-weight:400}
.useful .doc__num{font-size:10px}
.useful .dir-list a{font-size:13px;font-weight:400}
.useful .law-list a{font-size:13px;font-weight:400}
.useful .aside-title{font-size:22px}

/* ---------- Сторінка 404 ---------- */
.page404{
    position:relative;min-height:100vh;min-height:100svh;
    display:grid;align-items:center;
    background-color:var(--dark);color:var(--white);
    padding:80px 0
}
.page404 .aurora{z-index:0}
.page404__inner{position:relative;z-index:2;width:100%}

.page404__logo{
    display:inline-grid;place-items:center;
    width:74px;height:74px;padding:12px;
    background:var(--white);border-radius:18px;margin-bottom:56px
}
.page404__logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.page404__logo-text{font-size:12px;font-weight:500;color:var(--dark);text-align:center;line-height:1.2}

.page404__code{
    font-family:var(--ff-head);font-weight:400;
    font-size:clamp(84px,12vw,168px);line-height:.9;letter-spacing:-.04em;
    margin-bottom:28px
}
.page404__title{font-size:clamp(24px,3vw,38px);margin-bottom:14px}
.page404__text{color:rgba(255,255,255,.78);max-width:52ch;margin-bottom:40px}

.btn--light{background:var(--white);color:var(--dark)}
.btn--light:hover,
.btn--light:focus-visible{background:var(--teal);color:var(--white)}

@media (max-width:600px){
    .page404__logo{width:64px;height:64px;margin-bottom:36px}
    .page404__code{margin-bottom:18px}
}

/* ---------- Сторінка результатів пошуку ---------- */
.search-form{
    display:flex;align-items:center;gap:10px;max-width:640px;margin:26px auto 0;
    background:var(--white);border:1px solid var(--line);
    border-radius:100px;padding:6px 6px 6px 22px;
    transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.search-form:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(44,151,167,.18)}
.search-form input{flex:1;min-width:0;border:0;background:none;font:inherit;padding:12px 0;outline:none}
.search-form button{
    flex:none;background:var(--teal);color:var(--white);
    border-radius:100px;padding:13px 26px;font-weight:500;
    transition:background .2s var(--ease)
}
.search-form button:hover,
.search-form button:focus-visible{background:var(--dark)}

/* Заголовок і поле пошуку в один ряд; лід — під ними. */
.page-hero--search .page-hero__row{
    display:flex;align-items:center;justify-content:space-between;
    gap:32px;flex-wrap:wrap
}
.page-hero--search h1{font-size:clamp(24px,2.6vw,34px);max-width:none}
.page-hero--search .search-form{margin:0;flex:1 1 320px;max-width:520px}
.page-hero--search .lead{margin-top:16px}

@media (max-width:820px){
    .page-hero--search .page-hero__row{flex-direction:column;align-items:stretch;gap:20px}
    .page-hero--search .search-form{max-width:none}
}

.results{display:grid;gap:14px}
.results .doc{margin-bottom:0}
.doc__date{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.doc__excerpt{margin:10px 0 0;font-size:14px;color:var(--muted);line-height:1.5}

/* Стрілка в шестикутнику, як на картках головної. Місце під неї
   резервуємо відступом, щоб довгий заголовок під неї не заліз. */
.results .doc{position:relative;padding-right:92px}
.doc__go{position:absolute;right:24px;top:50%;transform:translateY(-50%)}
.doc:hover .hex{background:var(--dark)}

@media (max-width:600px){
    .results .doc{padding-right:24px}
    .doc__go{position:static;transform:none;display:block;margin-top:16px}
}

.results-empty{max-width:60ch}
.results-empty h2{margin-bottom:12px}
.results-empty p{color:var(--muted)}
.results-empty__links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:26px}

/* ---------- Питання та відповіді ---------- */
/* У прототипі блок був обмежений 900px — знімаємо. */
.faq{max-width:none}

/* Посилання у відповідях мають бути помітні: у тексті на сірому тлі
   самої лише зміни кольору мало, тому ще й підкреслення. */
.faq__a a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.faq__a a:hover,
.faq__a a:focus-visible{color:var(--dark)}

/* ---------- Розміри заголовків ---------- */
/*
 * У прототипі h1 доростав до 60px, а h2 до 46px. Для сторінки з довгою
 * назвою на кшталт «Комунальні підприємства» це давало заголовок
 * на пів екрана. Приводимо h1 приблизно до розміру заголовків секцій
 * на головній, h2 робимо на крок дрібнішим.
 *
 * Нижня межа clamp майже не змінена — на мобільному розміри й так
 * були помірні, зменшувати їх нема сенсу.
 */
h1{font-size:clamp(28px,3vw,38px)}
h2{font-size:clamp(24px,2.4vw,32px)}

/* Заголовок у тексті сінгла — ще на крок менший за заголовок секції,
   інакше підзаголовки всередині статті сперечаються з назвою сторінки. */
.entry h2{font-size:clamp(21px,1.9vw,26px)}
.entry h3{font-size:clamp(18px,1.6vw,21px)}

/* Заголовок архіву на всю ширину: обмеження в 20 символів з прототипу
   ламало короткі назви на два рядки без потреби. */
.page-hero--archive h1{max-width:none}

/* Лід теж на всю ширину — у прототипі стояло обмеження 64 символи. */
.page-hero .lead{max-width:none}

/* Заголовок сінгла теж без обмеження в 20 символів. */
.page-hero--single h1{max-width:none}

/* ---------- Головне зображення сінгла ---------- */
/* Фіксоване співвідношення 16:9 плюс object-fit:cover. Без цього
   вертикальне фото розтягувало б сторінку на кілька екранів,
   а горизонтальне й вертикальне виглядали б непослідовно. */
.entry .hero-media{
    display:block;position:relative;
    aspect-ratio:16/9;overflow:hidden;
    border-radius:var(--r-lg);margin-bottom:32px;background:var(--grey)
}
.entry .hero-media img,
.entry .hero-media .ph{
    display:block;width:100%;height:100%;
    object-fit:cover;margin:0;border-radius:0;aspect-ratio:auto
}
.entry .hero-media--zoom{cursor:zoom-in}

/* Підказка, що фото збільшується */
.entry .hero-media--zoom::after{
    content:"";position:absolute;right:16px;bottom:16px;
    width:40px;height:40px;border-radius:50%;
    background:rgba(0,37,53,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/20px no-repeat;
    opacity:0;transition:opacity .25s var(--ease)
}
.entry .hero-media--zoom:hover::after,
.entry .hero-media--zoom:focus-visible::after{opacity:1}

/* ---------- Контакти в сайдбарі ---------- */
/* Посилання серед звичайного тексту мають бути помітні одразу:
   самої лише зміни кольору мало, тому ще й підкреслення. */
.sidebar .contact-list a{
    color:var(--teal);
    text-decoration:underline;
    text-underline-offset:3px;
    overflow-wrap:anywhere
}
.sidebar .contact-list a:hover,
.sidebar .contact-list a:focus-visible{color:var(--dark)}

/* Багаторядкові значення (графік роботи) не мають злипатися */
.sidebar .contact-list span{line-height:1.55}

/* ---------- Короткий опис у тексті ---------- */
/* Успадковує вигляд цитати з прототипу — бежеве тло й бірюзова смуга
   ліворуч, — але помітно більший і легший за основний текст. */
.entry .entry-lead{
    margin:0 0 36px;
    font-size:19px;line-height:1.6;font-weight:300;
    color:var(--black)
}
.entry .entry-lead p{font-size:inherit;line-height:inherit;margin:0}

@media (max-width:600px){
    .entry .hero-media{aspect-ratio:4/3;margin-bottom:24px}
    .entry .entry-lead{font-size:17px;padding:18px 20px}
}

/* ---------- Картки: медіа ---------- */
/*
 * .card__media — це <a>, а інлайнові елементи ігнорують aspect-ratio,
 * тому висоту задавала сама картинка й картки роз'їжджалися.
 * display:block вмикає співвідношення, object-fit:cover приводить
 * будь-яке фото до однакового кадру.
 */
.card__media{display:block;aspect-ratio:16/10;overflow:hidden}
.card__media img,
.card__media .ph{
    display:block;width:100%;height:100%;
    object-fit:cover;border-radius:0
}

/* У підприємств у картці зазвичай логотип, а не фото. Обрізати його
   не можна, тому вписуємо цілком на білому тлі. */
.card--enterprise .card__media{background:var(--white)}
.card--enterprise .card__media img{object-fit:contain;padding:20px}

/* Те саме для великого блоку на головній */
.featured__media img,
.featured__media .ph{
    display:block;width:100%;height:100%;
    object-fit:cover;border-radius:0
}

/* ---------- Теги в картках і в пошуку ---------- */
/* У style.css стилі тега прив'язані до a.tag — це захист від того,
   що на сторінці тегу WordPress вішає клас tag самому <body>.
   У результатах пошуку тег виводиться тегом <span>, тому потрібні
   власні правила, не прив'язані до елемента. */
.card__tags{display:flex;flex-wrap:wrap;gap:6px}

/* У картці й у великому блоці теги лежать поверх зображення,
   у лівому верхньому куті. Картка й медіа-блок отримують
   position:relative, щоб було від чого рахувати. */
.card,
.featured__media{position:relative}

.card > .card__tags,
.featured__media .card__tags{
    position:absolute;top:12px;left:12px;z-index:2;max-width:calc(100% - 24px)
}

/* Поверх фото потрібен щільний фон: прозорий на строкатому знімку
   зникає. Світла плашка з чорним текстом дає 20:1 — читається
   на будь-якій фотографії. */
.card > .card__tags .tag,
.featured__media .card__tags .tag{background:var(--paper);color:var(--black)}
.card > .card__tags .tag:hover,
.card > .card__tags .tag:focus-visible{background:var(--dark);color:var(--white)}

.card__tags .tag,
.doc__meta .tag,
.search-results__item .tag{
    display:inline-block;padding:5px 11px;border-radius:100px;
    background:var(--grey);color:var(--muted);
    font-size:11px;line-height:1.3;letter-spacing:0;text-transform:none;
    transition:background .2s var(--ease),color .2s var(--ease)
}
.card__tags .tag:hover,
.card__tags .tag:focus-visible{background:var(--dark);color:var(--white)}

/* У випадайці тип і теги стоять в одному рядку над заголовком */
.search-results__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.search-results__meta .card__tags{margin:0}

/* У пошуку мета-рядок може переноситися, якщо тегів кілька */
.doc__meta{flex-wrap:wrap;row-gap:6px}

/* ---------- Картки: типографіка ---------- */
.card__title{font-size:15px;font-weight:500}
.card__date{font-size:13px}

/* Дата й стрілка — в одному рядку внизу картки.
   margin-top:auto притискає рядок до низу, тож картки різної висоти
   вирівнюються по нижньому краю. */
.card__foot{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;margin-top:auto;padding-top:14px
}
.card__go{flex:none;margin-left:auto}

/* Короткий опис — рівно три рядки, далі браузер сам ставить трикрапку.
   Обрізати текст у PHP не можна: скільки слів влізе в три рядки,
   залежить від ширини картки й довжини слів, а вона різна на кожному
   екрані та в кожній секції. */
.card__excerpt{
    font-size:14px;
    font-weight:300;
    color:rgba(0,37,53,.78);   /* темніше за --muted, легше читається */
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden
}

/* Великий блок новини та проєкта — на крок менше, ніж було. */
.featured__title{font-size:clamp(20px,1.8vw,27px);font-weight:500}
.featured__date{font-size:13px}
.featured__excerpt{font-size:15px;font-weight:300;color:rgba(0,37,53,.78)}

/* Дата зліва, стрілка справа — так само, як у картках.
   margin-top:auto тут не використовуємо: .featured__body центрує вміст
   по вертикалі, і автовідступ розтягнув би блок на всю висоту. */
.featured__foot{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;margin-top:6px
}
.featured__date{margin-bottom:0}
.featured__go{flex:none;margin-left:auto}

/* ---------- Пагінація ---------- */
.pagination-wrap{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:16px 28px;margin-top:48px;padding-top:32px;
    border-top:1px solid var(--line)
}
.pagination-wrap .pagination{margin:0}
.pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.pagination .page-numbers{
    min-width:44px;height:44px;padding:0 15px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--white);border:1px solid var(--line);border-radius:100px;
    font-size:15px;line-height:1;
    transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)
}
.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible{border-color:var(--teal);color:var(--teal)}

/* Поточна сторінка — залита, а не просто жирна: різниця в кольорі
   помітна з першого погляду, різниця в накресленні — ні. */
.pagination .page-numbers.current{
    background:var(--teal);border-color:var(--teal);color:var(--white);
    font-weight:500;cursor:default
}
.pagination .page-numbers.dots{
    background:none;border-color:transparent;min-width:20px;padding:0;color:var(--muted)
}
.pagination .prev,
.pagination .next{padding:0 22px}

.pagination-status{margin:0;font-size:14px;color:var(--muted);white-space:nowrap}

@media (max-width:600px){
    .pagination-wrap{flex-direction:column;align-items:flex-start;margin-top:36px}
    .pagination .page-numbers{min-width:40px;height:40px;padding:0 12px;font-size:14px}
}

/* ---------- Сторінка «Про департамент» ---------- */
/* У прототипі ці два елементи мали інлайнові стилі — переносимо в клас. */
.about-note__title{font-size:26px;margin-bottom:14px}
.about-note__text{margin:0;color:var(--muted)}

/* Блок документів на цій сторінці: біла секція, картки — paper.
   Скрізь інде .doc навпаки біла на бежевому, тому правило scoped
   під .about-docs і решти сторінок не зачіпає. */
.about-docs{background:var(--white)}
.about-docs .doc{background:var(--paper)}

/* Вільний текст сторінки, якщо редактор його заповнив */
.entry--page{max-width:none;margin-bottom:48px}

/* Фото людини може бути відсутнє — тоді лишається рівний сірий блок */
.person__photo{overflow:hidden}

@media (max-width:820px){
    .about-note{grid-template-columns:1fr;gap:24px}
    .people{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
    .people{grid-template-columns:1fr}
}

/* ---------- Слайдер усередині текстової колонки ---------- */
/* Той самий Swiper, що на головній: розмітка з класами data-tiles
   і .tiles-swiper, тому JS підхоплює його без змін. */
.page-slider{margin:48px 0}
.page-slider .section-head{margin-bottom:24px}
.page-slider .section-head h2{font-size:clamp(21px,1.9vw,26px)}

/* У вузькій колонці картка дрібніша, ніж на архіві */
.page-slider .card__body{padding:18px}
.page-slider .card__title{font-size:14px}
.page-slider .card__excerpt{-webkit-line-clamp:2;line-clamp:2}

/* ---------- Посилання в текстових блоках ---------- */
/* Тільки в тексті: картки, кнопки, шапка й сайдбар мають власний вигляд,
   тому селектори цілять у типографіку, а не в усі <a> підряд. */
.entry p a,
.entry li a,
.entry td a,
.entry blockquote a,
.page-rules a,
.about-note__text a{
    color:var(--teal);
    text-decoration:underline;
    text-underline-offset:3px;
    overflow-wrap:anywhere
}
.entry p a:hover,
.entry li a:hover,
.entry td a:hover,
.entry blockquote a:hover,
.page-rules a:hover,
.about-note__text a:hover{color:var(--dark)}

/* ---------- Правила благоустрою ---------- */
.page-rules{margin-top:48px}
.page-rules h2{margin-bottom:18px}

/* ---------- Документи в бічній колонці ---------- */
.sidebar .dir-list a{font-size:14px;padding:10px 0}

/* =====================================================================
   ДОПОВНЕННЯ ДОСТУПНОСТІ — тільки CSS, без змін у JS
   Додати в кінець assets/css/theme.css
   ===================================================================== */

/* ---------- Контраст ---------- */
/*
 * Фірмовий #2c97a7 дає на білому 3.45:1, а WCAG AA вимагає 4.5:1 для
 * звичайного тексту. Для великих написів і графіки він годиться,
 * для посилань і дрібних підписів — ні. Темніший відтінок того ж
 * кольору: 5:1 на білому, 4.6:1 на бежевому. Різниця майже непомітна.
 */
:root{--teal-ink:#1f7a88}

.entry p a,
.entry li a,
.entry td a,
.entry blockquote a,
.page-rules a,
.about-note__text a,
.faq__a a,
.sidebar .contact-list a{color:var(--teal-ink)}

.search-results__type,
.header-lang__item.is-current{color:var(--teal-ink)}

.search-form button,
.banner-search button,
.pagination .page-numbers.current{background:var(--teal-ink);border-color:var(--teal-ink)}
.header-actions__link,
.header-actions .search-toggle{background:var(--teal-ink)}

/* ---------- Приховане не має ловити фокус ---------- */
/*
 * Дві пастки, які панель доступності не закриває:
 * 1) згорнута відповідь у FAQ має max-height:0, але посилання
 *    всередині лишаються в таб-порядку — фокус зникає в невидимому;
 * 2) мобільне меню зсунуте за екран через transform, тобто теж
 *    доступне з клавіатури, коли закрите.
 */
.faq__a{visibility:hidden;transition:max-height .35s var(--ease),visibility .35s var(--ease)}
.faq__item.is-open .faq__a{visibility:visible}

@media (max-width:1200px){
    .nav{visibility:hidden;transition:transform .3s var(--ease),visibility .3s var(--ease)}
    .nav.is-open{visibility:visible}
}

/* ---------- Менше руху ---------- */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important
    }
    .card:hover{transform:none}
    .featured.is-fading{opacity:1}
}

/* ---------- Друк ---------- */
@media print{
    .header-inner,.header-home,.footer,.to-top-btn,.search-modal,
    .slider-nav,.line-pagination,.load-more-wrap,.sidebar{display:none !important}
    .layout{grid-template-columns:1fr}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

/* =====================================================================
   ФОРМА «ЗАДАЙТЕ ПИТАННЯ»
   ===================================================================== */

/* Кнопка в сайдбарі. Стрілку доводиться обмежувати явно: у .btn вона
   без розмірів, і в блоці на всю ширину розтягувалася на пів кнопки. */
/* Блок кнопки: у .side-block відступ від лінії 20px, кнопці потрібно
   більше — інакше вона впирається в розділювач. */
.side-block--ask{padding-top:28px}
.question-open{
    width:100%;justify-content:center;gap:10px;
    padding:15px 22px;font-size:15px;line-height:1.3;text-align:left
}
.question-open svg{flex:none;width:18px;height:18px}

.question-modal{
    position:fixed;inset:0;z-index:200;display:none;
    align-items:center;justify-content:center;padding:24px
}
.question-modal.is-open{display:flex}

.question-modal__backdrop{
    position:absolute;inset:0;background:rgba(0,18,26,.72);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)
}

.question-modal__box{
    position:relative;width:100%;max-width:680px;max-height:90vh;overflow-y:auto;
    background:var(--white);border-radius:var(--r-lg);
    padding:clamp(28px,4vw,48px);
    box-shadow:0 40px 90px rgba(0,18,26,.34)
}

.question-modal__close{
    position:absolute;right:16px;top:16px;width:40px;height:40px;
    display:grid;place-items:center;border-radius:50%;
    background:var(--grey);color:var(--dark);
    transition:background .2s var(--ease),color .2s var(--ease)
}
.question-modal__close:hover,
.question-modal__close:focus-visible{background:var(--dark);color:var(--white)}
.question-modal__close svg{width:18px;height:18px}

.question-modal__title{margin:0 0 24px;font-size:clamp(22px,2.4vw,30px);padding-right:48px}

/* Після успішної відправки лишається саме повідомлення: заголовок
   «Задайте питання» над подякою виглядав би недоречно. */
.question-modal.is-done .question-modal__title{display:none}

/* ---------- Поля ---------- */
.question-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.question-form__field{margin:0 0 16px;display:flex;flex-direction:column;gap:7px}
.question-form__row .question-form__field{margin-bottom:16px}

.question-form label{font-size:14px;font-weight:500;color:var(--dark)}
.question-form label span{color:var(--teal-ink)}

.question-form input,
.question-form textarea{
    width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--dark);
    background:var(--paper);border:1px solid var(--line);border-radius:12px;
    padding:13px 16px;
    transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.question-form textarea{resize:vertical;min-height:120px;line-height:1.5}
.question-form input:focus,
.question-form textarea:focus{
    outline:none;border-color:var(--teal-ink);
    box-shadow:0 0 0 3px rgba(31,122,136,.16)
}

/* Пастка для ботів: не display:none — частина ботів такі поля пропускає.
   Прибираємо з потоку інакше, а від людей ховаємо надійно. */
.question-form__trap{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap
}

/* ---------- Згода на обробку даних ---------- */
.question-form__consent{
    display:flex;align-items:flex-start;gap:12px;margin:4px 0 18px;
    padding:16px 18px;background:var(--paper);border-radius:12px
}
.question-form__consent input{
    flex:none;width:20px;height:20px;margin:1px 0 0;padding:0;
    accent-color:var(--teal-ink);cursor:pointer
}
.question-form__consent label{
    font-size:13px;font-weight:400;line-height:1.5;color:var(--muted);cursor:pointer
}
.question-form__consent a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.question-form__consent a:hover{color:var(--dark)}

.question-form__note{margin:0 0 20px;font-size:13px;color:var(--muted)}
.question-form__submit{width:100%;justify-content:center}
.question-form__status{margin:14px 0 0;font-size:14px;color:var(--muted);min-height:20px}

/* ---------- Подяка ---------- */
.question-modal__done{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:24px 0 8px}
.question-modal__check{
    width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
    background:var(--teal-ink);color:var(--white)
}
.question-modal__check svg{width:30px;height:30px}
.question-modal__done p{margin:0;font-size:18px;line-height:1.5;max-width:40ch}

@media (max-width:600px){
    .question-modal{padding:0;align-items:flex-end}
    .question-modal__box{max-width:none;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0}
    .question-form__row{grid-template-columns:1fr;gap:0}
}

/* =====================================================================
   СТОРІНКА INTERREG
   ===================================================================== */

/* ---------- Вступна секція: банер і опис ---------- */
/* Заголовок сторінки тут прихований — його роль виконує банер.
   У розмітці він лишається, тому структура заголовків не ламається.

   Тло — той самий анімований градієнт, що в банері головної.
   overflow:hidden потрібен, бо плями градієнта більші за секцію. */
.interreg-intro{
    position:relative;overflow:hidden;
    padding:56px 0 48px;
    background-color:var(--dark);color:var(--white)
}
.interreg-intro > .wrap{position:relative;z-index:2}

/* На темному тлі посилання в описі мають бути світлими:
   бірюзовий --teal-ink тут читався б гірше за тло. */
.interreg-intro .interreg-lead p{color:var(--white)}
.interreg-intro .interreg-lead a{color:#8fd8e4}
.interreg-intro .interreg-lead a:hover{color:var(--white)}

/* Біла картка під банером: на банерах зазвичай логотипи на білому,
   тож без неї вони б зливалися із сірим тлом секції. */
.interreg-banner{
    background:var(--white);border-radius:var(--r-lg);
    padding:clamp(20px,2.6vw,36px);margin-bottom:36px
}
.interreg-banner__img{display:block;width:100%;max-width:100%;height:auto;margin:0 auto}

/* Сторінка йде однією колонкою — сайдбара тут немає. */
.interreg-body{padding-bottom:64px}
.interreg-body .entry{max-width:none}

/* Відступи складалися: нижній у секції вище плюс власний верхній
   у першого блоку. Тому першому й останньому свої відступи знімаємо —
   рознесення між блоками задає тільки те, що між ними. */
.interreg-body .entry > *:first-child{margin-top:0}

/* .entry--page має власний нижній відступ для сторінки «Про департамент»;
   тут він додається до відступу контейнера, тому знімаємо. */
.interreg-body .entry--page{margin-bottom:0}
.interreg-body .entry > *:last-child{margin-bottom:0}

/* Опис більший за звичайний текст: у цій секції він головний,
   бо заголовка на екрані немає. */
.interreg-lead p{font-size:clamp(18px,1.7vw,22px);line-height:1.6;color:var(--black);margin:0 0 16px}
.interreg-lead p:last-child{margin-bottom:0}
.interreg-lead a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}

/* Проєкти списком: той самий вигляд, що у великої картки на головній,
   але без слайдера — кожен видно одразу. */
.interreg-projects{margin:48px 0}
.interreg-projects .section-head{margin-bottom:24px}
.interreg-projects .section-head h2{font-size:clamp(21px,1.9vw,26px)}
.interreg-projects .featured{margin-bottom:24px}
.interreg-projects .featured:last-child{margin-bottom:0}
.interreg-extra{margin:40px 0}

/* Документи й кнопка після новин.
   Раніше вони стояли у дві колонки, і картка з кнопкою висіла вгорі
   праворуч із великою порожнечею під нею. Тепер документи займають
   усю ширину, а кнопка йде окремою смугою під ними. */
.interreg-actions{margin:56px 0}
.interreg-actions h2{font-size:clamp(21px,1.9vw,26px);margin-bottom:18px}
/* Документи оформлені як на сторінці «Про департамент»: картки
   на світлому тлі зі стрілкою праворуч. */
.interreg-actions__docs .section-head{margin-bottom:24px}
.interreg-actions__docs .doc{background:var(--paper)}

/* Та сама подача, що в цитати на сінглі проєкта: бежеве тло,
   бірюзова смуга ліворуч, більший і легший текст. */
.interreg-actions__ask{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:20px 32px;margin-top:40px;
    background:var(--paper);
    border-left:3px solid var(--teal);
    border-radius:0 var(--r-md) var(--r-md) 0;
    padding:24px 28px
}
.interreg-actions__ask p{
    margin:0;max-width:44ch;
    font-size:19px;line-height:1.6;font-weight:300;color:var(--black)
}
.interreg-actions__ask .question-open{width:auto;flex:none}

@media (max-width:700px){
    .interreg-actions{margin:40px 0}
    .interreg-actions__ask{
        align-items:flex-start;flex-direction:column;
        margin-top:28px;padding:18px 20px
    }
    .interreg-actions__ask p{font-size:17px}
    .interreg-actions__ask .question-open{width:100%}
}
/* Відео з YouTube. Співвідношення тримаємо самі: oEmbed віддає iframe
   з фіксованими розмірами, і на вузькій колонці він вилазив би. */
/* Два відео в ряд; одне — на всю ширину контейнера. */
.interreg-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:48px 0}
.interreg-videos--single{grid-template-columns:1fr}

@media (max-width:820px){
    .interreg-videos{grid-template-columns:1fr}
}
.video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--dark)}
.video-embed iframe,
.video-embed embed,
.video-embed object{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:820px){
    .interreg-intro{padding:36px 0 44px}
    .interreg-banner{margin-bottom:24px}
    .entry .section--flush{margin:36px 0}
}

/* =====================================================================
   КРОС-БРАУЗЕРНІ ДОРІВНЮВАННЯ
   Базовий скид уже є в style.css (box-sizing, text-size-adjust, button,
   img, a). Тут — те, чого там бракує і що видно лише в окремих браузерах.
   ===================================================================== */

/* ---------- Поля пошуку в Safari ---------- */
/*
 * iOS і macOS Safari малюють input[type=search] власним віджетом:
 * заокруглені кути, внутрішня тінь і хрестик очищення. Наші стилі
 * задають фон і рамку, але нативний вигляд вони не перекривають —
 * поле в банері та в попапі виглядає в Safari інакше, ніж деінде.
 */
input[type="search"]{
    -webkit-appearance:none;
    appearance:none;
    border-radius:0
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}

/* ---------- Решта полів ---------- */
/* Safari додає інпутам власну рамку й тінь, Firefox — свій відступ
   усередині кнопок. Зводимо до однакового вигляду. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
textarea{-webkit-appearance:none;appearance:none}

button::-moz-focus-inner,
input::-moz-focus-inner{border:0;padding:0}

/* Чекбокс згоди: без accent-color Safari малює його сірим.
   Властивість підтримують усі поточні браузери, старіші просто
   лишать типовий вигляд — це не ламає форму. */
input[type="checkbox"]{accent-color:var(--teal-ink)}

/* ---------- Мобільні браузери ---------- */
/* Сіра підсвітка при тапі по посиланню в Safari та Chrome на Android
   виглядає як помилка, бо в нас уже є власні стани. */
a,button{-webkit-tap-highlight-color:transparent}

/* ---------- Плейсхолдери ---------- */
/* Firefox робить плейсхолдер напівпрозорим, Safari — ні. */
::placeholder{opacity:1}

/* ---------- Фокус у старому Safari ---------- */
/* :focus-visible працює з Safari 15.4. У старіших рамка не з'являлася б
   узагалі, тому лишаємо для них звичайний :focus. */
@supports not selector(:focus-visible){
    a:focus,
    button:focus,
    input:focus,
    textarea:focus{outline:3px solid var(--teal-ink);outline-offset:3px}
}

/* =====================================================================
   WCAG 2.2 AA — те, чого бракувало після відмови від плагіна
   ===================================================================== */

/* ---------- 2.4.11 Фокус не перекритий ---------- */
/*
 * Нове в 2.2. Шапка липка, тому при переході по Tab фокус може
 * опинитися під нею — елемент у фокусі є, але його не видно.
 * scroll-margin відсуває точку прокрутки на висоту шапки.
 */
a,button,input,textarea,select,summary,[tabindex],
h1,h2,h3,h4,[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ---------- 2.5.8 Розмір цілі ---------- */
/* Нове в 2.2: інтерактивний елемент не менший за 24×24 пікселі.
   Більшість у нас і так більша, але дрібні плашки й підписи
   перевіряємо явно. */
.card__tags .tag,
.header-lang__item,
.pagination .page-numbers,
.dir-list a,
.law-list a{min-height:24px;display:inline-flex;align-items:center}

.card__tags .tag{min-width:24px;justify-content:center}

/* ---------- 1.4.13 Вміст, що з'являється ---------- */
/* Випадайка меню має лишатися відкритою, поки курсор іде до неї,
   і закриватися з клавіатури — Esc обробляє main.js. */
.nav__item--has-sub{position:relative}
.nav__sub{margin-top:0}

/* ---------- Посилання-пропуск ---------- */
/* Клас screen-reader-text ховає його, але при фокусі він має
   з'явитися — інакше клавіатурний користувач не бачить, куди потрапив. */
.skip-link:focus,
.skip-link:focus-visible{
    position:fixed;top:12px;left:12px;z-index:300;
    width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;
    padding:14px 22px;border-radius:100px;white-space:nowrap;
    background:var(--dark);color:var(--white);font-size:15px;font-weight:500
}

/* ---------- 1.4.12 Інтервали в тексті ---------- */
/* Користувач може примусово збільшити міжрядковий і міжлітерний
   інтервал. Фіксована висота блоків тоді обрізає текст, тому
   там, де це можливо, використовуємо min-height. */
.btn,
.question-open,
.search-form button,
.banner-search button{height:auto;min-height:44px}

/* ---------- 1.4.10 Перебудова ---------- */
/* На 320px нічого не має скролитися вбік. Довгі слова й адреси
   переносимо, широкі таблиці й код гортаємо всередині себе. */
body{overflow-x:hidden}
.entry,
.interreg-lead,
.question-modal__box{overflow-wrap:break-word}
.entry pre{overflow-x:auto;max-width:100%}

/* ---------- Друк ---------- */
@media print{
    .question-modal,
    .lightbox{display:none !important}
}

/* =================================================================
   Кнопка «Більше» в рядку заголовка секції
   ================================================================= */
/* .section-head уже flex із space-between, тому посилання стає
   праворуч само. Тут лишається не дати йому стиснутися й зменшити
   кегль, щоб воно не конкурувало із заголовком. */
.section-head__more{flex:0 0 auto;font-size:15px;white-space:nowrap}

@media (max-width:640px){
    /* На вузькому екрані заголовок переноситься, і посилання
       опиняється під ним — трохи дрібніше. */
    .section-head__more{font-size:14px}
}