/* ─────────────────────────────────────────────────────────────────
   education.governmentussr.com — фирменный слой поверх Frappe Learning.
   Имя файла ccultura.css историческое (прежний бренд); оно зашито в
   sub_filter nginx-vhost'а, менять — только вместе с vhost'ом.

   Подключается ко всему (SPA, /login, веб-страницы) через sub_filter
   в хостовом nginx — head_html в Website Settings пуст.

   Осознанное ограничение: дизайн-система frappe-ui держит сотни
   OKLCH-токенов в светлой и тёмной темах. Полная их перекраска сломала бы
   контрастность на экранах, которые невозможно проверить глазами, поэтому
   здесь только то, что даёт узнаваемость без риска: шрифты, акцент на
   интерактивных элементах и оформление входа.
   ───────────────────────────────────────────────────────────────── */

/* ─── Шрифты (файлы исторически общие с ccultura.su) ─────────────── */
@font-face {
  font-family: "Sofia Pro";
  src: url("/brand/fonts/sofia-pro-variable.woff2") format("woff2-variations"),
       url("/brand/fonts/sofia-pro-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Кириллица отдельным файлом — иначе русский текст падает на системный шрифт */
@font-face {
  font-family: "Montserrat";
  src: url("/brand/fonts/montserrat-var-cyrillic.woff2") format("woff2-variations"),
       url("/brand/fonts/montserrat-var-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+2116;
}
@font-face {
  font-family: "Montserrat";
  src: url("/brand/fonts/montserrat-var-latin.woff2") format("woff2-variations"),
       url("/brand/fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193;
}
@font-face {
  font-family: "IvyPresto Headline";
  src: url("/brand/fonts/ivypresto-headline.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Палитра Образовательного центра ГКЧП СССР ──────────────────── */
:root {
  --cc-canvas:      #EBE7DC;  /* тёплый бумажный холст */
  --cc-paper:       #F5F0E3;
  --cc-ink:         #262626;
  --cc-ink-2:       #5C5C5C;
  --cc-divider:     #D9D2BF;
  --cc-accent:      #A6192E;  /* знамённый красный */
  --cc-accent-tint: #F6DDDE;
  --cc-accent-on:   #F5F0E3;
  --cc-gold:        #BE9530;  /* советское золото */

  --cc-font-display: "Sofia Pro", "Montserrat", system-ui, sans-serif;
  --cc-font-body:    "Montserrat", system-ui, -apple-system, sans-serif;
  --cc-font-accent:  "IvyPresto Headline", Georgia, serif;
}

/* ─── Типографика ────────────────────────────────────────────────── */
body,
.frappe-ui,
[class*="frappe-ui"] {
  font-family: var(--cc-font-body);
}

h1, h2, h3, .text-2xl, .text-3xl, .text-xl {
  font-family: var(--cc-font-display);
  letter-spacing: -0.01em;
}

/* ─── Акцент на интерактивных элементах ──────────────────────────── */
/* Сплошные («solid») кнопки frappe-ui — основное действие на экране */
button.bg-surface-gray-7,
.button-solid,
button[class*="bg-surface-gray-7"] {
  background-color: var(--cc-accent) !important;
  color: var(--cc-accent-on) !important;
}
button.bg-surface-gray-7:hover,
button[class*="bg-surface-gray-7"]:hover {
  background-color: #7E1322 !important;
}

a:not([class*="button"]):hover {
  color: var(--cc-accent);
}

/* Фокус с клавиатуры — доступность не должна страдать от брендинга */
:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

::selection {
  background: var(--cc-accent-tint);
  color: var(--cc-ink);
}

/* ─── Страница входа ─────────────────────────────────────────────── */
/* Jinja-страница, разметка отличается от SPA.
   Селекторы выверены по реальному HTML: у body класса нет, есть
   data-path="login"; кнопка отправки — .btn-login с .btn-default,
   а вовсе не .btn-primary. */
body[data-path="login"],
body[data-path="signup"] {
  background: var(--cc-canvas);
}

.page-card,
.login-content {
  background: var(--cc-paper);
  border: 1px solid var(--cc-divider);
  /* 6px — тот же радиус, что в фирменном письме, чтобы формы и почта
     выглядели одинаково */
  border-radius: 6px;
  box-shadow: 0 24px 48px -24px rgba(60, 44, 20, 0.18),
              0 2px 6px rgba(60, 44, 20, 0.06);
}

.page-card-head h4,
.page-card-head-text h4 {
  font-family: var(--cc-font-display);
  color: var(--cc-ink);
}

/* Основное действие — знамённый красный */
.btn-login,
.btn-primary,
.page-card .btn-default.btn-block[type="submit"] {
  border-radius: 6px;
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: var(--cc-accent-on);
}
.btn-login:hover,
.btn-login:focus,
.btn-primary:hover,
.btn-primary:focus,
.page-card .btn-default.btn-block[type="submit"]:hover {
  background: #7E1322;
  border-color: #7E1322;
  color: var(--cc-accent-on);
}

/* Вторичное действие (вход по ссылке) — контурная кнопка */
#login-with-email-link {
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--cc-divider-2, #C9C1AC);
  color: var(--cc-ink);
}
#login-with-email-link:hover {
  background: var(--cc-accent-tint);
  border-color: var(--cc-accent);
  color: var(--cc-accent);
}

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  border-radius: 6px;
}

.form-control:focus,
input.form-control:focus {
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 2px var(--cc-accent-tint);
}

body[data-path="login"] a,
body[data-path="signup"] a {
  color: var(--cc-accent);
}

/* ─── Обложки курсов: показывать целиком ─────────────────────────── */
/*
   CourseCard.vue задаёт обложке `bg-cover` в блоке высотой 168px —
   картинка обрезается сверху и снизу, у портретных фотографий пропадает
   лицо, у гербов и надписей — края.

   Селектор точечный: совпадение по утилитарным классам Tailwind (в атрибуте
   они лежат как есть, со скобками) И по инлайновому стилю с url(). Второе
   условие обязательно — тот же элемент без картинки получает градиент-
   заглушку с названием курса внутри, её трогать нельзя.

   Собственный фон элемента гасим, а рисуем двумя слоями: ::before —
   размытая обложка во всю ширину вместо пустых полей, ::after — сама
   картинка целиком.
*/
[class*="h-[168px]"][class*="bg-cover"][style*="url("] {
  position: relative;
  overflow: hidden;
  background-size: 0 0 !important;
  background-color: var(--cc-paper);
}

[class*="h-[168px]"][class*="bg-cover"][style*="url("]::before,
[class*="h-[168px]"][class*="bg-cover"][style*="url("]::after {
  content: "";
  position: absolute;
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: center;
}

/* подложка: вылет за края, чтобы размытие не оставляло прозрачной рамки */
[class*="h-[168px]"][class*="bg-cover"][style*="url("]::before {
  inset: -24px;
  background-size: cover;
  filter: blur(18px) saturate(1.1);
  opacity: 0.55;
}

[class*="h-[168px]"][class*="bg-cover"][style*="url("]::after {
  inset: 0;
  background-size: contain;
}

/* Тот же принцип в форме редактирования курса, чтобы предпросмотр обложки
   совпадал с тем, что увидит ученик в каталоге. */
img[alt="Course thumbnail"],
img[alt="Обложка курса"] {
  object-fit: contain !important;
}