/* ==========================================================================
   contact - стили страницы.

   Собрано из source/tajiro скриптом tools/port-tajiro.mjs. Править здесь
   бессмысленно: следующий прогон затрёт. Правка идёт в src/css/.
   ========================================================================== */

/* ========================= HEADER STYLES ========================= */
/* Переопределения шапки для этой страницы. Общая шапка живёт в style.css
   в корне темы. */
/* ========================= /HEADER STYLES ======================== */

/* ========================= PAGE STYLES =========================== */
/* ---------------------------------------------------------------
   css/shared/forms.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — поля ввода

   В системе их не было вовсе: на лендингах формы нет, и по всему проекту
   про них написано ровно одно правило — «button, input, select, textarea
   { font: inherit }» в базе. Страницы входа и оплаты — первые, где поля
   появились, поэтому файл общий с самого начала.

   Собрано из токенов, ничего нового не заведено: поверхность --c-surface,
   кромка --c-line, скругление --r-card (6px — шкала мелких карточек, у
   кнопок своё, 4), фокус зелёным, как у :focus-visible в базе.
   ========================================================================== */

.fld { display: block; }

.fld + .fld { margin-top: 14px; }

/* Подпись над полем — прописными в разрядку, теми же значениями, что у
   подписей показателей. Постоянная, а не плейсхолдер: плейсхолдер исчезает
   на первом же введённом символе, и человек перестаёт видеть, что вводит. */
.fld__label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--c-text-muted);
}

.fld__input,
.fld__select {
    width: 100%;
    height: 52px;
    padding-inline: 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    background: var(--c-surface);
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.fld__input::placeholder { color: var(--c-text-muted); }

/* Многострочное поле. Высота не фиксирована, её задаёт rows в разметке, —
   поэтому здесь снимается высота одной строки и возвращаются вертикальные
   поля, которых у однострочного поля нет: там текст держит по центру сама
   высота коробки.

   Тянуть разрешено только вниз: вбок растягивание ломает колонку, а в
   раскладке из двух долей ещё и наезжает на соседнюю. */
.fld__area {
    height: auto;
    min-height: 132px;
    padding-block: 13px;
    resize: vertical;
}

/* Фокус: кромка зеленеет и вокруг неё мягкое кольцо. Обводку браузера
   снимаем только потому, что рисуем свою — и только на самих полях. */
.fld__input:focus,
.fld__select:focus {
    outline: none;
    border-color: var(--c-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 16%, transparent);
}

/* Селект: свою стрелку рисуем сами, потому что системная в разных
   браузерах разного размера и цвета. */
.fld__select {
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0.536 0.625H7.464L4 4.375L0.536 0.625Z' fill='%236b645a'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 8px 5px;
    cursor: pointer;
}

/* --- Раскрытый список -----------------------------------------------------
   Закрытое поле своё целиком, а раскрытый список до недавних пор рисовала
   система: серое меню Windows, окно выбора на телефоне, и CSS туда почти не
   доставал. Настраиваемый селект — appearance: base-select, Chrome и Edge
   с 135-й версии — отдаёт список в CSS и при этом остаётся обычным
   <select>: клавиатура, скринридер, отправка формы и js/checkout/market.js
   работают как раньше, разметку трогать не пришлось.

   Где его нет — Safari, Firefox, любой браузер на iPhone, — блок целиком
   пропускается, и там остаётся системный список, как было.

   Материал списка — тот же, что у панелей шапки: глухое стекло, кромка
   градиентом в прозрачной границе и «плавающая» тень, см. .nav-panel в
   header.css. Выбранный пункт — как вариант валюты в шапке: зелёный тинт,
   зелёный текст в полный вес. */
@supports (appearance: base-select) {
    .fld__select,
    .fld__select::picker(select) {
        appearance: base-select;
    }

  /* Стрелка переезжает из фона в ::picker-icon: фон повернуть нельзя, а
     значок можно — у открытого списка она смотрит остриём вверх. Встаёт он
     туда же, где лежала фоновая стрелка, — в правое поле, в 16px от кромки.
     В строку его не ставим: правое поле страницы подгоняют под фоновую
     стрелку сами (см. .ch .fld__select в 00-checkout.css), и значок в строке
     уехал бы вслед за полем к середине. */
    .fld__select {
        position: relative;
        display: flex;
        align-items: center;
        background-image: none;
    }

    .fld__select::picker-icon {
        content: "";
        position: absolute;
        inset-block: 0;
        right: 16px;
        width: 8px;
        height: 5px;
        margin-block: auto;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0.536 0.625H7.464L4 4.375L0.536 0.625Z' fill='%236b645a'/%3E%3C/svg%3E") no-repeat center / 8px 5px;
        transition: rotate 0.18s ease;
    }

    .fld__select:open::picker-icon { rotate: 180deg; }

  /* Пока список открыт, фокус стоит на пункте внутри него, и :focus у
     самого поля гаснет. Кольцо держим по :open — иначе поле теряло бы
     подсветку ровно тогда, когда с ним работают. */
    .fld__select:open {
        border-color: var(--c-green);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 16%, transparent);
    }

  /* Сам список. Ширина и место — браузерные: не уже поля и под ним, а если
     внизу тесно — над ним. Поэтому зазор задан с обеих сторон: он нужен и
     при развороте вверх. */
    .fld__select::picker(select) {
        margin-block: 6px;
        padding: 6px;
        border: 1.5px solid transparent;
        border-radius: var(--r-card);
        background-color: transparent;
        background-image: var(--glass-bg-solid), var(--glass-edge);
        background-origin: padding-box, padding-box, border-box;
        background-clip: padding-box, padding-box, border-box;
        box-shadow: var(--glass-shadow-float);

        opacity: 0;
        transform: translateY(-6px);
      /* display и overlay переключаются скачком, но в конце перехода: без
         allow-discrete список пропадал бы сразу, не доиграв уход. */
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            display 0.18s allow-discrete,
            overlay 0.18s allow-discrete;
    }

    .fld__select:open::picker(select) {
        opacity: 1;
        transform: none;
    }

    @starting-style {
        .fld__select:open::picker(select) {
            opacity: 0;
            transform: translateY(-6px);
        }
    }

  /* Пункт. Высота 44 — цель касания пальцем. Кегль и левый край текста —
     как в поле (кромка 1.5 + отступ списка 6 + пункта 10 ≈ 1 + 16 у поля):
     выбранное переезжает из списка в поле, не прыгая ни в размере, ни
     вбок. */
    .fld__select option {
        gap: 12px;
        padding: 10px;
        border-radius: var(--r-btn);
        font-size: 16px;
        line-height: 24px;
        color: var(--c-text-strong);
        cursor: pointer;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .fld__select option:hover {
        background: color-mix(in srgb, var(--c-text) 4%, transparent);
    }

  /* Фокус с клавиатуры — общей золотой обводкой из base.css, только внутрь
     пункта: снаружи её срезал бы край прокручиваемого списка. */
    .fld__select option:focus-visible { outline-offset: -2px; }

    .fld__select option:checked {
        background: color-mix(in srgb, var(--c-green) 10%, transparent);
        color: var(--c-green-text);
        font-weight: 700;
    }

  /* Галочка у выбранного — справа, та же, что в списке преимуществ наверху
     страницы: цвет не остаётся единственным признаком выбора. */
    .fld__select option::checkmark {
        order: 1;
        content: "";
        width: 16px;
        height: 16px;
        margin-inline-start: auto;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.333 4 6 11.333 2.667 8' stroke='%233d8f63' stroke-width='1.667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    }

  /* Движение по просьбе системы гасит base.css — правилом на *, ::before и
     ::after. Список и стрелка — отдельные псевдоэлементы и под него не
     попадают, поэтому здесь их гасим сами. */
    @media (prefers-reduced-motion: reduce) {
        .fld__select::picker-icon,
        .fld__select::picker(select) { transition: none; }
    }
}

/* Ряд «код страны + телефон»: узкий селект и поле на остаток. */
.fld__row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
}

/* --- Флажок согласия ------------------------------------------------------
   Родной чекбокс спрятан, но остаётся рабочим: клавиатура, фокус и чтение
   скринридером идут по нему. Квадрат рисует ::before у подписи. */
.chk {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    cursor: pointer;
    font-size: 13px;
    line-height: 20px;
    color: var(--c-text-body);
}

.chk + .chk { margin-top: 12px; }

.chk__box {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.chk__mark {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid var(--c-line);
    border-radius: 5px;
    background: var(--c-surface);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chk__box:checked + .chk__mark {
    border-color: var(--c-green);
    background:
      url("../images/icons/check-green.svg") center / 12px no-repeat,
      var(--c-green-mist);
}

.chk__box:focus-visible + .chk__mark {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

.chk a { color: var(--c-green-text); }

/* --- Кнопка во всю ширину ------------------------------------------------- */
.btn--block {
    display: flex;
    width: 100%;
}

/* ---------------------------------------------------------------
   css/contact/00-contact.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Контакты

   Состав снят с образца, оформление наше. Ничего нового в
   систему не заводится: контейнер, типографика, поля и кнопки взяты
   готовыми, здесь только раскладка страницы и две её собственные вещи —
   плашка-кикер первого экрана и карточка способа связи.

   Всё, что ниже, — телефонные значения. Ступени идут строго по
   возрастанию: правила равной силы, побеждает последнее подошедшее.
   ========================================================================== */

/* --- Первый экран ---------------------------------------------------------
   Вертикальные поля секций .section не задаёт — их ставит каждая секция
   сама. Шкала проекта — 64 на телефоне, 80 с 601, 96 с 901, 120 с 1281:
   так сделаны восемь файлов секций из девяти. Здесь сперва стояла
   64/88/104/120 со ссылкой на shared/what-you-get.css — но её держит
   ровно этот один файл, то есть ссылались на исключение.

   Первый экран — как у образца (сверка 17.09.2026 на 375/768/1440): от
   низа шапки до плашки около 90. Урезанное «из-за липкой шапки» верхнее
   поле прижимало экран к шапке, хотя у образца шапка той же высоты. С 901
   шапка у нас выше на 24, поэтому сверху 72. Значения те же, что у
   первого экрана «о нас» (css/about/00-about.css): две внутренние
   страницы открываются одинаково.

   От лида до «Contact us» у образца 120 на телефоне и планшете и 200 на
   десктопе: поля двух секций складываются. У нас так же — нижнее поле
   первого экрана плюс верхнее поле блока контактов: 64 + 56, 96 + 64 с
   901, 96 + 104 с 1281. Раньше верхнего поля у блока не было вовсе, и
   первый экран сливался с карточками в одно полотно. */
.ct-hero {
    padding-block: 88px 64px;
}

.ct-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

/* Плашка над заголовком переехала в core/base.css как .eyebrow--quiet:
   ровно та же нужна на странице «о нас», а третьей копии подряд быть не
   должно. Значения не менялись ни на единицу — сверено замером до и
   после. Здесь остался только курсив в заголовке. */

/* Курсива во втором слове здесь больше нет отдельным правилом: он задан
   базой на .h1 em и .h2 em и приходит сюда сам. Стояли две копии, слово
   в слово совпадавшие с базовой. */

/* Потолок строки — тот же, что у первого экрана страницы «о нас»
   (css/about/00-about.css). Стояло 560, и на широком экране два соседних
   первых экрана расходились шириной лида при полном совпадении всего
   остального. 620 при кегле 20 — около шестидесяти знаков в строке.

   «Write&nbsp;to us» в разметке и pretty здесь: на 768 и на 360 строка
   кончалась на «Write», и новая фраза рвалась посередине. */
.ct-hero__lede {
    max-width: 620px;
    color: var(--c-text-body);
    text-wrap: pretty;
}

/* Курсивное «talk» подтянуто к «Let’s» — тот же приём и та же причина,
   что у заголовков страницы «о нас» (css/about/00-about.css): наклон,
   подделанный браузером, раздвигал пробел перед курсивом (18 точек на 1440
   против обычных 10–11). У «Contact us» просвет и так ровный. */
.ct-hero__title em { margin-inline-start: 0; }

/* --- Способы связи и форма ------------------------------------------------ */
.ct {
    padding-block: 56px 64px;
}

/* В одну колонку от карточек до формы 56–60, как у образца: при 32–40
   форма читалась продолжением списка карточек. */
.ct__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.ct__lede {
    margin-top: 14px;
    color: var(--c-text-body);
  /* pretty правит только хвост абзаца — не оставляет одно слово в
     последней строке. То же стоит на абзацах страницы «о нас». */
    text-wrap: pretty;
}

/* Карточки способов связи: значок в скруглённом квадрате слева, подпись и
   значение справа — как в образце. Три значка нарисованы под эту страницу
   (mail, chat, pin) в стиле набора: линейные, тем же зелёным и той же
   толщиной штриха, что у check-green.svg.

   Квадрат 44 на 44 и колонка сетки ровно под него: значок не растягивает
   строку и не съезжает, когда значение уходит в две строки.

   Ритм — образца: от лида до первой карточки 40, между карточками 20,
   поля 16. При 26 и 12–14 список выглядел сжатым, а на десктопе под
   левой колонкой оставалась пустота в 200 точек рядом с формой. */
.ct__ways {
    display: grid;
  /* minmax(0, 1fr), а не автоколонка: неявный трек берёт за минимум
     min-content содержимого, и длинный неразрывный адрес почты распирал бы
     карточку шире экрана. Так объявлены все сетки проекта. */
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.ct__way {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--c-line-soft);
    border-radius: 14px;
    background: var(--c-bg-alt);
    box-shadow: var(--sh-card);
}

.ct__way-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--c-green-mist);
}

.ct__way-body { min-width: 0; }

.ct__way-label {
    display: block;
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.ct__way-value {
    display: block;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--c-text);
  /* Колонка тут узкая — на 320 под текст остаётся 194 точки, и значение в
     две строки то и дело оставляло одно слово во второй. */
    text-wrap: pretty;
}

/* Почта — ссылка. Поле под палец добавлено отступами с возвратом
   отрицательным полем: на вид строка стоит там же, а ловится сорока
   четырьмя точками, как просит Apple. */
.ct__way-link {
    padding-block: 10px;
    margin-block: -10px;
    color: var(--c-green-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--c-green) 40%, transparent);
    transition: text-decoration-color 0.18s ease;
}

.ct__way-link:hover,
.ct__way-link:focus-visible {
    text-decoration-color: var(--c-green);
}

/* Панель с формой — как плашка счёта на оплате: это единственный блок
   страницы, с которым человек работает руками, и он должен читаться
   отдельным предметом.

   Плашка кремовая, а поля внутри белые. Была белой плашка — и поля на ней
   пропадали: у .fld__input фон тоже #ffffff, от панели их отделяла одна
   кромка в 14% чёрного. На оплате ровно так и сделано: плашка #fbf8f3 на
   кремовом фоне страницы, поля белые. */
.ct__panel {
    padding: 24px 20px;
    border: 1px solid var(--c-line-soft);
    border-radius: 18px;
    background: var(--c-bg-alt);
    box-shadow: var(--sh-card);
}

.ct__submit {
    margin-top: 20px;
}

/* Поле сообщения — блоком. Строчным оно садилось на базовую линию подписи,
   и под ним оставался хвост в 7 точек: от поля до кнопки выходило 27
   вместо 20. */
.ct__form .fld__area { display: block; }

.ct__note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--c-text-muted);
}

/* Подпись под кнопкой формы — по оси кнопки, как у образца и как такая
   же подпись под кнопкой оплаты (.ch__gate). Левой она под широкой
   центрированной кнопкой выглядела сбитой. Заметки второго состояния
   (.ct__sent) не трогаем. */
.ct__form .ct__note {
    margin-top: 16px;
    text-align: center;
}

/* Поле под палец тем же приёмом, что у почты в карточке и у кнопки
   «написать ещё»: отступ сверху и снизу с возвратом отрицательным полем.
   Строка в 20 точек ловится сорока четырьмя, а на вид стоит там же.
   Ссылка на почту во втором состоянии оставалась без него и ловилась
   двадцатью. */
.ct__note a,
.ct__again {
    padding-block: 12px;
    margin-block: -12px;
    color: var(--c-green-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Кнопка, а не ссылка на решётку. Она ничего не открывает и никуда не
   ведёт — только возвращает форму, — а ссылка с href="#" без скрипта
   прыгает наверх и в разметке читается навигацией, которой тут нет.
   Выглядит по-прежнему ссылкой: собственного вида у кнопки не остаётся.

   Поле под палец: строка в 20 точек, а ловиться должно сорока четырьмя. */
.ct__again {
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* Второе состояние — сообщение принято. Заголовок здесь .h2, как и в
   форме: это та же панель, сменившая содержимое, а не новый раздел. */
.ct__sent .ct__lede { margin-top: 12px; }

.ct__echo {
    font-weight: 700;
    color: var(--c-text);
}

/* --- Планшет -------------------------------------------------------------- */
@media (min-width: 601px) {
  .ct { padding-block: 56px 80px; }

  .ct-hero__inner { gap: 22px; }

  /* Одна колонка на 601–900 — шириной лида первого экрана (620), по той же
     оси: во всю ширину контейнера карточки способов связи тянулись до
     820, и справа в них оставалось пустое поле в полкарточки (тот же
     приём, что у .lp-features__grid на лендингах). */
  .ct__split {
    gap: 60px;
    max-width: calc(620px + var(--gutter) * 2);
  }

  .ct__way { padding: 16px 18px; gap: 15px; }

  .ct__panel { padding: 28px 26px; }
}

/* --- Две колонки ----------------------------------------------------------
   Порог 901: слева текст со способами связи, справа панель с формой.

   Здесь две колонки на этой ширине действительно помещаются, в отличие от
   блока рекламы на главной — там в правой доле стоит сетка из трёх плиток,
   и ей нужно от 400 точек, а тут поле ввода, которому хватает и трёхсот.
   На 901 контейнеру остаётся 773, каждой доле по 366, внутри панели полю
   достаётся 314 — это больше, чем те же поля получают на телефоне. */
@media (min-width: 901px) {
  .ct-hero { padding-block: 72px 96px; }
  .ct { padding-block: 64px 96px; }

  .ct__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    max-width: calc(var(--container) + var(--gutter) * 2);
  }

  .ct__aside { padding-top: 6px; }

  .ct__panel { padding: 32px 30px; }
}

@media (min-width: 1101px) {
  /* Колонки 1 : 1.2 с зазором 60, как у образца: на 1440 выходит
     511 | 60 | 614. Раньше было 1 : 1 с зазором 72 и потолком левой
     колонки 480 — между колонками стоял пустой коридор в ~150 точек.
     Лиду в 511 это около пятидесяти знаков в строке, потолок не нужен. */
  .ct__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 60px;
  }

  /* Форма рядом с карточками выше их: подписи стоят над полями (правило
     shared/forms.css), и каждое поле на 18 выше, чем у образца. Поле
     сообщения здесь 108 вместо 132 — под карточками остаётся меньше
     пустоты. rows="3" в разметке: при rows 4 поле само было 124, и
     min-height его не опускал. */
  .ct__form .fld__area { min-height: 108px; }
}

@media (min-width: 1281px) {
  .ct { padding-block: 104px 120px; }

  .ct__panel { padding: 32px 40px; }
}

/* ---------------------------------------------------------------
   tools/wp/contact-form.css
   --------------------------------------------------------------- */
/* ==========================================================================
   Контакты: состояния отправки (tools/wp/contact-form.js).

   Строка ошибки встаёт под кнопку на место подписи и берёт её оформление
   (.ct__form .ct__note), меняется только цвет: тот же, что у ошибки карты
   на оплате. Пока письмо уходит, кнопка приглушена и не нажимается.
   ========================================================================== */
.ct__form .ct__error {
  color: #b4342b;
}

.ct__submit[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}
/* ========================= /PAGE STYLES ========================== */

/* ========================= FOOTER STYLES ========================= */
/* Переопределения подвала для этой страницы. */
/* ========================= /FOOTER STYLES ======================== */