/* ==========================================================================
   assets/css/global.css — ОБОЛОЧКА САЙТА
   Reset, переменные (цвета/шрифты), типографика, кнопки, хлебные крошки,
   стили header и footer. Стили конкретных страниц — в их собственных style.css.
   ========================================================================== */

/* --- Шрифт сайта: Montserrat, файлы свои (самохостинг) ---------------------
   Montserrat — шрифт макета, лежит в assets/fonts/montserrat/ и подключается
   ниже. Внешние сервисы (Google Fonts и т.п.) не используются: страница не
   ждёт чужой сервер и не грузит лишние подмножества.
   Файлы — переменные (variable), одно начертание покрывает вес 100–900,
   поэтому в @font-face стоит диапазон font-weight: 100 900.
   Подмножества по содержимому сайта: cyrillic — русский текст, latin —
   латиница, цифры и знаки « » – — … , latin-ext — знак ₽ (U+20BD) в ценах.
   Фолбэк Roboto / Open Sans / PT Sans / Segoe UI сработает только там, где
   woff2 не загрузился (например, очень старый браузер). */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/montserrat/montserrat-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/montserrat/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/montserrat/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --color-bg: #F6F1E8;
    --color-header-bg: #FBF8F2;
    --color-surface: #FFFFFF;
    --color-text: #3B3A36;
    --color-text-soft: #6B6961;
    --color-border: #E9DFCE;
    --color-border-soft: #EFE6D8;
    --color-gold: #C6A969;
    --color-gold-light: #E9D6A6;
    --color-graphite: #3F3E3A;
    /* Подвал по макету — светлая полоса в тон странице: заголовки колонок
       золотые, ссылки и текст тёмные. Прежний тёмный подвал (#33322E) больше
       не используется; этот же цвет остался только у имени специалиста на
       главной (style.css задаёт его числом, а не токеном). */
    --color-footer-bg: #F6F1E8;
    --color-footer-text: #3B3A36;
    --color-footer-link: #3B3A36;

    /* Шрифт сайта один — Montserrat, системные стеки только как фолбэк:
       и тексты, и заголовки. Переменная --font-display оставлена, потому что
       на неё уже ссылаются заголовки h1–h3 и блок специалиста на главной. */
    --font-display: Montserrat, Roboto, "Open Sans", "PT Sans", "Segoe UI", sans-serif;
    --font-ui: Montserrat, Roboto, "Open Sans", "PT Sans", "Segoe UI", sans-serif;

    --radius-card: 16px;
    --radius-btn: 10px;
    --shadow-card: 0 4px 20px rgba(63, 62, 58, .08);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* --- Типографика --- */
/* Заголовки не должны растягивать страницу: длинное слово
   («Инсулинорезистентность…») в узкой колонке шире экрана, поэтому переносим
   его по слогам, а если браузер так не умеет — рвём по break-word (то же
   правило, что у заголовков карточек блога в style.css). Оба свойства
   включаются только тогда, когда слово не влезает в строку. */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 .5em;
    color: var(--color-graphite);
    overflow-wrap: break-word;
    hyphens: auto;
}
h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.01em; }
h2 { font-size: clamp(24px, 2.6vw, 34px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

/* --- Каркас --- */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.section--surface { background: var(--color-surface); }
.section__title { margin-bottom: 28px; }
.section__lead { max-width: 75ch; color: var(--color-text-soft); }
.text-soft { color: var(--color-text-soft); }

/* --- Кнопки --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--color-graphite); color: #FFF; }
.btn--primary:hover { background: var(--color-gold); color: var(--color-graphite); }
.btn--ghost { background: var(--color-surface); border-color: var(--color-border); color: var(--color-graphite); }
.btn--ghost:hover { border-color: var(--color-gold); color: var(--color-gold); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Шапка (header) ---
   Одна строка: логотип, меню, справа телефон с адресом и иконки мессенджеров.
   Отдельной тёмной полосы с контактами (.topbar) больше нет — её содержимое
   переехало сюда. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border-soft);
}
.header__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 96px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Логотип. В макете он золотой, а в файле assets/img/logo.png штрихи
   тёмно-коричневые. Поэтому PNG задаёт только форму (mask), а цвет рисует
   CSS-градиент. Если mask не поддерживается — блок @supports не сработает
   и логотип покажется как есть, в своих родных цветах. */
.logo { flex: none; display: flex; }
.logo__mark {
    display: block;
    width: 76px;
    height: 76px;
    background: url("/assets/img/logo.png") no-repeat center / contain;
}
@supports ((-webkit-mask-size: contain) or (mask-size: contain)) {
    .logo__mark {
        background: linear-gradient(150deg, #E7D3A2 0%, var(--color-gold) 55%, #B08F4E 100%);
        -webkit-mask-image: url("/assets/img/logo.png");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-image: url("/assets/img/logo.png");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }
}

/* Меню: прижато к логотипу, справа свободное место уходит под контакты.
   Промежуток и кегль подобраны по замеру: пункты на 15px занимают 373px,
   плюс 4 промежутка по 32px = 501px — в контейнер 1180 (это ≈562px для меню
   в худшем случае, когда контакты занимают максимум) влезает с запасом. */
.nav {
    display: flex;
    align-items: center;
    margin-left: clamp(16px, 2.5vw, 46px);
    margin-right: auto;
}
.nav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a {
    display: block;
    padding: 11px 0 9px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.nav a:hover { color: var(--color-gold); border-bottom-color: var(--color-gold-light); }
.nav a.is-active { color: var(--color-gold); border-bottom-color: var(--color-gold); }

/* --- Контакты в шапке: телефон + адрес + иконки мессенджеров --- */
.header__contacts { display: flex; align-items: center; gap: 26px; flex: none; }
/* Телефон и адрес — одной колонкой по правому краю: правые края строк совпадают */
.header__contact { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.header__phone {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    white-space: nowrap;
    transition: color .18s ease;
}
.header__phone:hover { color: var(--color-gold); }
.header__address { font-size: 12px; line-height: 1.3; color: var(--color-text-soft); white-space: nowrap; }

.socials { display: flex; align-items: center; gap: 14px; list-style: none; margin: 0; padding: 0; }
.socials li { margin: 0; }
.socials a { display: block; transition: opacity .18s ease; }
.socials a:hover { opacity: .78; }
.socials img { display: block; width: 36px; height: auto; }

/* --- Бургер (мобильное меню) --- */
.burger {
    display: none;
    width: 44px;
    height: 40px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--color-graphite); }

/* --- Хлебные крошки: белая полоса, у «Главная» — иконка домика, между
   пунктами — золотой шеврон вместо "/". Иконка стоит только у первого пункта
   (foreach в header.php передаёт $crumb_is_first). */
.breadcrumbs {
    background: var(--color-surface);
    font-size: 14px;
    padding: 16px 0;
}
.breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--color-text); }
.breadcrumbs li[aria-current] { color: var(--color-text-soft); }
.breadcrumbs li + li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-style: solid;
    border-width: 1.6px 1.6px 0 0;
    border-color: var(--color-gold);
    transform: rotate(45deg);
}
.breadcrumbs a { display: flex; align-items: center; gap: 8px; color: inherit; }
.breadcrumbs a:hover { color: var(--color-gold); }
.breadcrumbs__home-icon { flex: none; width: 19px; height: 17px; color: var(--color-gold); }

/* --- Общий CTA-блок (часть оболочки: одинаков на всех страницах) -------------
   Макет: светлая полоса, слева заголовок с подзаголовком, справа две кнопки:
   золотая «Позвонить» с иконкой телефона и контурная «Написать в мессенджер».
   Прежний бежевый градиент убран — фон почти белый.
   Украшение блока — картинка assets/img/todo.webp: встаёт по центру на нижнюю
   кромку. Файла может не быть — браузер тогда просто не рисует этот слой,
   битой картинки не появляется. */
.cta {
    background: #FDFBF6 url("/assets/img/todo.webp") no-repeat center bottom / auto 100%;
    border-top: 1px solid var(--color-border-soft);
}
.cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px 40px;
    padding: 64px 20px;
}
.cta__text { max-width: 52ch; }
.cta__title { margin-bottom: 10px; font-size: clamp(26px, 2.8vw, 38px); }
.cta__lead { margin: 0; font-size: 17px; color: var(--color-text-soft); }

/* Кнопки блока: золотая — тем же градиентом, что кнопка героя (чтобы главная
   и подвал смотрелись одинаково), контурная — прозрачная с золотой рамкой.
   Отличие от кнопок оболочки — крупнее отбивка и иконка телефона слева. */
.cta__actions { flex: none; gap: 16px; }
.cta .btn { gap: 10px; padding: 16px 30px; font-size: 16px; }
.cta .btn__icon { flex: none; width: 22px; height: 22px; }
.cta .btn--primary { background: linear-gradient(120deg, #B08F4E 0%, #C6A969 55%, #D6C08C 100%); color: #FFF; }
.cta .btn--primary:hover { background: linear-gradient(120deg, #9E7E42 0%, #B8975A 55%, #C6A969 100%); color: #FFF; }
.cta .btn--ghost { background: transparent; border-color: #DCC79A; color: var(--color-graphite); }
.cta .btn--ghost:hover { background: var(--color-surface); border-color: var(--color-gold); color: var(--color-gold); }

/* --- Footer ---
   Макет: светлая полоса в тон странице. Слева логотип с подписью, дальше четыре
   колонки — «Навигация», «Блог» (категории блога), «Контакты», «Следите за
   нами»; внизу черта и строка «копирайт / оферта».
   Логотип в файле тёмный, а в макете золотой, поэтому PNG работает как mask,
   а цвет рисует градиент — тот же приём, что у логотипа в шапке (.logo__mark).
   Служебная подпись внутри PNG («центр изменения фигуры») в макет не входит:
   маска прижата к верху (mask-position: left top), а блок ниже — 182 из 248
   её пикселей, то есть верхние 1100 из 1500 строк файла. */
.site-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    border-top: 1px solid var(--color-border);
    padding: 56px 0 22px;
    font-size: 15px;
}
.footer__grid {
    display: grid;
    grid-template-columns:
        minmax(270px, 1.3fr)
        minmax(105px, .5fr)
        minmax(165px, .8fr)
        minmax(230px, .9fr);
    gap: 40px 32px;
}

/* Бренд-блок: логотип-ссылка и подпись под ним.
   Файл lolo-text.png (1200×800) — это весь логотип целиком: монограмма и слово
   «ДЕЛАЙ ТЕЛО», ничего лишнего в нём нет, поэтому картинка вписывается целиком
   (contain), без сдвигов и обрезки. Штрихи в файле тёмные, а в макете логотип
   золотой, поэтому PNG работает только как маска, а цвет рисует градиент —
   тот же приём, что у логотипа в шапке (.logo__mark).
   max-width: 100% — чтобы логотип не вылезал из колонки на узких экранах. */
.footer__logo { display: inline-block; margin-bottom: 22px; max-width: 100%; }
.footer__logo-mark {
    display: block;
    width: 280px;
    max-width: 100%;
    aspect-ratio: 3 / 2;
    background: url("/assets/img/lolo-text.png") no-repeat center / contain;
}
@supports ((-webkit-mask-size: contain) or (mask-size: contain)) {
    .footer__logo-mark {
        background: linear-gradient(150deg, #E7D3A2 0%, var(--color-gold) 55%, #B08F4E 100%);
        -webkit-mask-image: url("/assets/img/lolo-text.png");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-image: url("/assets/img/lolo-text.png");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }
}
.footer__tagline {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

/* Колонки: заголовок капсом с короткой золотой чертой под ним */
.footer__title {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-gold);
}
.footer__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-gold);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin: 0 0 12px; }
.footer__list a { color: var(--color-footer-link); transition: color .18s ease; }
.footer__list a:hover { color: var(--color-gold); }

/* Контакты: адрес, крупный золотой телефон, часы. Все три строки устроены
   одинаково — иконка 18px слева, отбивка 8px, поэтому значки выстраиваются
   в одну вертикаль независимо от кегля текста рядом. Цвет значков общий и не
   зависит от цвета строки: телефон золотой, а его иконка — как у часов. */
.footer__address,
.footer__phone,
.footer__hours { display: flex; align-items: center; gap: 8px; }
.footer__address svg,
.footer__phone svg,
.footer__hours svg { flex: none; width: 18px; height: 18px; color: var(--color-text-soft); }
.footer__address { margin: 0 0 16px; font-size: 14px; align-items: flex-start; }
.footer__address svg { margin-top: 1px; }
.footer__phone { margin: 0 0 14px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.footer__phone a { color: var(--color-gold); transition: color .18s ease; }
.footer__phone a:hover { color: var(--color-graphite); }
.footer__hours { margin: 0; color: var(--color-text-soft); }

/* Соцсети: золотой круг и подпись под ним, под часами в той же колонке */
.footer__socials { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 24px 0 0; padding: 0; }
.footer__socials li { margin: 0; }
.footer__socials a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    transition: opacity .18s ease;
}
.footer__socials a:hover { opacity: .78; }
.footer__socials img { display: block; width: 46px; height: auto; }

/* Нижняя строка: копирайт слева, оферта справа */
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 40px;
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-soft);
}
.footer__bottom p { margin: 0; }
.footer__bottom p + p { text-align: right; }

/* --- Адаптив оболочки --- */
@media (max-width: 1100px) {
    .header__inner { gap: 16px; }
    .logo__mark { width: 66px; height: 66px; }
    .nav { margin-left: 16px; }
    .nav ul { gap: 20px; }
    .nav a { font-size: 14px; }
    .header__contacts { gap: 16px; }
    .header__phone { font-size: 16px; }
    .header__address { font-size: 11px; }
    .socials { gap: 10px; }
    .socials img { width: 32px; }
    /* Подвал: логотип во всю ширину, четыре колонки — по две в ряд */
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; }
    /* CTA: заголовок с кнопками ещё должны встать в строку, но места на
       картинку-украшение по центру уже нет — прячем её и раскладываем блок
       в одну колонку (иначе картинка ушла бы под текст) */
    .cta { background-image: none; }
    .cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .site-header { position: relative; }
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 8px 20px 16px;
        background: var(--color-header-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-card);
    }
    .nav.is-open { display: flex; }
    .nav ul { flex-direction: column; gap: 0; }
    .nav a { padding: 13px 0; border-bottom-width: 1px; border-bottom-color: var(--color-border-soft); }
    .nav li:last-child a { border-bottom: none; }
    .header__contacts { margin-left: auto; }
    .header__address { display: none; }
    .burger { display: flex; }
    /* CTA: в одну колонку блок уже перестроен (см. 1100px), здесь только
       уменьшаем вертикальные отбивки */
    .cta__inner { padding: 48px 20px; }
    .footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .footer__brand { grid-column: auto; }
    /* Подвал: оферта по левому краю на мобильных экранах */
    .footer__bottom p + p { text-align: left; }
}

@media (max-width: 620px) {
    /* Подвал: нижняя строка в столбик */
    .site-footer { padding: 44px 0 20px; }
    .footer__bottom { flex-direction: column; }
    .section { padding: 40px 0; }
    /* На узких экранах CTA: кегль заголовка фиксирован (clamp уже не
       уменьшается), кнопки встают в столбик на всю ширину блока */
    .cta__inner { padding: 36px 20px; }
    .cta__title { font-size: 26px; }
    .cta__actions { width: 100%; }
    .cta__actions .btn { flex: 1 1 100%; }
    .header__inner { gap: 14px; min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
    .logo__mark { width: 52px; height: 52px; }
    .header__phone { font-size: 14px; }
    /* На узких экранах важнее телефон; мессенджеры остаются в подвале */
    .socials { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}