/* ============================================================
   Servize Hyundai Plovdiv — Design System Tokens
   Dark premium: deep-navy surfaces, Hyundai-blue accent, Montserrat
   headings + Inter body (both with Cyrillic support).
   Single source of truth for colors, typography, spacing.
   ============================================================ */

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 110px; }

:root {
	/* --- Surface & background --- */
	--shp-bg:         #070d15;
	--shp-bg-soft:    #0b1420;
	--shp-surface:    #101c2b;
	--shp-surface-2:  #152436;
	--shp-line:       #21344a;
	--shp-line-soft:  #19293c;

	/* --- Ink (text) --- */
	--shp-ink:        #f2f7fa;
	--shp-ink-soft:   #a3b5c6;
	--shp-ink-muted:  #67798d;

	/* --- Brand & accent --- */
	--shp-accent:        #00aad2;   /* Hyundai active blue — CTAs and key highlights only */
	--shp-accent-bright: #2fc6ea;   /* hover / links on dark */
	--shp-accent-soft:   rgba(0, 170, 210, 0.12);
	--shp-success:       #2dd4a7;

	/* --- Radius --- */
	--shp-radius-sm:   10px;
	--shp-radius:      16px;
	--shp-radius-lg:   24px;
	--shp-radius-pill: 100px;

	/* --- Shadows (dark theme: depth via darkness + subtle blue glow on CTAs) --- */
	--shp-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
	--shp-shadow:      0 8px 28px rgba(0, 0, 0, 0.45);
	--shp-shadow-lg:   0 24px 60px rgba(0, 0, 0, 0.55);
	--shp-glow-accent: 0 8px 28px rgba(0, 170, 210, 0.35);

	/* --- Spacing scale --- */
	--shp-space-1:  4px;
	--shp-space-2:  8px;
	--shp-space-3:  12px;
	--shp-space-4:  16px;
	--shp-space-5:  24px;
	--shp-space-6:  32px;
	--shp-space-7:  48px;
	--shp-space-8:  64px;
	--shp-space-9:  96px;
	--shp-space-10: 128px;

	/* --- Type --- */
	--shp-font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
	--shp-font-body:    'Inter', system-ui, -apple-system, sans-serif;

	--shp-text-xs:   12px;
	--shp-text-sm:   14px;
	--shp-text-base: 16px;
	--shp-text-lg:   18px;
	--shp-text-xl:   20px;
	--shp-text-2xl:  24px;
	--shp-text-3xl:  32px;
	--shp-text-4xl:  42px;
	--shp-text-5xl:  54px;

	/* --- Transitions --- */
	--shp-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--shp-duration: 200ms;
}

/* ============================================================
   Base typography
   ============================================================ */

body {
	font-family: var(--shp-font-body);
	color: var(--shp-ink-soft);
	background: var(--shp-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--shp-font-heading);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--shp-ink);
	line-height: 1.15;
}

a { color: var(--shp-accent-bright); }
a:hover { color: #5cd6f2; }

::selection { background: var(--shp-accent); color: #04222e; }

/* ============================================================
   Button primitives
   ============================================================ */

.shp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--shp-space-2);
	padding: var(--shp-space-4) var(--shp-space-6);
	border-radius: var(--shp-radius-pill);
	font-family: var(--shp-font-heading);
	font-weight: 700;
	font-size: var(--shp-text-base);
	line-height: 1;
	text-decoration: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--shp-duration) var(--shp-ease),
				box-shadow var(--shp-duration) var(--shp-ease),
				background var(--shp-duration) var(--shp-ease),
				border-color var(--shp-duration) var(--shp-ease);
}
.shp-btn:hover { transform: translateY(-2px); }

.shp-btn--accent {
	background: var(--shp-accent);
	color: #04222e;
	box-shadow: var(--shp-glow-accent);
}
.shp-btn--accent:hover {
	background: var(--shp-accent-bright);
	color: #04222e;
	box-shadow: 0 12px 34px rgba(0, 170, 210, 0.45);
}

.shp-btn--ghost {
	background: transparent;
	color: var(--shp-ink);
	border: 1px solid var(--shp-line);
}
.shp-btn--ghost:hover {
	color: var(--shp-ink);
	border-color: var(--shp-ink-muted);
	background: var(--shp-surface);
}

.shp-btn--block { width: 100%; }

/* ============================================================
   Container & shared section helpers
   ============================================================ */

.shp-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--shp-space-6);
}
@media (max-width: 640px) {
	.shp-container { padding: 0 var(--shp-space-5); }
}

.shp-section-title {
	font-size: var(--shp-text-3xl);
	margin: 0 0 var(--shp-space-3);
	text-align: center;
}
.shp-section-sub {
	text-align: center;
	color: var(--shp-ink-soft);
	max-width: 620px;
	margin: 0 auto var(--shp-space-7);
	font-size: var(--shp-text-lg);
}
@media (max-width: 640px) {
	.shp-section-title { font-size: var(--shp-text-2xl); }
	.shp-section-sub { font-size: var(--shp-text-base); margin-bottom: var(--shp-space-6); }
}

/* Decorative card icons (shp_card_icon) */
.shp-card-icon {
	width: 34px;
	height: 34px;
	color: var(--shp-accent-bright);
	flex: none;
}

/* ============================================================
   Prose — long-form content rendered via the_content()
   ============================================================ */

.shp-prose h2 {
	font-size: var(--shp-text-2xl);
	margin: var(--shp-space-7) 0 var(--shp-space-4);
}
.shp-prose h2:first-child { margin-top: 0; }
.shp-prose p { margin: 0 0 var(--shp-space-4); }
.shp-prose strong { color: var(--shp-ink); }
.shp-prose ul {
	margin: 0 0 var(--shp-space-5);
	padding: 0;
	list-style: none;
}
.shp-prose ul li {
	position: relative;
	padding-left: 28px;
	margin-bottom: var(--shp-space-3);
}
.shp-prose ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 14px;
	height: 8px;
	border-left: 2.5px solid var(--shp-accent-bright);
	border-bottom: 2.5px solid var(--shp-accent-bright);
	transform: rotate(-45deg);
}

/* Numbered process lists in service content (seeded "Как протича…" sections) */
.shp-prose ol {
	margin: 0 0 var(--shp-space-5);
	padding: 0;
	list-style: none;
	counter-reset: shp-prose-ol;
}
.shp-prose ol li {
	position: relative;
	padding-left: 36px;
	margin-bottom: var(--shp-space-3);
	counter-increment: shp-prose-ol;
}
.shp-prose ol li::before {
	content: counter(shp-prose-ol);
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--shp-accent-soft);
	color: var(--shp-accent-bright);
	font-family: var(--shp-font-heading);
	font-weight: 700;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   Gutenberg & Kadence button safety net — keeps editor-inserted
   buttons on-brand even without .shp-btn classes.
   ============================================================ */

.wp-block-button > .wp-block-button__link,
a.wp-element-button,
.wp-block-kadence-advancedbtn .kt-button,
a.kt-button,
a.kb-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--shp-accent) !important;
	color: #04222e !important;
	padding: 14px 28px !important;
	font-family: var(--shp-font-heading) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	border: none !important;
	border-radius: var(--shp-radius-pill) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	box-shadow: var(--shp-glow-accent);
}
.wp-block-button > .wp-block-button__link:hover,
a.wp-element-button:hover,
.wp-block-kadence-advancedbtn .kt-button:hover,
a.kt-button:hover,
a.kb-button:hover {
	background: var(--shp-accent-bright) !important;
	color: #04222e !important;
	transform: translateY(-1px);
}
.wp-block-button > .wp-block-button__link *,
a.wp-element-button *,
.wp-block-kadence-advancedbtn .kt-button *,
a.kt-button *,
a.kb-button * {
	color: #04222e !important;
	background-color: transparent !important;
}