/* shell.css — оболочка сайта в стиле clean tech: шапка и подвал.
   Подключается после инлайновых стилей base.html, поэтому переопределяет их. */

:root {
  --dv-font-display: var(--ui-font-display, 'Plus Jakarta Sans', 'Inter', sans-serif);
  --dv-font-mono: var(--ui-font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace);
  --dv-nav-h: 64px;
}

/* Мобильное меню «живёт» за правым краем (translateX(102%)) и раньше давало
   горизонтальный скролл всей страницы. clip, а не hidden — чтобы sticky-шапка работала. */
html {
  overflow-x: clip;
}

/* ==========================================================================
   Шапка
   ========================================================================== */

.navbar.dv-nav {
  position: sticky;
  top: 0;
  /* Ниже .modal-backdrop (1040), чтобы модалки перекрывали шапку */
  z-index: 1030;
  margin-bottom: 2.25rem;
  padding: 0.55rem 0;
  background: color-mix(in srgb, var(--theme-nav-bg, #fff) 85%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ui-border, #e2e8f0);
  box-shadow: none;
}

.dv-nav .container {
  min-height: calc(var(--dv-nav-h) - 1.1rem);
}

/* На мобильных убираем размытие шапки: с backdrop-filter она становится containing block
   для fixed-меню, и закрытая панель (translateX(102%)) растягивала страницу по горизонтали. */
@media (max-width: 991.98px) {
  .navbar.dv-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--theme-nav-bg, #fff);
  }
}

.dv-nav .navbar-brand.dv-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  color: var(--ui-text-1, #0f172a);
}

.dv-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: #fff;
  background: var(--theme-button-bg, #2563eb);
  box-shadow: 0 4px 14px rgba(var(--theme-primary-rgb, 37, 99, 235), 0.28);
}

.dv-brand-text {
  font-family: var(--dv-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.dv-brand-tag {
  font-family: var(--dv-font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  color: var(--theme-primary, #2563eb);
  background: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.1);
  border: 1px solid rgba(var(--theme-primary-rgb, 37, 99, 235), 0.18);
}

.dv-nav .dv-nav-link.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.65rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  /* Пункты не должны переноситься: из-за переноса шапка «разъезжалась» на две строки */
  white-space: nowrap;
  color: var(--ui-text-2, #475569);
  transition: color var(--ui-dur, 200ms) var(--ui-ease, ease),
    background-color var(--ui-dur, 200ms) var(--ui-ease, ease);
}

.dv-nav .dv-nav-link.nav-link:hover,
.dv-nav .dv-nav-link.nav-link:focus-visible {
  color: var(--ui-text-1, #0f172a);
  background: var(--ui-surface-3, #f1f5f9);
}

.dv-nav .dv-nav-link.nav-link.is-active {
  color: var(--ui-text-1, #0f172a);
  background: var(--ui-surface-3, #f1f5f9);
}

.dv-nav .dv-nav-link.nav-link i {
  font-size: 0.82rem;
  opacity: 0.7;
}

.dv-nav .dv-nav-link--cta.nav-link {
  color: var(--theme-primary, #2563eb);
  background: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.1);
  border: 1px solid rgba(var(--theme-primary-rgb, 37, 99, 235), 0.18);
}

.dv-nav .dv-nav-link--cta.nav-link:hover,
.dv-nav .dv-nav-link--cta.nav-link:focus-visible,
.dv-nav .dv-nav-link--cta.nav-link.is-active {
  color: var(--theme-primary, #2563eb);
  background: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.16);
}

.dv-nav .dv-nav-link--cta.nav-link i {
  opacity: 1;
}

/* Группа разделов «Обучение»: выпадающее меню на своём слое рядом с триггером */
.dv-nav-group {
  position: relative;
}

.dv-nav .dv-nav-group__trigger.nav-link {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.dv-nav-group__chevron {
  font-size: 0.6rem !important;
  opacity: 0.55;
  transition: transform var(--ui-dur, 200ms) var(--ui-ease, ease);
}

.dv-nav-group.is-open .dv-nav-group__chevron {
  transform: rotate(180deg);
}

.dv-nav-group__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 232px;
  padding: 0.4rem;
  background: var(--ui-surface-overlay, #fff);
  border: 1px solid var(--ui-border, #e2e8f0);
  border-radius: 14px;
  box-shadow: var(--ui-shadow-lg, 0 18px 40px rgba(15, 23, 42, 0.14));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ui-dur, 200ms) var(--ui-ease, ease),
    transform var(--ui-dur, 200ms) var(--ui-ease, ease),
    visibility var(--ui-dur, 200ms) var(--ui-ease, ease);
  z-index: calc(var(--ui-z-nav, 1030) + 5);
}

/* Без :focus-within — иначе Escape не закрывает меню, пока фокус на кнопке.
   Клавиатура работает через is-open: Enter/Space на кнопке даёт click. */
.dv-nav-group:hover .dv-nav-group__menu,
.dv-nav-group.is-open .dv-nav-group__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dv-nav-group__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ui-text-2, #475569);
  text-decoration: none;
  transition: color var(--ui-dur, 200ms) var(--ui-ease, ease),
    background-color var(--ui-dur, 200ms) var(--ui-ease, ease);
}

.dv-nav-group__item:hover,
.dv-nav-group__item:focus-visible {
  color: var(--ui-text-1, #0f172a);
  background: var(--ui-surface-3, #f1f5f9);
  text-decoration: none;
}

.dv-nav-group__item i {
  width: 1rem;
  text-align: center;
  font-size: 0.82rem;
  opacity: 0.7;
}

/* На ноутбучных ширинах шапке нужен запас: сжимаем отступы, а не переносим строку */
@media (min-width: 992px) and (max-width: 1400px) {
  .dv-nav .dv-nav-link.nav-link {
    padding: 0.38rem 0.5rem;
    font-size: 0.86rem;
    gap: 0.35rem;
  }
}

/* Кнопка-переключатель светлой/тёмной темы */
.dv-theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--ui-border, #e2e8f0);
  background: var(--ui-surface-2, #f8fafc);
  color: var(--ui-text-2, #475569);
  cursor: pointer;
  transition: color var(--ui-dur, 200ms) var(--ui-ease, ease),
    border-color var(--ui-dur, 200ms) var(--ui-ease, ease),
    transform var(--ui-dur, 200ms) var(--ui-ease, ease);
}

.dv-theme-toggle:hover {
  color: var(--ui-text-1, #0f172a);
  border-color: var(--ui-border-strong, #cbd5e1);
}

.dv-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ui-accent-ring, rgba(37, 99, 235, 0.28));
}

/* В шапке мобильной панели кнопка стоит рядом с компактным переключателем языка
   и крестиком: 38px там выбивались бы из ряда. */
.dv-theme-toggle--compact {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 0.85rem;
}

.dv-theme-toggle .dv-icon-sun {
  display: none;
}

body[data-theme='dark'] .dv-theme-toggle .dv-icon-sun {
  display: block;
}

body[data-theme='dark'] .dv-theme-toggle .dv-icon-moon {
  display: none;
}

/* Кнопки авторизации в шапке */
.dv-nav .dv-btn-nav.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid var(--ui-border, #e2e8f0);
  background: var(--ui-surface-1, #fff);
  color: var(--ui-text-1, #0f172a);
  transition: transform var(--ui-dur, 200ms) var(--ui-ease, ease),
    box-shadow var(--ui-dur, 200ms) var(--ui-ease, ease),
    border-color var(--ui-dur, 200ms) var(--ui-ease, ease);
}

.dv-nav .dv-btn-nav.nav-link:hover {
  transform: translateY(-1px);
  border-color: var(--ui-border-strong, #cbd5e1);
  box-shadow: var(--ui-shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.05));
}

.dv-nav .dv-btn-nav--solid.nav-link {
  border-color: transparent;
  color: #fff;
  background: var(--theme-button-bg, #2563eb);
  box-shadow: 0 4px 14px rgba(var(--theme-primary-rgb, 37, 99, 235), 0.22);
}

.dv-nav .dv-btn-nav--solid.nav-link:hover {
  color: #fff;
  background: var(--theme-button-bg-hover, #1d4ed8);
}

/* ==========================================================================
   Подвал
   ========================================================================== */

.footer.dv-footer {
  margin-top: 4rem;
  padding: 2rem 0;
  background: transparent;
  border-top: 1px solid var(--ui-border, #e2e8f0);
}

.dv-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--dv-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ui-text-1, #0f172a);
  text-decoration: none;
}

.dv-footer-brand .dv-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 0.7rem;
}

.dv-footer-brand:hover {
  color: var(--theme-primary, #2563eb);
}

.dv-footer-note {
  font-size: 0.78rem;
  color: var(--ui-text-3, #94a3b8);
}

.dv-footer-links {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  flex-wrap: wrap;
}

.footer.dv-footer .dv-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--dv-font-mono);
  font-size: 0.78rem;
  color: var(--ui-text-3, #94a3b8);
  text-decoration: none;
  transition: color var(--ui-dur, 200ms) var(--ui-ease, ease);
}

.footer.dv-footer .dv-footer-link:hover {
  color: var(--ui-text-1, #0f172a);
}

@media (max-width: 767px) {
  .dv-footer-links {
    justify-content: center;
    gap: 1rem;
  }
}

@media (max-width: 991px) {
  .navbar.dv-nav {
    margin-bottom: 1.5rem;
  }
}

/* На десктопе контейнер меню не должен получать фон мобильной панели */
@media (min-width: 992px) {
  body[data-theme='dark'] .dv-nav .custom-mobile-menu {
    background: transparent;
    border: none;
    box-shadow: none;
  }
}

/* Волновой SVG-декор — часть прежнего оформления, в новой стилистике он мешает */
.svg-bg-decor {
  display: none !important;
}

/* ==========================================================================
   Тосты живых уведомлений: сервер присылает их в личную комнату пользователя
   ========================================================================== */
.dv-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--ui-z-toast, 1090);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.dv-toast {
  display: block;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-accent);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-1);
  box-shadow: var(--ui-shadow-lg);
  color: var(--ui-text-1);
  text-decoration: none;
  pointer-events: auto;
  animation: dv-toast-in 0.25s var(--ui-ease, ease) both;
}

.dv-toast:hover {
  border-color: var(--ui-accent-ring);
  color: var(--ui-text-1);
}

.dv-toast.is-leaving {
  animation: dv-toast-out 0.35s var(--ui-ease, ease) both;
}

.dv-toast-title {
  display: block;
  font-family: var(--ui-font-display);
  font-size: 0.9rem;
  font-weight: 650;
  margin-bottom: 0.15rem;
}

.dv-toast-text {
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ui-text-2);
  overflow-wrap: anywhere;
}

@keyframes dv-toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

@keyframes dv-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(0.5rem); }
}

@media (max-width: 575.98px) {
  .dv-toasts {
    right: 0.5rem;
    left: 0.5rem;
    bottom: 5rem;
    max-width: none;
  }
}