/* School Top Bar KB */

.stb-wrap {
    --stb-bg: #f4f4f4;
    --stb-fg: #222;
    --stb-accent: #2271b1;
    --stb-line: #c8c8c8;
    --stb-container: 1400px;
    --stb-pad-y: 8px;
    --stb-fs: 14px;
    --stb-bt: 0 none;
    --stb-bb: 0 none;
    --stb-sep: 28px;
    box-sizing: border-box;
    /* Ширину не задаём: блок сам занимает всю доступную, а отрицательные поля темы (alignfull) растягивают его до краёв окна */
    max-width: none;
    color: var(--stb-fg);
    font-size: var(--stb-fs);
    line-height: 1.4;
}
.stb-wrap *, .stb-wrap *::before, .stb-wrap *::after { box-sizing: border-box; }

.stb-bar { box-sizing: border-box; }

.stb-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
}

/* Фон «по ширине содержимого»: серая плашка выбранной ширины по центру, края окна остаются свободными (как у прежней верхней строки) */
.stb-span-content {
    padding-left: var(--wp--style--root--padding-left, 0px);
    padding-right: var(--wp--style--root--padding-right, 0px);
}
.stb-span-content .stb-bar {
    max-width: var(--stb-container);
    margin: 0 auto;
    background: var(--stb-bg);
    border-top: var(--stb-bt);
    border-bottom: var(--stb-bb);
}
.stb-span-content .stb-inner { padding: var(--stb-pad-y) 16px; }

/* Фон «на всю ширину окна»: заливка доходит до краёв, содержимое остаётся в колонке выбранной ширины */
.stb-span-full {
    background: var(--stb-bg);
    border-top: var(--stb-bt);
    border-bottom: var(--stb-bb);
}
.stb-span-full .stb-inner {
    max-width: var(--stb-container);
    margin: 0 auto;
    /* Боковые поля как у содержимого сайта (у блочных тем — глобальные отступы), но не меньше 16px */
    padding: var(--stb-pad-y) max(16px, var(--wp--style--root--padding-right, 0px)) var(--stb-pad-y) max(16px, var(--wp--style--root--padding-left, 0px));
}

/* ==========================================================================
   Оформления
   ========================================================================== */
.stb-d-dark    { --stb-bg: #1f2a44; --stb-fg: #fff; --stb-accent: #8cc4ff; --stb-line: rgba(255, 255, 255, 0.35); }
.stb-d-compact { --stb-pad-y: 3px; --stb-fs: 13px; }
.stb-d-minimal { --stb-bg: transparent; --stb-fg: #333; --stb-line: #c8c8c8; --stb-bb: 1px solid #e3e3e3; }
.stb-d-official {
    --stb-bg: #fff;
    --stb-fg: #1f3b73;
    --stb-accent: #1f3b73;
    --stb-line: #1f3b73;
    --stb-bt: 4px solid #1f3b73;
    --stb-bb: 1px solid #c9d3e6;
}

/* Переключатель языка буквами (RU BE EN) */
.stb-lang { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; letter-spacing: 0.5px; font-size: 0.95em; }
.stb-bar .stb-lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    color: var(--stb-fg);
    border-radius: 6px;
    text-decoration: none;
    opacity: 0.78;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.stb-bar .stb-lang a:hover { opacity: 1; color: var(--stb-accent); background: rgba(127, 127, 127, 0.14); text-decoration: none; }
.stb-bar .stb-lang a.gt-current-lang { opacity: 1; color: var(--stb-accent); box-shadow: inset 0 -2px 0 var(--stb-accent); border-radius: 6px 6px 0 0; }
.stb-bar .stb-lang a:focus-visible { outline: 3px solid var(--stb-accent); outline-offset: 2px; }
.stb-d-compact .stb-lang a { height: 28px; min-width: 30px; }
.stb-d-dark .stb-lang a:hover, .stb-d-dark .stb-lang a.gt-current-lang { color: #fff; }
.stb-d-dark .stb-lang a.gt-current-lang { box-shadow: inset 0 -2px 0 #fff; }

/* На компьютере: правая часть остаётся справа в одной строке, а контакты сжимаются и при нехватке места переносят пункты на вторую строку */
@media (min-width: 769px) {
    .stb-inner { flex-wrap: nowrap; }
    .stb-left { flex: 1 1 0; }
    .stb-right { flex: 0 1 auto; max-width: 68%; }
}

/* Расположение «всё по центру»: контакты и правая часть собираются вместе в центре колонки */
@media (min-width: 769px) {
    .stb-lay-center .stb-inner { justify-content: center; gap: 8px 40px; }
    .stb-lay-center .stb-left { flex: 0 1 auto; }
    .stb-lay-center .stb-right { margin-left: 0; max-width: none; }
}

/* ==========================================================================
   Контакты (компьютер)
   ========================================================================== */
.stb-left { display: flex; align-items: center; min-width: 0; }
/* Пункты контактов разделяет «/». Разделитель рисуется слева от пункта в отведённом поле, а блок контактов обрезает всё, что левее его края:
   у пункта, начавшего новую строку, разделитель оказывается за краем и не виден, в середине строки он остаётся */
.stb-contacts-full { overflow: hidden; padding: 3px 0; }
.stb-contacts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-left: calc(var(--stb-sep) * -1); }
.stb-item { position: relative; display: inline-flex; align-items: center; gap: 7px; padding-left: var(--stb-sep); font-weight: 600; }
.stb-item::before { content: "/"; position: absolute; left: calc(var(--stb-sep) / 2 - 3px); top: 50%; transform: translateY(-50%); font-weight: 400; color: var(--stb-line); }
.stb-item .stb-ico { flex: none; color: var(--stb-accent); }
.stb-d-official { --stb-sep: 33px; }
.stb-d-official .stb-item { letter-spacing: 0.2px; }
.stb-d-official .stb-item::before { content: ""; left: calc(var(--stb-sep) / 2); width: 1px; height: 16px; background: var(--stb-line); opacity: 0.45; }
.stb-phones { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.stb-bar a { color: inherit; text-decoration: none; }
.stb-contacts-full a:hover { color: var(--stb-accent); text-decoration: underline; }
.stb-d-dark .stb-contacts-full a:hover { color: #fff; }

.stb-contacts-icons { display: none; }

/* ==========================================================================
   Правая часть: соцсети и слоты
   ========================================================================== */
.stb-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; min-width: 0; margin-left: auto; }
.stb-slot { display: flex; align-items: center; min-width: 0; }
.stb-slot > p { margin: 0; }

.stb-socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stb-socials li { margin: 0; padding: 0; list-style: none; }
.stb-bar a.stb-soc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--stb-soc-size, 34px);
    height: var(--stb-soc-size, 34px);
    color: #fff;
    background: var(--stb-brand, var(--stb-accent));
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.2s, filter 0.2s;
}
.stb-bar a.stb-soc:hover { transform: translateY(-2px); filter: brightness(1.12); color: #fff; text-decoration: none; }
.stb-bar a.stb-soc:focus-visible, .stb-bar a.stb-icon-link:focus-visible, .stb-bar summary:focus-visible { outline: 3px solid var(--stb-accent); outline-offset: 2px; }
.stb-shape-square a.stb-soc { border-radius: 8px; }
.stb-shape-plain a.stb-soc { background: transparent; color: var(--stb-brand, var(--stb-accent)); }
.stb-shape-plain a.stb-soc:hover { color: var(--stb-brand, var(--stb-accent)); }
.stb-soc-mono a.stb-soc { background: var(--stb-accent); color: var(--stb-bg, #fff); }
.stb-soc-mono a.stb-soc:hover { color: var(--stb-bg, #fff); }
.stb-soc-mono.stb-shape-plain a.stb-soc { background: transparent; color: var(--stb-accent); }
.stb-d-minimal .stb-soc-mono a.stb-soc { color: #fff; }
.stb-d-minimal .stb-soc-mono.stb-shape-plain a.stb-soc { color: var(--stb-accent); }
.stb-d-dark .stb-shape-plain a.stb-soc { color: var(--stb-fg); }
.stb-d-compact a.stb-soc { width: calc(var(--stb-soc-size, 34px) - 6px); height: calc(var(--stb-soc-size, 34px) - 6px); }

/* Макеты элементов для предпросмотра в настройках */
.stb-fake-search { display: inline-flex; align-items: center; justify-content: space-between; height: 34px; padding-left: 12px; border: 1px solid #c3c4c7; border-radius: 17px; background: #fff; color: #888; font-size: 13px; overflow: hidden; }
.stb-fake-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 100%; background: #2271b1; color: #fff; }
.stb-fake-lang { font-size: 13px; opacity: 0.85; }
.stb-fake-svi { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 5px; background: #0073aa; color: #fff; }

/* ==========================================================================
   Телефон: контакты сворачиваются в значки
   ========================================================================== */
@media (max-width: 768px) {
    .stb-inner { gap: 6px 12px; padding: var(--stb-pad-y) 12px; justify-content: space-between; }
    .stb-contacts-full { display: none; }
    .stb-contacts-icons { display: flex; align-items: center; gap: 2px; }
    .stb-right { gap: 4px 8px; }
    .stb-socials { gap: 5px; }
    .stb-bar a.stb-soc { width: min(var(--stb-soc-size, 34px), 30px); height: min(var(--stb-soc-size, 34px), 30px); }
    .stb-bar .stb-icon-link { width: 36px; height: 36px; }
}

.stb-bar .stb-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--stb-accent);
    cursor: pointer;
    list-style: none;
}
.stb-bar .stb-icon-link:hover { background: rgba(127, 127, 127, 0.16); text-decoration: none; color: var(--stb-accent); }
.stb-bar summary::-webkit-details-marker { display: none; }

/* Всплывающий список (несколько телефонов, адрес без ссылки на карту) */
.stb-pop { position: relative; }
.stb-pop-body {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    max-width: min(92vw, 320px);
    padding: 10px 14px;
    background: #fff;
    color: #222;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-weight: 600;
}
.stb-pop-body a { color: #1d2327; padding: 4px 0; }
.stb-pop-body a:hover { color: #2271b1; }

@media (prefers-reduced-motion: reduce) {
    .stb-bar a.stb-soc { transition: none; }
    .stb-bar a.stb-soc:hover { transform: none; }
}