@layer components {
  /* Шапка (A_Header). Над ней — строка .site-topbar (адрес, часы, номера), шире 1100px.
     Шапка: до 1100px — навигация и «Записаться»; уже — кнопки «позвонить» и «меню» (выдвижное меню, shared/_drawer). */
  .site-topbar {
    background: var(--soft-2);
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.3;
  }
  .site-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
    min-height: 40px;
    padding-block: 6px;
  }
  .site-topbar .icon { width: 18px; height: 18px; color: var(--accent-ink); }
  .site-topbar__address, .site-topbar__hours { display: inline-flex; align-items: center; gap: 8px; }
  .site-topbar__address { color: var(--ink-2); text-decoration: none; }
  .site-topbar__address:hover { color: var(--accent-ink); text-decoration: underline; }
  .site-topbar__hours { color: var(--ink-3); }
  /* Номера справа; не помещаются — переносятся на новую строку */
  .site-topbar__phones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 22px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
  }
  .site-topbar__phone {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
  }
  .site-topbar__phone:hover { color: var(--accent-ink); }
  .site-topbar__phone small { font-weight: 400; font-size: 13px; color: var(--ink-3); }

  @media (max-width: 1180px) {
    .site-topbar__hours { display: none; }
  }
  /* Уже 1100px — кнопка «позвонить» в шапке, номера и адрес в листе shared/_call_sheet и в меню */
  @media (max-width: 1100px) {
    .site-topbar { display: none; }
  }

  .site-header {
    position: relative;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--header-h);
  }
  .site-header__inner > .isc-logo { flex: none; }
  .site-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .site-nav { display: flex; gap: 2px; }
  .site-nav__item { position: relative; }
  .site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    font: 500 16px/1.4 var(--font);
    text-decoration: none;
    white-space: nowrap;
  }
  .site-nav__link:hover { background: var(--soft-2); }
  .site-nav__link[aria-current], .site-nav__link--active { color: var(--accent-ink); background: var(--soft); }
  .site-nav__link .icon { width: 16px; height: 16px; transition: transform 0.2s; }
  .site-nav__link[aria-expanded="true"] .icon { transform: rotate(180deg); }

  /* Выпадающий список раздела (Лечение, О болезни) */
  .site-nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 640px;
    padding: 12px;
    background: var(--surface);
    border-radius: var(--r-box);
    box-shadow: var(--shadow), 0 0 0 1px var(--line);
  }
  /* Невидимый мостик над списком: зазор 8px между пунктом и списком — тоже «внутри»,
     иначе мышь по дороге к списку уходит с пункта и меню закрывается */
  .site-nav__dropdown::before {
    content: "";
    position: absolute;
    inset: -10px 0 auto;
    height: 10px;
  }
  .site-nav__dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 8px;
  }
  .site-nav__dropdown a {
    display: block;
    break-inside: avoid;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.35;
    text-decoration: none;
  }
  .site-nav__dropdown a:hover { background: var(--soft-2); color: var(--ink); }
  .site-nav__dropdown a[aria-current] { color: var(--accent-ink); font-weight: 600; }

  /* Телефон с адресом под ним (.tel в макетах): блоки записи, «Как добраться», меню */
  .phone-link {
    color: var(--ink);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
  }
  .phone-link:hover { color: var(--accent-ink); }

  .site-header__compact { display: none; gap: 8px; }

  @media (max-width: 1240px) {
    .site-header__inner { gap: 16px; }
  }

  @media (max-width: 1100px) {
    .site-nav, .site-header__actions .btn--primary { display: none; }
    .site-header__compact { display: flex; }
  }

  /* Телефон: шапка прилипает к верху. Safari 26 (Liquid Glass) красит верхнюю панель по закреплённому
     у края элементу, поэтому фон непрозрачный и без backdrop-filter. */
  @media (max-width: 820px) {
    .site-header { position: sticky; top: 0; }
    .site-header__inner { gap: 10px; }
  }
}