/* ============================================================
   СеллерЛабс — общий хром сайта (шапка + подвал).
   Источник: site/shared/header-footer.html, блок style#sl-chrome-css.
   Подключается ПОСЛЕ tokens.css. Все классы с префиксом sl-.
   Не редактировать здесь: правки вносятся в общий источник и переносятся.
   ============================================================ */
/* Все значения продублированы фолбэком: фрагмент работает и без tokens.css. */

/* ------------------------------------------------------------------
   ОТСТУП ХРОМА — СОБСТВЕННАЯ ПЕРЕМЕННАЯ, НЕ --pad ТЕМЫ.
   Шапка и подвал — оболочка сайта: они обязаны выглядеть одинаково
   на / , /audit/ и /internet-magazin/ независимо от того, по какой
   сетке сверстан контент внутри (у canal --pad:20px на всех ширинах).
   Поэтому здесь --sl-pad со шкалой дизайн-системы; контент темы
   при этом не сдвигается ни на пиксель.
   ------------------------------------------------------------------ */
:root{ --sl-pad:40px; }
@media (max-width:1180px){ :root{ --sl-pad:32px; } }
@media (max-width:720px) { :root{ --sl-pad:20px; } }
@media (max-width:400px) { :root{ --sl-pad:16px; } }

.sl-wrap{
  width:100%;max-width:var(--wrap,1280px);margin:0 auto;
  padding-inline:var(--sl-pad,40px);
}

/* ============================================================
   ШАПКА
   ============================================================ */
.sl-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(170%) blur(10px);
  border-bottom:1px solid var(--line,#DCE0D8);
  font-family:var(--font-body,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
}
.sl-header__in{
  display:flex;align-items:center;gap:24px;
  height:72px;                 /* фиксировано на всех ширинах */
}
.sl-logo{display:flex;align-items:center;flex:none;text-decoration:none;line-height:0;}
.sl-logo img{display:block;height:30px;width:auto;max-width:100%;}
.sl-logo:focus-visible{outline:3px solid var(--accent-soft,#E1EDE6);outline-offset:4px;border-radius:4px;}

.sl-nav{display:flex;align-items:center;gap:28px;margin-left:auto;min-width:0;}
.sl-nav a{
  font-size:15px;font-weight:500;color:var(--ink-2,#4A524C);
  text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .14s ease,border-color .14s ease;
}
.sl-nav a:hover{color:var(--ink,#121613);}
.sl-nav a[aria-current="page"]{color:var(--ink,#121613);border-bottom-color:var(--accent,#16624A);}
.sl-mail{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:15px;font-weight:600;color:var(--accent,#16624A);text-decoration:none;white-space:nowrap;
}
.sl-mail:hover{color:var(--accent-2,#0E4635);}
.sl-mail svg{flex:none;}
.sl-header a:focus-visible,.sl-footer a:focus-visible{
  outline:2px solid var(--accent,#16624A);outline-offset:3px;border-radius:3px;
}

/* --- бургер на <details>, без JS --- */
.sl-menu{display:none;margin-left:auto;position:relative;flex:none;}
.sl-menu > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 14px;border:1px solid var(--line-2,#C3CABF);
  border-radius:var(--radius-s,5px);background:var(--surface,#fff);
  font-size:15px;font-weight:600;color:var(--ink,#121613);
}
.sl-menu > summary::-webkit-details-marker{display:none;}
.sl-menu > summary:focus-visible{outline:3px solid var(--accent-soft,#E1EDE6);outline-offset:2px;}
.sl-menu[open] > summary{border-color:var(--accent,#16624A);color:var(--accent,#16624A);}
.sl-menu__panel{
  position:absolute;top:calc(100% + 12px);right:0;z-index:70;
  min-width:min(280px,calc(100vw - 2 * var(--sl-pad,20px)));
  display:flex;flex-direction:column;gap:2px;
  padding:10px;background:var(--surface,#fff);
  border:1px solid var(--line,#DCE0D8);border-radius:var(--radius,8px);
  box-shadow:var(--shadow,0 1px 2px rgba(18,22,19,.05),0 22px 46px -30px rgba(18,22,19,.5));
}
.sl-menu__panel a{
  display:block;padding:12px 14px;border-radius:var(--radius-s,5px);
  font-size:16px;color:var(--ink,#121613);text-decoration:none;
}
.sl-menu__panel a:hover{background:var(--surface-2,#EAEDE6);}
.sl-menu__panel a[aria-current="page"]{color:var(--accent,#16624A);font-weight:600;}
.sl-menu__panel .sl-menu__mail{
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line,#DCE0D8);
  font-weight:600;color:var(--accent,#16624A);overflow-wrap:anywhere;
}

/* Правый слот шапки: ЛИБО e-mail (главная), ЛИБО целевая кнопка (лендинги).
   Оба сразу не ставить — на 1024 строка перестанет помещаться. */
.sl-cta{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  height:44px;padding:0 20px;border-radius:var(--radius-s,5px);
  background:var(--accent,#16624A);color:#fff;
  font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;
  border:1px solid var(--accent,#16624A);
  transition:background .16s ease,border-color .16s ease;
}
.sl-cta:hover{background:var(--accent-2,#0E4635);border-color:var(--accent-2,#0E4635);}
.sl-menu__panel .sl-cta{margin-top:8px;width:100%;height:48px;}

@media (max-width:980px){
  .sl-nav{display:none;}
  .sl-menu{display:block;}
}
@media (max-width:400px){
  .sl-logo img{height:26px;}
  .sl-menu > summary{padding:0 12px;}
}

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.sl-footer{
  background:var(--band,#10201A);color:var(--band-ink-2,#93A099);
  font-family:var(--font-body,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
  font-size:15px;line-height:1.6;padding:64px 0 40px;
}
.sl-footer__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:36px 40px;
}
.sl-footer__col{min-width:0;}
.sl-footer__col--about{grid-column:span 1;}
.sl-fmark{
  font-family:var(--font-display,Georgia,serif);font-size:24px;font-weight:600;
  letter-spacing:-.01em;color:#fff;
  display:flex;align-items:center;gap:12px;margin-bottom:14px;text-decoration:none;
}
.sl-fmark__sl{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:var(--radius-s,5px);
  background:var(--accent-on-dark,#62C79E);color:var(--band,#10201A);
  font-family:var(--font-body,system-ui,sans-serif);font-size:14px;font-weight:700;letter-spacing:.02em;
}
.sl-footer__about{font-size:15px;line-height:1.6;max-width:34ch;}
.sl-footer h3{
  margin:0 0 14px;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:#fff;
}
.sl-footer__links{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.sl-footer__links a{
  color:var(--band-ink-2,#93A099);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:1px;
  overflow-wrap:anywhere;
}
.sl-footer__links a:hover{color:#fff;border-color:rgba(255,255,255,.5);}
.sl-footer__req{font-size:14px;line-height:1.75;}
.sl-footer__req b{display:block;color:#fff;font-weight:600;margin-bottom:4px;}
.sl-footer__req a{color:var(--accent-on-dark,#62C79E);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;}

.sl-footer__legal{
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:16px 40px;align-items:start;
}
.sl-footer__disclaimer{font-size:13.5px;line-height:1.65;color:#7F8C85;max-width:100ch;margin:0;}
.sl-footer__copy{font-size:13.5px;color:#7F8C85;white-space:nowrap;}
@media (max-width:860px){
  .sl-footer__legal{grid-template-columns:minmax(0,1fr);}
  .sl-footer__copy{white-space:normal;}
}
@media (max-width:720px){
  .sl-footer{padding:48px 0 32px;}
}

@media (prefers-reduced-motion:reduce){
  .sl-header *,.sl-footer *{transition:none !important;}
}

/* ------------------------------------------------------------------
   ПРАВКА К ОБЩЕМУ ХРОМУ (найдена рендером 2026-08-12, вернуть в
   site/shared/header-footer.html).
   .sl-cta стоит ВНУТРИ .sl-nav, а правило «.sl-nav a» специфичнее (0,1,1)
   класса «.sl-cta» (0,1,0) — и перебивало ему цвет на --ink-2 и добавляло
   padding-bottom. На зелёной кнопке текст становился тёмно-зелёным
   и практически нечитаемым. Возвращаем кнопке её собственное оформление.
   ------------------------------------------------------------------ */
.sl-nav .sl-cta,
.sl-menu__panel .sl-cta{
  color:#fff;
  padding:0 20px;
  border-bottom:1px solid var(--accent,#16624A);
}
.sl-nav .sl-cta:hover,
.sl-menu__panel .sl-cta:hover{
  color:#fff;
  border-bottom-color:var(--accent-2,#0E4635);
}
.sl-menu__panel .sl-cta{padding:0 20px;}