/* Hallmark · footer: Ft4 Dense typographic · genre: editorial · tone: technical
 * theme: brand-locked (preserved, not re-picked) · accent: gold #a38354
 * fonts: TT Octosquares + Questrial — рівно ті, що на сайті, третього немає
 * pre-emit critique: P4 H5 E4 S5 R5 V4
 *
 * Замінює Ft3 (4 колонки з заголовками + ряд соцікон + копірайт) — форму, яку
 * hallmark audit позначив як critical «The AI footer»: вона жанрово сліпа й
 * однаково лягає на SaaS, пекарню та виробника НРК.
 *
 * ⚠️ Конвенція проєкту: html{font-size:1px}, тому 1rem === 1px (CLAUDE.md §4).
 * Усі розміри тут у rem саме в цій логіці — 14rem це 14px, а не 224px.
 *
 * ⚠️ Токени в hex, а не OKLCH, як зазвичай вимагає Hallmark: брендові кольори
 * вже зафіксовані в style.min.css (#141f1c 41×, #a38354 225×), і конвертація
 * дала б мікрозсув відтінку на живому бренді. Дисципліна токенів збережена —
 * жодного інлайн-кольору нижче, усе через var().
 * Префікс --ftr-* навмисний: файл додається до наявного проєкту й не повинен
 * перетирати глобальні змінні.
 */

:root {
    --ftr-paper:      #141f1c;
    --ftr-paper-2:    #182724;
    --ftr-ink:        #ffffff;
    --ftr-ink-2:      rgba(255, 255, 255, .62);
    --ftr-ink-3:      rgba(255, 255, 255, .38);
    --ftr-rule:       rgba(255, 255, 255, .14);
    --ftr-accent:     #a38354;
    --ftr-accent-lit: #c9a876;

    /* Тільки дві гарнітури сайту. Моношрифт тут був помилкою: Courier New —
       системний фолбек, а не частина системи, і поруч з Octosquares читався
       як третій випадковий шрифт. Технічність тримається трекінгом і вагою. */
    --ftr-font-display: "TT Octosquares", sans-serif;
    --ftr-font-body:    "Questrial", sans-serif;

    --ftr-space-2xs: 4rem;
    --ftr-space-xs:  8rem;
    --ftr-space-sm:  14rem;
    --ftr-space-md:  24rem;
    --ftr-space-lg:  40rem;
    --ftr-space-xl:  64rem;

    --ftr-text-xs:  11rem;
    --ftr-text-sm:  13rem;
    --ftr-text-md:  15rem;
    --ftr-text-lg:  22rem;

    --ftr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ftr-dur:      180ms;
}

.site-footer {
    position: relative;
    background: var(--ftr-paper);
    color: var(--ftr-ink);
    font-family: var(--ftr-font-body);
    overflow: hidden;
}

.site-footer__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .18;
}

.site-footer__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-footer__inner {
    position: relative;
    z-index: 1;
    padding: var(--ftr-space-xl) 0 var(--ftr-space-md);
}

/* --- Мастгед: логотип, далі правило до краю контейнера --- */

.site-footer__masthead {
    display: flex;
    align-items: center;
    gap: var(--ftr-space-md);
}

.site-footer__logo img {
    display: block;
    height: 34rem;
    width: auto;
}

.site-footer__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--ftr-rule);
}

.site-footer__lead {
    margin: var(--ftr-space-md) 0 var(--ftr-space-lg);
    max-width: 52ch;
    font-size: var(--ftr-text-md);
    line-height: 1.6;
    color: var(--ftr-ink-2);
}

/* --- Тіло колофона: мітка + потік посилань ---
   Це список визначень (dt/dd), а не двоколонковий заголовок секції:
   заборона Hallmark на tag-left/header-right стосується section heads
   із дисплейним заголовком, тут же мітка описує перелік. */

.site-footer__runs {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--ftr-space-sm) var(--ftr-space-md);
    margin: 0 0 var(--ftr-space-lg);
    padding-top: var(--ftr-space-md);
    border-top: 1px solid var(--ftr-rule);
}

.site-footer__label {
    margin: 0;
    font-family: var(--ftr-font-display);
    font-weight: 500;
    font-size: var(--ftr-text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ftr-ink-3);
    padding-top: 3rem;
    white-space: nowrap;
}

.site-footer__run {
    margin: 0;
    min-width: 0;              /* дає рядку переноситись усередині grid-треку */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ftr-space-2xs) 0;
}

/* Роздільник — окремий елемент, а НЕ псевдоелемент посилання.
   Спочатку він був ::before на самому <a>, і підкреслення на ховері
   малювалось разом із крапкою та її відступами: лінія починалась лівіше
   тексту. text-decoration застосовується до всього інлайн-боксу елемента,
   тож будь-який вміст усередині <a> потрапляє під неї. */
.site-footer__sep {
    margin: 0 var(--ftr-space-xs);
    color: var(--ftr-ink-3);
    user-select: none;
}

/* Останній роздільник у потоці зайвий (розмітка додає його після кожного
   пункту, бо pdoMenu не знає, який пункт останній). */
.site-footer__sep:last-child {
    display: none;
}

.site-footer__link {
    font-size: var(--ftr-text-sm);
    line-height: 1.5;
    color: var(--ftr-ink-2);
    text-decoration: none;
    white-space: nowrap;       /* клікабельний текст ніколи не в два рядки */
    transition: color var(--ftr-dur) var(--ftr-ease-out);
}

.site-footer__link:hover {
    color: var(--ftr-ink);
    text-decoration: underline;
    text-underline-offset: 3rem;
    text-decoration-thickness: 1px;
}

.site-footer__link--here {
    color: var(--ftr-ink);
}

.site-footer__link--num {
    font-variant-numeric: tabular-nums;
}

/* --- CTA: типографічний, а не плитка. Єдине золото у футері. --- */

.site-footer__cta {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ftr-space-xs);
    font-family: var(--ftr-font-display);
    font-size: var(--ftr-text-lg);
    line-height: 1.2;
    color: var(--ftr-accent-lit);
    text-decoration: none;
    white-space: nowrap;
}

.site-footer__cta-text {
    border-bottom: 1px solid var(--ftr-accent);
    padding-bottom: 2rem;
    transition: border-color var(--ftr-dur) var(--ftr-ease-out);
}

.site-footer__cta-mark {
    transition: transform var(--ftr-dur) var(--ftr-ease-out);
}

.site-footer__cta:hover .site-footer__cta-mark {
    transform: translateX(4rem);
}

.site-footer__cta:hover .site-footer__cta-text {
    border-color: var(--ftr-accent-lit);
}

.site-footer__cta-note {
    margin: var(--ftr-space-sm) 0 var(--ftr-space-xl);
    max-width: 46ch;
    font-size: var(--ftr-text-sm);
    line-height: 1.6;
    color: var(--ftr-ink-3);
}

/* --- Низ: один рядок, без другої смуги --- */

.site-footer__colophon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ftr-space-xs) var(--ftr-space-md);
    padding-top: var(--ftr-space-sm);
    border-top: 1px solid var(--ftr-rule);
    font-size: var(--ftr-text-xs);
    color: var(--ftr-ink-3);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ftr-space-2xs) var(--ftr-space-md);  /* тут роздільників немає — розводить відступ */
}

.site-footer__legal .site-footer__link {
    font-size: var(--ftr-text-xs);
}

/* --- Фокус: аудит показав 0 входжень :focus-visible на весь сайт.
   Кільце зʼявляється миттєво — анімувати його не можна, інакше на початку
   переходу клавіатурний користувач не бачить нічого. --- */

.site-footer a:focus-visible {
    outline: 2px solid var(--ftr-accent-lit);
    outline-offset: 3rem;
    border-radius: 2rem;
    transition: none;
}

/* --- Адаптив. Перевірено на 320 / 375 / 414 / 768. --- */

@media (max-width: 768px) {
    .site-footer__inner {
        padding: var(--ftr-space-lg) 0 var(--ftr-space-md);
    }

    /* мітка стає над потоком — на вузькому екрані два треки не лишають місця */
    .site-footer__runs {
        grid-template-columns: 1fr;
        gap: var(--ftr-space-xs);
    }

    .site-footer__label {
        padding-top: var(--ftr-space-xs);
    }

    .site-footer__label:first-of-type {
        padding-top: 0;
    }

    .site-footer__cta {
        font-size: var(--ftr-text-md);
    }

    .site-footer__colophon {
        flex-direction: column;
    }
}

@media (max-width: 414px) {
    .site-footer__lead,
    .site-footer__cta-note {
        max-width: none;
    }

    .site-footer__logo img {
        height: 28rem;
    }
}

/* --- Аудит також показав 0 входжень prefers-reduced-motion на весь сайт. --- */

@media (prefers-reduced-motion: reduce) {
    .site-footer__link,
    .site-footer__cta-mark,
    .site-footer__cta-text {
        transition-duration: 1ms;
    }

    .site-footer__cta:hover .site-footer__cta-mark {
        transform: none;
    }
}