/*
Theme Name: Labelika
Theme URI: https://test.labelika.ru
Author: Labelika
Description: Тема на стандартных блоках Gutenberg, повторяющая дизайн лендинга labelika.ru. Все цвета/шрифты/отступы — токены theme.json; здесь только компоненты (модификаторы) и раскладка.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: labelika
*/

/*
  Единственная локальная переменная вне theme.json: у WP нет пресет-шкалы
  border-radius, поэтому радиус карточек/панелей задаём один раз здесь.
*/
:root{ --radius:20px; }

/* ===== Контейнеры (2 уровня ширины, переиспользуются везде) ===== */
.container{ width:min(1120px, calc(100% - 32px)); margin:0 auto; }
.container--narrow{ width:min(760px, calc(100% - 32px)); margin:0 auto; }

/* ===== Шапка ===== */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--wp--preset--color--mist);
  backdrop-filter:blur(10px);
}
.header-inner{ display:flex; align-items:center; gap:var(--wp--preset--spacing--lg); min-height:72px; }
.site-logo{ display:flex; }
.primary-nav{ display:flex; gap:var(--wp--preset--spacing--md); margin-left:auto; list-style:none; padding:0; }
.primary-nav a{
  color:var(--wp--preset--color--graphite); font-weight:500;
  font-size:var(--wp--preset--font-size--small); text-decoration:none;
}
.primary-nav a:hover{ color:var(--wp--preset--color--signal); }
.header-phone{
  display:flex; align-items:center; gap:6px; margin-left:var(--wp--preset--spacing--md);
  color:var(--wp--preset--color--graphite); font-weight:600;
  font-size:var(--wp--preset--font-size--small); text-decoration:none; white-space:nowrap;
}
.header-phone:hover{ color:var(--wp--preset--color--signal); }
.header-phone .icon{ color:var(--wp--preset--color--signal); }
.header-actions{ margin-left:var(--wp--preset--spacing--xxs); }
.nav-toggle{
  display:none; margin-left:auto; width:40px; height:40px;
  border:1px solid var(--wp--preset--color--mist); background:var(--wp--preset--color--white); border-radius:8px;
}

/* ===== Брейкпоинт: единый для шапки, футера и колонок контента.
   782px — это встроенный порог стекирования core/columns в WordPress,
   поэтому шапка и футер намеренно синхронизированы с ним, а не со
   своим произвольным числом. ===== */
@media (max-width:782px){
  .nav-toggle{ display:block; }
  .primary-nav,.header-actions{ display:none; }
  .primary-nav.is-open{
    display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0;
    background:var(--wp--preset--color--white); border-bottom:1px solid var(--wp--preset--color--mist);
    padding:var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
    gap:var(--wp--preset--spacing--xs);
  }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .section{ padding:var(--wp--preset--spacing--xxl) 0; }
}

/* Планшет: карточки/колонки не прыгают сразу в 1 колонку, а идут по 2. */
@media (max-width:1024px) and (min-width:783px){
  .wp-block-columns{ flex-wrap:wrap; }
  .wp-block-columns > .wp-block-column{ flex-basis:calc(50% - 16px); }
  .section{ padding:var(--wp--preset--spacing--xxxl) 0; }
}

/* ===== Секции: единый ритм, единый набор фонов ===== */
.section{ padding:var(--wp--preset--spacing--massive) 0; }
.section-mist{ background:var(--wp--preset--color--snow); }
.section-dark{ background:var(--wp--preset--color--graphite); color:var(--wp--preset--color--white); }

.section-head{ max-width:640px; margin:0 auto var(--wp--preset--spacing--xxl); text-align:center; }
.section-head,.card,.cta,.prose-page{ /* единая приглушённая подпись для текста-описания */ }
.section-head p:not(.badge-pill),.card p:not(.badge-pill),.prose-page p:not(.badge-pill),.cta p:not(.badge-pill){ color:var(--wp--preset--color--steel); }
.cta p{ color:inherit; opacity:.85; }

/* ===== "Пилюли"/подписи — один компонент вместо трёх разных ===== */
.badge-pill{
  display:inline-block; border-radius:999px; font-weight:600;
  font-size:var(--wp--preset--font-size--caption); padding:4px 10px;
}
.badge-pill--outline{
  border:1px solid rgba(255,255,255,.25); color:var(--wp--preset--color--ice);
  background:transparent; padding:6px 12px;
}
.badge-pill--verify{
  background:color-mix(in srgb, var(--wp--preset--color--verify) 12%, white);
  color:var(--wp--preset--color--verify);
}
.badge-pill--accent{ background:none; color:var(--wp--preset--color--signal); padding:0; display:block; margin-bottom:8px; }

/* ===== Hero (единственное изображение-обложка на сайте, cover-блок) ===== */
.hero.wp-block-cover{ min-height:640px; color:var(--wp--preset--color--white); }
.hero.wp-block-cover .wp-block-cover__inner-container{
  text-align:left;
  /* оригинальная сетка hero — 1.1fr/.9fr: копия занимает ~55% контейнера
     (600px из тех же 1120, что и .container), остальное — фото без затемнения
     текстом. margin-left считаем от той же ширины контейнера, что и .container,
     чтобы левый край текста совпадал с логотипом в шапке. */
  max-width:600px;
  margin-left:max(16px, calc((100% - 1120px) / 2));
  margin-right:auto;
}
@media (max-width:782px){
  .hero.wp-block-cover .wp-block-cover__inner-container{
    max-width:calc(100% - 32px);
    margin-left:16px;
    margin-right:16px;
  }
}
.hero h1{ color:var(--wp--preset--color--white); }
.hero mark{ color:var(--wp--preset--color--sky); background:none; }
.hero p:not(.badge-pill){ font-size:var(--wp--preset--font-size--medium); color:var(--wp--preset--color--dark-muted); }
.hero .wp-block-buttons{ margin:var(--wp--preset--spacing--lg) 0; }
.hero .icon-list{ color:var(--wp--preset--color--dark-muted); }
.icon-list li .icon{ color:var(--wp--preset--color--verify); }

/* ===== Кнопки: базовый вид приходит из theme.json (styles.elements.button) —
   здесь только именованные модификаторы (register_block_style), без !important. ===== */
.is-style-outline .wp-block-button__link{
  background:transparent; color:currentColor;
  /* граница берётся из текущего цвета текста контекста (тёмный/светлый фон) —
     один модификатор работает одинаково и на hero, и на светлой секции */
  border:1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.is-style-inverted .wp-block-button__link{
  background:var(--wp--preset--color--white); color:var(--wp--preset--color--signal);
}
.is-style-inverted .wp-block-button__link:hover{
  background:var(--wp--preset--color--snow);
}

/* ===== Карточка: один компонент, модификаторы вместо копий ===== */
.card{
  background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--mist);
  border-radius:var(--radius);
  padding:var(--wp--preset--spacing--lg);
  height:100%;
}
.card h3{ margin-top:0; }
/* WP печатает собственный запасной блок-гэп (:where(.is-layout-flow) > *{margin-block:...}),
   который перебивает margin-bottom заголовков из theme.json. Задаём его явно через
   класс, который блок-supports накидывает на все заголовки — так наш токен побеждает. */
h1.wp-block-heading{ margin-bottom:var(--wp--preset--spacing--md); }
h2.wp-block-heading{ margin-bottom:var(--wp--preset--spacing--xs); }
h3.wp-block-heading,h4.wp-block-heading{ margin-bottom:var(--wp--preset--spacing--xxs); }
.card ul{ margin:var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--md); padding-left:18px; }
.card li{ font-size:var(--wp--preset--font-size--small); margin-bottom:6px; }

.card--compact{ padding:var(--wp--preset--spacing--md); }
.card--compact p{ font-size:var(--wp--preset--font-size--small); margin-bottom:0; }

.card--tone-pulse .icon-badge{ background:color-mix(in srgb, var(--wp--preset--color--pulse) 14%, white); color:var(--wp--preset--color--pulse); }
.card--tone-graphite .icon-badge{ background:var(--wp--preset--color--graphite); color:var(--wp--preset--color--white); }

/* ===== Иконка-бейдж: один компонент (было 4 копии) ===== */
.icon-badge{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--wp--preset--color--signal) 10%, white);
  color:var(--wp--preset--color--signal);
  margin-bottom:var(--wp--preset--spacing--sm);
}
.icon-badge--sm{ width:36px; height:36px; margin-bottom:var(--wp--preset--spacing--xs); }
.icon{ width:24px; height:24px; flex:0 0 auto; display:inline-block; vertical-align:middle; }
.icon-sm{ width:18px; height:18px; }

/* Список с иконкой вместо маркера — сбрасываем стандартный отступ браузера
   под буллиты (он остаётся даже когда сам буллит скрыт/заменён), чтобы
   текст начинался вровень с остальным контентом секции. */
.icon-list{ margin:0; padding:0; list-style:none; display:grid; gap:var(--wp--preset--spacing--xs); }
.icon-list li{ display:flex; align-items:center; gap:10px; }

/* ===== Числовой показатель: один компонент, цвет наследуется от подложки ===== */
.stat strong{ display:block; font-size:var(--wp--preset--font-size--x-large); margin-bottom:6px; color:inherit; }
.stat span{ font-size:var(--wp--preset--font-size--small); color:inherit; opacity:.75; }
.stats-box{
  background:var(--wp--preset--color--graphite); color:var(--wp--preset--color--white);
  border-radius:var(--radius); padding:var(--wp--preset--spacing--lg); margin-top:var(--wp--preset--spacing--xs);
}

/* ===== CTA: один компонент, два фоновых модификатора ===== */
.cta{
  border-radius:var(--radius);
  padding:var(--wp--preset--spacing--huge) var(--wp--preset--spacing--xl);
  text-align:center;
}
.cta h2{ color:inherit; }
.cta p{ max-width:44em; margin:0 auto var(--wp--preset--spacing--md); }
.cta--solid{ background:var(--wp--preset--color--signal); color:var(--wp--preset--color--white); }
.cta--subtle{ background:var(--wp--preset--color--snow); color:var(--wp--preset--color--graphite); }

/* ===== Аккордеон: нативный core/details, без JS и без плагинов ===== */
.wp-block-details{
  border:1px solid var(--wp--preset--color--mist);
  border-radius:var(--radius);
  padding:var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  margin-bottom:var(--wp--preset--spacing--xs);
}
.wp-block-details summary{ font-weight:600; cursor:pointer; }
.wp-block-details p:last-child{ margin-bottom:0; }

/* ===== Форма ===== */
.form-field{ display:grid; gap:6px; margin-bottom:var(--wp--preset--spacing--sm); }
.form-field label{ font-weight:600; font-size:var(--wp--preset--font-size--small); }
.form-field input, .form-field textarea{
  font:inherit; width:100%; padding:10px 12px; border:1px solid var(--wp--preset--color--mist);
  border-radius:10px; background:var(--wp--preset--color--snow); box-sizing:border-box;
}
.form-field input:focus, .form-field textarea:focus{
  outline:2px solid var(--wp--preset--color--signal); outline-offset:1px;
}
.contact-form{ max-width:560px; }
.contact-form button{ width:100%; justify-content:center; }
.contact-form__privacy{ font-size:var(--wp--preset--font-size--caption); color:var(--wp--preset--color--steel); margin-top:var(--wp--preset--spacing--xs); }
/* Медовая ловушка для ботов: скрыта визуально, но не display:none —
   так её видят автозаполнители, но не обычные посетители. */
.contact-form__hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

.form-notice{ border-radius:var(--radius); padding:var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg); margin-bottom:var(--wp--preset--spacing--md); }
.form-notice p{ margin:4px 0 0; }
.form-notice--success{
  border:1px solid color-mix(in srgb, var(--wp--preset--color--verify) 35%, white);
  background:color-mix(in srgb, var(--wp--preset--color--verify) 8%, white);
}
.form-notice--success strong{ color:var(--wp--preset--color--verify); }
.form-notice--error{
  border:1px solid color-mix(in srgb, var(--wp--preset--color--alert) 35%, white);
  background:color-mix(in srgb, var(--wp--preset--color--alert) 8%, white);
}
.form-notice--error strong{ color:var(--wp--preset--color--alert); }

/* ===== Карта ===== */
.map-embed{ border:1px solid var(--wp--preset--color--mist); border-radius:var(--radius); overflow:hidden; }
.map-embed iframe{ display:block; width:100%; height:420px; border:0; }
@media (max-width:782px){ .map-embed iframe{ height:300px; } }

/* Карточка "покрупнее" — модификатор .card для крупных самостоятельных
   блоков (форма), где нужен более просторный внутренний отступ, чем
   у плотных сеток карточек-продуктов. */
.card--roomy{ padding:var(--wp--preset--spacing--xl); }

/* ===== Страница контактов: первый экран — 2 колонки (текст | форма),
   карта сознательно ВЫНЕСЕНА из этой сетки в отдельную full-width секцию
   ниже — чтобы не спорить с формой по высоте на одном экране. ===== */
.contact-hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--wp--preset--spacing--xxl);
  align-items:start;
}
.contact-hero__text .lead{ margin-bottom:var(--wp--preset--spacing--sm); }
.contact-hero__quick{
  margin-top:var(--wp--preset--spacing--lg);
  padding-top:var(--wp--preset--spacing--lg);
  border-top:1px solid var(--wp--preset--color--mist);
}
.contact-hero__form-card h3{ margin-top:0; }

.contact-map-section{ margin-top:var(--wp--preset--spacing--xxl); }
.contact-map-section h3{ margin-bottom:var(--wp--preset--spacing--sm); }

@media (max-width:782px){
  .contact-hero__grid{ grid-template-columns:1fr; gap:var(--wp--preset--spacing--xl); }
}

/* Заголовок обычной страницы (не hero) — меньше и легче, чем H1 на
   главной: тот держит на себе целый экран с фото, этот — короткий лид
   и пару блоков. Токены те же (theme.json), просто другой уровень шкалы. */
.prose-page h1{ font-size:var(--wp--preset--font-size--x-large); margin-bottom:var(--wp--preset--spacing--xs); }

/* Лид-абзац под заголовком страницы — крупнее и темнее обычного текста,
   чтобы вести взгляд от заголовка к контенту, а не проваливаться в серый. */
.lead{ font-size:var(--wp--preset--font-size--medium); color:var(--wp--preset--color--graphite); font-weight:500; }

/* Крупный вариант icon-list — для одного акцентного контакта, который
   должен читаться как самостоятельная строка (используется точечно,
   не в блоках из нескольких контактов подряд). */
.icon-list--lg{ gap:var(--wp--preset--spacing--sm); }
.icon-list--lg li{ font-size:var(--wp--preset--font-size--large); font-weight:700; }
.icon-list--lg .icon{ width:28px; height:28px; }

/* ===== Уведомление (готовый компонент, тон через color-mix) ===== */
.notice{
  border:1px solid color-mix(in srgb, var(--wp--preset--color--alert) 35%, white);
  background:color-mix(in srgb, var(--wp--preset--color--alert) 6%, white);
  border-radius:var(--radius);
  padding:var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}
.notice strong{ color:var(--wp--preset--color--alert); }

/* ===== Контентные страницы (например, «Политика конфиденциальности») =====
   Заголовки H1–H4 берут размер из theme.json — здесь только ширина колонки. */
.prose-page{ padding:var(--wp--preset--spacing--huge) 0 var(--wp--preset--spacing--massive); }
.prose-page ul{ padding-left:1.2em; margin:0 0 1em; }
.prose-page li{ margin-bottom:.4em; color:var(--wp--preset--color--steel); }

/* ===== Футер ===== */
.site-footer{ background:var(--wp--preset--color--graphite); color:var(--wp--preset--color--dark-muted); padding:var(--wp--preset--spacing--huge) 0 var(--wp--preset--spacing--lg); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--wp--preset--spacing--xl); }
.footer-grid h2{ color:var(--wp--preset--color--white); font-size:var(--wp--preset--font-size--base); margin:0 0 var(--wp--preset--spacing--sm); }
.footer-logo{ display:inline-flex; }
.footer-logo img{ filter:brightness(0) invert(1); }
.footer-desc{ max-width:36em; margin-top:var(--wp--preset--spacing--sm); }
.footer-nav ul{ list-style:none; margin:0; padding:0; }
.footer-nav li{ margin-bottom:var(--wp--preset--spacing--xs); }
.footer-nav a{ color:inherit; text-decoration:none; }
.footer-nav a:hover{ color:var(--wp--preset--color--white); }
.footer-contacts ul{ list-style:none; margin:0; padding:0; }
.footer-contacts li{ margin-bottom:var(--wp--preset--spacing--xs); }
.footer-bottom{
  margin-top:var(--wp--preset--spacing--xxl); padding-top:var(--wp--preset--spacing--sm);
  border-top:1px solid #343a40;
  display:flex; justify-content:space-between; gap:var(--wp--preset--spacing--sm);
  font-size:var(--wp--preset--font-size--small); flex-wrap:wrap;
}
.footer-bottom .legal{ opacity:.7; }