/* ============================================================
   theme.css — дизайн-система темы profkom (2026)
   Палитра извлечена из существующей темы (styles.css / template_styles.css)
   и сведена к переменным. Новых фирменных цветов не добавлялось.
   Подключается ПОСЛЕ styles.css — служит слоем токенов и продающих
   компонентов, не переписывая базовую вёрстку.
   ============================================================ */

:root {
    /* --- Палитра (существующие цвета темы) --- */
    --c-primary:        #1a73e8; /* основной синий */
    --c-primary-light:  #378bfa; /* синий hover/светлый */
    --c-navy:           #0f2f44; /* тёмно-синий */
    --c-accent:         #ee4e4e; /* единый акцент CTA (сведён из #d04242/#ee4e4e/#fe5b38) */
    --c-accent-strong:  #d04242; /* акцент hover */
    --c-coral:          #fe5b38; /* тёплый акцент секций (orangeBody) */

    --c-text:           #333333;
    --c-muted:          #8d8d8d;
    --c-muted-2:        #a7a7a7;

    --c-bg:             #ffffff;
    --c-bg-soft:        #f6f6f6;
    --c-bg-mute:        #efefef;
    --c-bg-info:        #d8efff;
    --c-bg-info-2:      #eaf3ff;
    --c-border:         #dedede;

    /* --- Типографика --- */
    --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-head: "Core Sans C", "Segoe UI", system-ui, sans-serif;

    /* модульный тип-ряд */
    --fs-100: .8125rem;  /* 13px */
    --fs-200: .875rem;   /* 14px */
    --fs-300: 1rem;      /* 16px */
    --fs-400: 1.125rem;  /* 18px */
    --fs-500: 1.375rem;  /* 22px */
    --fs-600: 1.75rem;   /* 28px */
    --fs-700: 2.25rem;   /* 36px */
    --fs-800: clamp(2rem, 4.5vw, 3rem); /* адаптивный H1 hero */

    --lh-tight: 1.2;
    --lh-base:  1.6;

    /* --- Шкала отступов 4 / 8 --- */
    --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;

    /* --- Радиусы / тени / переходы --- */
    --radius:    14px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 3px rgba(51,51,51,.08);
    --shadow:    0 8px 28px rgba(15,47,68,.10);
    --transition: .2s ease;
}

/* ============================================================
   Продающие компоненты (новые классы — существующую вёрстку
   не ломают; подключаются точечно в разметке страниц)
   ============================================================ */

/* --- Кнопка-CTA --- */
.btn-cta,
a.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .75rem 1.75rem;
    background: var(--c-accent);
    color: #fff;
    font-family: var(--font-head);
    font-size: var(--fs-400);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    cursor: pointer;
}
.btn-cta:hover,
a.btn-cta:hover { background: var(--c-accent-strong); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-cta:focus-visible { outline: 3px solid var(--c-primary-light); outline-offset: 2px; }
.btn-cta:disabled,
.btn-cta[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* вторичная кнопка (контур, синий) — a.btn-cta--ghost для приоритета над a.btn-cta */
.btn-cta--ghost,
a.btn-cta--ghost {
    background: transparent;
    color: var(--c-primary);
    border: 2px solid var(--c-primary);
    box-shadow: none;
}
.btn-cta--ghost:hover,
a.btn-cta--ghost:hover { background: var(--c-primary); color: #fff; }

/* --- Hero / первый экран --- */
.hero {
    padding: clamp(2rem, 6vw, 4.5rem) 0;
    background:
        radial-gradient(120% 140% at 100% 0%, var(--c-bg-info-2) 0%, rgba(234,243,255,0) 55%),
        var(--c-bg);
}
.hero__inner { display: grid; gap: var(--sp-5); }
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    align-self: start;
    padding: .35rem .85rem;
    background: var(--c-bg-info);
    color: var(--c-primary);
    font-size: var(--fs-100);
    font-weight: 600;
    border-radius: 999px;
}
.hero__title {
    margin: 0;
    font-family: var(--font-head);
    font-size: var(--fs-800);
    line-height: var(--lh-tight);
    color: var(--c-navy);
    font-weight: 700;
}
.hero__subtitle {
    margin: 0;
    max-width: 60ch;
    font-size: var(--fs-400);
    line-height: var(--lh-base);
    color: var(--c-text);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--sp-3) var(--sp-5);
    margin-top: var(--sp-2);
    padding: 0;
    list-style: none;
}
.hero__facts li {
    position: relative;
    padding-left: 1.75rem;
    font-size: var(--fs-200);
    color: var(--c-text);
    line-height: 1.4;
}
.hero__facts li::before {
    content: "";
    position: absolute; left: 0; top: .1rem;
    width: 20px; height: 20px;
    background: var(--c-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (min-width: 768px) {
    .hero__facts { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 40rem; }
}

/* --- Заголовки секций (единая иерархия) --- */
.section-title {
    margin: 0 0 var(--sp-5);
    font-family: var(--font-head);
    font-size: var(--fs-700);
    line-height: var(--lh-tight);
    color: var(--c-navy);
    font-weight: 700;
}
.section-title--center { text-align: center; }
.section-subtitle {
    margin: calc(-1 * var(--sp-3)) 0 var(--sp-5);
    font-size: var(--fs-400);
    color: var(--c-muted);
}

/* --- Уведомления (замена инлайновых style="border:red") --- */
.attn-note {
    margin: var(--sp-4) 0;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-bg-info-2);
    border: 1px solid var(--c-bg-info);
    border-left: 5px solid var(--c-primary);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    line-height: var(--lh-base);
}
.attn-note--urgent {
    background: #fff4f2;
    border-color: #ffd9d1;
    border-left-color: var(--c-accent);
}
.attn-note a { color: var(--c-primary); font-weight: 600; }

/* --- Адаптивные изображения (защита от переполнения / CLS) --- */
img { max-width: 100%; height: auto; }

/* --- Фокус-стили для доступности (SEO+UX) --- */
a:focus-visible,
button:focus-visible,
.link-item:focus-visible { outline: 3px solid var(--c-primary-light); outline-offset: 2px; }

/* --- Микроразметочный address без курсива --- */
address { font-style: normal; }

/* --- Логотип в шапке --- */
.logo-link { display: inline-flex; align-items: center; }
.logo-img { height: 48px; width: auto; max-width: 100%; }
@media (max-width: 575.98px) { .logo-img { height: 40px; } }

/* --- Защита от горизонтальной прокрутки (безопасно, без overflow:hidden на body,
       чтобы не обрезать выезжающее мобильное меню .modal_menu) --- */
img, iframe, video, embed, object { max-width: 100%; }
table { max-width: 100%; }
.table-wrap, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* длинные ссылки/слова не распирают колонку на узких экранах */
p a[href^="http"], .descItem a, .breadcrumb a { overflow-wrap: anywhere; word-break: break-word; }

/* ================= ФИКСЫ ПО ИТОГАМ РЕВИЗИИ НА ЖИВОМ САЙТЕ ================= */
/* 1) Нейтрализация вредного правила из CSS-бандла темы:
      "div ul li …, div p { font-family:'Times New Roman',serif !important; font-size:20px }".
      Оно красит ВЕСЬ контент (меню, hero, абзацы) в Times New Roman.
      Возвращаем шрифт сайта тем же селектором с !important (theme.css грузится последним).
      Размер шрифта НЕ трогаем — только семейство. */
div ul li span, div ul li p, div ol li span, div ol li p,
div ol li, div ul li, div p {
    font-family: var(--font-sans) !important;
}
/* ссылки внутри пунктов меню (наследование от li уже сан-сериф, дублируем явно) */
.serviceMenu a, .serviceMenu .link-item,
.modal_menu .navbar-nav a { font-family: var(--font-sans) !important; }

/* 2) Списки-навигация/UI без маркеров (перебиваем маркеры от широких правил).
      ВНИМАНИЕ: только служебные списки — контентные ul/ol с буллетами не трогаем. */
.serviceMenu, .serviceMenu > li,
.modal_menu .navbar-nav, .modal_menu .navbar-nav li,
.footer-nav ul, .footer-nav ul li,
.breadcrumb, .breadcrumb li,
.nav, .nav > li, .navbar-nav, .navbar-nav > li,
.hero__facts, .hero__facts li { list-style: none !important; }

/* ================= Дистанционное обучение ================= */
/* CTA-карточка доступа к курсу (для неавторизованных) */
.course-access-cta{
    max-width:640px;margin:2rem auto;padding:2.5rem 2rem;text-align:center;
    background:var(--c-bg-info-2);border:1px solid var(--c-bg-info);
    border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.course-access-cta__lock{
    display:inline-flex;align-items:center;justify-content:center;
    width:72px;height:72px;margin-bottom:1rem;border-radius:50%;
    background:#fff;color:var(--c-primary);box-shadow:var(--shadow-sm);
}
.course-access-cta__title{
    margin:0 0 .75rem;font-family:var(--font-head);font-size:var(--fs-600);
    line-height:1.2;color:var(--c-navy);font-weight:700;
}
.course-access-cta__text{
    margin:0 auto 1.5rem;max-width:48ch;font-size:var(--fs-300);
    line-height:var(--lh-base);color:var(--c-text);
}
.course-access-cta__actions{
    display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
}
.course-access-cta__phone{
    margin:1.25rem 0 0;font-size:var(--fs-200);color:var(--c-muted);
}
.course-access-cta__phone a{color:var(--c-primary);font-weight:600;white-space:nowrap;}

/* Списки курсов в аккордеонах: аккуратные строки-ссылки без буллетов, без переполнения */
.spoiler-body ul{margin:0;padding:0;}
.spoiler-body ul li{
    list-style:none;margin:0;padding:0;
    border-bottom:1px solid var(--c-border);
}
.spoiler-body ul li:last-child{border-bottom:0;}
.spoiler-body ul li a{
    display:block;padding:.6rem .75rem;
    color:var(--c-primary);text-decoration:none;line-height:1.35;
    overflow-wrap:anywhere;transition:background var(--transition),color var(--transition);
    border-radius:var(--radius-sm);
}
.spoiler-body ul li a:hover{background:var(--c-bg-info-2);color:var(--c-accent-strong);}