/**
 * Lumina Theme — sticky.css
 * Стили для sticky header и sticky footer
 */

/* ── Template-part wrapper ───────────────────────────────────────────────── */

/*
 * WP всегда оборачивает template-part с area:header в <header class="wp-block-template-part">.
 * Этот элемент имеет фиксированную высоту = высоте хедера, что блокирует position:sticky
 * и stacking context для frosted-эффекта.
 * display:contents делает обёртку «прозрачной» для layout —
 * внутренний .lumina-header становится прямым дочерним элементом wp-site-blocks.
 */
header.wp-block-template-part {
    display: contents;
}

/* ── Sticky Header ───────────────────────────────────────────────────────── */

.lumina-header {
    z-index: 100;
    transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.3s ease;
    will-change: transform;
}

body.lumina-sticky .lumina-header {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
}

/* Тень появляется когда header зафиксирован */
body.lumina-sticky .lumina-header.is-sticky {
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

/* Smart sticky: плавно скрываем header при скролле вниз */
body.lumina-smart-sticky .lumina-header.is-hidden {
    transform: translateY( -110% );
}

/* ── Прозрачный header ───────────────────────────────────────────────────── */

.lumina-header--transparent {
    background: transparent !important;
    border-bottom: none !important;
}

/* После фиксации прозрачный header получает фон */
.lumina-header--transparent.is-sticky {
    background: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
}

.lumina-header--transparent.is-sticky a {
    color: var(--wp--preset--color--contrast) !important;
}

/* ── Sticky Footer ───────────────────────────────────────────────────────── */

.lumina-footer.lumina-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 100;
}

/*
 * Когда footer sticky — добавляем padding-bottom к body,
 * чтобы контент не прятался под footer.
 * Значение задаётся через JS или можно задать вручную.
 */
body:has( .lumina-sticky-footer ) {
    padding-bottom: var(--lumina-footer-height, 60px);
}

/* ── CSS-переменная высоты header (устанавливается через JS) ─────────────── */

:root {
    --lumina-header-height: 64px;  /* значение по умолчанию, перезаписывается JS */
    --lumina-footer-height: 60px;
}