/*
 * Theme of the public site: fonts, tokens, components
 * Тема публичного сайта: шрифты, токены, компоненты
 *
 * Новый облик публичных страниц (docs/AiInstruction-PublicRedesign.md, §3).
 * Тема `mil-` и style.css остаются как есть (Р1): этот файл подключается в
 * `_Layout` после site-shell.css и переопределяет только то, что нужно.
 * Страница заполнения и кабинет живут на других макетах, и их он не
 * касается (Р3).
 *
 * Цвета во всех публичных CSS — только переменные из site-tokens.css.
 * Литерал цвета допустим лишь там, где у него нет смысла токена (белый
 * текст на акценте).
 */

/* Шрифты и токены — в site-tokens.css: их подключает и кабинет, чтобы
   шапка была везде одна, а базовые стили и компоненты ниже — только
   публичные страницы. */

/* ---------- основа ---------- */

/* Тема ставит html и body 15px, и rem на публичных страницах был 15px.
   Возвращаем 16px браузера: размеры задания даны в пикселях от него. */
html {
    font-size: 16px;
}

html,
body {
    font-family: var(--pd-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--pd-text);
}

body {
    background-color: var(--pd-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* У темы overflow: hidden на обёртке — он ломает position: sticky у всего
   внутри. clip обрезает так же, но не делает обёртку прокручиваемым
   контейнером. Браузер без clip оставит hidden темы. */
.mil-wrapper {
    overflow: clip;
}

h1, h2, h3 {
    font-family: var(--pd-font-serif);
    font-weight: 600;
    color: var(--pd-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h4, h5, h6 {
    font-family: var(--pd-font-sans);
    font-weight: 600;
    color: var(--pd-ink);
    line-height: 1.3;
}

strong, b {
    font-weight: 600;
}

/* Контейнер 1200px: при ширине 1440 поля по 120px. */
@media (min-width: 1200px) {
    .container {
        max-width: 1224px;
    }
}

/* ---------- фокус ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--pd-accent);
    outline-offset: 2px;
}

/* ---------- типографика ---------- */

.pd-h1,
.pd-h1-home {
    font-size: 52px;
    line-height: 1.08;
}

.pd-h1-home {
    font-size: 58px;
    line-height: 1.06;
}

.pd-h2 {
    font-size: 40px;
    line-height: 1.15;
}

/* Второстепенные заголовки: SEO-текст, FAQ на разделе. */
.pd-h2-sm {
    font-size: 30px;
    line-height: 1.2;
}

.pd-lead {
    font-size: 18px;
    line-height: 1.55;
    color: var(--pd-text);
}

/* Надзаголовок: «СВОЙ ДОКУМЕНТ» над H2 плашки. */
.pd-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pd-accent);
}

/* 992–1199: колонка первого экрана главной уже 540px — 58px дали бы шесть
   строк. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pd-h1-home {
        font-size: 48px;
        line-height: 1.08;
    }
}

@media (max-width: 991.98px) {
    .pd-h1,
    .pd-h1-home {
        font-size: 44px;
        line-height: 1.1;
    }

    .pd-h2 {
        font-size: 34px;
    }

    .pd-h2-sm {
        font-size: 26px;
    }
}

@media (max-width: 575.98px) {
    .pd-h1,
    .pd-h1-home {
        font-size: 36px;
        line-height: 1.1;
    }

    .pd-h2 {
        font-size: 28px;
    }

    .pd-h2-sm {
        font-size: 24px;
    }

    .pd-lead {
        font-size: 16px;
    }
}

/* ---------- секции ---------- */

.pd-section {
    padding: var(--pd-section-y) 0;
}

.pd-section-white {
    background-color: var(--pd-surface);
}

/* ---------- кнопки ---------- */

/* Сами кнопки (.pd-btn и варианты) — в site-controls.css: их подключает
   и кабинет (AiInstruction-AccountPages, Р5). */

/* Фокус на тёмном: акцентная обводка там не видна. */
.pd-dark .pd-btn:focus-visible,
.pd-dark a:focus-visible {
    outline-color: var(--pd-marker);
}

/* ---------- карточки ---------- */

.pd-card {
    background-color: var(--pd-surface);
    border: 1px solid var(--pd-line);
    border-radius: 16px;
}

/* Тёмная плашка: «Свой документ», тарифы на разделе. */
.pd-dark {
    background-color: var(--pd-ink);
    color: var(--pd-dark-text);
    border-radius: 20px;
}

.pd-dark h2,
.pd-dark h3 {
    color: #fff;
}

/* ---------- маркер ---------- */

/* Подставленные данные в тексте договора — как выделение маркером. */
.pd-mark {
    background-color: var(--pd-marker);
    color: var(--pd-ink);
    border-radius: 3px;
    padding: 0 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ---------- иконки ---------- */

/* Инлайн-SVG с обводкой 1.8 в квадрате 44×44. Font Awesome на новых блоках
   не используется. */
.pd-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: var(--pd-accent-soft);
    color: var(--pd-accent);
}

.pd-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- чипы ---------- */

.pd-chip {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--pd-line);
    border-radius: 18px;
    background-color: var(--pd-surface);
    color: var(--pd-ink);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.pd-chip:hover {
    border-color: var(--pd-accent);
    color: var(--pd-accent);
}

/* ---------- размер касания на телефоне ---------- */

@media (max-width: 575.98px) {
    .pd-chip {
        height: 44px;
    }

    /* Кнопки и поля Bootstrap на публичных страницах: витрина, поиск,
       страница ошибки. */
    .btn,
    .form-control {
        min-height: 44px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------- Bootstrap под акцент ---------- */

/* В Bootstrap 5.1 у кнопок нет CSS-переменных, поэтому переопределяются
   сами классы. Витрина, поиск и панель входа стоят на них. */
.btn-primary {
    background-color: var(--pd-accent);
    border-color: var(--pd-accent);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--pd-accent-hover);
    border-color: var(--pd-accent-hover);
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--pd-accent);
    color: var(--pd-accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--pd-accent);
    border-color: var(--pd-accent);
    color: #fff;
}

.btn-primary:focus,
.btn-outline-primary:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(30, 79, 216, .2);
}

.form-control:focus,
.form-check-input:focus {
    border-color: #8FA7EB;
}

.form-check-input:checked {
    background-color: var(--pd-accent);
    border-color: var(--pd-accent);
}

/* ---------- кнопка «Наверх» ---------- */

/* У темы она зелёная — цвет прошлого бренда. */
#return-to-top {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--pd-ink);
}

#return-to-top:hover {
    background: var(--pd-accent);
}

#return-to-top i {
    left: 0;
    top: 0;
    width: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 22px;
}