/* Шапка сайта [Da]Bro — одна на все страницы нового дизайна (15.10.2026). Разметку даёт shared/site_header.py.
   Цвета — переменные палитры страницы (--bg, --ink, --muted, --line, --card, --accent), в скобках — Лаванда на случай,
   если страница их не задала. Логотип — два трафарета assets/mask-logo-*.png, их страница кладёт рядом с собой.
   Без скриптов: выпадающие списки — :hover / :focus-within, меню на телефоне — <details>. */

:root{--sh-h:76px}
@media (max-width:640px){:root{--sh-h:64px}}
html{scroll-padding-top:calc(var(--sh-h) + 12px)}   /* якоря не уезжают под закреплённую шапку */

/* логотип Л11 (15.10): «[DA]» со скобками на лавандовой плашке, все буквы чёрные; на тёмном BRO светлый (--logo-bro),
   плашка и DA те же. Плашка в единицах логотипа 600×176: x −24…323, y −22…198 — как в dabro-logo-l11.svg */
.logo{position:relative;display:inline-block;height:30px;aspect-ratio:600/176;--logo-tile:var(--accent,#B193F3);
  --logo-da:var(--ink,#16121C);--logo-bro:var(--ink,#16121C)}
.logo i{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.logo__da{background:var(--logo-da);-webkit-mask-image:url(../assets/mask-logo-da.png);mask-image:url(../assets/mask-logo-da.png)}
.logo__bro{background:var(--logo-bro);-webkit-mask-image:url(../assets/mask-logo-bro.png);mask-image:url(../assets/mask-logo-bro.png)}
.logo .logo__tile{inset:auto;left:-4%;top:-12.5%;width:57.83%;height:125%;background:var(--logo-tile);-webkit-mask:none;mask:none}

/* закреплена сверху; линия и тень появляются, когда страницу начали листать */
.sh{position:sticky;top:0;z-index:50;color:var(--ink,#16121C);
  background:color-mix(in srgb,var(--bg,#F7F5FB) 90%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line,#E1DAEC)}
@supports (animation-timeline: scroll()){
  .sh{border-bottom-color:transparent;animation:sh-stuck linear both;animation-timeline:scroll(root);animation-range:0 96px}
  @keyframes sh-stuck{to{border-bottom-color:var(--line,#E1DAEC);box-shadow:0 12px 30px -24px rgba(22,18,28,.5)}}
}
.sh__in{display:flex;align-items:center;gap:28px;min-height:var(--sh-h);max-width:1240px;margin-inline:auto;padding-inline:24px}
.sh__logo{display:block;flex:none;line-height:0;padding:4px 0 4px 4px}
.sh .logo{height:28px}

/* меню на широком экране */
.sh__nav{margin-right:auto}
.sh__nav>ul{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.sh__item{position:relative}
.sh__top{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:0;border-radius:8px;background:none;
  font:inherit;font-size:1.02rem;line-height:1.2;color:inherit;text-decoration:none;cursor:pointer;opacity:.86;
  transition:background-color .15s ease,opacity .15s ease}
.sh__top svg{flex:none;opacity:.6;transition:transform .2s ease}
.sh__item:focus-within>.sh__top,.sh__top[aria-current]{opacity:1;background:color-mix(in srgb,currentColor 7%,transparent)}
.sh__item:focus-within>.sh__top svg{transform:rotate(180deg)}
.sh__drop{position:absolute;left:-6px;top:100%;padding-top:8px;visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.sh__item:focus-within>.sh__drop{visibility:visible;opacity:1;transform:none;transition-delay:0s}
@media (hover:hover){
  .sh__item:hover>.sh__top{opacity:1;background:color-mix(in srgb,currentColor 7%,transparent)}
  .sh__item:hover>.sh__top svg{transform:rotate(180deg)}
  .sh__item:hover>.sh__drop{visibility:visible;opacity:1;transform:none;transition-delay:0s}
}
.sh__card{display:flex;flex-direction:column;min-width:280px;max-width:360px;padding:8px;border:1px solid var(--line,#E1DAEC);
  border-radius:12px;background:var(--card,#FFFFFF);box-shadow:0 22px 48px -28px rgba(22,18,28,.45)}
.sh__card a{display:block;padding:9px 12px;border-radius:8px;color:inherit;text-decoration:none;font-size:.97rem;line-height:1.3}
.sh__card a:hover,.sh__card a:focus-visible{background:color-mix(in srgb,var(--accent,#B193F3) 18%,transparent)}
.sh__card a[aria-current]{font-weight:650}
.sh__lbl{display:block;padding:12px 12px 4px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,#5D566A)}

/* справа: телефон, кнопка страницы, меню телефона */
.sh__right{display:flex;align-items:center;gap:20px}
.sh__phone{font-weight:650;font-size:1.02rem;white-space:nowrap;color:inherit;text-decoration:none}
.sh .btn{min-height:46px;padding:0 20px;font-size:.95rem}

.sh__burger{display:none}
.sh__burger summary{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;
  padding:0 11px;border-radius:8px;cursor:pointer;background:color-mix(in srgb,currentColor 7%,transparent)}
.sh__burger summary::-webkit-details-marker{display:none}
.sh__burger summary span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease}
.sh__burger[open] summary span:first-child{transform:translateY(4px) rotate(45deg)}
.sh__burger[open] summary span:last-child{transform:translateY(-4px) rotate(-45deg)}
.sh__sheet{position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - var(--sh-h));overflow:auto;overscroll-behavior:contain;
  padding:8px 16px 28px;background:var(--card,#FFFFFF);border-bottom:1px solid var(--line,#E1DAEC);
  box-shadow:0 24px 40px -28px rgba(22,18,28,.5)}
.sh__mgrp{padding:10px 0;border-bottom:1px solid var(--line,#E1DAEC)}
.sh__mgrp:last-child{border-bottom:0}
.sh__mtop{display:block;padding:8px 4px;font-weight:700;font-size:1.08rem;color:inherit;text-decoration:none}
.sh__sheet a:not(.sh__mtop){display:block;padding:9px 4px 9px 14px;color:inherit;text-decoration:none}
.sh__sheet .sh__lbl{padding:10px 4px 2px 14px}

@media (max-width:1080px){.sh__phone{display:none}.sh__in{gap:18px}.sh__top{padding:10px 10px}}
@media (max-width:900px){.sh__nav{display:none}.sh__burger{display:block}.sh__right{margin-left:auto;gap:10px}}
@media (max-width:640px){.sh__in{padding-inline:16px;gap:10px}.sh .logo{height:22px}
  .sh .btn{min-height:42px;padding:0 14px;font-size:.86rem}}
@media (prefers-reduced-motion:reduce){.sh,.sh *{transition:none!important}}