/**
 * SK Vårdgivare - modern landing layout (design-system v2 / .skt-* med tokens)
 *
 * Aktiveras via sk-vardgivare-publish-clean.php när is_singular('vardgivare')
 * OCH post_content innehåller .skt-vg-page. Pattern-baserad opt-in - ingen
 * meta-flagga eller registry. När en VG-sida wrappas i <div class="skt-vg-page">
 * laddas denna CSS automatiskt.
 *
 * Tokens lokalt i :root tills global mu-plugin sk-design-tokens existerar
 * (bridge-tokens-regel, CLAUDE.md 2026-04-26). Token-värden speglas från
 * design-system v2-prototypen vg-landing-2026-04-24.html.
 */

:root {
	--sk-primary: #0d9488;
	--sk-primary-dark: #0f766e;
	--sk-primary-soft: rgba(13, 148, 136, .08);
	--sk-primary-ring: rgba(13, 148, 136, .18);
	--sk-accent: #0b5d57;
	--sk-cobolt: #307C90;
	--sk-card: #fff;
	--sk-text: #1f2937;
	--sk-text-muted: #6b7280;
	--sk-border: #e5e7eb;
	--sk-shadow-card: 0 4px 20px rgba(0, 0, 0, .06);
	--sk-shadow-cta: 0 6px 16px rgba(48, 124, 144, .25);
	--sk-radius: 12px;
	--sk-radius-input: 8px;
	--sk-radius-pill: 999px;
	--sk-space-2: 8px;
	--sk-space-3: 12px;
	--sk-space-4: 16px;
	--sk-space-5: 20px;
	--sk-space-6: 24px;
	--sk-space-8: 32px;
	--sk-space-10: 40px;
}

.skt-vg-page {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--sk-space-5) 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--sk-text);
	line-height: 1.6;
}

.skt-vg-page > * {
	contain: layout style;
}

/* Hero */
.skt-hero {
	text-align: center;
	padding: 10px 0 var(--sk-space-8);
	border-bottom: 1px solid var(--sk-border);
	margin-bottom: var(--sk-space-10);
}

.skt-hero__lead {
	font-size: 20px;
	color: var(--sk-text);
	margin: 0 auto var(--sk-space-4);
	max-width: 640px;
	font-weight: 400;
	line-height: 1.45;
}

.skt-hero__sub {
	font-size: 15px;
	color: var(--sk-text-muted);
	max-width: 620px;
	margin: 0 auto;
	line-height: 1.6;
}

/* Editorial-block (mjuk teal-bakgrund) */
.skt-editorial {
	background: #e7f8f8;
	border-radius: var(--sk-radius);
	padding: var(--sk-space-8);
	margin-bottom: var(--sk-space-10);
}

.skt-editorial h2 {
	font-size: 22px;
	color: var(--sk-primary);
	margin: 0 0 14px;
}

.skt-editorial h3 {
	font-size: 17px;
	color: var(--sk-primary);
	margin: var(--sk-space-5) 0 var(--sk-space-2);
}

.skt-editorial p {
	color: var(--sk-text);
	margin: 0 0 var(--sk-space-3);
	font-size: 16px;
}

.skt-editorial p:last-child {
	margin: 0;
}

.skt-editorial ul {
	margin: 0 0 var(--sk-space-3) var(--sk-space-5);
	padding: 0;
}

.skt-editorial li {
	margin: 0 0 var(--sk-space-2);
}

.skt-editorial em {
	font-style: italic;
	color: var(--sk-primary);
}

/* Sektionstitel + kort-grid */
.skt-section-title {
	font-size: 22px;
	color: var(--sk-text);
	margin: 0 0 var(--sk-space-5);
	font-weight: 600;
	text-align: center;
}

.skt-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sk-space-5);
	margin-bottom: var(--sk-space-10);
	contain: layout;
}

.skt-card {
	background: var(--sk-card);
	border: 1px solid var(--sk-border);
	border-left: 4px solid var(--sk-accent);
	border-radius: var(--sk-radius-input);
	padding: var(--sk-space-6);
}

.skt-card h3 {
	font-size: 17px;
	color: var(--sk-text);
	margin: 0 0 10px;
	line-height: 1.3;
}

.skt-card p {
	color: #555;
	font-size: 15px;
	margin: 0;
	line-height: 1.5;
}

/* Steg-variant: numrerade kort */
.skt-card--step {
	border-left-color: var(--sk-primary);
	counter-increment: skstep;
}

.skt-card--step h3:before {
	content: "Steg " counter(skstep) " · ";
	color: var(--sk-primary);
	font-weight: 700;
}

.skt-card-grid--steps {
	counter-reset: skstep;
}

/* FAQ med native <details> */
.skt-faq {
	margin-bottom: var(--sk-space-10);
}

.skt-faq details {
	background: var(--sk-card);
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius-input);
	padding: var(--sk-space-4) var(--sk-space-5);
	margin-bottom: 10px;
}

.skt-faq details[open] {
	border-left: 4px solid var(--sk-primary);
	padding-left: var(--sk-space-4);
}

.skt-faq summary {
	font-weight: 600;
	color: var(--sk-text);
	cursor: pointer;
	font-size: 16px;
	list-style: none;
	position: relative;
	padding-right: var(--sk-space-6);
}

.skt-faq summary::-webkit-details-marker {
	display: none;
}

.skt-faq summary::after {
	content: "▾";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sk-primary);
	transition: transform .2s;
}

.skt-faq details[open] summary::after {
	transform: translateY(-50%) rotate(180deg);
}

.skt-faq summary:hover {
	color: var(--sk-primary);
}

.skt-faq summary:focus-visible {
	outline: none;
	box-shadow: var(--sk-shadow-focus, 0 0 0 3px var(--sk-primary-ring));
	border-radius: 4px;
}

.skt-faq details p {
	margin: var(--sk-space-3) 0 0;
	color: #555;
	font-size: 15px;
	line-height: 1.6;
}

/* Behandlingsmetod-pills */
.skt-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-2);
	margin: 0 0 var(--sk-space-5);
	padding: 0;
	list-style: none;
}

.skt-pills li {
	background: #f0fafa;
	color: var(--sk-primary);
	border: 1px solid #a7f0ed;
	border-radius: var(--sk-radius-pill);
	padding: 5px var(--sk-space-3);
	font-size: 14px;
}

/* CTA-band (mörk teal med vit knapp) */
.skt-cta-band {
	background: var(--sk-cobolt);
	color: #fff;
	border-radius: var(--sk-radius);
	padding: var(--sk-space-10) var(--sk-space-8);
	margin: var(--sk-space-10) 0;
	text-align: center;
	box-shadow: var(--sk-shadow-cta);
	contain: layout;
}

.skt-cta-band h3 {
	font-size: 22px;
	color: #fff;
	margin: 0 0 10px;
	font-weight: 600;
}

.skt-cta-band p {
	color: #e0f7f7;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.skt-cta-band a.skt-cta-band__btn {
	margin: var(--sk-space-10) 0 0;
	text-decoration: none;
	color: var(--sk-cobolt);
	background: #fff;
	display: inline-block;
	font-weight: 600;
	padding: var(--sk-space-3) var(--sk-space-8);
	border-radius: var(--sk-radius-pill);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	transition: transform .15s ease, box-shadow .15s ease;
}

.skt-cta-band a.skt-cta-band__btn:hover {
	background: #f0f9fb;
	color: var(--sk-cobolt);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.skt-cta-band a.skt-cta-band__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.skt-pricing-note {
	text-align: center;
	padding: var(--sk-space-5) 0;
	color: var(--sk-text-muted);
	font-size: 14px;
	margin-bottom: var(--sk-space-8);
}

@media (prefers-reduced-motion: reduce) {
	.skt-cta-band a.skt-cta-band__btn:hover {
		transform: none;
	}

	.skt-faq summary::after,
	.skt-faq details[open] summary::after {
		transition: none;
	}
}