@layer components {

/* ============================================
   FLUID.CSS — адаптація розмірів 5″ → 30″ (320px → 2560px)
   Працює спільно з theme.json fluid typography.
   
   Логіка clamp(MIN, PREFERRED, MAX):
   - MIN — нижня межа на маленьких екранах (320px смартфон)
   - PREFERRED — динамічна формула (vw або vw + rem)
   - MAX — верхня межа на великих екранах (2560px+, 30")
   
   Завантажується після header.css і custom.css, тому має пріоритет.
   ============================================ */

/* === КОНТЕЙНЕР: padding по краях масштабується === */
:root {
    /* Універсальні fluid-змінні для повторного використання */
    --fluid-gutter:    clamp(0.75rem, 2.5vw,   2rem);   /* мобільний 12px → десктоп 32px */
    --fluid-gutter-lg: clamp(1rem,    3vw,     3rem);   /* 16px → 48px */
    --fluid-gap:       clamp(0.5rem,  1.5vw,   1.5rem);
    --fluid-radius:    clamp(4px,     0.5vw,   8px);
    
    /* Висота хедера: на 5" телефоні нижча, на 30" — нормальна */
    --fluid-header-height: clamp(64px, 6vw, 95px);
    --fluid-header-logo:   clamp(40px, 5vw, 85px);
}

/* === TOP BAR: масштабовані padding і відстані === */
.header-top-bar {
    padding: clamp(4px, 0.6vw, 10px) var(--fluid-gutter-lg) !important;
    font-size: clamp(0.75rem, 0.6vw + 0.65rem, 0.95rem);
}

.top-bar-contacts {
    gap: var(--fluid-gap);
}

/* На вузьких екранах (5"-6.5" телефони) — переносити пункти контактів вертикально */
@media (max-width: 480px) {
    .top-bar-contacts {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 0.8rem;
    }
    .top-bar-contacts .separator {
        display: none;
    }
}

/* === MAIN HEADER: fluid висота і padding === */
body header.site-header.wp-block-group,
.site-header.wp-block-group,
header.site-header {
    padding: 0 var(--fluid-gutter-lg) !important;
    height: var(--fluid-header-height) !important;
    min-height: var(--fluid-header-height) !important;
    max-height: var(--fluid-header-height) !important;
}

/* Етап B: на мобільному шапка переносить вміст у два рядки
 * (лого зверху, гамбургер+пошук знизу), а жорстка висота 64px їх не вміщала —
 * другий рядок вилазив за межі шапки і накладався на герой-блок.
 * Нижче 769px висоту віддаємо вмісту, лишаючи тільки нижню межу. */
@media (max-width: 768px) {
    body header.site-header.wp-block-group,
    .site-header.wp-block-group,
    header.site-header {
        height: auto !important;
        max-height: none !important;
        min-height: var(--fluid-header-height) !important;
        padding-top: clamp(6px, 1.5vw, 12px) !important;
        padding-bottom: clamp(6px, 1.5vw, 12px) !important;
        align-items: center !important;
        row-gap: clamp(4px, 1.5vw, 10px) !important;
    }

    /* Підконтейнери теж не мають бути прив'язані до висоти шапки */
    .site-header .header-branding,
    .site-header .header-navigation,
    .site-header .header-search {
        height: auto !important;
    }
}

/* Вирівнюємо логотип і висоти підконтейнерів за CSS-змінною.
 *
 * 2026-08-24 fix: звідси прибрано .wp-block-navigation-item__content (саме <a>).
 * Посилання діставало height 62px разом із line-height: normal !important —
 * текст 15px малювався від верхньої межі коробки, тому меню "стріляло" вгору,
 * а золоте підкреслення (bottom: 0) відлітало на 40px під текст.
 * Висоту тримає пункт меню .wp-block-navigation-item, а flex у ньому центрує посилання. */
.header-branding,
.site-header .header-branding,
.wp-block-group.header-branding,
.header-logo,
.header-logo a,
.header-title,
.header-title h1,
.header-title p.site-name,
.header-title a,
.header-navigation,
.site-header .header-navigation,
.wp-block-group.header-navigation,
.main-navigation,
.site-header .main-navigation,
.main-navigation .wp-block-navigation__container,
.site-header .wp-block-navigation__container,
.main-navigation .wp-block-navigation-item,
.site-header .wp-block-navigation-item,
.header-search,
.site-header .header-search {
    height: calc(var(--fluid-header-height) - 15px) !important;
    line-height: normal !important;
}

/* Пошук вирівнюємо по центру по вертикалі — як це було на проді
   (.header-search { display:flex; align-items:center } у header.css v1.0.0).
   Окремим правилом, а не в спільному блоці вище: там ~20 селекторів,
   і flex прилетів би ще й на .header-logo a, .header-title h1 та пункти меню. */
.header-search,
.site-header .header-search {
    display: flex !important;
    align-items: center !important;
}

.header-logo img {
    max-height: var(--fluid-header-logo) !important;
    height: var(--fluid-header-logo) !important;
}

/* Назва сайту: fluid font-size */
.header-title a {
    font-size: clamp(1rem, 1vw + 0.75rem, 1.75rem) !important;
}

/* Меню: відстані і шрифт fluid */
.main-navigation .wp-block-navigation__container,
.site-header .wp-block-navigation__container {
    gap: clamp(12px, 2vw, 30px) !important;
}

.header-navigation,
.site-header .header-navigation,
.wp-block-group.header-navigation {
    gap: clamp(12px, 2vw, 30px) !important;
}

/* Мобільний оверлей: знімаємо з меню фіксовану висоту шапки.
 *
 * 2026-08-24 fix: оверлей рендериться всередині .site-header, тому спільний блок
 * висот вище чіпляв і його список. Список вертикальний, з flex-wrap — у 49px
 * влазив рівно один пункт, і «Блог», «Про нас», «Контакти» вигортало колонками
 * за межі екрана (x = 372, 725, 1078 при ширині 390). Видно було лише «Головна».
 *
 * Блок стоїть саме тут, ПІСЛЯ спільного: обидва з !important і однаковою
 * специфічністю, тому виграє той, що нижче у файлі. */
@media (max-width: 768px) {
    .site-header .main-navigation,
    .main-navigation .wp-block-navigation__container,
    .site-header .wp-block-navigation__container,
    .main-navigation .wp-block-navigation-item,
    .site-header .wp-block-navigation-item {
        height: auto !important;
    }
}

@media (min-width: 769px) {
    .header-navigation .wp-block-navigation-item__content,
    .header-navigation .wp-block-navigation-item a,
    .main-navigation .wp-block-navigation-item__content,
    .main-navigation .wp-block-navigation-item a {
        font-size: clamp(0.85rem, 0.4vw + 0.75rem, 1.0625rem) !important;
    }
}

/* === КОНТЕНТНІ ОБЛАСТІ: fluid padding === */
.site-content-wrapper,
.main-column,
.content-block {
    padding-left: var(--fluid-gutter);
    padding-right: var(--fluid-gutter);
}

/* На широких екранах (≥ 1600px / 2K / 4K / 30"):
   обмежуємо ширину content-block, щоб рядки не були занадто широкі для читання.
   Оптимальна ширина рядка для читання — 50-80 символів. */
@media (min-width: 1600px) {
    .main-column .content-block,
    .main-column > .content-block,
    .content-block {
        max-width: 75ch;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 2400px) {
    .main-column .content-block,
    .content-block {
        max-width: 80ch;
    }
}

/* === ХАМБУРГЕР-МЕНЮ: розмір кнопки fluid === */
@media (max-width: 768px) {
    .wp-block-navigation__responsive-container-open {
        padding: clamp(6px, 1.5vw, 10px) clamp(10px, 2.5vw, 14px) !important;
    }
    .wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation__responsive-container-close svg {
        width: clamp(20px, 4vw, 28px) !important;
        height: clamp(20px, 4vw, 28px) !important;
    }
}

/* === Картки постів: fluid padding і gap === */
.wp-block-post-template,
.wp-block-query .wp-block-post-template {
    gap: var(--fluid-gap);
}

.wp-block-post {
    padding: var(--fluid-gutter);
    border-radius: var(--fluid-radius);
}

/* === FOOTER: fluid padding === */
.wp-block-template-part footer,
footer.wp-block-template-part {
    padding: clamp(1rem, 3vw, 3rem) var(--fluid-gutter-lg);
}

/* === FORM ELEMENTS (CF7): fluid sizes === */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
    font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.125rem);
    padding: clamp(8px, 1.2vw, 14px) clamp(10px, 1.5vw, 16px);
}

.wpcf7-submit {
    font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.125rem);
    padding: clamp(10px, 1.5vw, 16px) clamp(20px, 3vw, 36px);
}

/* === БУЛЬШІ ЕКРАНИ (≥ 1920px FullHD, 2K, 4K, 5K) === */
/* На 27"-30" моніторах підвищуємо line-height для комфорту читання */
@media (min-width: 1920px) {
    body {
        line-height: 1.75;
    }
}

@media (min-width: 2400px) {
    body {
        line-height: 1.8;
    }
}

/* === АВТОМАТИЧНЕ HiDPI/Retina === */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Іконки/тонкі межі — трохи товщі для читабельності */
    .wpcf7-submit,
    .header-top-bar,
    .top-bar-link {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* === ПІДТРИМКА ULTRA-WIDE МОНІТОРІВ (3440x1440, 5120x1440) === */
@media (min-width: 3000px) {
    /* Не дозволяємо контенту розтікатися на всю ширину ultrawide */
    .site-content-wrapper {
        max-width: 2400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* === CONTAINER QUERIES для блоків (WP 6.9 supported) === */
/* Якщо браузер підтримує @container — ще точніша адаптація */
@supports (container-type: inline-size) {
    .wp-block-query {
        container-type: inline-size;
    }
    
    /* Картки постів: при ширині блоку < 600px — одна колонка */
    @container (max-width: 600px) {
        .wp-block-post-template.is-layout-grid {
            grid-template-columns: 1fr !important;
        }
    }
}

}