:root {
  --header: #26374a;
  --accent: #2b7fce;
  --accent-dark: #1d5c99;
  --accent-soft: #e8f1fa;
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #2b2320;
  --muted: #7a6b62;
  --border: #dde3e8;
  --danger: #c0392b;
  /* Default-значение цвета бейджа "New"/"Новое" (graceful degradation, см. themeStyle-фрагмент
     в fragments/layout.html) - настраивается отдельно от --accent через /admin/settings
     (news.site_setting.badge_color, см. .claude/rules/110-site-settings-domain.md, раздел 9) -
     намеренно НЕ производный от --accent: это разные, не связанные друг с другом UI-роли. */
  --new-badge: #2e9e5b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a {
  color: inherit;
}

/* Шапка сайта: название/лого + переключатель языка */
.site-header {
  background: var(--header);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
}

.site-header .brand {
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Форма поиска в шапке - GET /search, единственное поле q + скрытый lang */
.search-form {
  flex: 1 1 240px;
  max-width: 360px;
}

.search-form input[type="text"] {
  width: 100%;
  padding: 0.45rem 0.8rem;
  border: none;
  border-radius: 999px;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}

.search-form input[type="text"]:focus {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  background: #fff;
}

.lang-switch a {
  color: #fff;
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
}

.lang-switch a:hover {
  opacity: 1;
}

.lang-switch a.active {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}

/* Вертикальная колонка партнёрских баннеров - последний столбец внутри .page, справа от основного
   контента (см. fragments/layout.html). Прошла 2 версии за один день 2026-08-23: горизонтальная лента
   под шапкой (как у torontovka.com) -> колонка слева от сайдбара -> эта версия, справа. */
.partner-rail {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Тот же приём подписи, что и у заголовков сайдбара (.nav-group-label) - приглушённый uppercase-лейбл,
   даёт колонке видимый контекст вместо "ничьего" блока баннеров без подписи. */
.partner-rail-heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Квадратная карточка-плитка (та же пара фон/рамка, что у .feed-item/.home-feature) - изображение
   любых исходных пропорций вписывается через object-fit: contain на img ниже, не растягиваясь и не
   обрезаясь, поэтому смотрится как карточка каталога партнёров, а не как рекламный баннер
   произвольной формы. */
.partner-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.6rem;
}

.partner-banner img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Раскладка: сайдбар с разделами слева + основной контент */
.page {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
}

.sidebar {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Один блок группы верхнего уровня (например Immigration/Economy) + её разделы */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* BLOG - плоская ссылка (не .nav-group), но должна выглядеть и отбивать отступ как остальные
   верхнеуровневые блоки NEWS/STATISTICS - :is() объединяет оба типа соседа в одном правиле. */
:is(.nav-group, .nav-top-link) + .nav-group {
  margin-top: 0.75rem;
}

/* Вложенная группа внутри NEWS (например Immigration/Economy) - небольшой отступ слева отличает
   её от верхнеуровневых NEWS/STATISTICS; на мобильном сбрасывается (см. media-блок ниже). */
.nav-group--nested {
  margin-left: 0.5rem;
}

/* Заголовок группы - единая ссылка (текст + стрелка): клик в любом месте строки одновременно
   фильтрует новости по группе и сворачивает/разворачивает её разделы (см. static/js/sidebar.js).
   У обёртки NEWS заголовок - <button>, не <a> (ей некуда вести как ссылке, см. fragments/layout.html) -
   тот же класс переиспользуется для внешнего вида, поэтому сбрасываем UA-стили кнопки отдельно ниже. */
.nav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-decoration: none;
}

/* Сброс браузерных стилей <button>, когда заголовок группы - кнопка-переключатель без ссылки.
   font-family (не весь шорткат font) - иначе "font: inherit" перезаписал бы font-size/weight и,
   из-за более высокой specificity селектора "button.nav-group-label" (тег+класс) по сравнению с
   ".nav-top-link" (один класс), NEWS выглядел бы мельче BLOG/STATISTICS независимо от порядка правил. */
button.nav-group-label {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-group-label:hover {
  color: var(--accent-dark);
}

.nav-group-label.active {
  color: var(--accent-dark);
}

/* Верхнеуровневые заголовки (BLOG/NEWS/STATISTICS) - самые крупные пункты сайдбара, одинаковые
   между собой; всё, что вложено внутрь (группы Immigration/Economy/... и листовые ссылки),
   остаётся на базовом размере .nav-group-label - так уровень вложенности виден по размеру шрифта,
   а не только по отступу. */
.nav-top-link {
  padding-top: 0.7rem;
  padding-bottom: 0.35rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text);
}

.nav-group-toggle-icon {
  flex: 0 0 auto;
  font-size: 0.8rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

/* Стрелка повёрнута вниз только у собственного заголовка развёрнутой группы (не у вложенных
   подгрупп) - дочерний комбинатор ">" не даёт правилу "протечь" на стрелки вложенных групп внутри NEWS. */
.nav-group.expanded > .nav-group-label > .nav-group-toggle-icon {
  transform: rotate(90deg);
}

/* Список разделов группы скрыт, пока JS не добавит класс expanded на .nav-group (см. static/js/sidebar.js) */
.nav-group-items {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
}

/* Дочерний комбинатор ">" - раскрытие NEWS не должно автоматически показывать разделы вложенных
   подгрупп (Immigration/Economy), у каждой своё независимое состояние expanded. */
.nav-group.expanded > .nav-group-items {
  display: flex;
}

/* Листовые пункты (Immigration News, Express Entry Draws, ...) теперь рендерятся классом
   .nav-group-label (см. fragments/layout.html) - тот же шрифт и подсветка, что и у заголовков
   групп на любом уровне вложенности; .nav-item--sub добавляет только отступ слева. */
.nav-item--sub {
  margin-left: 0.5rem;
}

/* Лента новостей */
.feed {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Баннер текущего фильтра листинга (раздел/группа/категория) - первая строка ленты, см. NewsPageController */
.active-filter {
  margin: 0;
  padding: 0.65rem 1rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  border-radius: 0.5rem;
  color: var(--accent-dark);
  font-size: 0.9rem;
}

.active-filter strong {
  font-weight: 700;
}

.feed-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Дата публикации над заголовком - без времени, см. .claude/rules/40-news-domain.md.
   Бейдж "New"/"Новое" (если есть) идёт в той же строке, см. .new-badge ниже. */
.feed-date-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.feed-date {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Новости не старше настраиваемого порога свежести (news.site_setting.recent_days,
   см. .claude/rules/110-site-settings-domain.md) - дата ярче/жирнее акцентным цветом */
.feed-date--recent {
  color: var(--accent-dark);
  font-weight: 700;
}

/* Бейдж "New"/"Новое" рядом с датой - тот же порог свежести, что и .feed-date--recent.
   Фон - отдельная переменная --new-badge, не --accent (см. комментарий в :root) - настраивается
   через /admin/settings независимо от акцентного цвета сайта (см. .claude/rules/110-site-settings-domain.md,
   раздел 9). */
.new-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--new-badge);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  line-height: 1.4;
}

.new-badge svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: currentColor;
  flex-shrink: 0;
}

.feed-item .title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-dark);
  text-decoration: none;
}

.feed-item .title:hover {
  text-decoration: underline;
}

.feed-item .summary {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-line;
}

.meta {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.pagination {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding-top: 0.5rem;
}

.empty-state {
  color: var(--muted);
  padding: 2rem 0;
  text-align: center;
}

/* Детальная страница новости */
.news-detail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
}

.news-detail h1 {
  margin-top: 0;
  font-size: 1.5rem;
}

.news-detail .summary {
  margin: 1rem 0;
  line-height: 1.55;
  white-space: pre-line;
}

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.back-link:hover {
  text-decoration: underline;
}

.source-link {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.source-link:hover {
  background: var(--accent-dark);
}

/* Узкие экраны: разделы переезжают из левого сайдбара в горизонтальную полосу сверху */
@media (max-width: 720px) {
  .page {
    flex-direction: column;
    padding: 1rem;
  }

  /* Колонке партнёрских баннеров здесь уже не место рядом с сайдбаром/контентом (.page сам стал
     колонкой выше) - скрываем, тот же приём, что и у большинства сайтов с рекламной "рейл"-колонкой
     на мобильных. */
  .partner-rail {
    display: none;
  }

  .sidebar {
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-bottom: 0.25rem;
  }

  /* На узких экранах группа - якорь для абсолютно позиционированного выпадающего списка разделов */
  .nav-group {
    position: relative;
  }

  /* Горизонтальный разделитель-пилюля только между ВЕРХНЕуровневыми блоками (BLOG/NEWS/STATISTICS) -
     вложенные подгруппы (Immigration/Economy внутри NEWS) должны стекаться вертикально внутри
     выпадающей карточки NEWS, а не встраиваться в этот же горизонтальный ряд. */
  :is(.nav-group--top, .nav-top-link) + .nav-group--top {
    margin-top: 0;
    padding-left: 0.4rem;
    border-left: 1px solid var(--border);
  }

  /* Внутри выпадающей карточки отступ вложенной группы не нужен - карточка и так узкая (12rem). */
  .nav-group--nested {
    margin-left: 0;
  }

  .nav-group-label {
    white-space: nowrap;
    padding: 0.55rem 0.25rem;
  }

  /* Развёрнутая ВЕРХНЕуровневая группа на мобильном - не строка в сайдбаре, а выпадающая карточка
     под заголовком; вложенные подгруппы (Immigration/Economy) остаются в обычном потоке ВНУТРИ этой
     карточки (используют desktop-правило .nav-group.expanded > .nav-group-items), не получают
     собственное всплывающее позиционирование - иначе получилась бы карточка внутри карточки. */
  .nav-group--top > .nav-group-items {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 12rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.4rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  .nav-item--sub {
    margin-left: 0;
  }
}

.status-stale {
  color: var(--danger);
  font-weight: 700;
}

.status-ok {
  color: var(--muted);
}

.admin-menu {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 20rem;
}

.admin-menu a {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 600;
}

.admin-menu a:hover {
  background: var(--accent-soft);
}

/* Клиентский фильтр по категории над таблицей (например /statistics/express-entry) */
.table-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.table-filter select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--card);
  color: var(--text);
  font-size: 0.9rem;
}

/* Таблица /admin/sources: границы между строками и столбцами + отступы внутри ячеек до/после текста */
.admin-table {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: collapse;
  background: var(--card);
}

.admin-table th,
.admin-table td {
  border: 1px solid var(--border);
  padding: 0.65rem 1rem;
  text-align: left;
}

.admin-table thead th {
  background: var(--accent-soft);
  font-weight: 700;
}

/* Выравнивание числовых колонок таблиц (например CRS/Invitations на /statistics/express-entry) -
   селектор с .admin-table th/td нужен, чтобы перебить specificity правила text-align: left выше */
.text-center,
.admin-table th.text-center,
.admin-table td.text-center {
  text-align: center;
}

.text-right,
.admin-table th.text-right,
.admin-table td.text-right {
  text-align: right;
}

/* Колонка "Дата" на /statistics/express-entry переносилась на 2 строки, т.к. соседняя колонка
   "Категория" (длинный текст) забирала всю доступную ширину при auto table-layout - запрещаем
   перенос именно у первой колонки, она короткая (yyyy-MM-dd) и не должна сжиматься. */
#draws-table td:first-child,
#draws-table th:first-child {
  white-space: nowrap;
}

.admin-table tbody tr:nth-child(even) {
  background: var(--bg);
}

/* Форма /admin/articles/new|{id}/edit|{id}/translate и /admin/settings - раньше здесь не было ни одного
   правила, поэтому <label> (inline-элемент по умолчанию) не переносился на новую строку и все поля
   визуально сливались в одну строку без отступов. */
.admin-form {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem;
}

.admin-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
}

/* Переопределяет .admin-form label выше для строки "чекбокс + название" (см. admin/categories.html) -
   базовый вариант рассчитан на "текст поля сверху, само поле снизу" и растягивал бы чекбокс и
   название категории по вертикали одно под другим, а не в одну строку. */
.admin-form label.checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  font: inherit;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--card);
  color: var(--text);
}

/* Заблокированное поле языка на форме редактирования (см. admin/form.html) - визуально приглушено,
   чтобы не выглядело как обычное редактируемое поле. */
.admin-form input:disabled {
  background: var(--bg);
  color: var(--muted);
}

.admin-form textarea {
  resize: vertical;
  font-family: inherit;
}

.admin-form button[type="submit"] {
  align-self: flex-start;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.admin-form button[type="submit"]:hover {
  background: var(--accent-dark);
}

/* Пока не заполнены все обязательные поля - см. static/js/admin-form.js. */
.admin-form button[type="submit"]:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

/* Пояснительный текст под полями (например "эта кнопка не публикует статью") - см. admin/form.html/translate.html. */
.admin-form .hint {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

/* "Fields marked with * are required." - строка-легенда над формой, см. admin/form.html/translate.html. */
.admin-form .required-legend {
  margin-bottom: -0.25rem;
}

/* "*" рядом с названием поля - визуальная подсказка, что поле обязательно (в дополнение к серой кнопке,
   пока форма не заполнена, см. static/js/admin-form.js). Явный <span> в разметке, не CSS ::after на
   label - ::after вставился бы ПОСЛЕ вложенного input/textarea (последний дочерний элемент label), а не
   сразу после текста названия поля. --danger, а не --accent - тот же принцип, что и у STALE-индикатора
   в .claude/rules/110-site-settings-domain.md, раздел 3: обозначение "нужно действие" не должно
   совпадать с брендовым акцентом сайта. */
.admin-form .required-mark {
  color: var(--danger);
}

/* Домашняя страница "о проекте" (корень сайта /, см. .claude/rules/130-home-domain.md) -
   вступление + 4 карточки-возможности + блок аудитории, тот же .page/.feed-подобный контейнер,
   что и у остальных страниц, но своя внутренняя вёрстка (не лента новостей). */
.home {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.home-hero h1 {
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
}

/* Крупная вводная строка под заголовком - визуально выделена среди остального текста страницы */
.home-lead {
  font-size: 1.15rem;
  color: var(--accent-dark);
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.home-hero p {
  line-height: 1.55;
  max-width: 640px;
}

.home-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border-radius: 0.4rem;
  text-decoration: none;
  font-weight: 600;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-secondary {
  background: var(--card);
  color: var(--accent-dark);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--accent);
}

.home-features h2,
.home-audience h2 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
}

/* 4 карточки-возможности сайта (новости/блог/статистика/поиск) - адаптивная сетка "квадратом" 2x2,
   1 колонка на узких экранах, 2 на широких. Сетка - отдельный элемент ВНУТРИ .home-features, не сам
   .home-features - иначе заголовок h2 становится ячейкой той же grid-сетки, что и карточки (был баг:
   первая карточка вставала рядом с заголовком в одной строке, а не под ним на всю ширину, см.
   home/index.html). */
.home-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .home-features-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.home-feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
}

.home-feature h3 {
  margin: 0 0 0.4rem;
  color: var(--accent-dark);
  font-size: 1.05rem;
}

.home-feature p {
  margin: 0;
  line-height: 1.5;
}

.home-topic-list {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.6;
}

.home-audience p {
  max-width: 640px;
  line-height: 1.55;
}

/* Превью изображения баннера в таблице /admin/partners - только чтобы админ видел, какую картинку
   он ввёл ссылкой, без перехода по URL. */
.partner-preview {
  height: 40px;
  display: block;
}