/* Тема santekhniky: стиль старого Joomla-сайту (atpl/UIkit) поверх шаблонів service-engine.
   Шрифт Roboto (r-*), текст #48474c, заголовки #333 жирні й великі, кнопки-«пігулки» з градієнтом 100deg,
   широке лого зі знаком сантехніка, герой із градієнтною «пігулкою» та сантехнікою, темний футер.
   Підключається після вбудованих стилів (app.theme.stylesheet). font-display: optional - без перемальовування тексту-LCP після
   підвантаження шрифту (на Joomla-проді це дало PSI 90 -> 99). Без preload шрифтів: у PSI preload + @font-face
   тримає перший кадр (server/_platform/pagespeed-playbook.md). */

@font-face { font-family: 'Roboto Santekhniky'; font-style: normal; font-weight: 400; font-display: optional;
    src: url(fonts/r-regular.woff2) format('woff2'); }
@font-face { font-family: 'Roboto Santekhniky'; font-style: normal; font-weight: 500; font-display: optional;
    src: url(fonts/r-medium.woff2) format('woff2'); }
@font-face { font-family: 'Roboto Santekhniky'; font-style: normal; font-weight: 700; font-display: optional;
    src: url(fonts/r-bold.woff2) format('woff2'); }

body.theme-santekhniky {
    --text: #48474c;
    --muted-text: #5f6268;
    font-family: 'Roboto Santekhniky', Roboto, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #48474c;
    line-height: 1.8;
}

/* Заголовки: як на старому сайті - Roboto Bold, великі, #333 */
body.theme-santekhniky h1,
body.theme-santekhniky h2,
body.theme-santekhniky h3 { font-weight: 700; color: #333; letter-spacing: -.01em; }
/* розмір - лише для заголовка сторінки й заголовків розділів; у картках, FAQ і списках - компактні (власник 11.10: «шрифт завеликий») */
body.theme-santekhniky h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.15; }
body.theme-santekhniky h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); line-height: 1.3; }
body.theme-santekhniky .hero-sub h2 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
body.theme-santekhniky .card h2, body.theme-santekhniky .card h3,
body.theme-santekhniky .grid h2, body.theme-santekhniky .card .card-name { font-size: 1.15rem; line-height: 1.35; margin: 0 0 .6rem; }
body.theme-santekhniky .card h2 a { color: #333; text-decoration: none; }
body.theme-santekhniky .card h2 a:hover { color: #f98111; }
body.theme-santekhniky .block-title { color: #38525f; font-weight: 700; }
body.theme-santekhniky section.block.center > h2:first-child { color: #38525f; }

/* Кнопки: градієнт 100deg #faa125 → #f98011, без важкої тіні */
body.theme-santekhniky .btn {
    background: linear-gradient(100deg, #faa125, #f98011);
    font-weight: 500;
    padding: .65rem 2rem;
    box-shadow: none;
}
body.theme-santekhniky .btn:hover { box-shadow: 0 6px 16px rgba(249, 128, 17, .35); }
body.theme-santekhniky .btn-ghost { font-weight: 500; }

/* Шапка: широке лого (знак + «santekhniky» + слоган у SVG), текстова назва лишається для скрінрідерів */
body.theme-santekhniky .brand .logo { width: auto; height: 52px; }
body.theme-santekhniky .brand .logo img { width: 200px; height: 42px; object-fit: contain; object-position: left center; }
body.theme-santekhniky .brand .name {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.theme-santekhniky .topbar { background: #fff; }
body.theme-santekhniky .topbar a.phone { font-weight: 500; }

/* Меню: Roboto Medium, активний і hover - помаранчевий */
body.theme-santekhniky .navbar nav a { font-weight: 500; color: #48474c; }
body.theme-santekhniky .navbar nav a:hover,
body.theme-santekhniky .navbar nav a[aria-current="page"] { color: #f98111; }
body.theme-santekhniky .lang-switch a { font-weight: 500; }

/* Герой головної: праворуч градієнтна «пігулка» зі сантехнікою (ілюстрація зі старого сайту) */
body.theme-santekhniky .hero:has(> figure.hero-img) { align-items: stretch; }
body.theme-santekhniky .hero-img img { border-radius: 0; }
body.theme-santekhniky .benefit .bico { border-width: 1.5px; }
@media (max-width: 820px) {
    /* на мобільному стара верстка показувала смугу з раковиною і бойлером замість високої «пігулки» */
    body.theme-santekhniky figure.hero-img { flex: 1 1 100%; }
    body.theme-santekhniky figure.hero-img img { content: url(hero-m.webp); max-width: 100%; max-height: 180px; object-fit: contain; margin: 0 auto; }
}

/* Картки й таблиці - тонкі рамки #d5dce3, як у UIkit-версії */
body.theme-santekhniky .card { box-shadow: none; }
body.theme-santekhniky .card h3, body.theme-santekhniky .card .card-name { color: #333; }

/* Футер: темний, як на старому сайті */
body.theme-santekhniky footer.site nav a { font-weight: 500; }

/* «Пігулка» героя обрізається по висоті блоку з текстом (власник 11.10: «щоб не було пропуску»):
   картинка - абсолютно всередині figure, cover від верху; висоту рядка задає текст, не картинка.
   Лічильники (рушій PR #12: ul.hero-stats у figure.hero-img) - білим унизу «пігулки», на чистому градієнті
   (трубу з картинки прибрано). «Пігулка» займає 22.5%-72.5% ширини; предмети - до ~580px висоти при ширині 380. */
@media (min-width: 821px) {
    body.theme-santekhniky .hero:has(> figure.hero-img) { min-height: 820px; }
    body.theme-santekhniky figure.hero-img { flex: 0 0 380px; align-self: stretch; position: relative; overflow: hidden; }
    body.theme-santekhniky figure.hero-img img {
        position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
        object-fit: cover; object-position: center top;
    }
    body.theme-santekhniky .hero-stats {
        position: absolute; left: 22.5%; width: 50%; bottom: 28px; margin: 0;
        flex-direction: column; gap: 1rem; align-items: center;
    }
    body.theme-santekhniky .hero-stats li { min-width: 0; }
    body.theme-santekhniky .hero-stats b { color: #fff; font-size: 2.1rem; font-weight: 700; line-height: 1; }
    body.theme-santekhniky .hero-stats span { color: #fff; font-size: .85rem; font-weight: 500; margin-top: .3rem; }
}
@media (max-width: 820px) {
    /* на телефоні цифри під смугою з сантехнікою, у фірмовому помаранчевому; #d46a00 замість #f98111 - контраст 3,6 на білому
       (великий жирний текст вимагає 3:1, PSI accessibility 11.10.2026) */
    body.theme-santekhniky .hero-stats b { color: #d46a00; }
}

/* Переваги в герої - в один ряд на десктопі (власник 11.10): 5 колонок, іконка над підписом */
@media (min-width: 821px) {
    body.theme-santekhniky .benefits { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
    body.theme-santekhniky .benefit { flex-direction: column; text-align: center; gap: .45rem; font-size: .85rem; }
}

/* Фото послуги/категорії справа від заголовка (div.hero-img): фіксована пропорція 4:3 з обрізкою, щоб вертикальне фото
   (напр. димар) не розтягувало блок і не лишало порожнечу під кнопками (власник 11.10). Головну (figure.hero-img) не чіпає. */
body.theme-santekhniky .hero { align-items: center; }
body.theme-santekhniky div.hero-img { flex: 0 1 460px; align-self: center; }
body.theme-santekhniky div.hero-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* «Читати далі» у відгуках: рушій фарбує var(--accent) (#f98111, контраст 2,6) - текстовий відтінок акценту, PSI 11.10.2026 */
body.theme-santekhniky .review-more { color: var(--accent-ink); }