/* =========================================================================
   Lånapengarguiden — designgrund
   Semantiska tokens + komponenter. Allt annat ärvs från Blocksy.
   ========================================================================= */

:root {
	/* Läsbredd. Blocksys egen layout och theme.json läser dessa två,
	   så en ändring här slår igenom i båda systemen. */
	--theme-block-max-width: 720px;
	--theme-block-wide-max-width: 1120px;

	/* Semantiska tokens — det långivarmallen konsumerar. */
	--lpg-ink: #16202e;
	--lpg-body: #4a5566;
	--lpg-muted: #6b7688;
	--lpg-primary: #12578f;
	--lpg-primary-dark: #0d3f68;
	--lpg-cta: #0e7a55;
	--lpg-cta-dark: #0a5c40;
	--lpg-surface: #f5f7fa;
	--lpg-surface-2: #eef2f7;
	--lpg-border: #dfe5ec;
	--lpg-white: #fff;
	--lpg-warning-bg: #fdf6e3;
	--lpg-warning-border: #e6d08a;
	--lpg-warning-ink: #6b5310;
	--lpg-positive: #0e7a55;
	--lpg-negative: #b3261e;

	--lpg-radius: 8px;
	--lpg-radius-lg: 12px;
	--lpg-shadow: 0 1px 2px rgba(22, 32, 46, .06), 0 4px 16px rgba(22, 32, 46, .05);

	--lpg-space-xs: 8px;
	--lpg-space-sm: 16px;
	--lpg-space-md: 24px;
	--lpg-space-lg: 40px;
	--lpg-space-xl: 64px;

	/* Blocksys egen palett pekas mot samma värden så att temats
	   knappar, länkar och rubriker följer med utan extra CSS. */
	--theme-palette-color-1: #12578f;
	--theme-palette-color-2: #0d3f68;
	--theme-palette-color-3: #16202e;
	--theme-palette-color-4: #4a5566;
	--theme-palette-color-5: #dfe5ec;
	--theme-palette-color-6: #f5f7fa;
	--theme-palette-color-7: #ffffff;
	--theme-palette-color-8: #0e7a55;

	/* Systemstack: inga externa typsnittsanrop, ingen CLS, inget
	   GDPR-bekymmer med Google Fonts. */
	--lpg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------- Bastypografi ---------- */

body {
	font-family: var(--lpg-font);
	font-size: 18px;
	line-height: 1.7;
	color: var(--lpg-body);
	-webkit-font-smoothing: antialiased;
}

.entry-content p,
.entry-content li {
	line-height: 1.7;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lpg-font);
	color: var(--lpg-ink);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.011em;
}

h1 { font-size: 38px; margin-bottom: var(--lpg-space-sm); }
h2 { font-size: 27px; margin-top: var(--lpg-space-lg); margin-bottom: var(--lpg-space-xs); }
h3 { font-size: 21px; margin-top: var(--lpg-space-md); margin-bottom: var(--lpg-space-xs); }
h4 { font-size: 18px; margin-top: var(--lpg-space-md); }

@media (max-width: 782px) {
	body { font-size: 17px; }
	h1 { font-size: 29px; }
	h2 { font-size: 23px; }
	h3 { font-size: 19px; }
}

/* ---------- Länkar ---------- */

.entry-content a:not(.wp-block-button__link):not(.lpg-btn) {
	color: var(--lpg-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.entry-content a:not(.wp-block-button__link):not(.lpg-btn):hover {
	color: var(--lpg-primary-dark);
	text-decoration-thickness: 2px;
}

/* ---------- Tabeller: ska se ut som data, inte som dekoration ---------- */

.entry-content .wp-block-table,
.lpg-table-wrap {
	overflow-x: auto;
	margin: var(--lpg-space-md) 0;
	-webkit-overflow-scrolling: touch;
}

.entry-content table,
.lpg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	background: var(--lpg-white);
	border: 1px solid var(--lpg-border);
	border-radius: var(--lpg-radius);
}

.entry-content th,
.lpg-table th {
	background: var(--lpg-surface-2);
	color: var(--lpg-ink);
	font-weight: 600;
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--lpg-border);
	white-space: nowrap;
}

.entry-content td,
.lpg-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--lpg-border);
	vertical-align: top;
}

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

.entry-content tbody tr:hover,
.lpg-table tbody tr:hover { background: var(--lpg-surface); }

/* Sifferkolumner högerställs och får tabellsiffror. */
.lpg-table .lpg-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---------- Knappar ---------- */

.wp-block-button__link,
.lpg-btn {
	display: inline-block;
	background: var(--lpg-cta);
	color: var(--lpg-white);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	padding: 14px 28px;
	border-radius: var(--lpg-radius);
	border: 0;
	text-decoration: none;
	transition: background .15s ease;
}

.wp-block-button__link:hover,
.lpg-btn:hover {
	background: var(--lpg-cta-dark);
	color: var(--lpg-white);
}

.lpg-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

.lpg-btn--secondary {
	background: transparent;
	color: var(--lpg-primary);
	border: 1px solid var(--lpg-primary);
}

.lpg-btn--secondary:hover {
	background: var(--lpg-primary);
	color: var(--lpg-white);
}

.wp-block-button { margin-bottom: var(--lpg-space-sm); }

/* ---------- Lagstadgad varningsruta ---------- */

.lpg-legal {
	background: var(--lpg-warning-bg);
	border: 1px solid var(--lpg-warning-border);
	border-left: 4px solid var(--lpg-warning-border);
	color: var(--lpg-warning-ink);
	border-radius: var(--lpg-radius);
	padding: var(--lpg-space-sm) var(--lpg-space-md);
	margin: var(--lpg-space-md) 0;
	font-size: 15px;
	line-height: 1.6;
}

.lpg-legal strong { color: var(--lpg-warning-ink); }
.lpg-legal p:last-child { margin-bottom: 0; }

/* ---------- Faktaruta ---------- */

.lpg-factbox {
	background: var(--lpg-surface);
	border: 1px solid var(--lpg-border);
	border-radius: var(--lpg-radius-lg);
	padding: var(--lpg-space-md);
	margin: var(--lpg-space-md) 0;
}

.lpg-factbox__title {
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--lpg-muted);
	margin: 0 0 var(--lpg-space-sm);
}

.lpg-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--lpg-space-sm);
	margin: 0;
}

.lpg-fact {
	background: var(--lpg-white);
	border: 1px solid var(--lpg-border);
	border-radius: var(--lpg-radius);
	padding: 12px 14px;
}

.lpg-fact__label {
	display: block;
	font-size: 13px;
	color: var(--lpg-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 2px;
}

.lpg-fact__value {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: var(--lpg-ink);
	font-variant-numeric: tabular-nums;
}

/* ---------- För- och nackdelar ---------- */

.lpg-proscons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--lpg-space-sm);
	margin: var(--lpg-space-md) 0;
}

.lpg-proscons__col {
	border: 1px solid var(--lpg-border);
	border-radius: var(--lpg-radius);
	padding: var(--lpg-space-sm) var(--lpg-space-md);
	background: var(--lpg-white);
}

.lpg-proscons__col h3 {
	margin-top: 0;
	font-size: 17px;
}

.lpg-proscons ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lpg-proscons li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 1.55;
}

.lpg-proscons li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.lpg-pros li::before { content: "+"; color: var(--lpg-positive); }
.lpg-cons li::before { content: "\2212"; color: var(--lpg-negative); }

/* ---------- Granskad-rad / E-E-A-T ---------- */

.lpg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lpg-space-xs) var(--lpg-space-sm);
	align-items: center;
	font-size: 14px;
	color: var(--lpg-muted);
	border-top: 1px solid var(--lpg-border);
	border-bottom: 1px solid var(--lpg-border);
	padding: 12px 0;
	margin: var(--lpg-space-md) 0;
}

.lpg-meta strong { color: var(--lpg-ink); font-weight: 600; }

.lpg-badge {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--lpg-surface-2);
	color: var(--lpg-ink);
}

.lpg-badge--closed { background: #fdeceb; color: var(--lpg-negative); }
.lpg-badge--active { background: #e7f4ef; color: var(--lpg-positive); }

/* ---------- FAQ ---------- */

.lpg-faq details {
	border: 1px solid var(--lpg-border);
	border-radius: var(--lpg-radius);
	padding: 14px 18px;
	margin-bottom: 10px;
	background: var(--lpg-white);
}

.lpg-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--lpg-ink);
	font-size: 17px;
}

.lpg-faq details[open] summary { margin-bottom: 10px; }

/* ---------- Arv från gamla Additional CSS ---------- */
/* Klasser som används i befintligt innehåll och måste fortsätta fungera. */

.no-bullet-no-indent ul,
.wp-block-post-template.is-flex-container {
	padding: 0;
	list-style-type: none;
}

.no-bullet-no-indent h3,
.wp-block-post-template.is-flex-container h2 { font-size: 21px; }

.longlist li { margin-bottom: 10px; }

.padded-block { padding: var(--lpg-space-sm); }

/* De handbyggda faktarutorna på 44 sidor: dämpas tills de migrerats,
   så att de inte skriker mot den nya paletten. */
.entry-content .wp-block-columns { gap: var(--lpg-space-sm); }

.entry-content .wp-block-column[style*="background"] {
	padding: var(--lpg-space-md) !important;
	border-radius: var(--lpg-radius-lg);
}

/* ---------- Bilder ---------- */

.entry-content img { border-radius: var(--lpg-radius); height: auto; }
.entry-content figure { margin-block: var(--lpg-space-md); }