/* ============================================================
   ФУНКЦИЯ ДИЗАЙНА · РАСКЛАДКА САЙТА
   Общий хедер, навигация, футер, хлебные крошки, возврат домой.
   Зависит от tokens.css + base.css.
   ============================================================ */

/* — Стеклянный хедер (sticky сверху, на всех страницах) — */
.site-header{
  position:sticky;top:0;z-index:50;
  background:hsl(var(--background) / .8);-webkit-backdrop-filter: blur(20px); backdrop-filter:blur(20px);
  border-bottom:1px solid hsl(var(--border));
}
.site-header__inner{
  max-width:var(--content-width);margin:0 auto;
  display:flex;align-items:center;gap:var(--space-lg);
  padding:.7rem clamp(1rem,4vw,2rem);
}
.site-brand{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.02em;
  color:hsl(var(--foreground));white-space:nowrap;
}
/* Марка-логотип: SVG (black для светлой темы, white для тёмной).
   Путь CSS-относительный (от assets/css/) — работает с любой глубины страницы. */
.site-brand__mark{
  width:1.5rem;height:1.5rem;flex:none;
  background:url(../logo/black.svg) center/contain no-repeat;
}
.dark .site-brand__mark{background-image:url(../logo/white.svg)}
/* Навигация занимает свободную ширину: ссылки слева, блок пользователя (.site-actions)
   прижат вправо (margin-left:auto). На мобиле весь .site-nav уходит в бургер (см. base.css). */
.site-nav{display:flex;flex:1;flex-direction:row;gap:var(--space-lg);align-items:center;min-width:0}
.site-nav__links{display:flex;flex-direction:row;gap:.25rem;flex-wrap:wrap;align-items:center}
.site-actions{margin-left:auto;display:flex;align-items:center;gap:.6rem}

/* ─── ЕДИНЫЙ СТИЛЬ КОНТРОЛОВ ШАПКИ (унификация) ───
   ВСЕ интерактивные элементы шапки — пункты навигации (.site-nav a),
   кнопка входа/выхода (.site-login), переключатель темы (.theme-toggle),
   бургер (.site-burger) — ведут себя ОДИНАКОВО:
     • покой  — спокойный текст/иконка hsl(var(--muted-fg));
     • hover  — hsl(var(--foreground)) + лёгкая заливка hsl(var(--muted-bg));
       у контролов с обводкой рамка усиливается до hsl(var(--foreground));
     • переход — единый (--dur-fast / --ease) по color/background/border.
   Акцент --level в ХРОМ-шапке НЕ используется (он только для контента).
   Текущий пункт навигации — инверсная заливка (.is-active). */
.site-nav a,
.site-login{
  text-decoration:none;color:hsl(var(--muted-fg));font-size:.85rem;font-weight:500;
  white-space:nowrap;cursor:pointer;
  background:none;font-family:inherit; /* FD-913: чтобы <button class=site-login> совпал с <a> */
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.site-nav a{padding:.4rem .7rem;border-radius:var(--radius-sm)}
.site-login{padding:.4rem .9rem;border:1px solid hsl(var(--border));border-radius:var(--radius-full)}

/* единый hover для всех контролов: foreground + лёгкая заливка */
.site-nav a:hover,
.site-login:hover,
.site-header .theme-toggle:hover,
.site-header .site-burger:hover{
  color:hsl(var(--foreground));background:hsl(var(--muted-bg));
}
/* у контролов с обводкой — рамка усиливается до foreground */
.site-login:hover,
.site-header .theme-toggle:hover,
.site-header .site-burger:hover{border-color:hsl(var(--foreground))}

/* активный пункт навигации — контрастная заливка (текущая страница) */
.site-nav a.is-active,
.site-nav a.is-active:hover{color:hsl(var(--background));background:hsl(var(--foreground))}

/* иконочные кнопки (тема, бургер) в шапке — тот же покой и переход */
.site-header .theme-toggle{position:static;-webkit-backdrop-filter: none; backdrop-filter:none;background:transparent;color:hsl(var(--muted-fg))}
.site-header .site-burger{color:hsl(var(--muted-fg));
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}

/* свернуть навигацию на узких экранах, оставить бренд + тему */
@media(max-width:720px){
  .site-nav{display:none}
  .site-header__inner{justify-content:space-between}
}

/* — Хлебные крошки — */
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  font-size:.8rem;color:hsl(var(--muted-fg));font-family:var(--font-mono)}
.crumbs a{text-decoration:none;color:hsl(var(--muted-fg));transition:color var(--dur-fast) var(--ease)}
.crumbs a:hover{color:var(--level)}
.crumbs .sep{opacity:.5}

/* — Возврат домой (минимальный вариант, если нет полного хедера) — */
.home-link{
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:.85rem;color:hsl(var(--muted-fg));font-weight:500;
  transition:color var(--dur-fast) var(--ease);
}
.home-link:hover{color:var(--level)}

/* — Футер сайта — */
.site-footer{
  border-top:1px solid hsl(var(--border));margin-top:var(--space-3xl);
  background:hsl(var(--muted-bg) / .4);
}
.site-footer__inner{
  max-width:var(--content-width);margin:0 auto;
  padding:var(--space-xl) clamp(1rem,4vw,2rem);
  display:flex;flex-wrap:wrap;gap:var(--space-lg);align-items:center;
  font-size:.85rem;color:hsl(var(--muted-fg));
}
.site-footer a{color:hsl(var(--muted-fg));text-decoration:none}
.site-footer a:hover{color:hsl(var(--foreground))}
.site-footer__brand{font-family:var(--font-display);font-weight:600;color:hsl(var(--foreground))}