/* =========================================================================
   STARBRUK — ЄДИНА ТЕМА САЙТУ
   -------------------------------------------------------------------------
   Цей файл підключається ОСТАННІМ на кожній сторінці — після style.css,
   header.css та локальних <style> самої сторінки. Тому саме він задає
   фінальні значення шрифтів і кольорів для всього сайту.

   Ідея: кожна сторінка має власні змінні (--red, --accent, --ink, --body…).
   Тут ми не переписуємо сотні правил, а перевизначаємо САМІ ЗМІННІ —
   і вся сторінка автоматично переходить на спільну палітру й шрифти.

   Кольори взяті прямо з логотипа: чорні блоки + червоний блок.
   ========================================================================= */

/* ---------- 1. Базові токени бренду ---------- */
:root {
    /* Кольори логотипа */
    --sb-black:      #111315;              /* чорні блоки логотипа */
    --sb-ink:        #16181B;              /* заголовки */
    --sb-text:       #464C53;              /* основний текст */
    --sb-muted:      #737B84;              /* другорядний текст, підписи */
    --sb-red:        #E52224;              /* червоний блок логотипа */
    --sb-red-dark:   #C3151A;
    --sb-red-tint:   rgba(229, 34, 36, 0.08);
    --sb-red-soft:   #FDF2F2;

    --sb-line:       #E4E7EA;
    --sb-soft:       #F5F6F8;
    --sb-soft-2:     #EEF0F3;
    --sb-white:      #FFFFFF;

    /* Шрифти: Montserrat — заголовки, Inter — текст. Більше жодних інших. */
    --sb-head: 'Montserrat', 'Inter', system-ui, sans-serif;
    --sb-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --sb-container: 1240px;
}

/* ---------- 2. Мапінг змінних окремих сторінок на бренд ---------- */

/* css/style.css — головна та картки товарів */
:root, html, body {
    --color-black:   var(--sb-ink);
    --color-dark:    var(--sb-black);
    --color-accent:  var(--sb-red);
    --color-gray:    var(--sb-soft);
    --color-white:   var(--sb-white);
    --color-border:  var(--sb-line);
    --color-text:    var(--sb-text);
    --color-muted:   var(--sb-muted);
    --font-main:     var(--sb-body);
    --font-heading:  var(--sb-head);
    --container-width: var(--sb-container);

    /* porada.html + catalog.html (обидві оголошують токени на :root) */
    --ink:       var(--sb-ink);
    --ink-soft:  var(--sb-text);
    --ink2:      var(--sb-text);
    --ink3:      var(--sb-muted);
    --text:      var(--sb-text);
    --muted:     var(--sb-muted);
    --red:       var(--sb-red);
    --red-dark:  var(--sb-red-dark);
    --red-dk:    var(--sb-red-dark);
    --red-tint:  var(--sb-red-tint);
    --red-soft:  var(--sb-red-soft);
    --line:      var(--sb-line);
    --soft:      var(--sb-soft);
    --bg2:       var(--sb-soft-2);
    --white:     var(--sb-white);
    --font-head: var(--sb-head);
    --container: var(--sb-container);
}

/* services.html — токени оголошені на .services-page */
.services-page {
    --accent:      var(--sb-red);
    --accent-dark: var(--sb-red-dark);
    --accent-soft: var(--sb-red-tint);
    --ink:         var(--sb-ink);
    --text:        var(--sb-text);
    --muted:       var(--sb-muted);
    --bg:          var(--sb-white);
    --bg-soft:     var(--sb-soft);
    --bg-tile:     var(--sb-soft-2);
    --line:        var(--sb-line);
    /* Manrope більше не використовуємо — заголовки скрізь Montserrat */
    --disp:        var(--sb-head);
    --body:        var(--sb-body);
}

/* contacts.html — токени оголошені на .ct-page */
.ct-page {
    --ct-red:   var(--sb-red);
    --ct-dark:  var(--sb-ink);
    --ct-text:  var(--sb-text);
    --ct-muted: var(--sb-muted);
    --ct-line:  var(--sb-line);
    --ct-gray:  var(--sb-soft);
    font-family: var(--sb-body);
}

/* ---------- 3. Однакове відмальовування тексту на всіх сторінках ---------- */
/* Раніше згладжування було ввімкнене лише на porada.html — через це той самий
   Inter виглядав там тоншим, ніж на інших сторінках. Тепер усюди однаково. */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: var(--sb-body);
    font-feature-settings: 'kern' 1;
}

/* Шрифт наслідується від body — тому окремо задаємо лише те,
   що браузер за замовчуванням НЕ успадковує (елементи форм). */
input, textarea, select, button {
    font-family: var(--sb-body);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sb-head);
    letter-spacing: -0.02em;
}
/* Іконки Font Awesome не можна перебивати текстовим шрифтом */
.fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-brands {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
}

/* ---------- 4. Спільна типографіка перших екранів ---------- */
/* Заголовок H1 — однаковий на «Каталозі», «Послугах», «Контактах», «Порадах» */
.ch-hero h1,
.sv-hero__title,
.ct-hero__title,
.hero__title {
    font-family: var(--sb-head);
    font-weight: 800;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--sb-ink);
    margin: 0 0 22px;
}

/* Підзаголовок-лід — той самий шрифт, розмір, інтерліньяж і колір скрізь */
.ch-hero__sub,
.sv-hero__text,
.ct-hero__text,
.hero__lead {
    font-family: var(--sb-body);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--sb-muted);
    max-width: 600px;
    margin: 0 0 32px;
}

/* Маленький напис-«очко» над заголовком */
.ch-hero__label,
.sv-eyebrow,
.ct-eyebrow,
.eyebrow {
    font-family: var(--sb-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-red);
}

/* Заголовок секції — однаковий на всіх сторінках
   (було 36px на головній, 40px на послугах і контактах, 42px на порадах) */
.section-title,
.sv-h2,
.ct-h2 {
    font-family: var(--sb-head);
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--sb-ink);
}

/* ---------- 5. Кнопки: один вигляд на всьому сайті ---------- */
/* Було: .btn (радіус 8, 700), .sv-btn (радіус 6, 600, без капсу),
   .ct-btn (радіус 6, 600, без капсу). Стало — однаково скрізь. */
.btn,
.sv-btn,
.ct-btn {
    font-family: var(--sb-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    white-space: nowrap;
}

/* ---------- 6. Перший екран головної (слайдер на фото) ---------- */
/* Той самий масштаб, що й на решті сторінок, але світлим по фото */
.promotion__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sb-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sb-red);
    opacity: 1;
    margin-bottom: 18px;
}
.promotion__label::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--sb-red);
    border-radius: 2px;
}
.promotion__title {
    font-family: var(--sb-head);
    font-weight: 800;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0 0 22px;
}
.promotion__text {
    font-family: var(--sb-body);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    opacity: 1;
    max-width: 600px;
    margin: 0 0 32px;
}

/* ---------- 7. Підвал: один вигляд на всьому сайті ---------- */
/* Було: #222 у style.css і #101820 на porada.html, різні розміри заголовків. */
.footer {
    background-color: var(--sb-ink);
    color: #fff;
    padding-top: 76px;
}
.footer__inner {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 56px;
    border-bottom: none;
}
.footer__logo {
    font-family: var(--sb-head);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    display: inline-block;
    margin-bottom: 18px;
}
.footer__desc {
    font-family: var(--sb-body);
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
    max-width: 330px;
}
/* Посилання «Робота і співпраця» в першій колонці підвалу.
   Головна точка входу в блок #ct-coop на contacts.html — стоїть на всіх
   31 сторінці, бо саме в підвалі шукають роботу й партнерство. */
.footer__coop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding: 10px 16px;
    font-family: var(--sb-body);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #FFFFFF;
    background: rgba(229, 34, 36, 0.14);
    border: 1px solid rgba(229, 34, 36, 0.42);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.footer__coop i {
    font-size: 12px;
    color: var(--sb-red);
    transition: transform 0.25s ease, color 0.25s ease;
}
@media (hover: hover) {
    .footer__coop:hover {
        background: var(--sb-red);
        border-color: var(--sb-red);
        color: #FFFFFF;
    }
    .footer__coop:hover i { color: #FFFFFF; transform: translateX(3px); }
}

.footer__title {
    font-family: var(--sb-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 20px;
}
.footer__list li { margin-bottom: 13px; }
.footer__list a,
.footer__list li,
.contacts-list li,
.contacts-list a {
    font-family: var(--sb-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}
.footer__list a:hover,
.contacts-list a:hover { color: var(--sb-red); }
.contacts-list i { color: var(--sb-red); }
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 22px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}

/* Підвал на телефоні — в одну колонку.
   Правило з style.css перекривалось цим файлом (він підключається останнім),
   через що на телефоні футер лишався у 3 колонки і сторінка їхала вбік. */
@media (max-width: 992px) {
    .footer__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .footer__desc { max-width: none; }
}

/* ---------- 8. Дрібні вирівнювання ---------- */
/* Акцентне слово в заголовках — скрізь червоне з логотипа */
.accent,
.sv-hero__title span,
.hero__title .accent,
.ct-hero__title span {
    color: var(--sb-red);
}

::selection { background: var(--sb-red); color: #fff; }

/* Плавна прокрутка до якорів з урахуванням липкого хедера */
html { scroll-behavior: smooth; }