/* Шапка и мобильное меню Studentix (S03; подвал — css/footer.css). Поверх style.min.css: механика и вид как на slidepix. */

/* --- Шапка --- */
/* При открытом меню шапка (absolute, z-index 7) выше всех секций, иначе затемнение уходит под них */
.header.header--menu-open { z-index: 50; }
.header .nav a[aria-current="page"]::after { width: 100%; }
.header :focus-visible {
  outline: 3px solid var(--stx-accent-ring, rgba(47, 107, 255, 0.3));
  outline-offset: 2px;
  border-radius: 6px;
}
/* S31-r: пункты меню в одну строку, без переносов («Виды работ», «Инструменты»); тонкие иконки-шевроны */
.header .nav > a,
.header .nav-drop__link { white-space: nowrap; }
.header .nav-drop__btn svg { stroke-width: 1.5; }

/* S24-r: шапка-пилюля по docs/DESIGN.md («Шапка-пилюля»): стекло вместо белой плашки с обводкой,
   контейнер шире (style.min.css сжимает до 800px на 1280–1320 и «Виды работ» переносится),
   пункты — таблетки с подсветкой вместо подчёркивания, тонкие иконки у «Виды работ» и «Инструменты»,
   аккаунт-пилюля в тех же токенах. На ≤1024 ширину задаёт style.min.css (!important), здесь только вид. */
.header .container {
  width: min(1120px, calc(100% - 48px));
  gap: 12px;
  padding: 8px 10px 8px 18px;
  outline: 0;
  border: var(--stx-glass-border, 1px solid rgba(255, 255, 255, 0.55));
  border-radius: var(--stx-r-pill, 999px);
  background: var(--stx-glass-bg-strong, rgba(255, 255, 255, 0.88));
  -webkit-backdrop-filter: var(--stx-glass-blur, blur(20px) saturate(140%));
  backdrop-filter: var(--stx-glass-blur, blur(20px) saturate(140%));
  box-shadow: var(--stx-glass-shadow, 0 8px 30px rgba(20, 40, 80, 0.1)), var(--stx-glass-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.7));
}
.header .logo { width: 150px; flex: none; display: inline-flex; align-items: center; min-height: 44px; } /* S31: зона касания логотипа 44 px */
/* только верхняя строка меню (.container > .nav); мобильная шторка .mobile-menu .nav не затрагивается */
.header .container > .nav {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.header .container > .nav > a,
.header .nav-drop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--stx-r-field, 10px);
  font: 500 15px/1 "Inter", sans-serif;
  letter-spacing: -0.005em;
  color: var(--stx-text-2, #566274);
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
@media (max-width: 600px) {
  .header .container > .nav > a,
  .header .nav-drop {
    min-height: 44px;
  }
}
.header .container > .nav > a::after,
.header .nav .nav-drop__link::after { content: none; } /* S26a-r: .nav в селекторе — иначе .header .nav a::after из style.min.css сильнее и рисует подчёркивание */
.header .container > .nav > a:hover,
.header .nav-drop:hover,
.header .nav-drop:focus-within { background: var(--stx-fill, rgba(27, 36, 48, 0.05)); color: var(--stx-text, #1b2430); }
.header .container > .nav > a[aria-current="page"] { background: var(--stx-accent-soft, rgba(47, 107, 255, 0.1)); color: var(--stx-text, #1b2430); }
/* S26a-r: ссылка тянется на всю высоту пилюли 40px (клик по отступам тоже ведёт на хаб), без подчёркивания */
.header .nav-drop { padding-left: 0; padding-right: 6px; gap: 2px; }
.header .nav .nav-drop__link {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 6px;
  padding: 0 0 0 12px;
  font: inherit;
  color: inherit;
}
.header .nav-drop__link:hover,
.header .nav-drop__link:focus { color: inherit; text-decoration: none; }
.header .nav-drop__icon { width: 16px; height: 16px; flex: none; color: var(--stx-text-3, #8a94a6); transition: color 0.18s ease; }
.header .nav-drop:hover .nav-drop__icon,
.header .nav-drop:focus-within .nav-drop__icon,
.header .container > .nav > a:hover .nav-drop__icon,
.header .container > .nav > a[aria-current="page"] .nav-drop__icon { color: var(--stx-accent, #2f6bff); }
.header .nav-drop__btn { width: 22px; height: 22px; color: var(--stx-text-3, #8a94a6); }
.header .nav-drop__btn svg { width: 14px; height: 14px; }
.header .nav-drop__btn:hover { background: var(--stx-fill-2, rgba(27, 36, 48, 0.09)); color: var(--stx-text, #1b2430); }
.header .nav-drop__panel { top: calc(100% + 8px); }
/* аккаунт-пилюля и «Войти» — те же токены */
.header .stx-user__btn {
  min-height: 40px;
  padding: 3px 12px 3px 3px;
  border-color: var(--stx-line, rgba(27, 36, 48, 0.14));
  font: 500 14px/1.2 "Inter", sans-serif;
  letter-spacing: -0.005em;
  color: var(--stx-text, #1b2430);
}
@media (max-width: 600px) {
  .header .stx-user__btn {
    min-height: 44px;
  }
}
.header .stx-user__btn:hover,
.header .stx-user__btn[aria-expanded="true"] { border-color: var(--stx-accent-line, rgba(47, 107, 255, 0.28)); box-shadow: var(--stx-shadow-sm, 0 1px 2px rgba(20, 40, 80, 0.04), 0 4px 12px rgba(20, 40, 80, 0.06)); }
.header .stx-user__avatar { width: 32px; height: 32px; }
/* S22-r2: вместо аватара DLE (серая заглушка) — тонкая иконка user в круглой плашке акцента */
.header .stx-user__ico { display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--stx-accent-soft, rgba(47, 107, 255, 0.1)); color: var(--stx-accent, #2f6bff); }
.header .stx-user__ico .stx-i { width: 18px; height: 18px; }
.header .stx-user__name { max-width: 160px; }
.header .stx-user__caret { width: 14px; height: 14px; color: var(--stx-text-3, #8a94a6); }
@media (max-width: 600px) {
  /* телефон: только иконка, пилюля — круг 44 */
  .header .stx-user__btn { width: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; }
  .header .stx-user__name, .header .stx-user__caret { display: none; }
}
.header a.header__sign {
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--stx-r-pill, 999px);
  background: var(--stx-accent, #2f6bff);
  font: 600 15px/1 "Inter", sans-serif;
  letter-spacing: -0.005em;
  box-shadow: var(--stx-accent-shadow, 0 6px 16px rgba(47, 107, 255, 0.26));
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
@media (max-width: 600px) {
  .header a.header__sign {
    min-height: 44px;
  }
}
.header a.header__sign::after { content: none; }
.header a.header__sign:hover { background: var(--stx-accent-hover, #2258ee); transform: translateY(-1px); }
.header a.header__sign:active { background: var(--stx-accent-active, #1b4dd6); transform: none; box-shadow: none; }
@media (max-width: 1024px) {
  .header .container { padding: 8px 10px 8px 14px; border-radius: 20px; }
  .header .container > .nav { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .header .container > .nav > a,
  .header .nav-drop,
  .header .nav-drop__icon,
  .header a.header__sign { transition: none; }
  .header a.header__sign:hover { transform: none; }
}
.hamburger { -webkit-tap-highlight-color: transparent; }
/* S22-r: гамбургер тонкий, как остальные иконки (stroke 1.5), цвет вторичного текста; полоски 24×1.5 в зоне касания 44×44 */
.header .hamburger span { left: 8px; width: 24px; height: 1.5px; border-radius: 1px; background: var(--stx-text, #1b2430); }
@media (max-width: 600px) {
  /* область нажатия 44×44 при видимых полосках 40×25 */
  .hamburger::before { content: ""; position: absolute; inset: -10px -4px; }
}

/* --- «Виды работ»: выпадающий список (S25a), стекло по tokens.css --- */
.header .nav-drop { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.header .nav-drop__btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
}
@media (max-width: 600px) {
  .header .nav-drop__btn {
    width: 44px;
    height: 44px;
  }
}
.header .nav-drop__btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.header .nav-drop__btn:hover { background: var(--stx-fill, rgba(27, 36, 48, 0.05)); }
/* мост над зазором, чтобы список не закрывался при переходе мышью */
.header .nav-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.header .nav-drop__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 232px;
  padding: 8px;
  border: var(--stx-glass-border, 1px solid rgba(255, 255, 255, 0.55));
  border-radius: var(--stx-r-panel, 18px);
  /* S26a-r: белая непрозрачная панель — backdrop-filter у .header .container не даёт размыть страницу под ней, текст просвечивал */
  border-color: var(--stx-separator, rgba(27, 36, 48, 0.08));
  background: var(--stx-surface, #fff);
  box-shadow: var(--stx-shadow-lg, 0 24px 64px rgba(20, 40, 80, 0.18));
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.header .nav-drop:hover .nav-drop__panel,
.header .nav-drop:focus-within .nav-drop__panel,
.header .nav-drop.is-open .nav-drop__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
/* закрыт по Esc / клику вне — не держать открытым по :hover и :focus-within */
.header .nav-drop.is-closed .nav-drop__panel { opacity: 0; visibility: hidden; transform: translate(-50%, -6px); }
.header .nav-drop.is-open .nav-drop__btn svg { transform: rotate(180deg); }
.header .nav-drop__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--stx-r-field, 10px);
  font-size: 15px;
  color: var(--stx-text, #1b2430);
  white-space: nowrap;
}
.header .nav .nav-drop__panel a::after { content: none; }
.header .nav-drop__panel a:hover,
.header .nav-drop__panel a:focus-visible { background: var(--stx-accent-soft, rgba(47, 107, 255, 0.1)); color: var(--stx-accent-text, #1f52d9); }
.header .nav-drop__panel .stx-i { width: 20px; height: 20px; color: var(--stx-accent, #2f6bff); }
.header .nav-drop__all { margin-top: 4px; border-top: 1px solid var(--stx-line, rgba(27, 36, 48, 0.14)); border-radius: 0 0 var(--stx-r-field, 10px) var(--stx-r-field, 10px) !important; justify-content: space-between; font-weight: 600; }
.header .nav-drop__all .stx-i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .header .nav-drop__panel,
  .header .nav-drop__btn svg { transition: none; }
}

/* --- Мобильное меню --- */
/* S31: светлая шторка вместо тёмной (#020218 из style.min.css). Шапка-пилюля с логотипом и крестиком
   остаётся над шторкой (z-index), поэтому логотип в шторке не дублируется. Пункты 48 px с тонкими иконками. */
.header .container { position: relative; z-index: 2; }
.mobile-menu {
  visibility: hidden;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 92px 16px 24px;
  align-items: stretch;
  /* непрозрачная белая шторка: .header с transform ограничивает backdrop-filter, стекло не размывало текст hero */
  background: var(--stx-surface, #fff);
  border-bottom: var(--stx-glass-border, 1px solid rgba(255, 255, 255, 0.55));
  border-radius: 0 0 28px 28px;
  box-shadow: var(--stx-shadow-lg, 0 24px 64px rgba(20, 40, 80, 0.18));
  color: var(--stx-text, #1b2430);
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-menu.active {
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
}
.header .hamburger.active span { background: var(--stx-text, #1b2430); }
.mobile-menu .nav,
.mobile-menu.active .nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--stx-separator, rgba(27, 36, 48, 0.08));
}
.mobile-menu .nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--stx-r-card, 14px);
  font: 500 17px/1.2 "Inter", sans-serif;
  letter-spacing: -0.01em;
  color: var(--stx-text, #1b2430);
  overflow: visible;
  transition: background-color 0.18s ease;
}
.mobile-menu .nav a::after { content: none; }
.mobile-menu .nav a span { margin: 0; }
.mobile-menu .nav a:hover,
.mobile-menu .nav a:active { background: var(--stx-fill, rgba(27, 36, 48, 0.05)); color: var(--stx-text, #1b2430); }
.mobile-menu .nav a[aria-current="page"] { background: var(--stx-accent-soft, rgba(47, 107, 255, 0.1)); text-decoration: none; }
.mobile-menu__i { width: 20px; height: 20px; flex: none; color: var(--stx-accent, #2f6bff); }
/* чипы высотой 44 (зона касания) растягиваются по строке — ровные ряды без лесенки и без переносов внутри чипа */
.mobile-menu__types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding-bottom: 20px;
}
.mobile-menu__label {
  flex: 1 0 100%;
  padding: 0 4px;
  font: 600 12px/1.4 "Inter", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stx-text-3, #8a94a6);
  margin-bottom: 2px;
}
.mobile-menu__types a {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 14px;
  white-space: nowrap;
  text-align: center;
  border: 1px solid var(--stx-line, rgba(27, 36, 48, 0.14));
  border-radius: var(--stx-r-pill, 999px);
  background: var(--stx-surface, #fff);
  font: 500 15px/1.2 "Inter", sans-serif;
  color: var(--stx-text, #1b2430);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.mobile-menu__types a:hover { border-color: var(--stx-accent-line, rgba(47, 107, 255, 0.28)); color: var(--stx-accent-text, #1f52d9); }
.mobile-menu :focus-visible { outline: 3px solid var(--stx-accent-ring, rgba(47, 107, 255, 0.3)); outline-offset: 2px; }
.mobile-menu a.header__sign {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border-radius: var(--stx-r-pill, 999px);
  background: var(--stx-accent, #2f6bff);
  color: var(--stx-on-accent, #fff);
  font: 600 16px/1 "Inter", sans-serif;
  box-shadow: var(--stx-accent-shadow, 0 6px 16px rgba(47, 107, 255, 0.26));
}
.mobile-menu a.header__sign::after { content: none; }
.mobile-menu a.button-auth { display: none; } /* «Войти» уже есть в шапке-пилюле над шторкой */
/* .header с transform (анимация появления) — блок-контейнер для fixed, поэтому высота задана явно */
.mobile-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  background: var(--stx-scrim, rgba(27, 36, 48, 0.32));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-menu-backdrop.active { opacity: 1; }
@media (max-width: 1024px) {
  /* гамбургер — зона касания 44×44, полоски по центру */
  .header .hamburger { width: 44px; height: 44px; flex: none; }
  .header .hamburger span { left: 10px; width: 24px; }
  .header .hamburger span:nth-child(1) { top: 15px; }
  .header .hamburger span:nth-child(3) { bottom: 15px; }
  .header .hamburger.active span:nth-child(1),
  .header .hamburger.active span:nth-child(3) { top: 50%; bottom: auto; }
  .hamburger::before { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu.active,
  .mobile-menu-backdrop,
  .hamburger span { transition: none; }
}