/* Кастомные правки поверх собранного style.min.css (грузится после него). */

.footer__project {
    margin-top: 3px;
    margin-bottom: 10px;
    color: #8f8f8f;
    font-size: 15px;
}

.footer__project a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body {
    font-weight: 400;
    letter-spacing: 0.2px;
}

h1,
h2,
h3,
h4 {
    letter-spacing: 0;
}

.hero h1 {
    max-width: 870px;
}

.header nav ul a {
    transition: 0.5s;
}

.header nav ul a:hover {
    color: #ffffff;
    opacity: 1;
}

/* Липкая шапка 74px: без отступа якорь прячет верх секции под ней. */
.section[id],
.hero[id] {
    scroll-margin-top: 84px;
}

/* Курсор/текст ввода уезжали вверх от плейсхолдера: у textarea line-height 100%,
   а у подсказки .chat-chars — 150%. Выравниваем ввод по плейсхолдеру. */
.chat-textarea textarea {
    line-height: 150%;
}

/* Кнопка «Создать сайт» в hero была неактивна (pointer-events:none), пока не введён
   промпт: человек кликал и ничего не происходило. Теперь клик всегда работает —
   с пустым полем ведёт на регистрацию. Приглушённый вид до ввода сохраняем. */
.chat-bottom:not(._active) {
    pointer-events: auto;
}

.chat-bottom:not(._active) ._btn {
    cursor: pointer;
}


/* Кнопки шапки */
.header__btns ._btn {
    height: 42px;
    padding: 12px 26px;
    padding-bottom: 14px;
}

/* Мобильная кнопка «Начать» в шапке */
.header__cta-mobile {
    display: none;
}

@media (max-width: 768px) {
    .header__cta-mobile {
        display: inline-flex;
        height: 36px;
        padding: 8px 18px;
        padding-bottom: 10px;
        font-size: 15px;
        white-space: nowrap;
    }

    /* Бургер прижат к правому краю, кнопка встаёт слева от него. */
    .header__right {
        gap: 12px;
    }
}

@media (max-width: 375px) {
    .header__cta-mobile {
        padding: 8px 14px;
        padding-bottom: 10px;
        font-size: 14px;
    }
}

/* Блок технологий под hero */
.partners {
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    align-items: center;
    max-width: 880px;
    gap: 20px 40px;
}

.partners-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.partners-item img {
    height: 22px;
    width: auto;
    opacity: .75;
    transition: opacity .3s;
}

.partners:hover .partners-item img {
    opacity: .45;
}

.partners-item:hover img {
    opacity: 1;
}

/* У PostgreSQL знак свёрстан «слон над подписью», поэтому при общей высоте
   ряда он читается мельче остальных — компенсируем оптически. */
.partners-item img[src*="postgresql"] {
    height: 32px;
}

@media (max-width: 768px) {
    .partners {
        grid-template-columns: repeat(3, auto);
        gap: 16px 24px;
    }

    .partners-item img {
        height: 18px;
    }

    .partners-item img[src*="postgresql"] {
        height: 26px;
    }
}

@media (max-width: 375px) {
    .partners-item img {
        height: 16px;
    }
}

/* Секция «Примеры» — карточки живых сайтов */
.examples .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.examples .example-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
}

.examples .example-item .img {
    margin-top: auto;
}

.examples .example-item .img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .5s ease;
}

.examples .example-item:hover .img img {
    transform: scale(1.03);
}

.examples .section__top p {
    max-width: 620px;
}

@media (max-width: 1024px) {
    .examples .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .examples .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Футер: реквизиты продавца и контакты */
.footer__requisites {
    margin-top: 16px;
    max-width: 420px;
}

.footer__requisites p {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 150%;
    color: var(--color-secondary);
    opacity: .45;
}

.footer__requisites .footer__pay-note {
    opacity: .6;
}

.footer__requisites a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 1;
}

.footer__requisites a:hover {
    opacity: .6;
}

.footer__requisites .footer__contacts span {
    margin: 0 6px;
}

/* === Документация: таблицы, код, врезки === */

/* Первый блок документации — вплотную к шапке: у неё уже есть свой отступ снизу,
   а штатные 120px секции добавляли лишнюю пустоту над заголовком.
   Классы docs-index / docs-article стоят только в шаблонах документации,
   поэтому остальные страницы с .section сохраняют обычный отступ. */
.section.docs-index,
.section.docs-article {
    padding-top: 0;
}

/* Разделов девять — без фиксации меню навигация уезжает на первом же экране.
   Шапка сайта тоже sticky (74px), поэтому меню липнет ниже неё, а не под ней. */
:root {
    --docs-header-h: 74px;
    --docs-sidebar-gap: 24px;
}

@media (min-width: 1025px) {
    .docs-article .docs-sidebar {
        position: sticky;
        top: calc(var(--docs-header-h) + var(--docs-sidebar-gap));
        align-self: flex-start;
        max-height: calc(100vh - var(--docs-header-h) - var(--docs-sidebar-gap) * 2);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 8px;
    }

    .docs-article .docs-sidebar::-webkit-scrollbar { width: 4px; }
    .docs-article .docs-sidebar::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: 4px;
    }
}

/* Текущий раздел не должен теряться среди остальных пунктов. */
.docs-article .docs-sidebar nav > ul > li._active > a {
    font-weight: 500;
}

/* Абзацы в документации длинные — 130% для них тесновато.
   Приглушаем цветом, а не opacity: opacity родителя погасила бы и ссылки внутри,
   которым ниже задан полный контраст. */
.docs-article .docs-content .text-box p,
.docs-article .docs-content .text-box li {
    line-height: 155%;
    color: rgba(255, 255, 255, .8);
}

[data-theme=light] .docs-article .docs-content .text-box p,
[data-theme=light] .docs-article .docs-content .text-box li {
    color: rgba(2, 2, 2, .8);
}

/* Маркер списка: мельче и ниже, чем в общей теме. */
.docs-article .docs-content .text-box ul li:before {
    position: absolute;
    content: "";
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
}

/* Тема красит b/strong в приглушённый --color-textBox, из-за чего выделенное
   выглядит бледнее обычного текста. Наследуем цвет абзаца. */
.docs-article .docs-content .text-box b,
.docs-article .docs-content .text-box strong {
    font-weight: 900;
    color: inherit;
}

/* Ссылки в тексте — контрастные, с подчёркиванием.
   Через переменную темы: в тёмной это #ffffff, в светлой ссылки не пропадут. */
.docs-article .docs-content .text-box a {
    color: var(--color-secondary);
    border-bottom: 1px solid currentColor;
    transition: opacity .2s;
}

.docs-article .docs-content .text-box a:hover {
    opacity: .5;
}

/* Кнопки внутри статьи не должны наследовать цвет и подчёркивание обычных
   ссылок — иначе _btn-white (белый фон) получает белый текст поверх белого фона.
   Реальный селектор темы — ".text-box a" (без .docs-article, этого класса
   на странице нет вообще), поэтому override целится в него же. */
.text-box a._btn {
    border-bottom: none;
}

.text-box a._btn._btn-white {
    color: var(--color-primary);
}

.docs-article .docs-content .text-box h2 {
    font-size: 32px;
    margin-top: 2.5rem;
    scroll-margin-top: 100px;
}

.docs-article .docs-content .text-box h3 {
    font-size: 20px;
    margin-top: 1.75rem;
}

@media (max-width: 768px) {
    .docs-article .docs-content .text-box h2 { font-size: 26px; }
    .docs-article .docs-content .text-box h3 { font-size: 18px; }
}

/* Заголовки h2 в текстовых страницах (оферта, политика, посадочные).
   Тема даёт 48px только шире 1460px, дальше плавно ужимает до 24px — фиксируем
   48px на десктопе и добавляем воздух сверху (было 0.5rem, секции слипались).
   На узких экранах фиксированный кегль оставлять нельзя: в оферте есть слова
   вроде «несовершеннолетних» — при 48px строка уезжает за экран. */
.text-box h2 {
    font-size: 48px;
    margin-top: 50px !important;
}

@media (max-width: 768px) {
    .text-box h2 {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    .text-box h2 {
        font-size: 26px;
    }
}

/* Видео в финальной секции на мобильных: тема растягивала блок до 132.27%
   ширины экрана и центрировала (`.start .img`), из-за чего кадр 16:9 обрезался
   по краям и выглядел приближённым. Возвращаем ширину экрана — ролик виден
   целиком. Высота считается от aspect-ratio 16/9, поэтому пустых полей нет. */
@media (max-width: 768px) {
    .start .img {
        width: 100%;
        left: auto;
        transform: none;
        overflow: hidden;
    }

    /* Ролик крупнее экрана на 30% и строго по центру: margin-left -15% уводит
       за каждый край поровну, overflow на контейнере срезает вылет, чтобы не
       появилась горизонтальная прокрутка. Высота полосы фиксирована. */
    .start .img img,
    .start .img picture,
    .start .img video {
        width: 130% !important;
        max-width: none;
        margin-left: -15%;
        display: block;
        height: 360px;
    }

    .start .img video {
        aspect-ratio: 16 / 9;
        object-fit: contain;
    }
}

/* Пункт меню «Начать» ведёт на #hero и должен открывать самый верх страницы.
   Общее правило даёт якорям отступ 84px под липкую шапку, из-за чего переход
   останавливался на 80px ниже нуля. Запас заведомо больше смещения секции —
   браузер упирается в начало документа. На другие якоря не влияет. */
#hero {
    scroll-margin-top: 400px;
}

/* Таблицы */
.text-box table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 15px;
    display: block;
    overflow-x: auto;
    white-space: normal;
}

.text-box table th,
.text-box table td {
    border: 1px solid var(--color-border);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    line-height: 145%;
    color: var(--color-secondary);
    opacity: .82;
}

.text-box table th {
    background: var(--color-icon-bg);
    font-weight: 500;
    opacity: 1;
}

.text-box table tr td:first-child {
    white-space: nowrap;
}

/* Код */
.text-box code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    background: var(--color-icon-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
    color: var(--color-secondary);
}

.text-box pre {
    background: var(--cards-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 18px 20px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.text-box pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    line-height: 158%;
    white-space: pre;
    display: block;
    color: var(--color-secondary);
    opacity: .85;
}

/* Врезки */
.doc-note,
.doc-tip,
.doc-warn {
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 1.5rem;
    background: var(--color-icon-bg);
}

.doc-note { border-left-color: var(--color-secondary); }
.doc-tip  { border-left-color: #4ade80; }
.doc-warn { border-left-color: #fbbf24; }

.doc-note > strong,
.doc-tip > strong,
.doc-warn > strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--color-secondary);
}

.doc-note > p:last-child,
.doc-tip > p:last-child,
.doc-warn > p:last-child,
.doc-note > ul:last-child,
.doc-tip > ul:last-child,
.doc-warn > ul:last-child {
    margin-bottom: 0;
}

/* Нумерованные шаги */
.text-box ol.doc-steps {
    list-style: none;
    padding-left: 0;
    counter-reset: docstep;
    gap: 1rem;
}

.text-box ol.doc-steps > li {
    list-style: none;
    counter-increment: docstep;
    position: relative;
    padding-left: 46px;
    min-height: 30px;
}

.text-box ol.doc-steps > li:before {
    content: counter(docstep);
    position: absolute;
    left: 0;
    top: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-icon-bg);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 1;
}

.text-box ol.doc-steps > li > strong {
    display: block;
    margin-bottom: 2px;
    color: var(--color-secondary);
}

/* Скриншоты кабинета: рамка, чтобы тёмный интерфейс не сливался с фоном страницы */
.docs-article .docs-content .text-box figure img {
    border: 1px solid var(--color-border);
    border-radius: 20px;
    width: 100%;
}

.docs-article .docs-content .text-box figcaption {
    font-size: 14px;
    text-align: center;
    color: var(--color-secondary);
    opacity: .55;
}


/* === Подсказки в бегущей строке hero === */

/* Чипы стали кликабельными: клик подставляет текст в поле промпта (assets/script.js),
   поэтому им нужен полный контраст и явный курсор — приглушённые на 40% они читались
   как декорация. Цвета через переменные темы: в тёмной чип белый с чёрным текстом,
   в светлой инвертируется (жёстко заданный белый там слился бы с фоном страницы). */
._ticker-text span {
    color: var(--color-primary);
    background: var(--color-secondary);
    border: 1px solid currentColor;
    opacity: 1;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity .25s, transform .25s;
}

@media (any-hover: hover) {
    ._ticker-text span:hover {
        opacity: .82;
    }
}

._ticker-text span:active {
    transform: scale(.97);
}

/* === SEO-правки 2026-08-03 === */

/* Подзаголовок hero: H1 один не покрывал семантику ниши («конструктор»,
   «нейросеть»), текст добавлен в шаблон front-page.php. */
.hero .hero-sub {
    max-width: 680px;
    margin: 14px auto 26px;
    text-align: center;
    color: var(--color-secondary);
    opacity: .6;
    font-size: 18px;
    line-height: 150%;
}

@media (max-width: 768px) {
    .hero .hero-sub {
        font-size: 15px;
        margin: 10px auto 20px;
    }
}

/* Вопросы FAQ стали H3 (были span) — сбрасываем заголовочные стили,
   размер задаёт родитель .accordion__item-title. */
.accordion__item-title h3.accordion__question {
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
}

/* Дата обновления и блок «автора» в статьях документации. */
.docs-article .doc-updated {
    font-size: 14px;
    color: var(--color-secondary);
    opacity: .5;
    margin-top: 8px;
}

.docs-article .doc-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 40px;
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-icon-bg);
    font-size: 14px;
    line-height: 150%;
}

.docs-article .doc-author__name {
    font-weight: 500;
    color: var(--color-secondary);
}

.docs-article .doc-author__role {
    color: var(--color-secondary);
    opacity: .6;
}

.docs-article .doc-author__role a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Вводный текст хаба документации: страница была тоньше 100 слов. */
.docs-index .docs-intro {
    max-width: 720px;
    color: var(--color-secondary);
    opacity: .65;
    line-height: 155%;
    margin-top: 4px;
}

/* Затемнение под галереей hero: начинаем выше её верхнего края (-80%) и добираем
   до сплошного фона раньше (60%), чтобы низ галереи уходил в фон плавнее.
   Светлой теме нужен свой белый вариант: :root из custom.css перебивает
   [data-theme=light] из style.min.css — специфичность равная, а файл подключён позже. */
:root,
[data-theme=dark] {
    --hero-galler-bg: linear-gradient(180deg, rgba(0, 0, 0, 0) -80%, #000000 60%);
}

[data-theme=light] {
    --hero-galler-bg: linear-gradient(180deg, rgba(255, 255, 255, 0) -80%, #ffffff 60%);
}

/* Блок «Читайте также» — ручная перелинковка, разметка в functions/wp_funcs/seo.php.
   Заголовок перебиваем явно: правило .text-box h2 задаёт 48px и отступ 50px,
   а здесь нужен подзаголовок, а не новый раздел. */
.text-box .wuna-related {
    margin-top: 50px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.text-box .wuna-related h2 {
    font-size: 22px !important;
    margin-top: 0 !important;
    margin-bottom: 16px;
}

.text-box .wuna-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.text-box .wuna-related li {
    margin: 0;
    padding: 0;
}

.text-box .wuna-related li::before {
    content: none;
}

/* Цвет не задаём: --color-primary в этой теме равен #020202 (фон страницы),
   а ссылки в документации белые без подчёркивания — наследуем стиль темы. */
.text-box .wuna-related a {
    text-decoration: none;
}

.text-box .wuna-related a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .text-box .wuna-related {
        margin-top: 34px;
        padding-top: 22px;
    }

    .text-box .wuna-related h2 {
        font-size: 19px !important;
    }
}