/* Глобальные стили приложения. MudBlazor подключает свои стили отдельно.
   Шрифты загружаются в App.razor:
   - Manrope (400/500/600/700/800) — для body и UI-элементов.
   - Press Start 2P — display, только для коротких headlines/метрик. */

:root {
    /* Палитра. Графит + жёлтый — гейм/инженерная эстетика (как на афише ШИТ),
       но без брутальности: тёмный только в hero-секциях, светлый — основной фон. */
    --color-graphite: #1a1d24;
    --color-graphite-soft: #262a33;
    --color-accent: #ffd84d;
    --color-accent-hover: #ffe06b;
    --color-text-light: #f4f4f5;
    --color-text-light-muted: rgba(244, 244, 245, 0.7);

    --font-display: 'Press Start 2P', 'Courier New', monospace;
    --font-body: 'Manrope', 'Roboto', 'Segoe UI', sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-body);
}

/* MudBlazor берёт шрифт из CSS-переменной --mud-default-typography-font-family,
   но проще переопределить через body / селектор. */
body, .mud-typography, .mud-button, .mud-input, .mud-select {
    font-family: var(--font-body) !important;
}

/* Утилиты для pixel-стиля. Применять ТОЛЬКО к коротким заголовкам/меткам,
   потому что Press Start 2P read very slow в длинном тексте. */
.pixel {
    font-family: var(--font-display) !important;
    letter-spacing: 0.02em;
    line-height: 1.5;
    /* В Press Start 2P нет нижних/верхних линий шрифта обычного типа —
       поэтому слегка уменьшаем оптический размер для гармонии с Manrope. */
}

.pixel-sm  { font-size: 12px; }
.pixel-md  { font-size: 16px; }
.pixel-lg  { font-size: 22px; }
.pixel-xl  { font-size: 28px; line-height: 1.4; }
.pixel-2xl { font-size: 36px; line-height: 1.35; }

/* Жёлтый акцентный цвет (с учётом — в pixel-шрифте даже слабый жёлтый
   кажется ярким; используем тёплый, не chrome-yellow). */
.text-accent { color: var(--color-accent); }
.bg-accent   { background-color: var(--color-accent); color: #1a1d24; }

/* Главный CTA — жёлтая кнопка с тёмным текстом. Используется в hero лендинга
   и на /teachers/{slug}. !important чтобы побеждать MudBlazor-овские дефолты
   для Filled-кнопок. */
.lp-cta-primary {
    background: var(--color-accent) !important;
    color: var(--color-graphite) !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    text-transform: none !important;
    letter-spacing: 0.01em;
}
.lp-cta-primary:hover {
    background: var(--color-accent-hover) !important;
    transform: translateY(-1px);
}
.lp-cta-secondary {
    color: var(--color-text-light) !important;
    text-transform: none !important;
}

.d-inline { display: inline; }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ==========================================================================
   PUBLIC PAGES — тёмная тема + pixel-заголовки.
   Применяется через PublicLayout.razor (обёртка .public-page).
   Кабинет и админка к этим стилям не цепляются.
   ========================================================================== */

.public-page {
    background: var(--color-graphite);
    color: var(--color-text-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.public-page main { flex: 1; }

/* Все pixel-заголовки внутри .public-page — жёлтые и крупные. */
.public-page .pixel { color: var(--color-text-light); }
.public-page .pixel.text-accent { color: var(--color-accent); }

/* Заголовки h1-h3 внутри секций public-page переводим в pixel,
   КРОМЕ заголовков внутри Markdown-контента (.teacher-content, .blog-content) —
   там авторы пишут длинными фразами, pixel будет читаться плохо. */
.public-page h1.pixel,
.public-page h2.pixel,
.public-page h3.pixel {
    font-family: var(--font-display) !important;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.public-page .lp-section-title {
    /* Pixel-display, но размер ниже h1 hero (это h2 секций) и щедрый line-height. */
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.02em;
    color: var(--color-text-light);
}

/* MudText внутри тёмной темы — переопределяем цвет, MudBlazor по дефолту
   возвращает к чёрному. */
.public-page .mud-typography,
.public-page .mud-text-secondary {
    color: var(--color-text-light) !important;
}
.public-page .mud-typography.mud-text-secondary {
    color: var(--color-text-light-muted) !important;
}

/* Ссылки и MudLink — жёлтые. */
.public-page a:not(.lp-cta-primary):not(.public-logo):not(.public-nav-login):not(.lp-subject-pill) {
    color: var(--color-accent);
    text-decoration: none;
}
.public-page a:not(.lp-cta-primary):not(.public-logo):not(.public-nav-login):not(.lp-subject-pill):hover {
    text-decoration: underline;
}
.public-page .mud-link { color: var(--color-accent) !important; }

/* MudPaper / Outlined — тёмная поверхность с тонкой каймой. */
.public-page .mud-paper {
    background-color: var(--color-graphite-soft) !important;
    color: var(--color-text-light) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.public-page .mud-paper-outlined {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}


/* MudChip outlined — белая обводка вместо чёрной. */
.public-page .mud-chip.mud-chip-outlined {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--color-text-light) !important;
    background: transparent !important;
}

/* Кнопки MudButton text/outlined — белый текст по умолчанию. */
.public-page .mud-button-root.mud-button-text:not(.lp-cta-primary):not(.lp-cta-secondary) {
    color: var(--color-text-light) !important;
}
.public-page .mud-button-root.mud-button-outlined {
    color: var(--color-text-light) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* MudAlert на тёмном — слегка приглушенные фоны. */
.public-page .mud-alert {
    background-color: var(--color-graphite-soft) !important;
    color: var(--color-text-light) !important;
}

/* ============================================================
   Инпуты MudTextField на тёмном фоне:
   - всё прозрачное (никаких белых «подложек» под текстом)
   - текст и плейсхолдеры светлые
   - бордер обводки/фокуса — жёлтый
   - label не должен иметь фоновой заливки; нативный notched-border
     MudBlazor (legend в fieldset) сам делает разрыв в линии бордера
   ============================================================ */
.public-page .mud-input-control input,
.public-page .mud-input-control textarea,
.public-page .mud-input,
.public-page .mud-input.mud-input-outlined,
.public-page .mud-input-control .mud-input-slot {
    background: transparent !important;
    color: var(--color-text-light) !important;
}
.public-page .mud-input-control input::placeholder,
.public-page .mud-input-control textarea::placeholder {
    color: rgba(244, 244, 245, 0.45) !important;
}

.public-page .mud-input-label {
    color: rgba(244, 244, 245, 0.6) !important;
    background: transparent !important;
}
.public-page .mud-input-control.mud-focused .mud-input-label {
    color: var(--color-accent) !important;
}

/* Обводка outlined — fieldset + legend. Цвет линии — белёсый, на фокусе — жёлтый. */
.public-page .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: transparent !important;
}
.public-page .mud-input-control:hover .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.45) !important;
}
.public-page .mud-input-control.mud-focused .mud-input-outlined-border {
    border-color: var(--color-accent) !important;
}

/* Helper-text (подсказка под полем) и счётчик символов — приглушённо-светлый. */
.public-page .mud-input-helper-text {
    color: rgba(244, 244, 245, 0.5) !important;
}

/* MudList — внутренние строки тёмные. */
.public-page .mud-list-item { color: var(--color-text-light) !important; }
.public-page .mud-divider { border-color: rgba(255, 255, 255, 0.1) !important; }

/* ==========================================================================
   PUBLIC NAV (верхняя панель)
   ========================================================================== */
.public-nav {
    background: rgba(26, 29, 36, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}
.public-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0 !important;
}
.public-logo {
    color: var(--color-accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
}
.public-logo:hover { color: var(--color-accent-hover); }
.public-logo:hover .public-logo-name { color: var(--color-text-light); }

.public-logo-mark {
    /* Pixel-монограмма «ШИТ» — короткая, занимает мало места и сохраняет
       гейм-эстетику Press Start 2P, которая ломалась бы на длинном
       «Школа инженерного творчества». */
    color: var(--color-accent);
    font-size: 14px !important;
    letter-spacing: 0.05em;
    line-height: 1;
}
.public-logo-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-light);
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 150ms ease;
}

@media (max-width: 800px) {
    .public-logo-name { display: none; }
}

.public-nav-links {
    display: flex;
    gap: 28px;
    flex: 1;
    justify-content: center;
}
.public-nav-links a {
    color: var(--color-text-light) !important;
    font-size: 14px;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 150ms ease;
}
.public-nav-links a:hover {
    border-bottom-color: var(--color-accent);
}

.public-nav-cta { display: flex; gap: 12px; }
.public-nav-login {
    color: var(--color-graphite) !important;
    background: var(--color-accent);
    padding: 8px 18px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 150ms ease;
}
.public-nav-login:hover { background: var(--color-accent-hover); text-decoration: none !important; }

@media (max-width: 800px) {
    .public-nav-links { display: none; }
}

/* ==========================================================================
   PUBLIC FOOTER
   ========================================================================== */
.public-footer {
    background: #14171c;
    color: var(--color-text-light-muted);
    margin-top: 64px;
    padding: 48px 0 24px;
    font-size: 14px;
}
.public-footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}
.public-footer-col a {
    display: block;
    color: var(--color-text-light-muted) !important;
    text-decoration: none;
    padding: 4px 0;
    font-size: 14px;
}
.public-footer-col a:hover { color: var(--color-accent) !important; }
.public-footer-title {
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 10px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.public-footer-tagline { margin: 0; line-height: 1.6; }
.public-footer-bottom {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 800px) {
    .public-footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   CONTENT PAGES (cp-*) — общие классы для /about, /pricing, /contact,
   /offer, /privacy. Header-strip + контентные секции под стилистику лендинга.
   ========================================================================== */

/* Тонкая «шапка» страницы с kicker'ом и крупным pixel-заголовком.
   Не такой высокий, как hero лендинга — это статика, а не точка продажи. */
.public-page .cp-page-header {
    background: var(--color-graphite);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 216, 77, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 216, 77, 0.04) 0%, transparent 50%);
    border-bottom: 1px solid rgba(255, 216, 77, 0.12);
    padding: 56px 0 48px;
    margin-bottom: 48px;
}
.public-page .cp-page-kicker { margin-bottom: 14px; }
.public-page .cp-page-title {
    font-family: var(--font-display) !important;
    font-size: 32px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--color-text-light) !important;
    margin: 0;
}
.public-page .cp-page-sub {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-light-muted);
    max-width: 60ch;
}

/* Контентная секция статической страницы (после header-strip). */
.public-page .cp-section { margin-bottom: 48px; }
.public-page .cp-section-kicker { margin-bottom: 10px; }
.public-page .cp-section-title {
    /* Тот же стиль, что .lp-section-title, чтобы секционные заголовки
       читались одинаково и на лендинге, и на статике. */
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.02em;
    color: var(--color-text-light);
    margin: 0 0 18px;
}
.public-page .cp-prose {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-light);
    max-width: 70ch;
}
.public-page .cp-prose p { margin: 0 0 14px; }
.public-page .cp-prose strong { color: var(--color-text-light); }

@media (max-width: 600px) {
    .public-page .cp-page-header { padding: 36px 0 32px; }
    .public-page .cp-page-title { font-size: 22px; line-height: 1.55; }
    .public-page .cp-page-sub { font-size: 15px; }
}

/* ==========================================================================
   MARKDOWN-КОНТЕНТ внутри public-page (карточка преподавателя, блог).
   Шрифт остаётся Manrope — pixel на длинных текстах не читается. Только
   цвета подстраиваем под тёмный фон.
   ========================================================================== */
.public-page .teacher-content,
.public-page .blog-content {
    color: var(--color-text-light);
}
.public-page .teacher-content :is(h1, h2, h3, h4),
.public-page .blog-content :is(h1, h2, h3, h4) {
    color: var(--color-text-light);
    font-family: var(--font-body);
}
.public-page .teacher-content code,
.public-page .blog-content code {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-accent);
}
.public-page .teacher-content pre,
.public-page .blog-content pre {
    background: #0d0f13;
    color: var(--color-text-light);
}
.public-page .teacher-content strong,
.public-page .blog-content strong { color: var(--color-text-light); }
.public-page .teacher-content blockquote,
.public-page .blog-content blockquote {
    border-left-color: var(--color-accent) !important;
    color: var(--color-text-light-muted);
}