/* ==========================================================================
   Шаблон wz — CSS поверх Bootstrap 5.3.8.
   Кольори, шрифти, радіуси, тіні — ЛИШЕ через var(--…) теми (лист Themes)
   або color-mix() від них. Жодного #hex / rgb() / hsl() літералом.
   ========================================================================== */

/* ============================== BASE — контракт, не видаляти ===============
   Функціональні правила, на які спираються білдер і sc-shortcodes.js.
   Вигляд міняй у секції DESIGN нижче. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
[data-theme-mode="dark"] { color-scheme: dark; }
[data-theme-mode="light"] { color-scheme: light; }
img { max-width: 100%; height: auto; }
/* Довге слово чи URL у тексті не має розпирати сторінку на телефоні. */
body { overflow-wrap: break-word; }

:root {
    --bs-body-bg: var(--body-bg);
    --bs-body-color: var(--text-color);
    --bs-body-font-family: var(--body-font-family);
    --bs-body-font-size: var(--body-font-size);
    --bs-body-font-weight: var(--body-weight);
    --bs-body-line-height: var(--body-line-height);
    --bs-heading-color: var(--heading-color);
    --bs-secondary-color: var(--muted-text-color);
    --bs-border-color: var(--border-color);
    --bs-border-radius: var(--global-radius);
    --bs-emphasis-color: var(--heading-color);
    --bs-link-color-rgb: inherit;
}

@media (min-width: 1200px) {
    .container { max-width: var(--container-width); }
}

:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Логотип: текстова заглушка, коли картинка не завантажилась (клас
   .is-missing ставить sc-shortcodes.js). Без цих правил назва сайту
   показувалась би поруч із логотипом завжди. */
.site-logo-text--fallback { display: none; }
.site-logo.is-missing .site-logo-image { display: none; }
.site-logo.is-missing .site-logo-text--fallback { display: block; }
.site-logo-image { display: block; width: auto; }
.footer-logo { display: block; width: auto; }
.footer-logo-wrap { display: block; }
.footer-logo-text { display: none; }
.footer-logo-wrap.is-missing .footer-logo { display: none; }
.footer-logo-wrap.is-missing .footer-logo-text { display: block; }

/* Меню, які генерує білдер: <nav class="header-nav"><ul><li><a>… */
.header-nav ul, .footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-menu-title { display: block; }     /* це span, а не h2 */
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.header-cta { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; }

/* Проза контенту — лише елементи БЕЗ класу: у блоків шорткодів (.sc-*) свої
   класи й відступи, і правило з вищою специфічністю зламало б їх. */
.content-section p:not([class]),
.content-section ul:not([class]),
.content-section ol:not([class]) { margin-bottom: 1.1em; }
.content-section li:not([class]) { margin-bottom: .4em; }

/* ============================== DESIGN — Win2Chill ====================== */

body {
    background-color: var(--body-bg);
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
}
h1, h2, h3, h4 { font-family: var(--heading-font-family); font-weight: var(--heading-weight); color: var(--heading-color); }
h1 { font-size: clamp(28px, 6vw, var(--h1-size)); line-height: 1.12; }
h2 { font-size: clamp(22px, 4.2vw, var(--h2-size)); line-height: 1.2; }
h3 { font-size: clamp(18px, 3.4vw, var(--h3-size)); line-height: 1.3; }
a { color: var(--link-color); transition: color var(--transition-speed) ease; }
a:hover { color: var(--link-hover-color); }

.wz-header {
    position: sticky; top: 0; z-index: 1030;
    background-color: var(--header-bg);
    color: var(--header-text);
    border-bottom: 1px solid var(--header-border);
}
.wz-navbar { min-height: var(--header-height); flex-wrap: wrap; gap: .5rem; }
.wz-logo { color: var(--header-text); margin-right: 1rem; }
.site-logo-image { max-height: calc(var(--header-height) - 30px); }
.site-logo-text { font-family: var(--heading-font-family); font-weight: var(--heading-weight); font-size: 1.35rem; }

.wz-burger { border: 1px solid var(--header-border); border-radius: var(--global-radius); padding: .5rem .6rem; margin-left: .25rem; }
.wz-burger:focus { box-shadow: none; }
.wz-burger__bar { display: block; width: 22px; height: 2px; margin: 4px 0; background-color: var(--header-link); }

.header-nav ul { display: flex; gap: .3rem; }
.header-nav a { display: block; padding: .5rem .85rem; color: var(--header-link); text-decoration: none; font-weight: 600; border-radius: var(--global-radius); }
.header-nav a:hover, .header-nav a[aria-current="page"] { color: var(--header-link-hover); }
.header-cta {
    padding: .6rem 1.25rem;
    border: var(--button-border);
    border-radius: var(--button-radius);
    background-color: var(--button-bg);
    color: var(--button-text);
    font-weight: 700;
    box-shadow: var(--button-shadow);
    transition: background-color var(--transition-speed) ease;
}
.header-cta:hover { background-color: var(--button-hover-bg); color: var(--button-hover-text); }
.wz-navbar > .header-cta { margin-left: auto; }

.breadcrumbs { margin-bottom: .75rem; font-size: .88rem; color: var(--muted-text-color); }
.breadcrumbs li + li::before { content: "›"; margin: 0 .5rem; color: var(--muted-text-color); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--link-hover-color); }
.wz-title { margin: 0; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.wz-decor { display: block; width: 120px; height: 120px; object-fit: contain; }

.wz-article > :first-child { margin-top: 0; }
.wz-article > :last-child { margin-bottom: 0; }
.wz-article > h2, .wz-article > h3 { margin-top: 1.8em; margin-bottom: .65em; }
.wz-article > h2:first-child { margin-top: 0; }
.wz-article > h2, .wz-article > h3, .wz-article > p,
.wz-article > ul, .wz-article > ol { max-width: var(--content-max-width); }
.wz-article > p:first-child { font-size: 1.08em; }
.content-section a:not([class]) { text-underline-offset: 3px; }
.content-section strong { color: var(--heading-color); }

.wz-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    border-top: 1px solid var(--footer-border);
    padding-block: calc(var(--section-spacing) * .7) 1.5rem;
}
.wz-footer a { color: var(--footer-link); }
.wz-footer a:hover { color: var(--footer-link-hover); }
.wz-footer__top, .wz-footer__cols { --bs-gutter-y: 1.75rem; }
.footer-logo { max-height: 44px; margin-bottom: 1rem; }
.footer-brand-text { color: var(--footer-muted); font-size: .94rem; }
.footer-menu-title { margin-bottom: .8rem; font-family: var(--heading-font-family); font-weight: var(--heading-weight); color: var(--footer-text); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }
.footer-nav ul { display: flex; flex-direction: column; gap: .5rem; }
.footer-nav a { text-decoration: none; }
.footer-contact-email { display: inline-block; margin-top: .4rem; font-size: .94rem; }
.wz-footer__marks { margin-top: 1.75rem; }
.wz-footer__marks .sc-logos__frame { background: transparent; border-color: var(--footer-border); }
.wz-footer__legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--footer-border); color: var(--footer-muted); font-size: .9rem; }
.wz-footer__legal p { margin: 0; }
@media (max-width: 575.98px) {
    .site-header .navbar { column-gap: .5rem; }
    .site-header .site-logo { min-width: 0; margin-right: auto; }
    .site-header .site-logo-image { max-width: 118px; }
    .site-header .header-cta { padding: .45rem .75rem; font-size: .84rem; margin-inline: 0 !important; }
    .site-header .navbar-toggler { padding: .4rem .5rem; margin-left: 0; }
}
@media (max-width: 359.98px) { .site-header .site-logo-image { max-width: 92px; } .site-header .header-cta { padding-inline: .55rem; font-size: .78rem; } }

/* header E: «острівець» з відступом від країв */
.wz-header { background: linear-gradient(var(--body-bg) 55%, transparent); border-bottom: 0; padding-top: 12px; padding-bottom: 12px; }
.wz-navbar { background-color: var(--header-bg); border: 1px solid var(--header-border); border-radius: calc(var(--global-radius) * 2.2); padding: .35rem .85rem; box-shadow: var(--header-shadow); }
@media (min-width: 992px) {
    .wz-nav { margin-left: 1rem; }
    .wz-navbar > .header-cta { order: 3; }
    .wz-nav .header-nav a { padding: .5rem 1rem; border-radius: 999px; }
    .wz-nav .header-nav a:hover, .wz-nav .header-nav a[aria-current="page"] { background-color: var(--header-bg); box-shadow: inset 0 0 0 1px var(--accent-color); }
}
@media (max-width: 991.98px) {
    .header-nav ul { flex-direction: column; }
    .wz-nav { padding-block: .5rem; border-top: 1px solid var(--header-border); }
}

/* шапка H5: картка, що наїжджає на фон */
.wz-hd5 { padding-block: clamp(28px, 5vw, 56px) clamp(64px, 9vw, 110px); background-color: color-mix(in srgb, var(--body-bg) 80%, var(--accent-color)); background-image: linear-gradient(180deg, transparent 40%, var(--body-bg)); }
.wz-hd5__card { position: relative; padding: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 18vw, 220px); border: 1px solid color-mix(in srgb, var(--accent-color) 40%, var(--card-border)); border-radius: calc(var(--card-radius) * 1.4); background-color: var(--card-bg); color: var(--card-text); box-shadow: var(--card-shadow); }
.wz-hd5__card .wz-title { color: var(--card-text); }
.wz-hd5__card .breadcrumbs { color: color-mix(in srgb, var(--card-text) 65%, transparent); }
.wz-hd5__card .wz-decor { position: absolute; right: clamp(12px, 3vw, 40px); top: 50%; transform: translateY(-50%) rotate(-6deg); width: clamp(70px, 13vw, 150px); height: auto; }
.wz-hd5 + .wz-content { margin-top: -56px; position: relative; z-index: 1; }
@media (max-width: 575.98px) { .wz-hd5__card { padding-right: clamp(20px, 4vw, 40px); } .wz-hd5__card .wz-decor { display: none; } }

/* рамка F3: смуга на всю ширину з тонованим фоном */
.wz-content { padding-block: clamp(26px, 4vw, 52px) calc(var(--section-spacing) * 1.1); background-color: var(--content-bg); border-block: 1px solid var(--border-color); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent-color) 70%, transparent), inset 0 -3px 0 color-mix(in srgb, var(--accent-color) 30%, transparent); }
.wz-article { max-width: 960px; margin-inline: auto; }

/* h2: іконка-маркер */
.content-section h2:not([class]) { position: relative; padding-left: 1.5em; }
.content-section h2:not([class])::before { content: ""; position: absolute; left: .1em; top: .32em; width: .7em; height: .7em; background-color: var(--accent-color); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 22%, transparent); }

/* футер d: двоярусний */
.wz-footer__tier1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--footer-border); }
.wz-footer__brandline { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.wz-footer__brandline .footer-logo { margin-bottom: 0; }
.wz-footer__tier1 .wz-footer__marks { margin-top: 0; }
.wz-footer__tier2 { padding-bottom: .5rem; }