/* ==========================================================================
   Skaffa kreditkort: artiklarnas regler
   Flyttade från Ytterligare CSS i Mercia (Custom CSS v3.0) till temat, så att
   rutor, listor, tabeller och FAQ ser likadana ut efter temabytet. Klasserna
   i texterna är desamma: skk-info, skk-tips, skk-warning, skk-fakta,
   skk-fordelar, skk-nackdelar, skk-steg, skk-proscons, skk-snabbfakta,
   skk-internlankar, skk-faq, skk-btn och skk-kortrad.
   Tabeller med <thead> blir kort på mobilen (600 px och smalare).
   Färgvariablerna --skk-* används också av SKK Credit Compare och
   SKK Card Matcher.
   ========================================================================== */

:root {
	--skk-primary: #0f2c4d;
	--skk-primary-dark: #071a30;
	--skk-primary-light: #e8eef5;
	--skk-primary-border: #c5d3e3;

	--skk-accent: #b8935a;
	--skk-accent-dark: #8f6f3e;
	--skk-accent-light: #f5efe2;

	--skk-green: #0d7d4f;
	--skk-green-dark: #086148;
	--skk-green-light: #e7f3ec;

	--skk-amber: #b45309;
	--skk-amber-dark: #92400e;
	--skk-amber-light: #fdf6e7;

	--skk-red: #b91c1c;
	--skk-red-dark: #991b1b;
	--skk-red-light: #fdecec;

	--skk-bg: #ffffff;
	--skk-bg-soft: #fafaf7;
	--skk-bg-warm: #f5f1e8;
	--skk-border: #e6e2d6;
	--skk-border-strong: #c9c2af;
	--skk-text: #2b2a28;
	--skk-text-soft: #6b6760;
	--skk-text-strong: #0f1a2a;

	--skk-radius: 8px;
	--skk-radius-lg: 12px;
	--skk-shadow-sm: 0 1px 2px rgba(15, 26, 42, 0.04);
	--skk-shadow: 0 1px 3px rgba(15, 26, 42, 0.08), 0 1px 2px rgba(15, 26, 42, 0.04);
}

/* ===== Grundtypografi i artiklar ===== */

.entry-content.entry-content {
	color: var(--skk-text);
}

.entry-content.entry-content p {
	margin: 0 0 1.2em;
}

.entry-content.entry-content h2 {
	color: var(--skk-text-strong);
	margin: 2.1em 0 0.75em;
	padding-bottom: 0.45em;
	border-bottom: 2px solid var(--skk-border);
}

.entry-content.entry-content h3 {
	color: var(--skk-text-strong);
	margin: 1.8em 0 0.5em;
}

.entry-content.entry-content h4 {
	color: var(--skk-text-strong);
	margin: 1.4em 0 0.4em;
}

.entry-content.entry-content a {
	color: var(--skk-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.15s;
}

.entry-content.entry-content a:hover {
	color: var(--skk-accent-dark);
}

.entry-content.entry-content strong {
	color: var(--skk-text-strong);
}

.entry-content.entry-content img {
	border-radius: var(--skk-radius);
	height: auto;
	max-width: 100%;
}

/* ===== Infoboxar: .skk-info (marinblå), .skk-tips (grön), .skk-warning (bärnsten), .skk-fakta (sand) ===== */

.entry-content .skk-info,
.entry-content .skk-tips,
.entry-content .skk-warning,
.entry-content .skk-fakta {
	padding: 1.2em 1.4em;
	margin: 1.8em 0;
	border-radius: 0 var(--skk-radius) var(--skk-radius) 0;
	border-left: 4px solid;
}

.entry-content .skk-info {
	background: var(--skk-primary-light);
	border-left-color: var(--skk-primary);
}

.entry-content .skk-tips {
	background: var(--skk-green-light);
	border-left-color: var(--skk-green);
}

.entry-content .skk-warning {
	background: var(--skk-amber-light);
	border-left-color: var(--skk-amber);
}

.entry-content .skk-fakta {
	background: var(--skk-bg-warm);
	border-left-color: var(--skk-accent);
}

.entry-content :is(.skk-info, .skk-tips, .skk-warning, .skk-fakta) p:last-child {
	margin-bottom: 0;
}

/* Etiketten överst i en ruta ("Kort svar") står på egen rad, utan tom rad under */
.entry-content :is(.skk-info, .skk-tips, .skk-warning, .skk-fakta) > strong:first-child + br {
	display: none;
}

.entry-content :is(.skk-info-rubrik, .skk-tips-rubrik, .skk-warning-rubrik, .skk-fakta-rubrik) {
	font-weight: 700;
	margin: 0 0 0.5em;
	font-size: 1.05em;
}

.entry-content .skk-info-rubrik { color: var(--skk-primary-dark); }
.entry-content .skk-tips-rubrik { color: var(--skk-green-dark); }
.entry-content .skk-warning-rubrik { color: var(--skk-amber-dark); }
.entry-content .skk-fakta-rubrik { color: var(--skk-accent-dark); }

/* ===== Citat ===== */

.entry-content.entry-content blockquote {
	background: var(--skk-bg-warm);
	border-left: 4px solid var(--skk-accent);
	padding: 1.4em 1.6em;
	margin: 2em 0;
	border-radius: 0 var(--skk-radius) var(--skk-radius) 0;
	font-size: 1.05em;
	font-style: italic;
	color: var(--skk-text-strong);
}

.entry-content.entry-content blockquote p {
	margin: 0 0 0.5em;
}

.entry-content.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content.entry-content blockquote :is(cite, footer) {
	display: block;
	margin-top: 0.8em;
	font-size: 0.9em;
	font-style: normal;
	color: var(--skk-text-soft);
}

/* ===== Punktlistor ===== */

.entry-content.entry-content :is(ul, ol) {
	margin: 0 0 1.4em;
	padding-left: 1.6em;
}

.entry-content.entry-content li {
	margin-bottom: 0.5em;
}

.entry-content.entry-content li:last-child {
	margin-bottom: 0;
}

/* Fördelar: grön bock. ul.skk-fordelar */
.entry-content ul.skk-fordelar,
.entry-content ul.skk-nackdelar,
.entry-content ol.skk-steg {
	list-style: none;
	padding-left: 0;
}

.entry-content ul.skk-fordelar li,
.entry-content ul.skk-nackdelar li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.7em;
}

.entry-content ul.skk-fordelar li::before,
.entry-content ul.skk-nackdelar li::before {
	position: absolute;
	left: 0;
	width: 1.35em;
	height: 1.35em;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1;
}

.entry-content ul.skk-fordelar li::before {
	content: "✓";
	top: 0.15em;
	background: var(--skk-green);
	font-size: 0.8em;
}

/* Nackdelar: rött kryss. ul.skk-nackdelar */
.entry-content ul.skk-nackdelar li::before {
	content: "×";
	top: 0.05em;
	background: var(--skk-red);
	font-size: 1em;
}

/* Steg för steg: numrerade cirklar. ol.skk-steg */
.entry-content ol.skk-steg {
	counter-reset: skk-steg;
}

.entry-content ol.skk-steg li {
	position: relative;
	padding-left: 2.5em;
	margin-bottom: 1em;
	counter-increment: skk-steg;
}

.entry-content ol.skk-steg li::before {
	content: counter(skk-steg);
	position: absolute;
	left: 0;
	top: -0.1em;
	width: 1.8em;
	height: 1.8em;
	background: var(--skk-primary);
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95em;
}

/* ===== För- och nackdelar i två rutor: div.skk-proscons > div.skk-pros + div.skk-cons ===== */

.entry-content .skk-proscons {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.4em;
	margin: 2em 0;
}

.entry-content .skk-pros,
.entry-content .skk-cons {
	background: var(--skk-bg);
	border: 1px solid var(--skk-border);
	border-radius: var(--skk-radius);
	padding: 1.3em 1.4em;
	box-shadow: var(--skk-shadow-sm);
	min-width: 0;
}

.entry-content .skk-pros { border-top: 4px solid var(--skk-green); }
.entry-content .skk-cons { border-top: 4px solid var(--skk-red); }

.entry-content :is(.skk-pros, .skk-cons) :is(h3, h4) {
	margin: 0 0 0.8em;
	font-size: 1.1em;
	border: none;
	padding: 0;
}

.entry-content .skk-pros :is(h3, h4) { color: var(--skk-green-dark); }
.entry-content .skk-cons :is(h3, h4) { color: var(--skk-red-dark); }

.entry-content :is(.skk-pros, .skk-cons) ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.entry-content :is(.skk-pros, .skk-cons) li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.5em;
}

.entry-content .skk-pros li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--skk-green);
	font-weight: 700;
}

.entry-content .skk-cons li::before {
	content: "×";
	position: absolute;
	left: 0;
	top: -0.1em;
	color: var(--skk-red);
	font-weight: 700;
	font-size: 1.2em;
}

@media (max-width: 600px) {
	.entry-content .skk-proscons {
		grid-template-columns: 1fr;
	}
}

/* ===== Tabeller ===== */

/* Tabellen följer textspaltens bredd (Blocksys blockbredd), inte hela skärmen */
.entry-content.entry-content table {
	width: var(--theme-block-width, 100%);
	border-collapse: collapse;
	margin: 1.6em 0;
	background: var(--skk-bg);
	border: 1px solid var(--skk-border);
	border-radius: var(--skk-radius);
	overflow: hidden;
	box-shadow: var(--skk-shadow-sm);
	font-size: 0.94em;
}

.entry-content.entry-content table :is(th, td) {
	padding: 0.85em 1em;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--skk-border);
	vertical-align: top;
}

.entry-content.entry-content table th {
	background: var(--skk-primary);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95em;
	border-bottom: none;
}

.entry-content.entry-content table tbody tr:nth-child(even) {
	background: var(--skk-bg-soft);
}

.entry-content.entry-content table tbody tr:last-child td {
	border-bottom: none;
}

.entry-content.entry-content table tbody tr:hover {
	background: var(--skk-bg-warm);
}

/* Snabbfakta: tvåkolumns nyckel och värde. table.skk-snabbfakta */
.entry-content table.skk-snabbfakta {
	font-size: 0.98em;
}

.entry-content table.skk-snabbfakta th,
.entry-content table.skk-snabbfakta td:first-child {
	background: var(--skk-bg-warm);
	color: var(--skk-text-strong);
	width: 42%;
	font-weight: 600;
}

.entry-content table.skk-snabbfakta td {
	background: var(--skk-bg);
}

/* Mobil: alla tabeller med <thead> blir kort. Tabeller utan <thead> (snabbfakta) får etiketten ovanför värdet längre ned. */
@media (max-width: 600px) {
	.entry-content table:has(thead),
	.entry-content table:has(thead) :is(thead, tbody, tr, th, td) {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.entry-content.entry-content table:has(thead) {
		width: var(--theme-block-width, 100%);
		min-width: 0 !important; /* inline min-width från importerade tabeller */
		border: none;
		box-shadow: none;
		background: transparent;
		overflow: visible;
	}

	.entry-content table:has(thead) thead {
		position: absolute;
		left: -9999px;
		top: -9999px;
	}

	.entry-content table:has(thead) tr {
		background: var(--skk-bg);
		border: 1px solid var(--skk-border);
		border-radius: var(--skk-radius);
		margin-bottom: 1em;
		padding: 0;
		overflow: hidden;
		box-shadow: var(--skk-shadow-sm);
	}

	.entry-content.entry-content table:has(thead) tbody tr:nth-child(even),
	.entry-content.entry-content table:has(thead) tbody tr:hover {
		background: var(--skk-bg);
	}

	/* Varje rad blir ett kort. Första cellen är kortets rubrik, de andra
	   cellerna visar kolumnens namn ovanför värdet. Cellerna är vanliga block
	   (inte flex), annars hamnar länkar och text i samma cell på egna rader. */
	.entry-content.entry-content table:has(thead) td {
		display: block;
		position: static;
		min-height: 0;
		margin: 0;
		padding: 0.75em 1em;
		border: none;
		border-bottom: 1px solid var(--skk-border);
		text-align: left;
		overflow-wrap: anywhere;
	}

	.entry-content.entry-content table:has(thead) td::before {
		content: attr(data-label);
		position: static;
		display: block;
		width: auto;
		margin: 0 0 0.15em;
		font-size: 0.85em;
		font-weight: 700;
		line-height: 1.4;
		color: var(--skk-text-soft);
		text-align: left;
		white-space: normal;
		overflow: visible;
	}

	.entry-content.entry-content table:has(thead) td:first-child {
		background: var(--skk-primary);
		color: #ffffff;
		font-weight: 700;
		line-height: 1.4;
	}

	.entry-content.entry-content table:has(thead) td:first-child::before {
		display: none;
	}

	.entry-content.entry-content table:has(thead) td:first-child :is(a, strong, span) {
		color: #ffffff;
	}

	.entry-content.entry-content table:has(thead) td:first-child a {
		text-decoration: underline;
		text-decoration-color: rgba(255, 255, 255, 0.5);
	}

	.entry-content.entry-content table:has(thead) tr td:last-child {
		border-bottom: none;
	}

	/* Även sista kortet har linjer mellan fälten */
	.entry-content.entry-content table:has(thead) tbody tr:last-child td:not(:last-child) {
		border-bottom: 1px solid var(--skk-border);
	}

	/* Tabeller utan <thead> (snabbfakta och andra nyckel och värde): varje rad
	   blir ett block med etiketten överst och värdet under, så att långa ord
	   som "Organisationsnummer" och webbadresser får plats */
	.entry-content table:not(:has(thead)),
	.entry-content table:not(:has(thead)) :is(tbody, tr, th, td) {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.entry-content.entry-content table:not(:has(thead)) {
		width: var(--theme-block-width, 100%);
		min-width: 0 !important;
	}

	.entry-content.entry-content table:not(:has(thead)) tr {
		border-bottom: 1px solid var(--skk-border);
	}

	.entry-content.entry-content table:not(:has(thead)) tr:last-child {
		border-bottom: none;
	}

	.entry-content.entry-content table:not(:has(thead)) :is(th, td) {
		border: none;
		overflow-wrap: anywhere;
	}

	.entry-content.entry-content table:not(:has(thead)) tr > :first-child {
		width: auto;
		padding: 0.8em 1.18em 0.1em;
		background: transparent;
		font-size: 0.85em;
		font-weight: 700;
		line-height: 1.4;
		color: var(--skk-text-soft);
	}

	.entry-content.entry-content table:not(:has(thead)) tr > :not(:first-child) {
		padding: 0.1em 1em 0.75em;
		background: transparent;
	}
}

/* ===== Internlänksruta: div.skk-internlankar med rubrik och lista ===== */

.entry-content .skk-internlankar {
	background: var(--skk-primary-light);
	border: 1px solid var(--skk-primary-border);
	border-radius: var(--skk-radius);
	padding: 1.4em 1.6em;
	margin: 2em 0;
}

.entry-content.entry-content .skk-internlankar :is(h2, h3) {
	margin: 0 0 0.7em;
	padding: 0;
	border: none;
	color: var(--skk-primary-dark);
	font-size: 1.15em;
}

.entry-content.entry-content .skk-internlankar ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.entry-content .skk-internlankar li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.4em;
}

.entry-content .skk-internlankar li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--skk-accent);
	font-weight: 700;
}

/* ===== FAQ: div.skk-faq med frågor i h3 och svar i p ===== */

.entry-content.entry-content .skk-faq h3 {
	background: var(--skk-bg-soft);
	border-left: 3px solid var(--skk-accent);
	padding: 0.7em 1em;
	margin: 1.2em 0 0.5em;
	border-radius: 0 var(--skk-radius) var(--skk-radius) 0;
	font-size: 1.05em;
	color: var(--skk-text-strong);
}

.entry-content .skk-faq h3 + p {
	padding: 0 1em;
	margin-bottom: 0.5em;
}

/* ===== Knappar: a.skk-btn, a.skk-btn.skk-btn-outline, a.skk-btn.skk-btn-gold ===== */

.entry-content.entry-content a.skk-btn {
	display: inline-block;
	background: var(--skk-primary);
	color: #ffffff;
	padding: 0.8em 1.6em;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	border: 2px solid var(--skk-primary);
	transition: all 0.15s;
	margin: 0.2em 0.3em 0.2em 0;
	box-shadow: var(--skk-shadow-sm);
}

.entry-content.entry-content a.skk-btn:hover {
	background: var(--skk-primary-dark);
	border-color: var(--skk-primary-dark);
	color: #ffffff;
}

.entry-content.entry-content a.skk-btn-outline {
	background: transparent;
	color: var(--skk-primary);
}

.entry-content.entry-content a.skk-btn-outline:hover {
	background: var(--skk-primary);
	color: #ffffff;
}

.entry-content.entry-content a.skk-btn-gold {
	background: var(--skk-accent);
	border-color: var(--skk-accent);
	color: var(--skk-primary-dark);
}

.entry-content.entry-content a.skk-btn-gold:hover {
	background: var(--skk-accent-dark);
	border-color: var(--skk-accent-dark);
	color: #ffffff;
}

/* ===== Kortrad i jämförelselistor: div.skk-kortrad ===== */

.entry-content .skk-kortrad {
	background: var(--skk-bg);
	border: 1px solid var(--skk-border);
	border-radius: var(--skk-radius);
	padding: 1.4em 1.6em;
	margin: 1.2em 0;
	box-shadow: var(--skk-shadow);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.2em;
	align-items: center;
}

.entry-content.entry-content .skk-kortrad h3 {
	margin: 0 0 0.4em;
	border: none;
	padding: 0;
	font-size: 1.15em;
}

.entry-content .skk-kortrad p {
	margin: 0;
	font-size: 0.95em;
}

@media (max-width: 600px) {
	.entry-content .skk-kortrad {
		grid-template-columns: 1fr;
	}
}

/* ===== Övrigt ===== */

.entry-content.entry-content code {
	background: var(--skk-bg-warm);
	border: 1px solid var(--skk-border);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
	color: var(--skk-primary-dark);
}

.entry-content.entry-content hr {
	border: none;
	border-top: 1px solid var(--skk-border);
	margin: 2.4em 0;
}

.entry-content .cp-table-scroll {
	overflow-x: auto;
}