/* Общая шапка школы: всегда голубая и с тёмным текстом, в тёмной теме тоже. Одна на всех страницах: макет Frame.svg, 1500×47.
   Подключается так: <link rel="stylesheet" href="/site-bar.css"/> */
:root{--bar-h:47px}
.site-bar{position:fixed;top:0;left:0;right:0;z-index:2147483000;height:var(--bar-h);background:#C6E6FF;color:#2C160A;font-family:"Inter Tight",Inter,"Helvetica Neue",Arial,sans-serif;font-size:var(--fs-s,14px);line-height:1.2;letter-spacing:-.014em}
.site-bar-spacer{height:var(--bar-h)}
.site-bar-inner{height:100%;width:min(1500px,100%);margin:0 auto;padding:0 clamp(16px,3.13vw,47px) 0 clamp(16px,2.73vw,41px);display:flex;align-items:center;box-sizing:border-box}
.site-bar a{color:inherit;text-decoration:none}

/* логотип и подпись: чуть ниже центра, как в макете */
.site-bar-brand{display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative;top:1.7px}
.site-bar-logo{height:39.18px;width:auto;display:block;flex:none}
.site-bar-logo.logo-on-dark{display:none} /* шапка всегда голубая, в обеих темах тёмный логотип */
.site-bar-tagline{white-space:nowrap}
/* на всех страницах, кроме главной, логотип с подписью ведут на главную: подпись подчёркивается при наведении, как пункты меню */
.site-bar-tagline{position:relative}
a.site-bar-brand .site-bar-tagline::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease-out}
@media (hover:hover){a.site-bar-brand:hover .site-bar-tagline::after{transform:scaleX(1)}}
a.site-bar-brand:focus-visible .site-bar-tagline::after{transform:scaleX(1)}

/* ссылки в шапке: подчёркивание плавно идёт слева направо */
.site-bar-links a,.site-bar-license{position:relative}
.site-bar-links a::after,.site-bar-license::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease-out}
.site-bar-links a:focus-visible::after,.site-bar-license:focus-visible::after{transform:scaleX(1)}
@media (hover:hover){.site-bar-links a:hover::after,.site-bar-license:hover::after{transform:scaleX(1)}}

/* ссылка на сведения: бледная, на наведение проявляется */
.site-bar-links{margin-left:16px;position:relative;top:1.7px}
.site-bar-links a{display:block;white-space:nowrap;opacity:.3;transition:opacity .3s ease-out}
.site-bar-links a:focus-visible{opacity:1}
@media (hover:hover){.site-bar-links a:hover{opacity:1}}

.site-bar-license{margin-left:auto;margin-right:24px;white-space:nowrap;top:1.7px}

/* кнопки 33×33: мессенджеры и переключатель темы */
.site-bar-icons{display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative;top:.3px}
.site-bar-icon,.site-bar .theme-toggle{width:33px;height:33px;border-radius:var(--r-sm,12px);display:flex;align-items:center;justify-content:center;flex:none;padding:0;box-sizing:border-box;cursor:pointer;position:static;margin:0;transition:opacity .3s ease-out,background-color .3s ease-out,color .3s ease-out,border-color .3s ease-out}
.site-bar-icon{background:#2C160A;color:#FFFEF4!important}
.site-bar-icon:focus-visible{opacity:.88}
@media (hover:hover){.site-bar-icon:hover{opacity:.88}}
.site-bar-icon:active{transform:scale(.93)}
.site-bar .theme-toggle{border:1px solid #2C160A;background:transparent;color:#2C160A;font:inherit}
.site-bar .theme-toggle .icon-light{display:block}
.site-bar .theme-toggle .icon-dark{display:none}
:root[data-theme="dark"] .site-bar .theme-toggle .icon-light{display:none}
:root[data-theme="dark"] .site-bar .theme-toggle .icon-dark{display:block}
.site-bar .theme-toggle:focus-visible{background:#2C160A;color:#FFFEF4}
@media (hover:hover){
  .site-bar .theme-toggle:hover{background:#2C160A;color:#FFFEF4}
}
.site-bar a:focus-visible,.site-bar .theme-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* уже десктопа */
@media (max-width:1280px){.site-bar-links{display:none}}
@media (max-width:1000px){.site-bar-tagline{display:none}}
@media (max-width:760px){
  :root{--bar-h:52px}
  .site-bar-logo{height:30px}
  .site-bar-license{margin-right:12px;white-space:normal;font-size:var(--fs-xs,12px);line-height:1.3}
  .site-bar-license span{display:block}
  .site-bar.has-menu .theme-toggle{display:none}
  .site-bar.has-menu .site-bar-icons{margin-right:50px}
  .site-bar:not(.has-menu) .site-bar-icons{margin-left:auto}
  .site-bar-license{margin-left:auto}
}
@media (max-width:480px){.site-bar-license{display:none}.site-bar.has-menu .site-bar-icons{margin-left:auto}}