/* ДНЖ · днж-практики.рф · header.css
   Шапка: логотип, вкладки, полоса подразделов, анимация бренда (#МЫВМЕСТЕ).
   Часть разделённого сайта (15.09.2026). Подключается из index.html. */

/* ============================================================
   Шапка v2: вкладки правее, кнопка «Добавить свою практику»
   и явная полоса подразделов
   ============================================================ */
/* компоновка: логотип + бейдж слева, кнопки и приветствие справа,
   вкладки — отдельной строкой с общим левым краем */
#app>header{padding:15px 28px 14px; column-gap:16px; row-gap:0; align-items:center}
header .logo{order:1; font-size:16px; letter-spacing:.06em; gap:14px}
header .hdr-actions .badge-mode{margin-right:4px}
header .hdr-right{order:3}
header nav{order:2; margin-left:0}
/* 28.09.2026: меню всегда в одной строке с логотипом и справа от него, кнопки «Добавить свою практику» и «Выйти» —
   у правого края. Если меню в одну строку не помещается (узкий ноутбук, планшет, телефон), оно уходит отдельной
   строкой вниз: класс nav-below ставит shell.js (headerNavFit), на экранах до 1100 px — всегда.
   Размеры на ноутбуках — в конце файла, чтобы перекрыть базовые размеры логотипа. */
header nav{margin-left:24px; flex:1 1 0; min-width:0; flex-wrap:wrap; order:2}
header nav button{padding:8px 11px}
@media (max-width:1600px){
  header nav{margin-left:16px}
  header nav button{padding:8px 9px}
}
@media (max-width:1440px){
  #app>header{padding-left:20px; padding-right:20px; column-gap:12px}
  header nav{margin-left:8px; margin-top:0; padding-top:0; border-top:0}
  header nav button{padding:7px 6px; margin-left:0; font-size:14px}
  header .add-practice{padding:8px 11px; font-size:12.5px}
  header .exit{padding:7px 11px}
  header .hdr-right .who{max-width:220px}
}
#app>header.nav-below{flex-wrap:wrap}
#app>header.nav-below nav{flex:1 0 100%; margin:14px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); order:5}
#app>header.nav-below nav button{margin-left:-2px; padding:7px 12px}
@media (max-width:1100px){
  header nav{flex:1 0 100%; margin:14px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); order:5}
  header nav button{margin-left:-2px; padding:7px 12px}
}
}
/* белая разделительная черта в логотипе — чуть правее */
header .logo::before{padding-right:20px; height:29px; width:112px}
/* правая колонка: кнопки, под ними приветствие и должность */
header .hdr-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; margin-left:auto}
header .hdr-actions{display:flex; align-items:center; gap:8px}
header .hdr-right .who{
  text-align:right; max-width:300px; font-size:var(--fs-2); line-height:1.35;
  white-space:normal; overflow:visible; text-overflow:clip;
}
header .hdr-right .who b{display:inline; font-weight:700}
header .hdr-right .who .pos{display:block; color:#CBB6DD; white-space:normal; overflow:visible; text-overflow:clip}
header .add-practice{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--orange); color:#fff; border:0; border-radius:var(--r-md);
  padding:9px 16px; font-size:var(--fs-2); font-weight:700;
  box-shadow:0 2px 8px rgba(255,93,0,.34);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
header .add-practice::before{
  content:"+"; font-size:16px; font-weight:800; line-height:1; margin-top:-1px;
}
header .add-practice:hover{background:#FF7526; box-shadow:0 4px 14px rgba(255,93,0,.42)}

/* полоса подразделов: прижата к шапке, активная вкладка — подчёркиванием */
.subnav{
  position:sticky; top:56px; z-index:40;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px -16px rgba(45,5,64,.4);
}
.subnav .in{
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:stretch; gap:4px; flex-wrap:wrap;
}
.subnav .lb{
  display:flex; align-items:center; gap:8px; padding:0 20px 0 0; margin-right:10px;
  border-right:1px solid var(--line); color:var(--violet);
  font-size:var(--fs-2); font-weight:800; letter-spacing:var(--tracking-caps); text-transform:uppercase;
}
.subnav button{
  position:relative; background:transparent; border:0; padding:19px 20px 17px;
  font-size:16.5px; font-weight:600; color:var(--ink-2); border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.subnav button:hover{color:var(--violet); background:var(--violet-l2)}
.subnav button::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:transparent;
}
.subnav button.act{
  color:var(--violet); font-weight:700;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--violet-l) 100%);
}
.subnav button.act::after{background:linear-gradient(90deg,var(--violet) 0%,var(--orange) 100%)}
.subnav .hint{
  margin-left:auto; display:flex; align-items:center; font-size:var(--fs-2); color:var(--mut);
}

@media (max-width:900px){
  header nav{margin-left:0}
  header .hdr-right{margin-left:0; align-items:flex-start}
  header .hdr-right .who{text-align:left}
  .subnav button{padding:15px 14px 13px; font-size:var(--fs-3)}
  .subnav{top:auto; position:static}
  .subnav .in{padding:0 16px; gap:0}
  .subnav .lb{width:100%; border-right:0; padding:12px 0 6px; margin:0}
  .subnav button{padding:12px 12px 11px}
}
/* Одинаковые реальные зазоры вокруг разделителя вместо рамки у картинки. */
#app>header{isolation:isolate}
header .logo{gap:0;max-width:100%;min-width:0;flex-shrink:0}
header .logo::before{display:none}
header .brand-trigger{position:relative;display:block;max-width:100%;border:0;padding:0;background:transparent;font:inherit;letter-spacing:inherit;text-align:left;color:#fff;cursor:pointer;border-radius:6px;flex-shrink:0}
header .brand-trigger:focus-visible{outline:2px solid #fff;outline-offset:6px}
header .logo .brand-default{display:flex;align-items:center;gap:16px;min-height:40px;color:#fff;-webkit-text-fill-color:currentColor}
header .brand-dobro{display:block;width:128px;height:auto;flex:none}
header .logo .brand-divider{display:block;width:1px;height:28px;background:rgba(255,255,255,.32);flex:none}
header .logo .brand-title{display:block;color:#fff;-webkit-text-fill-color:currentColor;white-space:nowrap;font-size:16px;letter-spacing:.035em}
header .logo .brand-title .brand-orange{color:#FF8A3D;-webkit-text-fill-color:currentColor}
header .brand-myvmeste{position:absolute;left:50%;top:50%;width:280px;max-width:100%;height:auto;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
header>.logo,header>nav,header>.hdr-right{position:relative;z-index:2}
header>.header-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* На оранжевой фазе меню сохраняет контраст и полностью работает. */
header.brand-celebrating nav button:not(.act),header.brand-celebrating .who,header.brand-celebrating .who b,header.brand-celebrating .who .pos{animation:brand-menu-ink 10.8s ease-in-out both}
header.brand-celebrating .add-practice{animation:brand-action-fill 10.8s ease-in-out both}
header.brand-celebrating .exit,header.brand-celebrating .badge-mode{animation:brand-small-control 10.8s ease-in-out both}
@keyframes brand-menu-ink{0%,100%{color:#E6D8F2}27.778%,72.222%{color:#33044A}}
@keyframes brand-action-fill{0%,100%{background:#FF5D00}27.778%,72.222%{background:#550577}}
@keyframes brand-small-control{0%,100%{color:#fff;background:rgba(255,255,255,.12)}27.778%,72.222%{color:#33044A;background:rgba(255,255,255,.7)}}
@media(max-width:600px){
  #app>header{padding:14px 16px}
  header .logo{width:100%}
  header .logo .brand-default{gap:12px;min-height:36px}
  header .brand-dobro{width:104px}
  header .logo .brand-title{font-size:12px;letter-spacing:.02em}
  header .brand-myvmeste{width:250px}
  header .hdr-right{width:100%;min-width:0;max-width:100%;align-items:flex-start}
  header .hdr-actions{max-width:100%;flex-wrap:wrap;gap:8px}
  header .hdr-right .who{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
  .dk-row{padding:12px}
}
@media(max-width:370px){header .brand-dobro{width:90px}header .logo .brand-default{gap:10px}header .logo .brand-title{font-size:11px}}
@media(prefers-reduced-motion:reduce){
  #app>header::before,#app>header::after{animation:none;opacity:.7}

}





/* Три залитых объёма: фиолетовый ореол, оранжевый свет, белая сердцевина. */
#app>header{overflow:visible}
#app>header::before,#app>header::after{content:none;animation:none;box-shadow:none}
header>.header-volume{position:absolute;left:0;bottom:-40px;display:block;width:100%;height:104px;overflow:hidden;z-index:1;pointer-events:none}
.header-volume path{stroke:none}
.header-volume .volume-violet{fill:#CA47F0;opacity:.38;filter:url(#header-volume-violet)}
.header-volume .volume-orange{fill:#FF5D00;opacity:.95;filter:url(#header-volume-orange)}
.header-volume .volume-core{fill:#FFFFFF;opacity:.72;filter:url(#header-volume-core)}
.header-volume-still{display:none}
@media(prefers-reduced-motion:reduce){
  .header-volume-motion{display:none}
  .header-volume-still{display:block}
}


/* Одна длинная лента: фиолетовый → оранжевый → исходный фиолетовый. */
.header-gradient{
  position:absolute;inset:0;opacity:0;
  background:linear-gradient(100deg,#2D0341 0%,#550577 12.4%,#680E8E 20%,#FF5D00 36%,#FF5D00 64%,#2D0341 80%,#550577 92.4%,#680E8E 100%);
  background-size:500% 100%;background-position:0% 50%;background-repeat:no-repeat;
}
.brand-celebrating .header-gradient{animation:brand-gradient-pass 10.8s linear both}
@keyframes brand-gradient-pass{
  0%{background-position:0% 50%;opacity:0}
  5%{opacity:1}
  41.667%,58.333%{background-position:50% 50%;opacity:1}
  95%{opacity:1}
  100%{background-position:100% 50%;opacity:0}
}
/* Размер задаётся по самой надписи, без пустых полей в SVG. */
header .brand-myvmeste{left:0;top:50%;width:100%;max-width:440px;height:auto;transform:translateY(-50%)}
.brand-celebrating .brand-default{animation:brand-original-fade 10.8s ease-in-out both}
.brand-celebrating .brand-myvmeste{animation:brand-myvmeste-fade 10.8s linear both}
@keyframes brand-original-fade{0%,100%{opacity:1}16.667%,85%{opacity:0}}
/* Вход и выход прежние; между ними белый логотип держится на 1,8 с дольше. */
@keyframes brand-myvmeste-fade{
  0%,18.333%,83.333%,100%{opacity:0}
  25%,75%{opacity:.1}
  33.333%,66.667%{opacity:.5}
  40%,60%{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .brand-celebrating .header-gradient{background:#FF5D00;animation:brand-gradient-still 10.8s ease-in-out both}
}
@keyframes brand-gradient-still{0%,100%{opacity:0}31.667%,68.333%{opacity:1}}

/* 28.09.2026 · логотип на ноутбуках чуть компактнее, чтобы меню помещалось в одну строку рядом с ним */
@media (min-width:601px) and (max-width:1440px){
  header .brand-dobro{width:112px}
  header .logo .brand-default{gap:12px}
  header .logo .brand-title{font-size:14.5px}
}
@media (min-width:601px) and (max-width:1440px){
  header .logo .brand-title{font-size:14px; letter-spacing:.03em}
}