/*
 * Оформление портала «Ходимы» поверх UI Antora по умолчанию (макет —
 * hodima-specs/features/2026-11-14-docs-portal/mockups/portal-look.html, экраны 1–2).
 *
 * Цвета, радиусы, тени и типографика — только переменные --hd-* из пакета @hodima/ui.
 * tokens.css копируется из node_modules/@hodima/ui/dist при сборке (scripts/build.mjs) и
 * объявляет токены на классе .hd-theme, поэтому он стоит на <html> в layouts/default.hbs и
 * layouts/home.hbs. Своих значений цветов здесь нет.
 *
 * Файл подключается после site.css (partials/head-styles.hbs): правила ниже перекрывают
 * оформление Antora по умолчанию, не переписывая её разметку и поведение (сворачивание
 * навигации на телефоне делает js/site.js).
 */

@import url('tokens.css');

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* --- Основы ------------------------------------------------------------------------------- */

.hd-theme body {
  background: var(--hd-bg);
  color: var(--hd-text);
  font-family: var(--hd-font-family);
  font-size: var(--hd-text-body-size);
  line-height: var(--hd-text-body-line-height);
}

.hd-theme a {
  color: var(--hd-primary);
}

.hd-theme a:hover {
  color: var(--hd-primary-hover);
}

.hd-theme :focus-visible {
  outline: var(--hd-focus-ring);
  outline-offset: var(--hd-focus-offset);
}

.hd-theme ::selection {
  background: var(--hd-brand-100);
  color: var(--hd-primary-active);
}

/* --- Верхняя панель ----------------------------------------------------------------------- */

.hd-theme .navbar {
  background: var(--hd-surface);
  color: var(--hd-text);
  border-bottom: 1px solid var(--hd-border-subtle);
  box-shadow: none;
}

.hd-theme .navbar-brand {
  align-items: center;
  gap: var(--hd-space-l);
  padding: 0 var(--hd-space-xl);
  min-width: 0;
}

.hd-theme .navbar .hd-brand {
  display: flex;
  align-items: center;
  gap: var(--hd-space-s);
  padding: 0;
  margin: 0;
  color: var(--hd-night);
  font-size: var(--hd-text-h3-size);
  /* Веса 700 в токенах нет: в @hodima/ui нет начертания для логотипа, значение взято из макета. */
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.hd-theme .navbar .hd-brand:hover {
  color: var(--hd-night);
}

.hd-theme .navbar-brand .navbar-item:first-child :not(:last-child) {
  padding-right: 0;
}

.hd-theme .hd-brand__mark {
  flex: 0 0 auto;
  width: 1.625rem;
  height: 1.625rem;
  display: block;
}

.hd-theme .hd-brand__section {
  color: var(--hd-text-muted);
  font-size: var(--hd-text-body-l-size);
  font-weight: var(--hd-text-display-weight);
}

.hd-theme .navbar-item.search {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  padding: 0;
}

.hd-theme .search #search-field {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.hd-theme .search #search-input {
  width: 16rem;
  max-width: 100%;
  padding: var(--hd-space-s) var(--hd-space-l);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius-pill);
  background: var(--hd-bg);
  color: var(--hd-text);
  font-family: var(--hd-font-family);
  font-size: var(--hd-text-body-s-size);
  line-height: var(--hd-text-body-s-line-height);
}

.hd-theme .search #search-input::placeholder {
  color: var(--hd-text-disabled);
}

.hd-theme .search #search-input:focus {
  outline: none;
  border-color: var(--hd-brand);
  box-shadow: var(--hd-focus-field);
  background: var(--hd-surface);
}

.hd-theme .search-result-dataset {
  border-color: var(--hd-border);
  border-radius: var(--hd-radius-m);
  background: var(--hd-surface);
}

.hd-theme .search-result-component-header {
  color: var(--hd-text-muted);
  border-bottom-color: var(--hd-border-subtle);
}

.hd-theme .search-result-document-title {
  color: var(--hd-text);
  border-right-color: var(--hd-border-subtle);
}

.hd-theme .search-result-document-hit > a {
  color: var(--hd-text-secondary);
}

.hd-theme .search-result-document-hit .search-result-section-title {
  color: var(--hd-text);
}

.hd-theme .search-result-document-hit .search-result-highlight {
  color: var(--hd-primary-active);
  background: var(--hd-brand-100);
}

/* --- Главная: шапка с градиентом «рассвет» ------------------------------------------------ */

.hd-theme .hd-home__main {
  display: block;
}

.hd-theme .hd-hero {
  position: relative;
  overflow: hidden;
  background: var(--hd-gradient-dawn);
  padding: var(--hd-space-3xl) var(--hd-space-2xl);
}

.hd-theme .hd-hero__text {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.hd-theme .hd-hero__title {
  margin: 0 0 var(--hd-space-s);
  color: var(--hd-night);
  font-size: var(--hd-text-h1-size);
  font-weight: var(--hd-text-h1-weight);
  line-height: var(--hd-text-h1-line-height);
  letter-spacing: var(--hd-text-h1-letter-spacing);
}

.hd-theme .hd-hero__lead p {
  margin: 0 0 var(--hd-space-s);
  color: var(--hd-text);
  font-size: var(--hd-text-body-size);
  line-height: var(--hd-text-body-line-height);
}

.hd-theme .hd-hero__lead p:last-child {
  margin-bottom: 0;
  color: var(--hd-text-secondary);
  font-size: var(--hd-text-body-s-size);
}

.hd-theme .hd-hero__art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: 52%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}

/* --- Главная: карточки документов --------------------------------------------------------- */

.hd-theme .hd-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hd-space-l);
  max-width: 74rem;
  margin: 0 auto;
  padding: var(--hd-space-xl) var(--hd-space-2xl) var(--hd-space-3xl);
}

.hd-theme .hd-doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--hd-space-xs);
  padding: var(--hd-space-l);
  border-radius: var(--hd-radius-l);
  background: var(--hd-surface);
  box-shadow: var(--hd-shadow-1);
  color: var(--hd-text);
  text-decoration: none;
  transition: box-shadow 0.15s ease-out;
}

.hd-theme .hd-doc-card:hover,
.hd-theme .hd-doc-card:focus-visible {
  color: var(--hd-text);
  box-shadow: var(--hd-shadow-2);
}

.hd-theme .hd-doc-card__audience {
  color: var(--hd-primary);
  font-size: var(--hd-text-caption-size);
  font-weight: var(--hd-text-caption-weight);
  line-height: var(--hd-text-caption-line-height);
  letter-spacing: var(--hd-text-overline-letter-spacing);
  text-transform: uppercase;
}

.hd-theme .hd-doc-card__title {
  margin: 0;
  color: var(--hd-night);
  font-size: var(--hd-text-h3-size);
  font-weight: var(--hd-text-h3-weight);
  line-height: var(--hd-text-h3-line-height);
}

.hd-theme .hd-doc-card__summary {
  color: var(--hd-text-secondary);
  font-size: var(--hd-text-body-s-size);
  line-height: var(--hd-text-body-s-line-height);
}

.hd-theme .hd-doc-card__actions {
  margin-top: var(--hd-space-s);
  color: var(--hd-primary);
  font-size: var(--hd-text-caption-size);
  font-weight: var(--hd-text-caption-weight);
}

.hd-theme .hd-doc-card__badge {
  align-self: flex-start;
  margin-top: var(--hd-space-s);
  padding: var(--hd-space-xs) var(--hd-space-s);
  border-radius: var(--hd-radius-pill);
  background: var(--hd-warning-bg);
  color: var(--hd-warning);
  font-size: var(--hd-text-caption-size);
  font-weight: var(--hd-text-caption-weight);
}

/* --- Страница документа: навигация, текст, «На странице» и PDF ----------------------------- */

.hd-theme .nav {
  background: var(--hd-bg);
  border-right: 1px solid var(--hd-border-subtle);
}

.hd-theme .nav .nav-menu {
  padding: var(--hd-space-m);
}

.hd-theme .nav .nav-menu h3.title {
  margin: 0 0 var(--hd-space-s);
  padding: 0 var(--hd-space-s) var(--hd-space-s);
  color: var(--hd-text-muted);
  font-size: var(--hd-text-caption-size);
  font-weight: var(--hd-text-overline-weight);
  letter-spacing: var(--hd-text-overline-letter-spacing);
  text-transform: uppercase;
}

.hd-theme .nav .nav-menu h3.title a {
  color: inherit;
}

.hd-theme .nav .nav-list {
  margin: 0;
}

.hd-theme .nav .nav-item {
  margin-top: var(--hd-space-xs);
}

.hd-theme .nav .nav-link,
.hd-theme .nav .nav-text {
  display: block;
  padding: var(--hd-space-s) var(--hd-space-m);
  border-radius: var(--hd-radius-s);
  color: var(--hd-text-secondary);
  font-size: var(--hd-text-body-s-size);
  line-height: var(--hd-text-body-s-line-height);
  text-decoration: none;
}

.hd-theme .nav .nav-link:hover,
.hd-theme .nav .nav-text:hover {
  background: var(--hd-divider);
  color: var(--hd-text);
}

.hd-theme .nav .nav-item.is-current-page > .nav-link {
  background: var(--hd-brand-100);
  color: var(--hd-primary-active);
  font-weight: var(--hd-text-overline-weight);
}

.hd-theme .nav-panel-explore .context {
  color: var(--hd-text-muted);
  box-shadow: 0 -1px 0 var(--hd-border-subtle);
}

.hd-theme .nav-panel-explore .components {
  background: var(--hd-bg);
  box-shadow: inset 0 1px 5px var(--hd-divider);
}

.hd-theme .nav-panel-explore .component .title a {
  color: var(--hd-text-secondary);
}

.hd-theme .nav-panel-explore .component.is-current .title a {
  color: var(--hd-primary-active);
}

.hd-theme .toolbar {
  background: var(--hd-surface);
  box-shadow: 0 1px 0 var(--hd-border-subtle);
  color: var(--hd-text-muted);
  font-size: var(--hd-text-caption-size);
}

.hd-theme .breadcrumbs a {
  color: var(--hd-text-muted);
  text-decoration: none;
}

.hd-theme .breadcrumbs a:hover {
  color: var(--hd-primary);
}

.hd-theme .breadcrumbs li::after {
  color: var(--hd-text-disabled);
}

.hd-theme .toc.sidebar .toc-menu h3 {
  color: var(--hd-text);
  font-size: var(--hd-text-caption-size);
  font-weight: var(--hd-text-overline-weight);
  letter-spacing: var(--hd-text-overline-letter-spacing);
  text-transform: uppercase;
  height: auto;
  padding: 0 0 var(--hd-space-s);
  margin: 0;
}

.hd-theme .toc .toc-menu a {
  border-left: 2px solid var(--hd-border-subtle);
  color: var(--hd-text-secondary);
  font-size: var(--hd-text-caption-size);
  line-height: var(--hd-text-caption-line-height);
  padding: var(--hd-space-xs) var(--hd-space-s);
}

.hd-theme .toc .toc-menu a:hover {
  color: var(--hd-primary);
}

.hd-theme .toc .toc-menu a.is-active {
  border-left-color: var(--hd-primary);
  color: var(--hd-primary-active);
  font-weight: var(--hd-text-overline-weight);
}

/* Кнопка «Скачать PDF» — в строке навигации, справа от поиска. */
.hd-theme .navbar .hd-pdf-nav {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 var(--hd-space-xl) 0 0;
}

.hd-theme .navbar .hd-pdf-nav .hd-pdf-link {
  white-space: nowrap;
}

/* На узком экране кнопка PDF уходит в строку навигации под шапкой: в фиксированную шапку
   вместе с поиском она не влезает и перекрывает бургер. */
.hd-theme .toolbar .hd-pdf-toolbar {
  display: none;
}

.hd-theme .hd-pdf-link {
  display: inline-block;
  padding: var(--hd-space-s) var(--hd-space-l);
  border-radius: var(--hd-radius-pill);
  background: var(--hd-primary);
  color: var(--hd-surface);
  font-size: var(--hd-text-caption-size);
  font-weight: var(--hd-text-caption-weight);
  text-decoration: none;
}

.hd-theme .hd-pdf-link:hover {
  background: var(--hd-primary-hover);
  color: var(--hd-surface);
}

@media screen and (max-width: 768.5px) {
  .hd-theme .navbar .hd-pdf-nav {
    display: none;
  }

  .hd-theme .toolbar .hd-pdf-toolbar {
    display: inline-flex;
    align-items: center;
    margin-left: var(--hd-space-s);
    padding: var(--hd-space-xs) var(--hd-space-m);
    font-size: var(--hd-text-body-s-size);
    white-space: nowrap;
  }
}

/* --- Текст документа ---------------------------------------------------------------------- */

.hd-theme .doc {
  color: var(--hd-text);
  font-size: var(--hd-text-body-size);
  line-height: var(--hd-text-body-l-line-height);
  hyphens: none;
}

/* Изображения в документе: по центру, в тонкой рамке; подпись под ними тоже по центру. */
.hd-theme .doc .imageblock {
  margin: var(--hd-space-l) 0;
}

.hd-theme .doc .imageblock .content {
  display: flex;
  justify-content: center;
}

.hd-theme .doc .imageblock .content img {
  max-width: 100%;
  border: 1px solid var(--hd-border-subtle);
  border-radius: var(--hd-radius-m);
  box-sizing: border-box;
}

.hd-theme .doc .imageblock > .title {
  margin-top: var(--hd-space-s);
  color: var(--hd-text-secondary);
  font-size: var(--hd-text-caption-size);
  text-align: center;
}

.hd-theme .doc > h1.page:first-child {
  margin: var(--hd-space-xl) 0;
  color: var(--hd-night);
  font-size: var(--hd-text-h1-size);
  font-weight: var(--hd-text-h1-weight);
  line-height: var(--hd-text-h1-line-height);
  letter-spacing: var(--hd-text-h1-letter-spacing);
}

.hd-theme .doc h2:not(.discrete) {
  margin: var(--hd-space-xl) 0 var(--hd-space-s);
  padding: 0;
  border-bottom: none;
  color: var(--hd-night);
  font-size: var(--hd-text-h2-size);
  font-weight: var(--hd-text-h2-weight);
  line-height: var(--hd-text-h2-line-height);
}

.hd-theme .doc h3:not(.discrete) {
  color: var(--hd-night);
  font-size: var(--hd-text-h3-size);
  font-weight: var(--hd-text-h3-weight);
  line-height: var(--hd-text-h3-line-height);
}

.hd-theme .doc p,
.hd-theme .doc li {
  font-size: var(--hd-text-body-size);
  line-height: var(--hd-text-body-l-line-height);
}

.hd-theme .doc a {
  color: var(--hd-primary);
}

.hd-theme .doc a:hover {
  color: var(--hd-primary-hover);
}

.hd-theme .doc a.unresolved {
  color: var(--hd-danger);
}

.hd-theme .doc p code,
.hd-theme .doc thead code,
.hd-theme .doc .colist > table code {
  background: var(--hd-bg);
  border-radius: var(--hd-radius-s);
  color: var(--hd-text);
}

/* --- Врезки: NOTE/TIP — info, WARNING/CAUTION — warning, IMPORTANT — danger ----------------- */

.hd-theme .doc .admonitionblock {
  margin: var(--hd-space-l) 0;
}

/* Таблица Antora превращается в блок: плашка с полосой цвета слева, как в макете. */
.hd-theme .doc .admonitionblock > table,
.hd-theme .doc .admonitionblock tbody,
.hd-theme .doc .admonitionblock tr,
.hd-theme .doc .admonitionblock td {
  display: block;
  width: auto;
}

.hd-theme .doc .admonitionblock > table {
  padding: var(--hd-space-m) var(--hd-space-l);
  border-left: 4px solid var(--hd-info);
  border-radius: var(--hd-radius-s);
  background: var(--hd-info-bg);
}

.hd-theme .doc .admonitionblock td {
  padding: 0;
}

.hd-theme .doc .admonitionblock td.icon {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  margin-bottom: var(--hd-space-xs);
}

.hd-theme .doc .admonitionblock td.icon i {
  background: transparent;
  padding: 0;
  height: auto;
  border-radius: 0;
  color: var(--hd-info);
  font-size: var(--hd-text-caption-size);
  font-weight: var(--hd-text-overline-weight);
  letter-spacing: var(--hd-text-overline-letter-spacing);
  text-transform: uppercase;
}

.hd-theme .doc .admonitionblock td.content {
  padding: 0;
  background: transparent;
  color: var(--hd-text);
}

.hd-theme .doc .admonitionblock td.content p {
  font-size: var(--hd-text-body-s-size);
  line-height: var(--hd-text-body-s-line-height);
}

.hd-theme .doc .admonitionblock.note td.icon i.icon-note::after {
  content: 'Примечание';
}

.hd-theme .doc .admonitionblock.tip td.icon i.icon-tip::after {
  content: 'Совет';
}

.hd-theme .doc .admonitionblock.warning td.icon i.icon-warning::after {
  content: 'Внимание';
}

.hd-theme .doc .admonitionblock.caution td.icon i.icon-caution::after {
  content: 'Осторожно';
}

.hd-theme .doc .admonitionblock.important td.icon i.icon-important::after {
  content: 'Важно';
}

.hd-theme .doc .admonitionblock.warning > table,
.hd-theme .doc .admonitionblock.caution > table {
  border-left-color: var(--hd-warning);
  background: var(--hd-warning-bg);
}

.hd-theme .doc .admonitionblock.warning td.icon i,
.hd-theme .doc .admonitionblock.caution td.icon i {
  color: var(--hd-warning);
}

.hd-theme .doc .admonitionblock.important > table {
  border-left-color: var(--hd-danger);
  background: var(--hd-danger-bg);
}

.hd-theme .doc .admonitionblock.important td.icon i {
  color: var(--hd-danger);
}

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

.hd-theme .footer {
  border-top: 1px solid var(--hd-border-subtle);
  background: var(--hd-surface);
  color: var(--hd-text-muted);
  font-size: var(--hd-text-caption-size);
  padding: var(--hd-space-l) var(--hd-space-2xl);
}

.hd-theme .footer p {
  margin: 0;
}

/* --- Телефон ------------------------------------------------------------------------------ */

@media screen and (max-width: 768.5px) {
  .hd-theme .navbar-brand {
    gap: var(--hd-space-s);
    padding: 0 var(--hd-space-m);
  }

  .hd-theme .navbar .hd-brand {
    font-size: var(--hd-text-body-size);
  }

  .hd-theme .hd-brand__section {
    display: none;
  }

  .hd-theme .navbar-item.search {
    flex: 1 1 auto;
  }

  .hd-theme .search #search-input {
    width: 100%;
  }
}

@media screen and (max-width: 1023.5px) {
  .hd-theme .hd-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--hd-space-l) var(--hd-space-l) var(--hd-space-2xl);
  }

  .hd-theme .hd-hero {
    padding: var(--hd-space-2xl) var(--hd-space-l);
  }
}

@media screen and (max-width: 599.5px) {
  .hd-theme .hd-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .hd-theme .hd-hero__art {
    display: none;
  }

  .hd-theme .hd-hero__text {
    max-width: 100%;
  }

  .hd-theme .hd-hero__title {
    font-size: var(--hd-text-h2-size);
    line-height: var(--hd-text-h2-line-height);
  }
}