/* ============================================================
   ServiceForKia — Design System Tokens
   Dark premium: graphite surfaces, KIA-red 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 --- */
	--sfk-bg:         #0c0e11;
	--sfk-bg-soft:    #11141a;
	--sfk-surface:    #161a21;
	--sfk-surface-2:  #1c212b;
	--sfk-line:       #262d38;
	--sfk-line-soft:  #1e242e;

	/* --- Ink (text) --- */
	--sfk-ink:        #f4f6f8;
	--sfk-ink-soft:   #a8b2bf;
	--sfk-ink-muted:  #6d7683;

	/* --- Brand & accent --- */
	--sfk-accent:        #d91e2e;   /* KIA red — CTAs and key highlights only */
	--sfk-accent-bright: #ff4653;   /* hover / links on dark */
	--sfk-accent-soft:   rgba(217, 30, 46, 0.12);
	--sfk-success:       #2dd4a7;

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

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

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

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

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

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

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

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

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

a { color: var(--sfk-accent-bright); }
a:hover { color: #ff6b76; }

::selection { background: var(--sfk-accent); color: #fff; }

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

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

.sfk-btn--accent {
	background: var(--sfk-accent);
	color: #ffffff;
	box-shadow: var(--sfk-glow-accent);
}
.sfk-btn--accent:hover {
	background: var(--sfk-accent-bright);
	color: #ffffff;
	box-shadow: 0 12px 34px rgba(217, 30, 46, 0.45);
}

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

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

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

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

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

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

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

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

/* ============================================================
   Gutenberg & Kadence button safety net — keeps editor-inserted
   buttons on-brand even without .sfk-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(--sfk-accent) !important;
	color: #ffffff !important;
	padding: 14px 28px !important;
	font-family: var(--sfk-font-heading) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	border: none !important;
	border-radius: var(--sfk-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(--sfk-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(--sfk-accent-bright) !important;
	color: #ffffff !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: #ffffff !important;
	background-color: transparent !important;
}