/* Страницы приложения notices: «Жаңылыктар», отдельная новость, «Билдирмелер»,
   отписка от писем (notices/templates/notices/). Колокольчик в шапке — в base.css:
   он на каждой странице. */

.news-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
.news-item:last-of-type { border-bottom: 0; }

.news-title {
  font-size: var(--text-lg);
  font-weight: 650;
  margin: 0 0 var(--space-1);
}
.news-title a { color: inherit; }
.news-title a:hover { color: var(--accent); }
/* На отдельной странице заголовок — .page-title: размер как у заголовков
   других страниц (правило выше его бы перебило), а отступ под ним
   забирает дата, а не следующий раздел. */
.page-title.news-title { font-size: var(--text-xl); margin-bottom: var(--space-1); }

.news-date {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.news-text p { margin: 0 0 var(--space-3); }
.news-text p:last-child { margin-bottom: 0; }
.news-text a { color: var(--accent); word-break: break-word; }

/* Оформление из Markdown (notices/markup.py) — в тексте новости, уведомления
   и короткого уведомления в списке. Заголовок внутри текста — заметно
   меньше заголовка страницы: «#» и «##» выглядят одинаково, чтобы «#»,
   поставленный по привычке, не спорил с названием новости. */
.news-text h1,
.news-text h2,
.notif-text h1,
.notif-text h2 { font-size: var(--text-lg); font-weight: 650; margin: var(--space-5) 0 var(--space-2); }
.news-text h3,
.news-text h4,
.notif-text h3,
.notif-text h4 { font-size: var(--text-base); font-weight: 650; margin: var(--space-4) 0 var(--space-2); }
.news-text > :first-child,
.notif-text > :first-child { margin-top: 0; }
.news-text ul,
.news-text ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.news-text li + li { margin-top: var(--space-1); }
.news-text strong,
.notif-text strong { font-weight: 650; }
.news-text blockquote {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.news-draft {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}

/* «Билдирмелер» — список уведомлений под колокольчиком. */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif {
  padding: var(--space-4) 0 var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--line);
  /* Полоска слева у новых — место под неё держим и у прочитанных, иначе
     текст прыгал бы вбок между двумя заходами на страницу. */
  border-left: 3px solid transparent;
}
.notif:last-child { border-bottom: 0; }
.notif.is-new { border-left-color: var(--accent); }
.notif-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.notif-title { font-weight: 600; color: var(--ink); }
a.notif-title:hover { color: var(--accent); }
.notif-new {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
}
.notif-text { margin: var(--space-1) 0 0; word-break: break-word; }
.notif-text a { color: var(--accent); }
.notif-text p,
.notif-text ul,
.notif-text ol { margin: 0 0 var(--space-2); }
.notif-text > :last-child { margin-bottom: 0; }
.notif-text ul,
.notif-text ol { padding-left: var(--space-5); }
.notif-date {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Отписка от писем. */
.unsub-form { margin-top: var(--space-4); }

/* «Телефонго билдирмелер» — включить уведомления на телефон (push.js). */
.push-box { margin-bottom: var(--space-5); }
.push-box p { margin: 0 0 var(--space-3); }
.push-box .form-error { margin: var(--space-3) 0 0; }

/* «Толук окуу» под началом длинного уведомления и кнопка своей ссылки на
   его отдельной странице. */
.notif-more {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
}
.notif-go { margin: var(--space-4) 0 0; }