/* ============================================================================
   zbt-header.css — ЕДИНСТВЕН споделен стил на хедъра (атласов вид).
   Зарежда се на всяка страница: <link rel="stylesheet" href="/zbt-header.css?v=1">
   Компонентите (breadcrumb, заглавие, езици, часовник) живеят ТУК — не inline.
   Цветовете идват от --accent / --accent2 / --ink / --muted / --line на всяка
   страница, тъй че всеки модул пази акцентния си цвят.
   Контейнерът на бара (#top / .bar) остава на страницата (оформлението се различава:
   „една страница без скрол" vs скролираща), но трябва да е position:relative и
   display:flex;align-items:center за центрирания часовник.
   Промяна по вида на хедъра навсякъде = тук, после се качва този един файл.
   ============================================================================ */

/* breadcrumb „← 中保通 · Начало" — винаги горе вляво */
.zcrumb{flex:0 0 auto;display:inline-flex;align-items:center;min-height:2rem;color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:600;white-space:nowrap;transition:color .15s}
.zcrumb:hover{color:var(--accent)}
.zcrumb .ar{margin-right:.35rem;color:var(--accent);font-weight:700}

/* заглавие: глиф-градиент (科技/文化/…) · заглавие на раздела (по-малък шрифт) */
.htitle{margin:0;min-width:0;display:inline-flex;align-items:baseline;gap:.4rem;font-weight:800;font-size:clamp(1.05rem,1.8vw,1.3rem);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htitle .zsect{flex:0 0 auto;text-decoration:none;font-weight:800;background:linear-gradient(90deg,var(--accent),var(--accent2,var(--accent)) 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.htitle [data-i="title"],.htitle [data-i="h1"],.htitle [data-i="ttl"]{min-width:0;color:var(--ink);font-size:.86em;font-weight:700;overflow:hidden;text-overflow:ellipsis}
/* на хъб-страниците на китайски заглавието повтаря глифа (напр. 科技·科技) → крие се */
/* Тесен ред (телефон): заглавието или се вижда поне ~4 знака + „…", или изчезва
   ЦЯЛО — никога самотна буква/половин точка до езиковия панел. Редът се пренася
   (flex-wrap) и всичко на втори ред се скрива (max-height = един ред); основата
   на заглавието е 4.5em (за пренасянето), а расте до пълната си ширина. */
.htitle{flex-wrap:wrap;row-gap:0;align-content:flex-start;line-height:1.3;max-height:1.3em}
.htitle [data-i="title"],.htitle [data-i="h1"],.htitle [data-i="ttl"]{flex:1 1 4.5em;max-width:max-content}
html[lang="zh"] .htitle.hub [data-i="title"],html[lang="zh"] .htitle.hub [data-i="h1"]{display:none}
html[lang="zh"] .htitle.hub{gap:0}
/* Разделителят „·" между глифа и заглавието е ГОЛ текстов възел в маркъпа
   (`…</a> · <span data-i=…>`) → анонимен flex-елемент, който не се избира с CSS и
   оставаше САМ на първия ред, когато заглавието се пренесе и скрие („文化 •" на
   390px — задача D, 2026-10-31). Решение: h1 с font-size:0 (анонимният текст изчезва),
   децата получават размера изрично (--zbt-htitle-fs; с !important, защото inline
   копията на страниците задават заглавието в em — `.htitle #h1{font-size:.86em}` —
   и от 0 биха дали 0), а точката се рисува от ::before НА заглавието, с отстъп от
   двете страни вместо gap — пренася се и се крие ЗАЕДНО с него. Размерите са както
   досега: глиф 1em, заглавие .86em. Страници с ЯВЕН разделител-елемент (<span class="sep">
   на tv/*, <span class="hide-zh"> · </span> на chengshi/hub) се оставят на собствения си
   разделител (tv крие глифа+sep на телефон → ::before би висял отпред). h1.htitle (0,1,1)
   бие inline `.htitle{…}` независимо от реда на <link>/<style>. */
:root{--zbt-htitle-fs:clamp(1.05rem,1.8vw,1.3rem)}
h1.htitle{font-size:0;max-height:calc(1.3*var(--zbt-htitle-fs))}
h1.htitle>*{font-size:var(--zbt-htitle-fs) !important;letter-spacing:-.01em}
h1.htitle>:is([data-i],#tagTitle,[data-i18n]){font-size:calc(.86*var(--zbt-htitle-fs)) !important}
h1.htitle:not(:has(>.sep,>.hide-zh:not(.zsect))){gap:0}
/* точката вече е В заглавието → основата за пренасянето расте с нея (4.5em текст + „·" ≈ .3em + 2×.4rem),
   за да е прагът „≥ ~4 знака + …, иначе нищо" същият като преди */
h1.htitle:not(:has(>.sep,>.hide-zh:not(.zsect)))>:is([data-i],#tagTitle,[data-i18n]){flex:1 1 calc(4.8em + .8rem);max-width:max-content}
h1.htitle:not(:has(>.sep,>.hide-zh:not(.zsect)))>:is([data-i],#tagTitle,[data-i18n])::before{content:"·";margin:0 .4rem}

.spacer{flex:1}

/* Часовникът В ПОТОКА (вдясно, преди езиците) — иначе absolute-центрираният се
   застъпва с дълги заглавия (напр. „Традиционна китайска медицина"). !important
   надделява над inline-инжектирания стил на часовник-скрипта. Атласът НЕ линква
   този файл → там часовникът остава централно (двуреден хедър, късо заглавие). */
#zbt-clock{position:static !important;transform:none !important;order:5;flex:0 0 auto;margin:0 .45rem}
.langs{order:7}

/* езикови бутони — редът е фиксиран БГ · EN · 中文, без флагове.
   СЕГМЕНТИРАН МИНИ-ПАНЕЛ (решение 5, 2026-10-29/30): приглушена ПРАВОЪГЪЛНА релса
   (10px) + повдигнат активен сегмент (7px) = картон + акцент-текст. */
.langs{display:inline-flex;flex:0 0 auto;gap:2px;align-items:center;padding:3px;border-radius:10px;
  background:rgba(31,26,23,.05);border:1px solid var(--line)}
.langs button{white-space:nowrap;border:0;background:none;color:var(--muted);font:inherit;font-weight:600;font-size:.8rem;line-height:1.2;min-height:1.75rem;padding:.25rem .7rem;border-radius:7px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.langs button:hover{color:var(--ink)}
.langs button.on{background:var(--card,#fff);color:var(--accent-ink,var(--accent));box-shadow:0 1px 2px rgba(31,26,23,.12)}
.langs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@supports (background:color-mix(in srgb,red,blue)){
  .langs{background:color-mix(in srgb,var(--ink) 5%,transparent);border-color:color-mix(in srgb,var(--line) 60%,transparent)}
  .langs button.on{box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 12%,transparent)}
}

/* ── Отличена лента на хедъра (ЦЕНТРАЛИЗИРАНО — за ВСИЧКИ раздели/подраздели) ──
   Бял фон на цялата ширина на екрана зад реда на хедъра + долна граница + лека
   сянка, както на китайската граматика/началната. Чрез ::before на контейнера на
   бара (прекия родител на .zcrumb), за да НЕ мести съдържанието и да работи
   независимо от тага/класа на бара на всяка страница. Пълната ширина е през
   left:calc(50% - 50vw);width:100vw (барът е центриран/симетричен навсякъде). */
:has(> .zcrumb){position:relative;isolation:isolate}
:has(> .zcrumb)::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;pointer-events:none;background:var(--card,#fff);border-bottom:1px solid var(--line,#e7dfd0);box-shadow:0 1px 8px rgba(120,80,60,.07)}
/* „Порцелан" (2026-10-30): лентата е ЕФИРНА — полупрозрачен картон + лек frost
   (шарката на фона прозира), като горната лента на yufa. */
@supports (background:color-mix(in srgb,red,blue)){
  :has(> .zcrumb)::before{background:color-mix(in srgb,var(--card,#fff) 66%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-bottom-color:color-mix(in srgb,var(--line,#e7dfd0) 70%,transparent);box-shadow:0 1px 10px color-mix(in srgb,var(--ink,#1f1a17) 5%,transparent)}
}
/* width:100vw включва вертикалния скролбар → би дало ~тънък хоризонтален скрол на
   скролиращите страници; отсичаме го при ръба САМО на страниците с лента (не пипа
   умишлените хоризонтални layout-и). overflow-x:clip не прави скрол-контейнер →
   вертикалният скрол и sticky остават. */
html:has(.zcrumb),body:has(.zcrumb){overflow-x:clip}