/*
Theme Name: Кредит Онлайн
Theme URI: https://expressonlinecredit.ru/
Description: Дочерняя тема Root для expressonlinecredit.ru. Дизайн-система 2026: Golos Text, крупные радиусы, мягкие тени, без библиотек и фреймворков. Форк root_child — вся функциональность калькуляторов, метабоксов и шорткодов перенесена без изменений.
Author: expressonlinecredit.ru
Author URI: https://expressonlinecredit.ru/
Template: root
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: credit-online
Tags: finance, custom-menu, translation-ready
*/

/* ==========================================================================
   1. Шрифт — self-hosted, только woff2, только нужные начертания.
      Файлы кладутся в assets/fonts/. Подключение и preload — в functions.php.
      Google Fonts родительской темы (Exo 2 + PT Serif, 6 начертаний)
      снимается там же, см. eoc_dequeue_parent_fonts().
   ========================================================================== */

@font-face {
    font-family: "Golos Text";
    src: url("assets/fonts/golos-text-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* Кириллица + латиница + цифры и пунктуация */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1,
        U+2000-206F, U+20AC, U+20BD, U+2116, U+2122, U+2190-2193, U+2212, U+2215;
}

@font-face {
    font-family: "Golos Text";
    src: url("assets/fonts/golos-text-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1,
        U+2000-206F, U+20AC, U+20BD, U+2116, U+2122, U+2190-2193, U+2212, U+2215;
}

/* ==========================================================================
   2. Токены. Имена совпадают с теми, что уже используют компоненты eoc-*
      на 330 страницах, — переопределение здесь меняет их все разом.
   ========================================================================== */

:root {
    /* цвет */
    --eoc-ink:      #0D0D0E;
    --eoc-muted:    #5A6072;
    --eoc-blue:     #1B4DFF;
    --eoc-blue-dark:#0F3BD1;
    --eoc-tint:     #F0F4FD;
    --eoc-tint-2:   #D9E4FB;
    --eoc-bg:       #F6F6F6;
    --eoc-card:     #FFFFFF;
    --eoc-line:     #E8EAEE;
    --eoc-green:    #12805C;
    --eoc-green-tint:#E6F4EF;
    --eoc-amber:    #8A5A00;
    --eoc-amber-tint:#FFF4E0;
    --eoc-red:      #B42318;
    --eoc-red-tint: #FDECEA;

    /* совместимость со старыми именами из legacy.css */
    --eoc-soft:     #F0F4FD;

    /* форма */
    --eoc-r-lg: 32px;
    --eoc-r-md: 24px;
    --eoc-r-sm: 16px;
    --eoc-r-btn: 12px;
    --eoc-shadow: 0 2px 4px rgba(17, 17, 26, .03), 0 8px 24px rgba(17, 17, 26, .04);
    --eoc-shadow-hover: 0 4px 8px rgba(17, 17, 26, .04), 0 16px 40px rgba(17, 17, 26, .08);

    /* ритм: шаг 8 */
    --eoc-s1: 8px;  --eoc-s2: 16px; --eoc-s3: 24px;
    --eoc-s4: 32px; --eoc-s6: 48px; --eoc-s8: 64px;

    --eoc-font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Калькуляторы в legacy.css задают свои токены на .eoc-tool-copy / .eoc-calculators,
   поэтому :root их не перекрывает — переопределяем адресно. */
.eoc-tool-copy,
.eoc-calculators {
    --eoc-accent: var(--eoc-blue);
    --eoc-accent-dark: var(--eoc-blue-dark);
    --eoc-ink: #0D0D0E;
    --eoc-muted: #5A6072;
    --eoc-line: #E8EAEE;
    --eoc-soft: #F0F4FD;
}

/* ==========================================================================
   3. База и типографика
   ========================================================================== */

/* WordPress печатает <style>body.custom-background{background-color:#f8f9fa}</style>
   в wp_head — то есть ПОСЛЕ наших файлов и с той же специфичностью, поэтому
   выигрывал он. Добавляем html в селектор, чтобы перевесить. */
body,
html body.custom-background {
    background: var(--eoc-bg);
    color: var(--eoc-ink);
    font-family: var(--eoc-font);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
    font-family: var(--eoc-font);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--eoc-ink);
}

h1, .entry-title {
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -.02em;
}

h2 { font-size: 28px; }
h3 { font-size: 20px; }

.entry-content p,
.taxonomy-description p { line-height: 1.6; }

a { color: var(--eoc-blue); }

/* Табличные цифры везде, где сравниваются числа */
table td, table th,
.eoc-metric, .eoc-card__meta {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. Шапка и логотип
   ========================================================================== */

.site-header {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--eoc-line);
}

.eoc-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: var(--eoc-ink) !important;
}

.eoc-logo__mark { flex: none; display: block; }

.eoc-logo__name {
    display: block;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.eoc-logo__tag {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eoc-muted);
    white-space: nowrap;
}

/* На узких экранах остаётся только знак и имя */
@media (max-width: 640px) {
    .eoc-logo__tag { display: none; }
}

@media (max-width: 480px) {
    .eoc-logo__name { font-size: 17px; }
}

/* Меню */
.main-navigation a,
.top-menu a {
    border-radius: 10px;
    transition: background .15s, color .15s;
}

.main-navigation a:hover,
.top-menu a:hover {
    background: var(--eoc-tint);
    color: var(--eoc-blue);
}

/* ==========================================================================
   5. Кнопки
   ========================================================================== */

.eoc-btn,
.eoc-card__link,
.btn,
input[type="submit"],
button.eoc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--eoc-r-btn);
    background: var(--eoc-blue);
    color: #fff !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s;
}

.eoc-btn:hover,
.eoc-card__link:hover,
.btn:hover,
input[type="submit"]:hover {
    background: var(--eoc-blue-dark);
}

.eoc-btn--light {
    background: #fff;
    color: var(--eoc-blue) !important;
    box-shadow: inset 0 0 0 1px var(--eoc-tint-2);
}

.eoc-btn--light:hover {
    background: var(--eoc-tint);
}

.eoc-btn--sm,
.eoc-card__link {
    min-height: 38px;
    padding: 7px 16px;
    font-size: 14.5px;
}

/* Второстепенное действие — контурная кнопка, как в макете.
   Правило идёт после базового, иначе оно перебивалось и все кнопки
   на карточках выглядели одинаково залитыми синим. */
.eoc-card__link--secondary {
    background: #fff;
    color: var(--eoc-blue) !important;
    box-shadow: inset 0 0 0 1px var(--eoc-tint-2);
}

.eoc-card__link--secondary:hover {
    background: var(--eoc-tint);
    color: var(--eoc-blue) !important;
}

/* ==========================================================================
   6. Карточки и блоки — граница уходит, приходит тень
   ========================================================================== */

/* .eoc-choice сюда не входит: это сетка-обёртка, а не карточка.
   Раньше входила — из-за этого пара советов оказывалась внутри лишней
   белой коробки, чего в макете нет. */
.eoc-card,
.eoc-fin-calc {
    background: var(--eoc-card);
    border: 0 !important;
    border-radius: var(--eoc-r-md);
    box-shadow: var(--eoc-shadow);
    padding: var(--eoc-s3);
    transition: transform .18s, box-shadow .18s;
}

/* Пара советов рядом: просто сетка, без фона и отступов */
.eoc-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eoc-s2);
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: 0;
}

/* Карточка совета — белая, как в макете. Цветом отличается только
   галочка в списке: зелёная у обычных, янтарная у предупреждений. */
.eoc-note {
    background: var(--eoc-card) !important;
    border: 0 !important;
    border-radius: var(--eoc-r-md);
    box-shadow: var(--eoc-shadow);
    padding: var(--eoc-s4);
    color: var(--eoc-ink);
}

.eoc-note > strong {
    display: block;
    margin-bottom: var(--eoc-s2);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.eoc-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.eoc-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    color: var(--eoc-muted);
    line-height: 1.5;
}

.eoc-list li:last-child { margin-bottom: 0; }

.eoc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--eoc-green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%2312805C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.eoc-note--warn .eoc-list li::before {
    background: var(--eoc-amber-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%238A5A00' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 4.6v5M9 12.8h.01'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.eoc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--eoc-shadow-hover);
}

.eoc-hero {
    border: 0;
    border-radius: var(--eoc-r-lg);
    padding: var(--eoc-s4);
    background: linear-gradient(135deg, #F0F4FD 0%, #E8F3FF 60%, #EAF7F1 100%);
}

/* В legacy.css у заголовка героя вес 700 — в макете 600, как у всех заголовков */
.eoc-hero__title {
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 600;
}

.eoc-hero__eyebrow,
.eoc-badge {
    border: 0;
    border-radius: 999px;
    background: #fff;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
}

.eoc-grid { gap: var(--eoc-s2); }
.eoc-section { margin: var(--eoc-s6) 0; }
.eoc-section h2 { margin-bottom: var(--eoc-s3); }

/* Плашки-акценты */
.eoc-note,
blockquote.warning,
.warning {
    background: var(--eoc-amber-tint);
    border-left: 0 !important;
    border-radius: var(--eoc-r-md);
    color: var(--eoc-ink);
}

/* ==========================================================================
   7. Таблицы сравнения
   ========================================================================== */

.entry-content table {
    border-collapse: collapse;
    background: var(--eoc-card);
    border-radius: var(--eoc-r-md);
    overflow: hidden;
    box-shadow: var(--eoc-shadow);
}

.entry-content table th {
    background: #fff;
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--eoc-muted);
    padding: 14px var(--eoc-s2);
    border-bottom: 1px solid var(--eoc-line);
}

.entry-content table td {
    padding: 16px var(--eoc-s2);
    border: 0;
    border-bottom: 1px solid var(--eoc-line);
    font-size: 15.5px;
}

.entry-content table tr:last-child td { border-bottom: 0; }
.entry-content table tbody tr:hover { background: #FAFBFF; }

/* ==========================================================================
   8. Оглавление, автор, экспертное мнение
   ========================================================================== */

.table-of-contents,
.author-box,
.expert-opinion {
    background: var(--eoc-card);
    border: 0;
    border-radius: var(--eoc-r-md);
    box-shadow: var(--eoc-shadow);
    padding: var(--eoc-s3);
}

.table-of-contents__header {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--eoc-muted);
    font-weight: 600;
}

/* ==========================================================================
   9. Подвал. Текст и ссылки берутся из настроек темы и не меняются —
      здесь только оформление.
   ========================================================================== */

.site-footer {
    background: transparent;
    border-top: 1px solid var(--eoc-line);
    padding-top: var(--eoc-s6);
    color: var(--eoc-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.site-footer a { color: var(--eoc-muted); }
.site-footer a:hover { color: var(--eoc-blue); }

/* ==========================================================================
   10. Адаптив
   ========================================================================== */

@media (max-width: 720px) {
    body { font-size: 16px; }
    h1, .entry-title, .eoc-hero__title { font-size: 28px; }
    h2 { font-size: 23px; }

    .eoc-hero,
    .eoc-card { padding: var(--eoc-s3); border-radius: var(--eoc-r-md); }

    /* Два совета рядом на 375px давали по 140px ширины и вылезали за экран */
    .eoc-choice { grid-template-columns: 1fr; }
    .eoc-note { padding: var(--eoc-s3); }

    .entry-content table { font-size: 14px; }
}