/*
Theme Name: НЕЙРОПЛАН
Theme URI: https://blog.neuro-plan.ru
Description: Дочерняя тема Twenty Twenty-Five в дизайн-системе платформы НЕЙРОПЛАН: палитра и типографика повторяют public/css/tokens.css, включая тёмную схему.
Author: НЕЙРОПЛАН
Template: twentytwentyfive
Version: 1.0.0
Text Domain: neuroplan
*/

/* ============================================================
   Палитра — зеркало public/css/tokens.css платформы.
   Значения продублированы, а не импортированы: блог живёт отдельным
   контейнером на своём домене, тянуть CSS с neuro-plan.ru означало бы
   внешнюю зависимость рендера блога от доступности платформы.
   При правке токенов на платформе этот блок нужно обновить руками.
   ============================================================ */
:root {
    --np-accent: #4A6CF7;
    --np-accent-bg: #EEF1FE;
    --np-bg: #FFFFFF;
    --np-bg-page: #F7F7F8;
    --np-border: #E4E4E7;
    --np-text: #18181B;
    --np-text2: #52525B;
    --np-text3: #71717A;
    --np-fill: #F4F4F5;
    --np-radius: 12px;
}

/* Блог намеренно СВЕТЛЫЙ при любой системной схеме: тёмного варианта у него
   нет, поэтому color-scheme: light фиксируется явно. Без этого объявления
   браузер в тёмной системной теме перекрашивает по своему усмотрению поля
   ввода, скроллбары и автозаполнение — светлая страница получала бы тёмные
   контролы. Токены выше остаются единственным набором значений. */
:root {
    color-scheme: light;
}

/* Пресеты WordPress считаются из theme.json на этапе сборки страницы и в
   тёмной схеме сами не меняются. Переопределяем именно их — тогда тёмную
   схему подхватывают и блоки родительской темы, которые мы не трогаем. */
:root {
    --wp--preset--color--base: var(--np-bg);
    --wp--preset--color--contrast: var(--np-text);
    --wp--preset--color--accent-1: var(--np-accent);
    --wp--preset--color--accent-2: var(--np-accent-bg);
    --wp--preset--color--accent-3: var(--np-accent);
    --wp--preset--color--accent-4: var(--np-text2);
    --wp--preset--color--accent-5: var(--np-bg-page);
    --wp--preset--color--accent-6: var(--np-border);
}

/* ─── База ──────────────────────────────────────────────── */
body {
    background: var(--np-bg-page);
    color: var(--np-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Контент — карточкой на фоне страницы, как панели кабинета. */
.wp-site-blocks > main {
    background: var(--np-bg);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    padding: clamp(20px, 4vw, 48px);
    margin-block: 24px;
}

/* ─── Шапка ─────────────────────────────────────────────── */
.np-header {
    background: var(--np-bg);
    border-bottom: 1px solid var(--np-border);
    padding: 0 24px;
    min-height: 52px;                 /* .header платформы */
    position: sticky;
    top: 0;
    z-index: 100;
}

.np-header .wp-block-site-logo img {
    height: 26px;
    width: auto;
}

.np-header .wp-block-navigation {
    font-size: 14px;
    font-weight: 500;
}

.np-header .wp-block-navigation a {
    color: var(--np-text2);
    text-decoration: none;
}

.np-header .wp-block-navigation a:hover {
    color: var(--np-text);
}

/* ─── Типографика ───────────────────────────────────────── */
h1, h2, h3, h4 { letter-spacing: -0.02em; }

.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { color: var(--np-accent); }

.wp-block-post-excerpt__excerpt,
.wp-block-post-date,
.wp-block-post-terms {
    color: var(--np-text2);
}

/* ─── Ленты записей — карточки ──────────────────────────── */
.wp-block-post-template > li {
    background: var(--np-bg);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    padding: 20px;
}

.wp-block-post-featured-image img {
    border-radius: 10px;
}

/* ─── Элементы управления ───────────────────────────────── */
.wp-block-button__link,
.wp-block-search__button {
    background: var(--np-accent);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 18px;
}

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
    background: var(--np-bg);
    color: var(--np-text);
    border: 1px solid var(--np-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
}

.wp-block-search__input:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--np-accent);
}

/* Плашки рубрик — как бейджи платформы. */
.wp-block-post-terms a {
    display: inline-block;
    background: var(--np-fill);
    color: var(--np-text2);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    text-decoration: none;
}

.wp-block-post-terms a:hover {
    background: var(--np-accent-bg);
    color: var(--np-accent);
}

/* ─── Таблицы ───────────────────────────────────────────── */
/* Ядро WordPress отдаёт .wp-block-table{overflow-x:auto} ТОЛЬКО когда таблица
   оформлена Gutenberg-блоком (<!-- wp:table -->): пер-блочные стили грузятся по
   факту наличия блока в разметке. Пайплайн отдаёт обычный HTML без блочных
   комментариев — стиль не подключается, и широкая таблица рвёт вёрстку на
   телефоне горизонтальной прокруткой всей страницы. Поэтому держим правило
   сами, и отдельно для «голой» таблицы без обёртки. */
.wp-block-table,
figure.wp-block-table {
    overflow-x: auto;
    max-width: 100%;
}

/* Без обёртки таблица не прокручивается сама: display:block делает её
   скроллируемым контейнером. Внутри контента статьи, чтобы не задеть вёрстку
   темы. */
.wp-block-post-content > table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.wp-block-post-content table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

.wp-block-post-content th,
.wp-block-post-content td {
    border: 1px solid var(--np-border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

.wp-block-post-content th {
    background: var(--np-fill);
    font-weight: 600;
    /* Заголовок столбца не переносим: перенос делает шапку выше самой таблицы
       и на узком экране читается хуже прокрутки. */
    white-space: nowrap;
}

/* ─── Код и цитаты ──────────────────────────────────────── */
code, pre, kbd {
    background: var(--np-fill);
    border-radius: 6px;
    font-size: 0.92em;
}

pre.wp-block-code {
    border: 1px solid var(--np-border);
    padding: 16px;
    overflow-x: auto;               /* длинные строки не растягивают страницу */
}

.wp-block-quote {
    border-left: 3px solid var(--np-accent);
    padding-left: 16px;
    color: var(--np-text2);
    font-style: normal;
}

/* ─── Подвал ────────────────────────────────────────────── */
.np-footer {
    color: var(--np-text3);
    font-size: 13px;
    border-top: 1px solid var(--np-border);
    padding: 24px;
}

.np-footer a { color: var(--np-text2); }