/**
 * Стили шаблона главной страницы (template-sc-homepage.php).
 * Переменные --sc-accent / --sc-text / --sc-border и т.д. — те же, что
 * использует ранее установленный модуль калькулятора/записи (sc-functions.php),
 * поэтому светлая тема ниже их не переопределяет, только дополняет.
 * Тёмная тема переопределяет ровно эти же переменные — калькулятор,
 * прайс и форма записи автоматически темнеют вместе со страницей.
 */

/* ---------- 1. Переменные темы ---------- */
:root{
	--sc-page-bg:#ffffff;
	--sc-header-bg:rgba(255,255,255,0.86);
	--sc-hero-bg:#f6f7f9;
	--sc-font-display:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

:root[data-theme="dark"]{
	--sc-accent:#6ea8ff;
	--sc-accent-dark:#9dc9ff;
	--sc-accent-soft:rgba(110,168,255,.14);
	--sc-accent-glow:rgba(110,168,255,.30);
	--sc-text:#e9ecf1;
	--sc-muted:#98a2b3;
	--sc-border:#2a2e37;
	--sc-bg-soft:#1b1e24;
	--sc-surface:#14161b;
	--sc-success:#4ade80;
	--sc-success-bg:rgba(74,222,128,.14);
	--sc-danger:#f87171;
	--sc-danger-bg:rgba(248,113,113,.14);
	--sc-page-bg:#0e1014;
	--sc-header-bg:rgba(14,16,20,0.86);
	--sc-hero-bg:#15171d;
}

/* Пока JS не отработал (или отключён) — уважаем системную тему по умолчанию. */
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]){
		--sc-accent:#6ea8ff;
		--sc-accent-dark:#9dc9ff;
		--sc-accent-soft:rgba(110,168,255,.14);
		--sc-accent-glow:rgba(110,168,255,.30);
		--sc-text:#e9ecf1;
		--sc-muted:#98a2b3;
		--sc-border:#2a2e37;
		--sc-bg-soft:#1b1e24;
		--sc-surface:#14161b;
		--sc-success:#4ade80;
		--sc-success-bg:rgba(74,222,128,.14);
		--sc-danger:#f87171;
		--sc-danger-bg:rgba(248,113,113,.14);
		--sc-page-bg:#0e1014;
		--sc-header-bg:rgba(14,16,20,0.86);
		--sc-hero-bg:#15171d;
	}
}

/* ---------- 2. База страницы ---------- */
/* Фон и на html: иначе при «резинке» (перескролле) на iOS видна белая полоса,
   даже когда сайт в тёмной теме. */
html:has(body.sc-home){ background:var(--sc-page-bg); }
body.sc-home{
	background:var(--sc-page-bg);
	color:var(--sc-text);
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
	margin:0;
	transition:background-color .2s ease,color .2s ease;
	/* Страховка от горизонтальной прокрутки на узких экранах.
	   Именно clip, а не hidden: hidden сделал бы body контейнером прокрутки
	   и сломал бы липкую (sticky) шапку, а clip — нет. */
	overflow-x:clip;
}
body.sc-home *{ box-sizing:border-box; }
body.sc-home img{ max-width:100%; display:block; }
.sc-home-container{ max-width:1160px; margin:0 auto; padding-inline:24px; }
.sc-home-eyebrow{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--sc-accent); margin:0; }
.sc-home-section{ padding:76px 0; }
.sc-home-section-alt{ background:var(--sc-bg-soft); }
/* Пустой якорь для второго id на объединённой секции подбора ремонта — см. template-sc-homepage.php */
.sc-anchor{ position:absolute; width:1px; height:1px; overflow:hidden; }
.sc-home-section-head{ max-width:640px; margin-bottom:38px; }
.sc-home-section-head h2{ margin:10px 0 0; font-size:clamp(1.5rem,3vw,2rem); }
.sc-home-section-head p{ margin-top:12px; color:var(--sc-muted); }
.sc-btn-ghost{ background:transparent; color:var(--sc-text); border:1px solid var(--sc-border); }
.sc-btn-ghost:hover{ border-color:var(--sc-accent); color:var(--sc-accent); }
.sc-btn-sm{ padding:9px 16px; font-size:.85rem; }

/* Manrope из макета — на заголовках, логотипе и крупных цифрах (остальной текст системный). */
body.sc-home h1,
body.sc-home h2,
.sc-home-logo,
.sc-home-hero-stats .sc-home-stat b,
body.sc-home .sc-result-value{ font-family:var(--sc-font-display); font-weight:800; letter-spacing:-.01em; }

/* Секции идут в обычном порядке разметки (калькулятор → запись → …),
   без flex/order — так проще и надёжнее. */
.sc-home-main{ display:block; }

/* ---------- 3. Шапка ---------- */
.sc-home-header{
	position:sticky; top:0; z-index:50;
	background:var(--sc-header-bg);
	backdrop-filter:blur(10px) saturate(140%);
	border-bottom:1px solid var(--sc-border);
}
.sc-home-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:72px; }
/* min-width:0 обязателен: без него flex-элемент не даёт себя сжать
   и длинное название выдавливает город с бургером за край экрана. */
.sc-home-logo{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--sc-text); font-weight:700; font-size:1.1rem; white-space:nowrap; }
.sc-home-logo img{ max-height:40px; width:auto; }
.sc-home-nav{ display:flex; gap:24px; }
.sc-home-nav a{ color:var(--sc-text); text-decoration:none; font-size:.92rem; white-space:nowrap; }
.sc-home-nav a:hover{ color:var(--sc-accent); }
/* Правая группа (город + бургер) не сжимается — она короткая и важная. */
.sc-home-actions{ flex:none; }
.sc-home-actions{ display:flex; align-items:center; gap:14px; }
.sc-home-phone{ color:var(--sc-text); text-decoration:none; font-size:.92rem; white-space:nowrap; }
.sc-theme-toggle{
	width:38px; height:38px; border-radius:50%; border:1px solid var(--sc-border); background:var(--sc-surface);
	color:var(--sc-text); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.sc-theme-toggle svg{ width:18px; height:18px; }
.sc-icon-moon{ display:none; }
:root[data-theme="dark"] .sc-icon-sun{ display:none; }
:root[data-theme="dark"] .sc-icon-moon{ display:block; }
.sc-nav-toggle{ display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--sc-border); background:var(--sc-surface); color:var(--sc-text); align-items:center; justify-content:center; }
.sc-mobile-nav{ display:none; }
.sc-mobile-nav.is-open{ display:block; border-top:1px solid var(--sc-border); padding:16px 24px 22px; }
.sc-mobile-nav a{ display:block; padding:10px 0; color:var(--sc-text); text-decoration:none; }
.sc-mobile-nav-cities{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:10px; margin-top:6px; border-top:1px solid var(--sc-border); }
.sc-mobile-nav-cities-label{ font-size:.8rem; color:var(--sc-muted); }
.sc-mobile-nav-cities a{ display:inline; padding:4px 10px; border:1px solid var(--sc-border); border-radius:20px; font-size:.85rem; }
.sc-mobile-nav-cities a.is-active{ background:var(--sc-accent); border-color:var(--sc-accent); color:#fff; }

/* ---------- 3б. Переключатель города ---------- */
.sc-city-switcher{ position:relative; flex:none; }
.sc-city-switcher-toggle{
	display:flex; align-items:center; gap:6px; background:var(--sc-surface); border:1px solid var(--sc-border);
	border-radius:20px; padding:8px 14px; font-size:.86rem; color:var(--sc-text); cursor:pointer; white-space:nowrap;
}
.sc-city-switcher-toggle svg{ color:var(--sc-accent); flex:none; }
.sc-city-switcher-list{
	display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:170px;
	background:var(--sc-surface); border:1px solid var(--sc-border); border-radius:10px;
	box-shadow:0 10px 30px rgba(0,0,0,.12); overflow:hidden; z-index:60;
}
.sc-city-switcher-list.is-open{ display:block; }
.sc-city-switcher-list a{ display:block; padding:10px 16px; color:var(--sc-text); text-decoration:none; font-size:.9rem; }
.sc-city-switcher-list a:hover{ background:var(--sc-bg-soft); }
.sc-city-switcher-list a.is-active{ color:var(--sc-accent); font-weight:600; }

/* ---------- 3г. Баннер автоопределения города ---------- */
.sc-city-banner{
	display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
	background:var(--sc-accent); color:#fff; padding:12px 24px; font-size:.9rem; text-align:center;
}
.sc-city-banner-yes{
	background:#fff; color:var(--sc-accent-dark); border:none; border-radius:8px; padding:7px 16px;
	font-size:.86rem; font-weight:600; cursor:pointer;
}
.sc-city-banner-no{
	background:transparent; border:none; color:#fff; opacity:.8; cursor:pointer; font-size:1rem; line-height:1; padding:4px;
}
.sc-city-banner-no:hover{ opacity:1; }

/* ---------- 4. Hero ---------- */
.sc-home-hero{ background:var(--sc-hero-bg); padding:88px 0 72px; }
.sc-home-hero-inner{ max-width:760px; }
.sc-home-hero h1{ font-size:clamp(2rem,4.4vw,3rem); line-height:1.12; margin:14px 0 0; text-wrap:balance; }
.sc-home-lede{ margin-top:18px; font-size:1.08rem; color:var(--sc-muted); max-width:56ch; }
.sc-home-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
/* Главная кнопка hero — белый текст (явно, поверх общего .sc-btn) и лёгкое
   покачивание, чтобы взгляд цеплялся за неё первой среди двух кнопок. */
.sc-hero-cta-accent{ color:#fff; animation:sc-hero-cta-float 2.6s ease-in-out infinite; }
.sc-hero-cta-accent:hover{ animation-play-state:paused; }
@keyframes sc-hero-cta-float{
	0%, 100%{ transform:translateY(0); }
	50%{ transform:translateY(-5px); }
}
@media (prefers-reduced-motion: reduce){
	.sc-hero-cta-accent{ animation:none; }
}
.sc-home-logo-mark{ font-size:1.15rem; }
/* Строка доверия под hero */
.sc-home-hero-stats{ display:flex; gap:28px; flex-wrap:wrap; margin-top:40px; padding-top:28px; border-top:1px solid var(--sc-border); }
.sc-home-stat b{ display:block; font-size:1.4rem; color:var(--sc-text); }
.sc-home-stat span{ color:var(--sc-muted); font-size:.85rem; }

/* ---------- 5. О сервисе / как это работает ---------- */
.sc-home-about{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.sc-home-about p{ margin-top:14px; color:var(--sc-muted); }
.sc-home-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.sc-home-steps li{ display:flex; gap:16px; }
.sc-home-steps span{
	flex:none; width:34px; height:34px; border-radius:50%; background:var(--sc-accent); color:#fff;
	display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.92rem;
}
.sc-home-steps h3{ margin:0 0 4px; font-size:1rem; }
.sc-home-steps p{ margin:0; color:var(--sc-muted); font-size:.92rem; }

/* ---------- 6. Команда / мастера ---------- */
.sc-home-team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.sc-team-card{ margin:0; }
.sc-team-photo{ border-radius:var(--sc-radius,10px); overflow:hidden; border:1px solid var(--sc-border); aspect-ratio:4/5; background:var(--sc-bg-soft); display:flex; align-items:center; justify-content:center; }
.sc-team-photo img{ width:100%; height:100%; object-fit:cover; }
.sc-team-photo-ph{ font-size:46px; opacity:.55; }
.sc-team-card figcaption{ margin-top:10px; color:var(--sc-muted); font-size:.86rem; text-align:center; }

/* ---------- 6в. Гарантия ---------- */
.sc-home-guarantee{ display:flex; gap:40px; align-items:center; flex-wrap:wrap; }
.sc-guarantee-badge{ flex:none; width:88px; height:88px; border-radius:50%; background:var(--sc-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:42px; }
.sc-guarantee-body{ flex:1; min-width:260px; }
.sc-guarantee-body h2{ margin:0; font-size:clamp(1.4rem,2.6vw,1.9rem); }
.sc-guarantee-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
.sc-guarantee-points p{ margin:0; color:var(--sc-muted); font-size:.92rem; }

/* ---------- 6г. Отзывы ---------- */
.sc-home-reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sc-review-card{ border:1px solid var(--sc-border); border-radius:var(--sc-radius,10px); padding:22px; background:var(--sc-surface); }
.sc-review-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sc-review-avatar{ font-size:28px; }
.sc-review-name{ margin:0; font-weight:700; font-size:.92rem; color:var(--sc-text); }
.sc-review-stars{ margin:0; font-size:.85rem; color:var(--sc-accent-dark); }
.sc-review-text{ margin:0; color:var(--sc-muted); font-size:.92rem; }

/* ---------- 7. Блог ---------- */
.sc-home-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sc-home-blog-card{ background:var(--sc-surface); border:1px solid var(--sc-border); border-radius:var(--sc-radius,10px); overflow:hidden; }
.sc-home-blog-thumb img{ aspect-ratio:16/10; object-fit:cover; width:100%; }
.sc-home-blog-body{ padding:18px 20px 22px; }
.sc-home-blog-body time{ font-size:.78rem; color:var(--sc-muted); }
.sc-home-blog-body h3{ margin:8px 0; font-size:1.02rem; line-height:1.3; }
.sc-home-blog-body h3 a{ color:var(--sc-text); text-decoration:none; }
.sc-home-blog-body h3 a:hover{ color:var(--sc-accent); }
.sc-home-blog-body p{ margin:0 0 12px; color:var(--sc-muted); font-size:.9rem; }
.sc-home-blog-more{ color:var(--sc-accent); text-decoration:none; font-size:.88rem; font-weight:600; }
.sc-home-blog-cta{ margin-top:30px; text-align:center; }

/* ---------- 8. Подвал ---------- */
.sc-home-footer{ background:var(--sc-bg-soft); border-top:1px solid var(--sc-border); padding:64px 0 28px; }
.sc-home-footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; padding-bottom:38px; border-bottom:1px solid var(--sc-border); }
.sc-home-footer-about p{ margin:14px 0; color:var(--sc-muted); font-size:.92rem; max-width:32ch; }
.sc-home-footer-about a{ color:var(--sc-text); text-decoration:none; display:block; font-size:.92rem; }
.sc-home-footer-col h4{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sc-muted); margin:0 0 14px; }
.sc-home-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sc-home-footer-col a{ color:var(--sc-text); text-decoration:none; font-size:.92rem; }
.sc-home-footer-col a:hover{ color:var(--sc-accent); }
.sc-home-footer-bottom{ padding-top:22px; font-size:.8rem; color:var(--sc-muted); }
/* Кнопки в колонке контактов: смена темы + бонус (из макета) */
.sc-footer-buttons{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.sc-footer-theme{ display:flex; align-items:center; gap:8px; border-radius:20px; border:1px solid var(--sc-border); background:var(--sc-surface); padding:8px 14px; cursor:pointer; font-size:.86rem; color:var(--sc-text); }
.sc-footer-theme svg{ width:16px; height:16px; }
.sc-footer-bonus{ display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#ff8a3d,#ff5c8a); border:none; border-radius:20px; padding:8px 14px; font-size:.86rem; font-weight:700; color:#fff !important; white-space:nowrap; text-decoration:none; }

/* ---------- 9. Плавное появление секций ---------- */
@media (prefers-reduced-motion: no-preference){
	.sc-reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
	.sc-reveal.is-visible{ opacity:1; transform:none; }
}

/* ---------- 10. Адаптив ---------- */
/* Прячем горизонтальное меню в «бургер» пораньше — чтобы длинное название
   и 5 пунктов не сжимались и не наезжали друг на друга на ноутбуках. */
@media (max-width:1080px){
	.sc-home-nav,.sc-home-phone{ display:none; }
	.sc-nav-toggle{ display:flex; }
}
/* Телефоны: длинное название переносим на 2 строки, иначе оно вместе с
   переключателем города и бургером не помещается в 390–430px и появляется
   горизонтальная прокрутка («не влезает на экран»). */
@media (max-width:560px){
	.sc-home-header-inner{ gap:10px; }
	.sc-home-container{ padding-inline:16px; }
	.sc-home-logo{ white-space:normal; font-size:.98rem; line-height:1.2; }
	.sc-city-switcher-toggle{ padding:8px 10px; font-size:.8rem; }
}
/* Освобождаем место под плавающими кнопками (звонок слева, Telegram справа):
   они fixed, 54px + 22px от низа, и на телефоне наезжали на копирайт. */
@media (max-width:780px){
	.sc-home-footer{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
}
@media (max-width:960px){
	.sc-home-about{ grid-template-columns:1fr; }
	.sc-home-blog-grid,
	.sc-home-reviews-grid,
	.sc-home-team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.sc-guarantee-points{ grid-template-columns:1fr; }
	.sc-home-footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
	.sc-home-section{ padding:56px 0; }
	.sc-home-blog-grid,
	.sc-home-reviews-grid{ grid-template-columns:1fr; }
	.sc-home-team-grid{ grid-template-columns:repeat(2,1fr); }
	.sc-home-footer-grid{ grid-template-columns:1fr; gap:28px; }
}