/* =================================================================
   ДИЗАЙН-СИСТЕМА «Сантехмонтаж»
   Единые токены, типографика, кнопки, скругления, тени, анимации.
   Подключается первой — распространяет стиль и на старые Elementor-блоки.
   ================================================================= */

:root {
	/* Палитра */
	--sm-blue:        #0a6cb4;
	--sm-blue-dark:   #07568f;
	--sm-blue-soft:   #eaf3fa;
	--sm-accent:      #ff6b00;
	--sm-accent-dark: #e25e00;
	--sm-gold:        #ffce4f;
	--sm-text:        #1c2530;
	--sm-muted:       #6b7785;
	--sm-bg-soft:     #f5f8fb;
	--sm-border:      #e3e8ef;

	/* Типографика */
	--sm-font-head: "Montserrat", "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sm-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Скругления */
	--sm-radius-sm: 8px;
	--sm-radius:    12px;
	--sm-radius-lg: 16px;

	/* Тени */
	--sm-shadow-sm: 0 4px 14px rgba(20, 40, 70, .06);
	--sm-shadow:    0 10px 28px rgba(20, 40, 70, .10);
	--sm-shadow-lg: 0 18px 44px rgba(20, 40, 70, .16);

	/* Переходы */
	--sm-ease: .2s cubic-bezier(.4, 0, .2, 1);
}

/* --- Базовая типографика (мягко, без !important где можно) --- */
body,
.ast-container,
p, li, td, th, input, textarea, select, button {
	font-family: var(--sm-font-body);
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.sm-section-title,
.entry-title {
	font-family: var(--sm-font-head);
	letter-spacing: -0.01em;
}
body { color: var(--sm-text); -webkit-font-smoothing: antialiased; }

/* --- Унификация Elementor-кнопок под бренд --- */
.elementor-button,
.wp-block-button__link,
.ast-button,
button.menu-toggle {
	border-radius: var(--sm-radius-sm) !important;
	font-family: var(--sm-font-head) !important;
	font-weight: 700 !important;
	letter-spacing: .2px;
	transition: transform var(--sm-ease), box-shadow var(--sm-ease), background var(--sm-ease) !important;
}
.elementor-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--sm-shadow-sm);
}
/* Главные CTA Elementor («Уточнить стоимость», «Консультация») — в акцент */
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg {
	background-color: var(--sm-blue);
}

/* --- Скругления и тени для Elementor-карточек/картинок --- */
.elementor-widget-image img,
.elementor-image-box-img img {
	border-radius: var(--sm-radius);
}
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-icon-box-wrapper {
	transition: transform var(--sm-ease), box-shadow var(--sm-ease);
}

/* --- Секции: единый ритм --- */
.sm-section { padding: 72px 0; }
@media (max-width: 768px) { .sm-section { padding: 48px 0; } }

.sm-section-title { font-size: 32px; font-weight: 800; }
@media (max-width: 600px) { .sm-section-title { font-size: 25px; } }
.sm-section-title small {
	font-family: var(--sm-font-body);
	font-weight: 700;
}

/* --- Карточки: единая тень/скругление --- */
.sm-card { border-radius: var(--sm-radius); box-shadow: var(--sm-shadow-sm); }
.sm-card:hover { box-shadow: var(--sm-shadow); }

/* =================================================================
   ДОВЕРИЕ-ПОЛОСА (под Hero)
   ================================================================= */
.sm-trustbar { background: #fff; border-bottom: 1px solid var(--sm-border); }
.sm-trustbar-inner {
	max-width: 1200px; margin: 0 auto; padding: 18px 20px;
	display: flex; flex-wrap: wrap; gap: 10px 28px;
	align-items: center; justify-content: center;
}
.sm-trust-item {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 14px; font-weight: 600; color: var(--sm-text);
	white-space: nowrap;
}
.sm-trust-item svg { color: var(--sm-blue); flex: 0 0 22px; }
.sm-trust-sep { width: 1px; height: 22px; background: var(--sm-border); }
@media (max-width: 768px) {
	.sm-trustbar-inner { gap: 10px 18px; }
	.sm-trust-item { font-size: 13px; }
	.sm-trust-sep { display: none; }
}

/* =================================================================
   МИКРОАНИМАЦИИ (fade-up при скролле)
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {
	.sm-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
		will-change: opacity, transform;
	}
	.sm-reveal.is-in {
		opacity: 1;
		transform: none;
	}
	/* Каскад для элементов сетки */
	.sm-reveal-stagger > * {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
	}
	.sm-reveal-stagger.is-in > * { opacity: 1; transform: none; }
	.sm-reveal-stagger.is-in > *:nth-child(2) { transition-delay: .06s; }
	.sm-reveal-stagger.is-in > *:nth-child(3) { transition-delay: .12s; }
	.sm-reveal-stagger.is-in > *:nth-child(4) { transition-delay: .18s; }
	.sm-reveal-stagger.is-in > *:nth-child(5) { transition-delay: .24s; }
	.sm-reveal-stagger.is-in > *:nth-child(6) { transition-delay: .30s; }
	.sm-reveal-stagger.is-in > *:nth-child(7) { transition-delay: .36s; }
	.sm-reveal-stagger.is-in > *:nth-child(8) { transition-delay: .42s; }
}