/* Shared passive site shell. Page content owns its own layout and appearance. */
.site-page {
  --site-shell: #15191f;
  --site-shell-deep: #11151a;
  --site-ink: #182338;
  --site-muted: #aeb9ca;
  --site-focus: rgba(61, 112, 220, .55);
  --site-gutter: clamp(16px, 4vw, 72px);
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--site-ink);
  background: #eef2f6;
  font-family: Manrope, "Segoe UI", sans-serif;
}

.site-page--wide { display: flex; flex-direction: column; }
.site-page--wide .site-wide-content { min-width: 0; flex: 1 0 auto; }

.site-header *,
.site-header *::before,
.site-header *::after,
.site-footer *,
.site-footer *::before,
.site-footer *::after { box-sizing: border-box; }

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 3px;
}

.site-header {
  position: relative;
  z-index: 20;
  min-height: 60px;
  padding-inline: var(--site-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: var(--site-muted);
  background: var(--site-shell);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.site-brand { display: flex; align-items: center; flex: 0 0 auto; }
.site-brand img { width: auto; height: 30px; display: block; filter: drop-shadow(0 3px 8px rgba(5, 12, 23, .42)); transform: translateY(-3px); }
.site-brand { text-decoration: none; }

.site-navigation { min-width: 0; margin-left: auto; }
.site-navigation-toggle { display: none; }
.site-navigation-control { display: none; }
.site-navigation-toggle:focus-visible + .site-navigation-control {
  outline: 3px solid var(--site-focus);
  outline-offset: 3px;
}
.site-navigation-content { display: flex; align-items: center; gap: clamp(18px, 3vw, 38px); }
.site-menu { min-width: 0; }
.site-menu .Level0,
.site-menu .Level1 { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 42px); }
.site-menu .Level2 { display: none; }

/* MainMenu reverses its array for float:right; restore its source visual order. */
.site-menu .Level0 { flex-direction: row-reverse; }
.site-menu .Level1 {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  min-height: 44px;
  padding: 0 var(--site-gutter);
  justify-content: flex-start;
  flex-direction: row-reverse;
  background: linear-gradient(180deg, rgba(7, 18, 34, .94), rgba(10, 24, 44, .9));
  border-bottom: 1px solid rgba(210, 225, 241, .12);
}
.site-page--classic .site-header:has(.site-menu .Level1) { margin-bottom: 44px; }
.site-menu .Left,
.site-menu .Right { display: none; }
.site-menu .Item { flex: 0 0 auto; }
.site-menu a,
.site-menu span,
.site-header .User a,
.site-header .User .Logout {
  color: var(--site-muted);
  font: 500 11px/1 Manrope, "Segoe UI", sans-serif;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-menu .Level0 span,
.site-menu .Level0 a:hover,
.site-menu .Level0 a:focus-visible,
.site-menu .Level1 span,
.site-menu .Level1 a:hover,
.site-menu .Level1 a:focus-visible { color: #fff; }
.site-menu .Level0 span,
.site-menu .Level1 span { font-weight: 700; }

.site-header .User {
  min-width: 0;
  padding-left: clamp(16px, 2vw, 28px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  border-left: 1px solid rgba(255, 255, 255, .13);
}
.site-header .User a,
.site-header .User form { min-width: 0; }
.site-header .User a,
.site-header .User .Logout { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.site-header .User .Name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.site-header .User .Login::before,
.site-header .User .Name::before,
.site-header .User .Signup::before,
.site-header .User .Logout::before {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: center / 12px 12px no-repeat;
  content: "";
}
.site-header .User .Login::before,
.site-header .User .Name::before { background-image: url("/assets/site/v1/images/marker-login.png"); }
.site-header .User .Signup::before,
.site-header .User .Logout::before { background-image: url("/assets/site/v1/images/marker-signup.png"); }
.site-header .User .Logout { padding: 0; background: transparent; border: 0; cursor: pointer; }
.site-header .User a:hover,
.site-header .User a:focus-visible,
.site-header .User .Logout:hover,
.site-header .User .Logout:focus-visible { color: #fff; }

.site-footer {
  position: relative;
  min-height: 48px;
  color: #aeb9c8;
  background: var(--site-shell-deep);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.site-footer::before { position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(74, 193, 222, .56), rgba(229, 179, 65, .62), transparent); content: ""; }
.site-footer-inner { width: min(100% - clamp(32px, 8vw, 144px), 1480px); min-height: 48px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 11px; }
.site-footer a { color: #dbe5f1; letter-spacing: .04em; text-decoration: none; }
.site-footer-inner > a::before { width: 15px; height: 15px; margin-right: 7px; display: inline-block; background: url("/assets/site/v1/images/marker-signup.png") center / 15px 15px no-repeat; content: ""; vertical-align: middle; }
.site-footer a:hover,
.site-footer a:focus-visible { color: #fff; }

@media (max-width: 760px) {
  .site-header { padding-block: 10px; }
  .site-page--classic .site-header:has(.site-menu .Level1) { margin-bottom: 0; }
  .site-navigation { position: relative; }
  .site-navigation-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    display: block;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .site-navigation-control { min-height: 38px; padding: 0 12px; display: flex; align-items: center; color: #fff; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; cursor: pointer; font: 700 10px/38px Manrope, "Segoe UI", sans-serif; letter-spacing: .07em; text-transform: uppercase; }
  .site-navigation-control::after { margin-left: 8px; display: inline-block; content: "⌄"; }
  .site-navigation-toggle:checked + .site-navigation-control::after { transform: rotate(180deg); }
  .site-navigation-content { position: absolute; top: calc(100% + 9px); right: 0; z-index: 30; min-width: min(286px, calc(100vw - 32px)); padding: 7px; display: none; flex-direction: column; align-items: stretch; gap: 7px; background: var(--site-shell); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; box-shadow: 0 18px 42px rgba(4, 9, 18, .34); }
  .site-navigation-toggle:checked ~ .site-navigation-content { display: flex; }
  .site-menu .Level0,
  .site-menu .Level1,
  .site-header .User { position: static; padding: 0; flex-direction: column; align-items: stretch; gap: 2px; background: transparent; border: 0; }
  .site-menu .Level1 { margin: 7px 0; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .11); border-bottom: 1px solid rgba(255, 255, 255, .11); }
  .site-menu .Level1::before { padding: 4px 12px 6px; color: #75849a; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; content: "В этом разделе"; }
  .site-menu a,
  .site-menu span,
  .site-header .User a,
  .site-header .User .Logout { padding: 11px 12px; border-radius: 7px; }
  .site-menu .Level1 a,
  .site-menu .Level1 span { padding-left: 24px; }
  .site-menu a:hover,
  .site-menu a:focus-visible,
  .site-header .User a:hover,
  .site-header .User a:focus-visible,
  .site-header .User .Logout:hover,
  .site-header .User .Logout:focus-visible { background: rgba(255, 255, 255, .07); }
  .site-header .User { padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .11); }
  .site-header .User .Name { max-width: none; }
  .site-footer-inner { min-height: 64px; padding-block: 12px; display: block; font-size: 10px; line-height: 1.6; }
  .site-footer-inner > a { display: block; margin-top: 3px; }
}