/* framework-module: styles | version: 427fdc502e22 | copied: 2026-10-22 | источник framework/shared/styles — правки здесь остаются в проекте */
/* ===================================================
   shared/styles/layout.css — каркас публичной страницы:
   контейнер, шапка с меню, основная область, подвал.
   Только var(--…) из tokens.css. Подключается после base.css.
   Вёрстка от телефона (360) вверх: 768 — планшет, 1280 — десктоп.
   =================================================== */

/* Подвал прижат к низу короткой страницы (404, thank-you) */
body { display: flex; flex-direction: column; min-height: 100vh; }

/* --- Контейнер: ширина с боковыми полями, на 360 без горизонтальной прокрутки --- */
.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-4);
}

/* Ссылка «к содержимому» для клавиатуры: видна только в фокусе */
.skip-link {
    position:   absolute;
    left:       var(--space-4);
    top:        var(--space-2);
    z-index:    var(--z-modal);
    padding:    var(--space-2) var(--space-4);
    font-size:  var(--fs-sm);
    background: var(--color-bg);
    border:     1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transform:  translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ===================================================
   Шапка: wordmark · меню · кнопка CTA · бургер (до 768)
   Открытое мобильное меню — класс is-open на .site-header
   =================================================== */
.site-header {
    position:      sticky;
    top:           0;
    z-index:       var(--z-sticky);
    background:    var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    column-gap:  var(--space-5);
    min-height:  var(--header-height);
}
.site-header__brand {
    display:      inline-flex;
    align-items:  center;
    margin-right: auto;
    padding:      var(--space-2) 0;
    text-decoration: none;
}
.site-header__brand img { height: var(--brand-height); width: auto; }

/* Бургер: три тонкие полосы; открыто — подложка выбранного состояния */
.site-header__toggle {
    order:           1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--control-h);
    height:          var(--control-h);
    color:           var(--color-text);
    background:      transparent;
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    transition:      background var(--transition), border-color var(--transition);
}
.site-header__toggle:hover { background: var(--color-surface-hover); }
.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
    display:    block;
    width:      var(--icon-size);
    height:     var(--border-thick);
    background: currentColor;
}
.site-header__toggle-icon { position: relative; }
.site-header__toggle-icon::before,
.site-header__toggle-icon::after { content: ""; position: absolute; left: 0; }
.site-header__toggle-icon::before { top: calc(-1 * var(--space-2) + var(--space-05)); }
.site-header__toggle-icon::after  { top: calc(var(--space-2) - var(--space-05)); }
.site-header.is-open .site-header__toggle {
    background:   var(--color-accent-soft);
    border-color: var(--color-accent);
}

/* Меню и кнопка шапки: на телефоне скрыты, в открытом меню — колонкой под шапкой.
   Кнопка — через .site-header: components.css (.btn) подключается позже */
.site-nav,
.site-header .site-header__cta { display: none; }
.site-nav__link {
    display:         block;
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-medium);
    color:           var(--color-text-muted);
    text-decoration: none;
    transition:      color var(--transition), border-color var(--transition);
}
.site-nav__link:hover { color: var(--color-text); }
.site-nav__link[aria-current="page"] { color: var(--color-text); }

.site-header.is-open .site-nav {
    order:          2;
    display:        flex;
    flex-direction: column;
    flex-basis:     100%;
    margin-top:     var(--space-2);
}
.site-header.is-open .site-nav__link {
    padding:     var(--space-3) 0;
    font-size:   var(--fs-md);
    border-top:  1px solid var(--color-border);
}
.site-header.is-open .site-nav__link[aria-current="page"] {
    padding-left: var(--space-3);
    border-left:  var(--border-thick) solid var(--color-accent);
}
.site-header.is-open .site-header__cta {
    order:      3;
    display:    inline-flex;
    flex-basis: 100%;
    margin:     var(--space-2) 0 var(--space-4);
}

/* --- Основная область --- */
.site-main { flex: 1 0 auto; }
/* Якоря (/services#support) не прячутся под липкой шапкой */
.site-main [id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }

/* ===================================================
   Подвал: бренд · Company · Services · Legal, внизу юридическая строка.
   360 — в столбик, 768 — бренд сверху и три колонки, 1280 — четыре колонки
   =================================================== */
.site-footer {
    padding:    var(--space-8) 0 var(--space-6);
    font-size:  var(--fs-sm);
    color:      var(--color-text-muted);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
.site-footer__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-7);
}
.site-footer__col { min-width: 0; }
.site-footer__col img { height: var(--brand-height); width: auto; }
.site-footer__brand-text { margin-top: var(--space-3); max-width: var(--text-max); }
.site-footer__brand-text + .site-footer__brand-text { margin-top: var(--space-2); }
.site-footer__title {
    margin-bottom:  var(--space-3);
    font-family:    var(--font-mono);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color:          var(--color-text);
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; }
.site-footer__link { color: var(--color-text-muted); text-decoration: none; }
.site-footer__link:hover {
    color:                 var(--color-text);
    text-decoration:       underline;
    text-decoration-color: var(--color-accent);
}
.site-footer__legal {
    margin-top:  var(--space-8);
    padding-top: var(--space-5);
    font-size:   var(--fs-xs);
    border-top:  1px solid var(--color-border);
    overflow-wrap: anywhere;
}

/* --- Планшет --- */
@media (min-width: 768px) {
    .container { padding: 0 var(--space-7); }

    .site-header__toggle { display: none; }
    .site-nav,
    .site-header.is-open .site-nav {
        order:          0;
        display:        flex;
        flex-direction: row;
        flex-basis:     auto;
        align-items:    center;
        gap:            var(--space-5);
        margin:         0;
    }
    .site-nav__link,
    .site-header.is-open .site-nav__link {
        padding:       var(--space-5) 0;
        font-size:     var(--fs-sm);
        border-top:    none;
        border-left:   none;
        border-bottom: var(--border-thick) solid transparent;
    }
    .site-nav__link[aria-current="page"],
    .site-header.is-open .site-nav__link[aria-current="page"] {
        padding-left:        0;
        border-left:         none;   /* полоска слева — только у мобильного меню */
        border-bottom-color: var(--color-accent);
    }
    .site-header .site-header__cta,
    .site-header.is-open .site-header__cta {
        order:      0;
        display:    inline-flex;
        flex-basis: auto;
        margin:     0;
    }

    .site-footer { padding-top: var(--space-9); }
    .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
    .site-footer__col:first-child { grid-column: 1 / -1; }
}

/* --- Десктоп --- */
@media (min-width: 1280px) {
    .site-header__inner { column-gap: var(--space-7); }
    .site-nav,
    .site-header.is-open .site-nav { gap: var(--space-7); }

    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .site-footer__col:first-child { grid-column: auto; }
}