/* ============================================
   ФУТЕР — компонент структури 2.0
   ============================================

   Етап E (2026-08-24): перенесено з assets/css/footer.css.

   Знято 107 !important. Причина їх існування була та сама, що й у картці:
   файл лежав у @layer і програвав нешарованим стилям ядра. Поза шарами
   ця боротьба не потрібна.
   ============================================ */

/* ============================================
   FOOTER.CSS — Стилі підвалу сайту
   ============================================ */

/* --- ПІДВАЛ: На всю ширину з чорним фоном --- */
.wp-block-template-part:has(footer),
footer.wp-block-template-part,
footer .wp-block-group.alignfull {
    width: 100%;
    
    background-color: #000000;
    background-image: none;
    
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.3);
    
    padding-top: 2em;
    padding-bottom: 1.5em;
}

/* Зменшуємо відступи у футері */
footer .wp-block-group.alignfull > * {
    padding-top: 0;
    padding-bottom: 0;
}

/* КРИТИЧНО: Всі тексти у футері мають бути білі/сірі */
footer,
footer *,
footer p,
footer .wp-block-group,
footer .wp-block-column {
    color: #ffffff;
}

/* Слоган - світло-сірий */
footer .wp-block-site-tagline,
footer .wp-block-site-tagline *,
footer .wp-block-site-tagline p {
    color: #cccccc;
}

/* Колонки футера - компактніше */
footer .wp-block-columns {
    margin-bottom: 1.5em;
    gap: 1.5em;
}

footer .wp-block-column {
    margin-top: 0;
    margin-bottom: 0;
}

/* Заголовки у футері */
footer h2.footer-heading,
footer h4,
footer .wp-block-heading {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.3;
    font-weight: 700;
}

/* Текст у футері - менший line-height */
footer p,
footer .wp-block-paragraph {
    line-height: 1.5;
    margin-bottom: 0.5em;
}

footer .wp-block-site-title,
footer .wp-block-site-title a {
    font-size: 1.3em;
    margin-bottom: 0.3em;
    line-height: 1.3;
    color: #ffffff;
    text-decoration: none;
}

footer .wp-block-site-title a:hover {
    color: var(--wp--preset--color--accent);
}

footer .wp-block-site-tagline,
footer .wp-block-site-tagline p {
    font-size: 0.9em;
    line-height: 1.4;
    margin-top: 0.3em;
    color: #cccccc;
}

/* Навігація у футері - компактніша */
footer .wp-block-navigation {
    gap: 0.5em 1.2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
}

footer .wp-block-navigation-item {
    margin-bottom: 0;
    width: auto;
    flex-shrink: 0;
}

footer .wp-block-navigation-item a {
    line-height: 1.2;
    padding: 0.2em 0;
    display: inline-block;
    font-size: 0.9em;
    white-space: nowrap;
}

/* Для мобільних - можна в стовпчик */
@media (max-width: 480px) {
    footer .wp-block-navigation {
        flex-direction: column;
        align-items: center;
    }
}

/* Соцмережі - компактніше */
footer .wp-block-social-links {
    gap: 0.5em;
    margin-top: 0.5em;
}

/* Копірайт - зменшені відступи */
footer .site-copyright {
    margin-top: 1em;
    padding-top: 1em;
    line-height: 1.4;
}

/* ============================================
   ФУТЕР - ПРИХОВУЄМО ГАМБУРГЕР МЕНЮ
   ============================================ */

/* Приховуємо всі кнопки меню в футері */
footer .wp-block-navigation__responsive-container-open,
footer .wp-block-navigation__responsive-container-close,
contentinfo .wp-block-navigation__responsive-container-open,
contentinfo .wp-block-navigation__responsive-container-close,
[role="contentinfo"] .wp-block-navigation__responsive-container-open,
[role="contentinfo"] .wp-block-navigation__responsive-container-close {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    left: -9999px;
}

/* Показуємо контейнер меню у футері завжди */
footer .wp-block-navigation__responsive-container,
contentinfo .wp-block-navigation__responsive-container,
[role="contentinfo"] .wp-block-navigation__responsive-container {
    display: block;
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    overflow: visible;
}

footer .wp-block-navigation__responsive-container-content,
contentinfo .wp-block-navigation__responsive-container-content,
[role="contentinfo"] .wp-block-navigation__responsive-container-content {
    display: block;
    padding: 0;
    min-height: auto;
}

/* ============================================
   АДАПТИВНІСТЬ ФУТЕРА
   ============================================ */

/* Планшети */
@media (max-width: 992px) {
    footer .wp-block-columns {
        gap: 2em;
    }
    
    footer .wp-block-column {
        min-width: 0;
    }
}

/* Мобільні - вертикальний layout */
@media (max-width: 768px) {
    /* Контейнер футера */
    footer .wp-block-group.alignfull {
        padding: 1.5em 15px;
    }
    
    /* Колонки футера - вертикально */
    footer .wp-block-columns {
        flex-direction: column;
        align-items: center;
        gap: 1.5em;
        text-align: center;
    }
    
    footer .wp-block-column {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        text-align: center;
        padding: 0 15px;
    }
    
    /* Заголовки секцій */
    footer h4,
    footer .wp-block-heading {
        text-align: center;
    }
    
    /* Навігація в футері - вертикально по центру */
    footer .wp-block-navigation {
        flex-direction: column;
        align-items: center;
        gap: 0.8em;
        width: 100%;
    }
    
    footer .wp-block-navigation__container {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
    }
    
    footer .wp-block-navigation-item {
        width: auto;
        text-align: center;
    }
    
    footer .wp-block-navigation-item a {
        padding: 0.5em 1em;
        display: block;
    }
    
    /* Соціальні мережі по центру */
    footer .wp-block-social-links {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Назва сайту */
    footer .wp-block-site-title {
        text-align: center;
    }
    
    /* Копірайт */
    footer .site-copyright {
        text-align: center;
        padding: 1em 15px;
    }
}

/* Дуже маленькі екрани */
@media (max-width: 480px) {
    footer .wp-block-group.alignfull {
        padding-top: 1.5em;
        padding-bottom: 1em;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    footer h4 {
        font-size: 1em;
    }
    
    footer .wp-block-social-links {
        gap: 0.8em;
    }
    
    /* Колонки футера на дуже маленьких екранах */
    footer .wp-block-columns {
        padding: 0 10px;
    }
    
    footer .wp-block-column {
        padding: 0;
    }
}


/* ============================================
   КАРТА САЙТУ: ДВА РЯДКИ
   ============================================

   Було три-чотири рядки: чотири короткі пункти лягали в один рядок, а два
   довгі правові посилання не вміщались у колонку 353px і йшли кожен своїм
   рядком. Тепер правові посилання — окрема навігація (parts/footer.html),
   дрібніша й приглушена, тому карта сайту читається як «основне + правове».
   ============================================ */

.footer-legal-nav {
    margin-top: 0.6em;
}

.footer-legal-nav .wp-block-navigation__container {
    gap: 0.4em 1.1em;
}

footer .footer-legal-nav .wp-block-navigation-item a {
    font-size: 0.82em;
    color: #9a9a9a;
    white-space: nowrap;
    transition: color 0.25s ease;
}

footer .footer-legal-nav .wp-block-navigation-item a:hover,
footer .footer-legal-nav .wp-block-navigation-item a:focus-visible {
    color: var(--wp--preset--color--accent);
}

/* ============================================
   КНОПКА «ВГОРУ»
   ============================================

   2026-08-24: правило #scrollToTopBtn лежало в custom.css одразу після
   зламаного коментаря (осиротілий хвіст `ІНТЕРФЕЙСНІ ЕЛЕМЕНТИ ... *​/` після
   міграції Етапу E). Парсер CSS відкидав сміття разом із наступним правилом —
   кнопка лишилась без жодного стилю: сірий системний прямокутник у потоці
   сторінки внизу зліва. Коментар полагоджено, стилі — тут, поза @layer.

   Видимість перемикає navigation.js класом .is-visible (раніше — інлайновим
   style.display, який не давав анімувати появу).
   ============================================ */

#scrollToTopBtn {
    position: fixed;
    right: clamp(16px, 2vw, 32px);
    bottom: clamp(16px, 2vw, 32px);
    z-index: 99;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;

    color: var(--wp--preset--color--accent);
    background-color: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    border: 1px solid var(--wp--preset--color--accent);
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    cursor: pointer;

    /* Прихована, доки сторінку не прокрутили на 300px */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.3s,
        background-color 0.3s ease,
        color 0.3s ease;
}

#scrollToTopBtn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

#scrollToTopBtn .lb-to-top__arrow {
    display: block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#scrollToTopBtn:hover,
#scrollToTopBtn:focus-visible {
    color: var(--wp--preset--color--primary);
    background-color: var(--wp--preset--color--accent);
}

/* Стрілка підстрибує — натяк на те, що станеться після кліку */
#scrollToTopBtn:hover .lb-to-top__arrow,
#scrollToTopBtn:focus-visible .lb-to-top__arrow {
    transform: translateY(-3px);
}

@media print {
    #scrollToTopBtn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #scrollToTopBtn,
    #scrollToTopBtn .lb-to-top__arrow {
        transition: opacity 0.2s ease, visibility 0.2s;
        transform: none;
    }

    #scrollToTopBtn:hover .lb-to-top__arrow,
    #scrollToTopBtn:focus-visible .lb-to-top__arrow {
        transform: none;
    }
}