/* ============================================
   МАКЕТ СТОРІНКИ — компонент структури 2.0
   ============================================

   Етап E (2026-08-24): перенесено з custom.css (рядки 3-254).
   Тришпальтова структура: бічні смуги 15% + контент 70%, обгортка,
   базові стилі body і content-block.

   Знято 67 !important. Це фундамент, тому перевірено окремо ретельно:
   геометрія всіх трьох колонок на 1440 і 390.
   ============================================ */

/* ============================================
   ПРАВИЛЬНА СТРУКТУРА МАКЕТУ
   ============================================
   
   Шапка: |═══════════ 100% ширини ═══════════|
   Контент: |15% фон | 70% текст | 15% фон|
   Підвал: |═══════════ 100% ширини ═══════════|
*/

/* --- BODY: Фіксуємо базу + типографіка --- */
/* Google Fonts завантажуються через PHP (preload) для кращої продуктивності */

body {
    margin: 0;
    padding: 0;
    background-color: #111;
    color: #333;

    /* Типографіку body задає theme.json:
     *   styles.typography.fontFamily = montserrat
     *   styles.typography.fontSize   = var(--wp--preset--font-size--medium)  (fluid)
     *   styles.typography.lineHeight = 1.7
     *
     * Фіксовані `font-size: 16px` і `font-family: Montserrat` тут прибрано.
     * Поки файл був у @layer, вони програвали global-styles і fluid-розмір
     * працював (17.5px на 1440). Поза шарами вони почали вигравати і зафіксували
     * 16px — а за ними поїхали ВСІ відступи, задані в em: padding 2.5em
     * перетворився з 43.75px на 40px по всьому сайту. */
}

/* Заголовки — Playfair Display.
 *
 * Етап E (2026-08-24): правило ВИДАЛЕНО, шрифт заголовків тепер задає theme.json:
 *   styles.elements.h1…h6.typography.fontFamily = playfair
 *   styles.blocks.core/site-title                = playfair
 * Це працює НАДІЙНІШЕ за це правило: theme.json генерує global-styles БЕЗ @layer,
 * а весь CSS теми лежить у шарах, тобто програє нешарованим стилям. Саме тому тут
 * і стояв — він компенсував програш у каскаді.
 *
 * .post-card-title і .hero-title окремо не потрібні: перший це h3, другий — h1.
 * .wp-block-site-title у футері тепер <p>, тому для нього доданий core/site-title.
 */

/* --- SCROLLBAR (Кастомна смуга прокрутки) --- */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px; /* Ширина скролбара */
}

::-webkit-scrollbar-track {
    background: #1a1a1a; /* Фон трека */
}

::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--accent); /* Колір повзунка (золотий) */
    border-radius: 5px; /* Закруглення */
    border: 2px solid #1a1a1a; /* Відступ від країв трека */
}

::-webkit-scrollbar-thumb:hover {
    background: #f4d03f; /* Світліший золотий при наведенні */
}

/* Firefox та сучасні браузери */
@supports (scrollbar-color: auto) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--wp--preset--color--accent) #1a1a1a;
    }
}

/* --- ДОСТУПНІСТЬ: Skip Link --- */
.skip-link,
.skip-link.screen-reader-text {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: 0;
}

.skip-link:focus,
.skip-link:focus-visible,
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999999;
    width: auto;
    height: auto;
    padding: 15px 25px;
    margin: 0;
    background-color: var(--wp--preset--color--accent);
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    clip: auto;
    clip-path: none;
    overflow: visible;
    white-space: normal;
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* --- ШАПКА: На всю ширину з чорним фоном --- */
.site-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: padding 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    opacity: 1;
    
    background-color: #000000;
    background-image: none;
    
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.site-header .wp-block-site-logo img,
.site-header .wp-block-site-title {
    transition: transform 0.3s ease;
    transform: scale(1);
    transform-origin: left center;
}

.site-header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- ЦЕНТРАЛЬНА ЧАСТИНА: 3 колонки --- */
.site-content-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    min-height: calc(100vh - 200px);
    margin: 0;
    padding: 0;

    /* Етап B: прибираємо горизонтальний скрол.
     * Колонки задані як 15% + 70% + 15% = рівно 100%, а WordPress для flex-групи
     * додає gap: var(--wp--style--block-gap) = 24px. Два проміжки давали +48px,
     * і через justify-content:center рядок вилазив по -24px з кожного боку —
     * горизонтальний скрол був на ВСІХ ширинах, не тільки на мобільному. */
    gap: 0;
}

/* Перебиваємо можливі inline стилі WordPress */
.site-content-wrapper.wp-block-group {
    max-width: 100%;
}

/* БІЧНІ КОЛОНКИ: 15% з юридичним патерном
 *
 * Етап C (2026-08-24): растровий фон замінено на векторну плитку.
 * Було: unnamed.jpg 1024×1024, 469 КБ (+168 КБ WebP), показувався стиснутим
 *       удвічі до 512px, з JPEG-дзвоном навколо золотих ліній; стик при повторі
 *       був у півтора раза помітніший за перехід усередині плитки.
 * Стало: pattern-legal.svg — 4.5 КБ, різкий на будь-якій щільності пікселів,
 *        математично безшовний.
 *
 * Патерн винесено на ::before, щоб яскравість регулювалась однією змінною:
 * з растром це було неможливо — прозорість зашита в пікселі. */
.left-sidebar,
.right-sidebar {
    /* Етап C/D (2026-08-24): яскравість підібрано під новий зміст сайдбарів.
     *
     * 0.55 було значенням для порожніх декоративних панелей — і навіть там
     * патерн читався як суцільна стіна золотих іконок. Тепер ліворуч зміст
     * статті, праворуч CTA, і на 0.55 текст доводилось вичитувати крізь
     * малюнок. 0.22 лишає фактуру впізнаваною, але вона перестає конкурувати
     * з тим, що поверх неї. */
    --pattern-opacity: 0.22;
    --pattern-size: 320px;

    background-color: #111;
    position: relative;

    /* Етап C/D: `overflow: hidden` прибрано.
     * Він робив сайдбар скрол-контейнером, і position: sticky у змісті липнув
     * до нього, а не до в'юпорта — TOC їхав угору разом зі сторінкою.
     * Клацати тут не було чого: патерн на ::before має inset: 0, тобто рівно
     * розмір самого сайдбара, і за межі не виходив. */
}

/* Ширини — лише десктоп.
 *
 * Етап C/D (2026-08-24): сайдбари перестали бути декором. Ліворуч — зміст
 * статті, праворуч — CTA. Тому нижче 993px вони більше не ховаються
 * (`display: none` прибрано з components/card.css), а перебудовуються
 * у звичайні блоки на всю ширину: лівий стає згорнутим змістом НАД статтею,
 * правий — банером ПІД нею. Порядок у DOM (лівий → main → правий) саме такий,
 * тому нічого переставляти не треба.
 *
 * Патерн і чорна підкладка при цьому знімаються: на вузькому екрані це були б
 * дві темні смуги впоперек сторінки, а не бічні поля. */
@media (min-width: 993px) {
    .left-sidebar,
    .right-sidebar {
        flex-basis: 15%;
        flex-shrink: 0;
        flex-grow: 0;
        width: 15%;
        min-width: 15%;
        max-width: 15%;
    }
}

@media (max-width: 992px) {
    /* Контейнер сторінки — flex із flexWrap: nowrap (задано в розмітці блока).
     * Без переносу сайдбари не отримують власного рядка, а просто стискаються
     * до нуля: flex-basis: 100% при nowrap програє flex-shrink. Тому спершу
     * дозволяємо перенос, і лише тоді ширини мають сенс.
     *
     * `.wp-block-group.site-content-wrapper` — 0,2,0 проти 0,1,0 у службового
     * класу .wp-container-N, який генерує ядро. Виграємо специфічністю,
     * без !important. */
    .site-content-wrapper,
    .wp-block-group.site-content-wrapper {
        flex-wrap: wrap;

        /* Рядки мають бути заввишки зі свій вміст. При align-content: normal
         * (тобто stretch) вільна висота розподіляється між рядками, і в парі
         * з min-height: 100% у .main-column це давало вироджений результат:
         * центральна колонка забирала всю висоту контейнера, а рядки сайдбарів
         * отримували 0. Зміст при цьому нікуди не зникав — він малювався
         * поверх початку статті. */
        align-content: flex-start;
    }

    .left-sidebar,
    .right-sidebar {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
        background-color: transparent;
        overflow: visible;
    }

    .left-sidebar::before,
    .right-sidebar::before {
        display: none;
    }

    /* Порожній сайдбар не повинен займати місце (наприклад, коли в статті
     * менше трьох заголовків і зміст не виводиться взагалі). */
    .left-sidebar:empty,
    .right-sidebar:empty {
        display: none;
    }
}

.left-sidebar::before,
.right-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 2026-08-30: шлях відносний, а не /wp-content/themes/legalblockfsepro/…
       Абсолютний вказував на конкретну теку: варто темі опинитись у теці
       з іншою назвою — і візерунок по боках зникав, бо файл шукався там,
       де його вже немає. Відносний шлях рахується від цього CSS-файла,
       тож працює за будь-якої назви теки; при інлайні стилів WordPress
       сам перепише його на абсолютний (_wp_normalize_relative_css_links). */
    background-image: url('../../images/pattern-legal.svg');
    background-repeat: repeat;
    background-position: 0 0;
    background-size: var(--pattern-size) var(--pattern-size);
    opacity: var(--pattern-opacity);
    pointer-events: none;
}

/* На широких екранах патерн приглушуємо і збільшуємо крок:
   смуги стають ширші, і на повній яскравості вони починають конкурувати з текстом. */
@media (min-width: 1600px) {
    .left-sidebar,
    .right-sidebar {
        --pattern-opacity: 0.14;
        --pattern-size: 360px;
    }
}

/* ============================================
   CTA У ПРАВОМУ САЙДБАРІ
   ============================================

   Етап C/D (2026-08-24). Патерн legalblock/cta-banner малювався під повну
   ширину сторінки, і в колонці 214px він розсипався: власний падінг 52.5px
   з кожного боку лишав 109px на вміст, а внутрішні flex-елементи з
   min-width: auto стискатись відмовлялись і тримали 295px. Банер вилазив
   на 135px за правий край екрана й обрізався.

   Правила навмисно обмежені `.right-sidebar` — сам патерн на всю ширину
   сторінки лишається таким, як був. */

@media (min-width: 993px) {
    .right-sidebar .cta-banner-block {
        position: sticky;
        top: calc(var(--fluid-header-height, 90px) + 1.5rem);
        z-index: 1;
    }

    .right-sidebar .cta-banner-inner {
        padding: 1.4rem 1.1rem;
    }

    /* min-width: auto — дефолт для flex/grid-елементів, і саме він не давав
     * вмісту стиснутись до ширини колонки. */
    .right-sidebar .cta-banner-inner,
    .right-sidebar .cta-banner-inner > *,
    .right-sidebar .wp-block-buttons,
    .right-sidebar .wp-block-button {
        min-width: 0;
    }

    .right-sidebar .cta-banner-title {
        font-size: 1.2rem;
        line-height: 1.25;
    }

    .right-sidebar .cta-banner-text {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* Кнопка на всю ширину колонки: у 214px «пігулка» з падінгом 43px
     * не має шансів, а розтягнута на всю ширину читається як дія. */
    .right-sidebar .wp-block-buttons,
    .right-sidebar .wp-block-button,
    .right-sidebar .wp-block-button__link {
        width: 100%;
    }

    /* Селектор навмисно з `.cta-banner-button` — це 0,3,0.
     * Коротший `.right-sidebar .wp-block-button__link` дає 0,2,0, рівно стільки ж,
     * скільки `.cta-banner-button .wp-block-button__link` у components/button.css,
     * а той файл підключається пізніше за layout.css і при рівній специфічності
     * вигравав порядком. */
    .right-sidebar .cta-banner-button .wp-block-button__link,
    .right-sidebar .wp-block-button .wp-block-button__link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        text-align: center;
        font-size: 0.875rem;

        /* Кнопки теми — «пігулки» з nowrap, розраховані на широкий банер.
         * У колонці 214px підпис «Зв'яжіться з нами» через nowrap виїжджав
         * за межі кнопки й обрізався. Дозволяємо перенос. */
        white-space: normal;
        line-height: 1.3;
    }
}

/* ЦЕНТРАЛЬНА КОЛОНКА: 70% з контентом.
 *
 * Етап E (2026-08-24): ширини обгорнуто в @media (min-width: 993px).
 * Раніше `max-width: 70%` діяв на ВСІХ ширинах. Мобільне правило
 * (100% від 992px і нижче) лежить у components/card.css без —
 * і програвало, бо шароване б'є нешароване звичайне.
 * Наслідок був відчутний: на 390px колонка лишалась 266px замість 380,
 * а форма контактів стискалась до 104px завширшки.
 *
 * Фон, тінь і padding лишаються поза медіа-запитом — вони потрібні на всіх ширинах. */
.main-column,
main.main-column,
.wp-block-group.main-column {
    /* Етап C/D: тепла нейтраль замість холодного #f0f4f8.
     * Картка зони читання — #faf9f7 (paper). Синювата підкладка під теплим
     * папером читалась як розсинхрон двох різних гам; тепер це «стіл» під
     * «аркушем», обидва в теплій шкалі, різниця світлоти лишається достатньою,
     * щоб межа картки читалась без підсилення тіні. */
    background-color: #ece8e0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    z-index: 10;

    /* Етап C/D: `min-height: 100%` переїхав у десктопний медіа-запит нижче.
     *
     * Він потрібен рівно для одного — щоб три колонки поруч мали однакову
     * висоту. У перенесеній мобільній розкладці це перетворювалось на вимогу
     * «займи всю висоту контейнера»: центральна колонка забирала все, а рядки
     * сайдбарів отримували нульову висоту, і зміст малювався поверх статті. */

    /* Етап C/D (2026-08-24): падінг зведено в одне fluid-правило.
     *
     * Було три оголошення в трьох медіа-запитах:
     *   ≥993px  padding: 2.5em   (тут)
     *   ≤992px  padding: 1.5em   (card.css)
     *   ≤576px  padding: 1em     (card.css) — і воно НІКОЛИ не спрацьовувало:
     *           селектор `.main-column` має 0,1,0, а блок ≤992px містить
     *           `.wp-block-group.main-column` з 0,2,0. Специфічність вища,
     *           тож на 390px діяли 1.5em, а не 1em.
     *
     * clamp прив'язує падінг до в'юпорта і робить сходинки непотрібними:
     * 390px → 11.7px,  768px → 23px,  1440px → 43.2px (≈ старі 43.75px). */
    padding: clamp(10px, 3vw, 44px);
}

@media (min-width: 993px) {
    .main-column,
    main.main-column,
    .wp-block-group.main-column {
        /* Однакова висота трьох колонок — лише там, де вони справді поруч */
        min-height: 100%;

        flex-basis: 70%;
        flex-shrink: 0;
        flex-grow: 0;
        width: 70%;
        min-width: 70%;
        max-width: 70%;
    }
}