/*
Theme Name: Самое грандиозное шоу на земле
Text Domain: sk-dealer-wireframe
Description: Тема сайта impulsepromo.ru: шапка, главная, подвал, каталог автомобилей, блог. Стили — обычный CSS, классы БЭМ. Поля админки — Carbon Fields, описания полей в inc/fields.php. Стенд для проверки MCP-плагина.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
*/
/* Сброс. Раньше эту работу делал preflight Tailwind внутри dist/styles.css;
 * Tailwind убран 16.09.2026, поэтому нужное перенесено сюда. Без него
 * возвращаются отступы браузера по умолчанию и картинки теряют ограничение
 * по ширине — вёрстка шапки и карточек «расплывается». */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

body { margin:0; font-family: system-ui, Arial, sans-serif; color:#222; background:#f4f4f4; display:flex; flex-direction:column; min-height:100vh; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
a { color:#333; }
.ph { border:1px dashed #999; background:#e9e9e9; color:#777; display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; }

/* header */
.header { background:#fff; border-bottom:1px solid #ccc; }
/* Зазоры подобраны так, чтобы шапка укладывалась в одну строку при 1200px:
 * логотип + меню + действия впритык, при больших значениях блок действий
 * переносится под меню. */
.header__inner { display:flex; align-items:center; gap:16px; min-height:72px; flex-wrap:nowrap; }

.header__logo { width:120px; height:44px; font-weight:700; text-decoration:none; flex:0 0 auto; }
.header__nav { display:flex; gap:14px; flex-wrap:nowrap; flex:1 1 auto; min-width:0; }
.header__nav a { text-decoration:none; font-size:13px; white-space:nowrap; }
.header__nav-label { font-size:13px; white-space:nowrap; }

/* Выпадающее меню шапки: наведение и фокус на десктопе, нажатие на тач-экранах (Alpine). */
.header__dropdown { position:relative; display:flex; align-items:center; gap:2px; }
.header__dropdown-toggle { display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:none; font-size:13px; color:#333; cursor:pointer; white-space:nowrap; }
.header__dropdown-toggle::after { content:""; width:6px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
.header__dropdown.is-open .header__dropdown-toggle::after,
.header__dropdown:hover .header__dropdown-toggle::after { transform:translateY(1px) rotate(-135deg); }
.header__sub { position:absolute; top:100%; left:-12px; z-index:50; min-width:200px; padding:8px 0; margin-top:8px; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08); visibility:hidden; opacity:0; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s; }
.header__sub::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } /* мостик, чтобы меню не закрывалось по пути курсора */
.header__dropdown:hover .header__sub,
.header__dropdown:focus-within .header__sub,
.header__dropdown.is-open .header__sub { visibility:visible; opacity:1; transform:none; }
.header__sub a { display:block; padding:8px 16px; }
.header__sub a:hover, .header__sub a:focus-visible { background:#f4f4f4; }
.screen-reader-text { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Блок действий не переносится: при нехватке места сжимается меню,
 * а телефон и кнопка остаются на своей строке. */
.header__actions { margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.status { font-size:13px; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.status--open { background:#e3f5e3; color:#2a7d2a; }
/* Шапка держится в одну строку. Первой уступает место плашка статуса —
 * она самая длинная и наименее важная. Ниже 900px шапка складывается,
 * и меню переносится, иначе длинные пункты уезжают за край экрана.
 * Блок медиа-запросов идёт последним: правила выше его перебивают. */
@media (max-width: 1000px) {
	.status { display:none; }
}
@media (max-width: 900px) {
	.header__inner { flex-wrap:wrap; }
	.header__nav { flex-wrap:wrap; flex-basis:100%; }
	.header__actions { margin-left:0; }
}
.header__phone { font-weight:700; text-decoration:none; }
.btn { border:1px solid #333; background:#333; color:#fff; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:14px; }

/* hero */
.hero__media { height:320px; margin:0 20px; }
.hero__inner { padding:36px 20px; }
.hero__eyebrow { display:inline-block; font-size:13px; color:#777; text-transform:uppercase; letter-spacing:1px; }
.hero__title { font-size:34px; margin:8px 0; }
.hero__text { color:#555; max-width:540px; }
.hero-form { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.hero-form input { padding:10px; border:1px solid #bbb; border-radius:6px; min-width:220px; }

/* footer (без блока контактов) */
.footer { background:#2b2b2b; color:#ddd; margin-top:40px; padding:30px 0; }
.footer a { color:#ddd; text-decoration:none; }
.footer__top { display:flex; gap:48px; flex-wrap:wrap; }
.footer__brand { max-width:320px; }
.footer__col-title { font-size:15px; }
.footer__col ul { list-style:none; padding:0; margin:0; line-height:1.9; }
.footer__legal { margin-top:22px; display:flex; gap:20px; font-size:13px; flex-wrap:wrap; }
.footer__bottom { margin-top:20px; font-size:12px; color:#999; border-top:1px solid #444; padding-top:14px; }
.muted { color:#8a8a8a; }
.small { font-size:13px; }