/*
 * СЕЧЕНОВСКИЙ УНИВЕРСИТЕТ
 * Архитектура информационных систем в здравоохранении · 2026
 *
 * Путь: <Vault>/.obsidian/plugins/obsidian-advanced-slides/css/sechenov-theme.css
 * Подключение: theme: css/sechenov-theme.css
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* =============================================================
 *  ТОКЕНЫ
 *  Палитра соответствует фирменному стилю Сеченовского университета:
 *  основной синий #2253A1 (заголовки в брендовом образце),
 *  глубокий #0058A8 (фон-обложки), светлый #5B9BD5 (акценты).
 *  Шрифт — Inter как ближайший веб-аналог HSE Sans / Helvetica.
 * ============================================================= */

.reveal {
    --s-primary: #2253a1;
    --s-primary-dark: #0058a8;
    --s-primary-light: #5b9bd5;
    --s-primary-subtle: #e8f1fb;

    /* «Акцент» теперь — светло-синий, единый с брендом (без золотого). */
    --s-accent: #5b9bd5;
    --s-accent-bright: #2253a1;
    --s-accent-subtle: #e8f1fb;

    /* Семантические цвета для callout'ов — оставлены отдельно от бренда,
       чтобы warning/tip/example сохраняли узнаваемые амбер/зелёный тона. */
    --s-warn: #b45309;
    --s-warn-subtle: #fef3c7;
    --s-success: #16a34a;
    --s-success-subtle: #f0fdf4;

    --s-ink: #1a1f2e;
    --s-ink-muted: #5c6370;
    --s-ink-faint: #9099a8;

    --s-paper: #ffffff;
    --s-surface: #f7f9fc;
    --s-border: #e5e7eb;

    --s-font-display:
        "Inter", "HSE Sans Regular", "Helvetica Neue", "Golos Text",
        -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --s-font-body:
        "Inter", "HSE Sans Regular", "Helvetica Neue", "Golos Text",
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
        sans-serif;
    --s-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    --s-gutter-x: 5%;
    --s-text-max: 92%;

    --r-main-font: var(--s-font-body);
    --r-heading-font: var(--s-font-display);
    --r-code-font: var(--s-font-mono);
    --r-main-color: var(--s-ink);
    --r-heading-color: var(--s-primary);
    --r-link-color: var(--s-primary-light);
    --r-background-color: var(--s-paper);
    --r-main-font-size: 30px;
}

/* =============================================================
 *  БАЗА · шрифты применяются жёстко к каждому элементу
 *  !important — потому что reveal.js перебивает своим CSS
 * ============================================================= */

html,
body,
.reveal-viewport {
    background: var(--s-paper);
}

.reveal,
.reveal .slides,
.reveal .slides section,
.reveal p,
.reveal li,
.reveal ul,
.reveal ol,
.reveal dl,
.reveal div,
.reveal span,
.reveal td,
.reveal th {
    font-family: var(--s-font-body);
    color: var(--s-ink);
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
    font-family: var(--s-font-display);
}

/* =============================================================
 *  ЛЕВОЕ ВЫРАВНИВАНИЕ — жёсткий override reveal.js дефолта
 *  Это главная правка. Без !important reveal.js перебивает.
 * ============================================================= */

.reveal .slides {
    text-align: left !important;
}

.reveal .slides > section,
.reveal .slides > section > section {
    text-align: left !important;
    padding: 0 !important;
}

.reveal .slides section p,
.reveal .slides section ul,
.reveal .slides section ol,
.reveal .slides section li,
.reveal .slides section h1,
.reveal .slides section h2,
.reveal .slides section h3,
.reveal .slides section h4,
.reveal .slides section blockquote,
.reveal .slides section table,
.reveal .slides section > div {
    text-align: left !important;
}

/* =============================================================
 *  ЗАГОЛОВКИ
 * ============================================================= */

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.7em;
    text-transform: none;
}

.reveal h1 {
    font-size: 1.8em;
    color: var(--s-primary);
    font-weight: 800;
    position: relative;
    padding-bottom: 0.25em;
    margin-bottom: 0.8em;
    display: inline-block;
}

.reveal h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3em;
    height: 4px;
    background: var(--s-accent);
    border-radius: 2px;
}

.reveal h2 {
    font-size: 1.3em;
    color: var(--s-primary);
    font-weight: 700;
    margin-bottom: 0.8em;
    padding-left: 0.6em;
    border-left: 4px solid var(--s-accent);
    line-height: 1.2;
}

.reveal h3 {
    font-size: 1.1em;
    color: var(--s-primary-light);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 0.5em;
}

.reveal h4 {
    font-size: 1em;
    color: var(--s-ink);
    font-weight: 600;
    font-family: var(--s-font-body);
}

/* =============================================================
 *  ТЕКСТ
 * ============================================================= */

.reveal p {
    font-size: 1.4em;
    line-height: 1.5;
    margin: 0 0 0.8em;
    max-width: var(--s-text-max);
}

.reveal strong {
    color: var(--s-primary);
    font-weight: 600;
}

.reveal em {
    color: var(--s-accent);
    font-style: normal;
    font-weight: 500;
}

.reveal a {
    color: var(--s-primary-light);
    text-decoration: none;
    border-bottom: 1.5px solid var(--s-accent);
}

.reveal a:hover {
    color: var(--s-accent-bright);
    border-bottom-color: var(--s-accent-bright);
}

/* =============================================================
 *  СПИСКИ
 * ============================================================= */

.reveal ul {
    list-style: none;
    padding-left: 0;
    margin: 0.4em 0;
    max-width: var(--s-text-max);
}

.reveal ul > li {
    font-size: 1.4em;
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 0.6em;
    line-height: 1.5;
}

.reveal ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 0.7em;
    height: 2px;
    background: var(--s-accent);
    border-radius: 1px;
}

.reveal ul ul > li::before {
    background: var(--s-ink-muted);
    width: 0.5em;
}

.reveal ol {
    list-style: none;
    padding-left: 0;
    margin: 0.4em 0;
    counter-reset: s-counter;
    max-width: var(--s-text-max);
}

.reveal ol > li {
    font-size: 1.4em;
    position: relative;
    padding-left: 2em;
    margin-bottom: 0.65em;
    line-height: 1.5;
    counter-increment: s-counter;
}

.reveal ol > li::before {
    content: counter(s-counter);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.95em;
    color: var(--s-accent);
    line-height: 1.5;
    letter-spacing: -0.02em;
}

/* =============================================================
 *  NATIVE OBSIDIAN CALLOUTS
 *  Плагин рендерит синтаксис > [!тип] как div.callout[data-callout]
 * ============================================================= */

.reveal .callout {
    background: var(--s-primary-subtle);
    border: none !important;
    border-left: 4px solid var(--s-primary-light) !important;
    border-radius: 0 4px 4px 0;
    padding: 0.8em 1.2em !important;
    margin: 0.7em 0 !important;
    max-width: var(--s-text-max);
    box-shadow: none !important;
    font-size: 0.95em;
    line-height: 1.5;
    text-align: left !important;
}

.reveal .callout[data-callout="warning"],
.reveal .callout[data-callout="caution"] {
    background: var(--s-warn-subtle);
    border-left-color: var(--s-warn) !important;
}

.reveal .callout[data-callout="tip"],
.reveal .callout[data-callout="hint"] {
    background: var(--s-warn-subtle);
    border-left-color: var(--s-warn) !important;
}

.reveal .callout[data-callout="example"] {
    background: var(--s-success-subtle);
    border-left-color: var(--s-success) !important;
}

.reveal .callout[data-callout="important"],
.reveal .callout[data-callout="quote"] {
    background: var(--s-surface);
    border-left-color: var(--s-primary) !important;
}

.reveal .callout-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 700;
    color: var(--s-primary);
    margin: 0 0 0.4em !important;
    padding: 0 !important;
    font-family: var(--s-font-display);
    font-size: 0.95em;
}

.reveal .callout[data-callout="warning"] .callout-title,
.reveal .callout[data-callout="tip"] .callout-title {
    color: var(--s-warn);
}

.reveal .callout[data-callout="example"] .callout-title {
    color: #15803d;
}

.reveal .callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.reveal .callout-icon svg {
    width: 100%;
    height: 100%;
}

.reveal .callout-content p {
    margin: 0 0 0.4em;
    line-height: 1.5;
    max-width: 100%;
}

.reveal .callout-content p:last-child {
    margin-bottom: 0;
}

.reveal .callout-content strong {
    color: var(--s-primary);
}

/* =============================================================
 *  ТАБЛИЦЫ
 * ============================================================= */

.reveal table {
    margin: 0.5em 0;
    font-size: 1em;
    border-collapse: collapse;
    border: none;
    width: 100%;
    max-width: 100%;
}

.reveal table thead {
    border-bottom: 2px solid var(--s-primary);
}

.reveal table th {
    background: transparent;
    color: var(--s-primary) !important;
    padding: 0.55em 1.2em 0.55em 0 !important;
    text-align: left !important;
    border: none !important;
    font-weight: 700;
    font-family: var(--s-font-display);
    font-size: 0.8em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reveal table td {
    padding: 0.55em 1.2em 0.55em 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--s-border) !important;
    vertical-align: top;
    text-align: left !important;
    font-size: 0.95em;
    line-height: 1.4;
}

.reveal table tr:last-child td {
    border-bottom: none !important;
}

.reveal table tr:hover td {
    background: var(--s-surface);
}

/* =============================================================
 *  БЛОКИ КОДА · INLINE
 * ============================================================= */

.reveal code {
    font-family: var(--s-font-mono);
    background: var(--s-primary-subtle);
    color: var(--s-primary);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.82em;
    font-weight: 500;
}

.reveal pre {
    font-size: 0.85em;
    display: block;
    width: 100%;
    max-width: 100%;
    background: transparent;
    box-shadow: none;
    margin: 0.7em 0;
    border-left: 3px solid var(--s-primary);
    border-radius: 0;
    text-align: left !important;
}

.reveal pre code {
    display: block;
    width: 100%;
    background: var(--s-surface);
    color: var(--s-ink);
    padding: 1.1em 1.5em;
    font-family: var(--s-font-mono);
    font-size: 1em;
    line-height: 1.7;
    overflow: auto;
    max-height: 500px;
    border-radius: 0;
    font-weight: 400;
    text-align: left !important;
}

/* =============================================================
 *  ЦИТАТЫ · ТЕЗИСЫ · PULL-QUOTES
 *  Обычный > text — это editorial pull-quote:
 *  более крупный, визуально весомый, типографически читаемый.
 * ============================================================= */

.reveal blockquote:not(.callout) {
    border: none;
    border-left: 5px solid var(--s-accent) !important;
    background: var(--s-surface);
    padding: 1.1em 1.6em 1.1em 2.2em !important;
    font-size: 1.15em;
    font-weight: 500;
    color: var(--s-ink);
    font-family: var(--s-font-body);
    box-shadow: 0 1px 0 rgba(0, 48, 135, 0.04) !important;
    margin: 1em 0;
    max-width: var(--s-text-max);
    line-height: 1.4;
    text-align: left !important;
    position: relative;
}

.reveal blockquote:not(.callout)::before {
    content: "";
    position: absolute;
    top: 0.4em;
    left: 0.55em;
    color: var(--s-accent);
    font-family: Georgia, serif;
    line-height: 1;
    font-weight: 400;
    opacity: 0.6;
    font-size: 1.8em;
}

.reveal blockquote:not(.callout) p {
    margin: 0 0 0.5em;
    font-family: var(--s-font-body);
    max-width: 100%;
    line-height: 1.45;
}

.reveal blockquote:not(.callout) p:last-child {
    margin-bottom: 0;
}

.reveal blockquote:not(.callout) strong {
    color: var(--s-primary);
    font-weight: 700;
    font-family: var(--s-font-display);
    letter-spacing: -0.005em;
}

/* Блок-цитата с заголовком-маркером (>  ### ...) — тезис крупно */
.reveal blockquote:not(.callout) h1,
.reveal blockquote:not(.callout) h2,
.reveal blockquote:not(.callout) h3 {
    margin: 0;
    border: none;
    padding: 0;
    font-family: var(--s-font-display);
    color: var(--s-primary);
    font-size: 1.25em;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.reveal blockquote:not(.callout) h3::after {
    display: none;
}

/* =============================================================
 *  УТИЛИТАРНЫЕ КЛАССЫ
 * ============================================================= */

.reveal .small {
    font-size: 0.72em;
    color: var(--s-ink-muted);
}

.reveal .muted {
    color: var(--s-ink-muted);
}

.reveal .center {
    text-align: center !important;
}

/* =============================================================
 *  TEMPLATE SLOTS
 *  Классы, применяемые к <grid> блокам в шаблонах.
 *  Каждый grid — абсолютно позиционированная зона на слайде.
 * ============================================================= */

/* Title slot — заголовок слайда в верхней зоне */
.reveal .slot-title {
    display: flex;
    align-items: flex-end;
}

.reveal .slot-title h2 {
    margin: 0 !important;
    font-size: 1.8em;
    color: var(--s-primary);
    font-weight: 700;
    padding-left: 0.6em;
    border-left: 4px solid var(--s-accent);
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 100%;
}

/* Content slot — основной flow контента */
.reveal .slot-content {
    overflow: visible;
}

.reveal .slot-content > :first-child {
    margin-top: 0 !important;
}

.reveal .slot-content > :last-child {
    margin-bottom: 0 !important;
}

/* Source slot — мелкий источник/футер */
.reveal .slot-source {
    font-size: 0.55em;
    color: var(--s-ink-faint);
    border-top: 1px solid var(--s-border);
    padding-top: 0.4em;
    font-family: var(--s-font-body);
    letter-spacing: 0.02em;
}

.reveal .slot-source p {
    margin: 0;
    max-width: 100%;
    font-size: 1em;
    color: var(--s-ink-faint);
}

/* Break slot — блок-разделитель курса */
.reveal .slot-break {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.reveal .slot-break h1 {
    font-size: 2.4em;
    font-weight: 800;
    color: var(--s-primary);
    margin: 0 0 0.4em !important;
    padding-bottom: 0.25em;
    position: relative;
    display: inline-block;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.reveal .slot-break h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3em;
    height: 4px;
    background: var(--s-accent);
    border-radius: 2px;
}

.reveal .slot-break h3 {
    font-size: 1.15em;
    color: var(--s-ink-muted);
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.35;
    margin: 0.2em 0 0 !important;
    text-transform: none;
    max-width: 85%;
}

/* Title-slide slot — полноэкранный титул */
.reveal .slot-title-slide {
    position: relative;
}

.reveal .slot-title-slide::before {
    content: "";
    position: absolute;
    left: -3%;
    top: 10%;
    bottom: 10%;
    width: 5px;
    background: var(--s-accent);
    border-radius: 2px;
}

.reveal .slot-title-slide h1 {
    font-size: 2.6em;
    font-weight: 800;
    border: none;
    padding: 0 !important;
    margin: 0 0 0.3em !important;
    line-height: 1.05;
    color: var(--s-primary);
    max-width: 95%;
    display: block;
}

.reveal .slot-title-slide h1::after {
    display: none;
}

.reveal .slot-title-slide h2 {
    font-size: 1.3em;
    color: var(--s-ink-muted);
    font-weight: 400;
    font-family: var(--s-font-body);
    border: none;
    padding: 0 !important;
    margin: 0 0 0.5em !important;
    letter-spacing: 0;
    line-height: 1.3;
}

.reveal .slot-title-slide .author {
    margin-top: 2em;
    font-size: 1.1em;
    font-family: var(--s-font-body);
    color: var(--s-ink-muted);
    line-height: 1.7;
    max-width: 80%;
}

.reveal .slot-title-slide .author strong {
    color: var(--s-ink);
    font-weight: 600;
}

/* =============================================================
 *  КОНТРОЛЫ · ПРОГРЕСС · НОМЕР СЛАЙДА
 * ============================================================= */

.reveal .slide-number {
    background: transparent;
    color: var(--s-ink-faint);
    font-size: 13px;
    font-family: var(--s-font-body);
    font-weight: 500;
    right: 20px;
    bottom: 20px;
}

.reveal .controls {
    color: var(--s-primary);
}

.reveal .progress {
    color: var(--s-accent);
    height: 3px;
}

/* =============================================================
 *  MERMAID — жёсткое вписывание в слайд
 * ============================================================= */

.reveal .mermaid {
    background: transparent;
    padding: 0.3em 0;
    margin: 0.5em auto;
    text-align: center !important;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.reveal .mermaid svg {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 auto !important;
}

/* НЕ переопределяем font-family на узлах/лейблах mermaid —
   иначе Mermaid считает ширину узла одним шрифтом, а рендерит другим,
   и подписи типа "Пациент" обрезаются до "Пациен". Пусть использует
   шрифт, указанный в themeVariables.fontFamily во frontmatter. */

/* =============================================================
 *  HEADER BAND
 *  Шапка слайда: логотип + три текстовых колонки.
 *  Структура задаётся в шаблонах tpl-sechenov*.md через grid-слоты.
 *  Здесь — типографика и разделители.
 * ============================================================= */

/* Логотип в левом верхнем углу — через ::after (тот же приём, который
   уже работал для top-right логотипа в прошлой версии темы).
   Размер в пикселях фиксированный — reveal.js масштабирует слайд целиком. */
.reveal .slides > section:not(.title-slide)::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 24px;
    width: 80px;
    height: 80px;
    background-image: url("sechenov-logo.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    opacity: 0.95;
    z-index: 5;
}

/* Slot-header-logo больше не нужен — логотип рисует pseudo-element. */
.reveal .slot-header-logo {
    display: none;
}

/* Три текстовые колонки шапки. Размер ~0.85em ≈ 25px на 30px базы. */
.reveal .slot-header-dept,
.reveal .slot-header-pres,
.reveal .slot-header-sect {
    font-size: 0.85em;
    line-height: 1.25;
    color: var(--s-ink-muted);
    font-family: var(--s-font-body);
    padding-left: 0.7em;
    border-left: 1px solid var(--s-primary-light);
    letter-spacing: 0.005em;
    overflow: hidden;
}

/* Первая колонка идёт сразу после лого — без разделителя слева */
.reveal .slot-header-dept {
    border-left: none;
    padding-left: 0;
}

/* Сбросить дефолтные отступы для текста внутри слотов шапки */
.reveal .slot-header-dept p,
.reveal .slot-header-pres p,
.reveal .slot-header-sect p,
.reveal .slot-header-dept,
.reveal .slot-header-pres,
.reveal .slot-header-sect {
    margin: 0;
}

.reveal .slot-header-dept p,
.reveal .slot-header-pres p,
.reveal .slot-header-sect p {
    font-size: 1em;
    line-height: 1.3;
    max-width: 100%;
    color: inherit;
}

/* На титульном слайде логотип-как-grid не используем — рисуется CSS'ом */
.reveal .slides > section.title-slide .slot-header-logo {
    display: none;
}

/* =============================================================
 *  ТИТУЛЬНЫЙ СЛАЙД — образец Сеченовского университета:
 *  голубая рамка вокруг белого «листа», шапка сверху,
 *  крупный заголовок слева, DNA-декорация справа внизу.
 * ============================================================= */

/* Внешняя голубая рамка через фон section'а */
.reveal .slides > section.title-slide {
    background-color: #c6e2f7;
}

/* Белый «лист» внутри + DNA-декорация в правом нижнем углу.
   Композитный pseudo-element: bg-color = белый, bg-image = логотип. */
.reveal .slides > section.title-slide::before {
    content: "";
    position: absolute;
    top: 4%;
    right: 3%;
    bottom: 4%;
    left: 3%;
    background-color: #ffffff;
    background-image: url("sechenov-logo.png");
    background-size: 30% 65%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Маленький логотип в шапке титульного слайда (поверх белого «листа») */
.reveal .slides > section.title-slide::after {
    content: "";
    position: absolute;
    top: 6%;
    left: 5%;
    width: 80px;
    height: 80px;
    background-image: url("sechenov-logo.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    opacity: 0.95;
    z-index: 5;
}

/* Содержимое (header-grids, title-grid) поднять над белым листом */
.reveal .slides > section.title-slide > * {
    position: relative;
    z-index: 2;
}