/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 07 2026 | 20:44:45 */
/* ==========================================================================
   ARTIKEL
   Styling för längre artiklar. Gäller bara sektioner med klassen "artikel".
   Struktur i Divi:
     Sektion  .artikel
       Rad     .artikel-rad            (1/3 + 2/3)
         Kolumn .artikel-toc-kolumn    -> Kodmodul .artikel-toc-modul (innehållsförteckning + JS)
         Kolumn .artikel-innehall      -> Textmoduler, bildmoduler (.artikel-bild)
   Extra klasser på textmoduler: .artikel-ingress, .artikel-cta, .artikel-faq
   ========================================================================== */

.artikel {
	--artikel-accent: var(--sb-primary-color, 93, 20, 29);
	--artikel-gul: var(--sb-secondary-color, 237, 173, 55);
	--artikel-text: #212121;
	--artikel-rubrik: #1c1c1c;
	--artikel-grå: #5f5f5f;
	--artikel-linje: #e7e2dd;
	--artikel-ljus: #f7f4f1;
	--artikel-offset: 130px;
}

/* --------------------------------------------------------------------------
   Layout: innehållsförteckning till vänster, text till höger
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 981px) {
	.artikel .artikel-rad {
		display: flex !important;
		align-items: stretch;
	}

	.artikel .artikel-rad > .et_pb_column {
		float: none;
	}

	.artikel .artikel-toc-kolumn {
		padding-right: 3%;
	}

	.artikel .artikel-toc-modul {
		position: sticky;
		top: var(--artikel-offset);
		margin-bottom: 0 !important;
	}
}

@media only screen and (max-width: 980px) {
	.artikel .artikel-toc-kolumn {
		display: none !important;
	}
}

.artikel .artikel-innehall {
	max-width: 820px;
}

/* --------------------------------------------------------------------------
   Typografi
   -------------------------------------------------------------------------- */
.artikel .artikel-innehall .et_pb_text {
	margin-bottom: 0 !important;
}

.artikel .et_pb_text h2 {
	position: relative;
	margin: 0;
	padding: 64px 0 18px !important;
	font-size: clamp(28px, 1.2rem + 1.2vw, 38px) !important;
	font-weight: 600;
	line-height: 1.2 !important;
	color: var(--artikel-rubrik);
	scroll-margin-top: var(--artikel-offset);
}

/* Gul accentlinje ovanför varje H2 */
.artikel .et_pb_text h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-bottom: 18px;
	border-radius: 2px;
	background-color: rgb(var(--artikel-gul));
}

.artikel .et_pb_text h3 {
	margin: 0;
	padding: 30px 0 8px !important;
	font-size: clamp(20px, 1rem + 0.5vw, 24px) !important;
	font-weight: 600;
	line-height: 1.3 !important;
	color: rgb(var(--artikel-accent));
}

.artikel .et_pb_text p,
.artikel .et_pb_text li,
.artikel .et_pb_text td,
.artikel .et_pb_text th {
	color: var(--artikel-text);
}

.artikel .et_pb_text p,
.artikel .et_pb_text li {
	font-size: 18px !important;
	line-height: 1.7 !important;
	font-weight: 400;
}

.artikel .et_pb_text p {
	padding-bottom: 1.1em;
}

.artikel .et_pb_text p:last-child {
	padding-bottom: 0;
}

.artikel .et_pb_text strong {
	font-weight: 600;
	color: var(--artikel-rubrik);
}

/* Ingress */
.artikel .artikel-ingress p {
	font-size: clamp(19px, 1rem + 0.4vw, 22px) !important;
	line-height: 1.6 !important;
	color: var(--artikel-rubrik);
}

/* Länkar i löptext */
.artikel .et_pb_text a:not(.artikel-cta a) {
	font-size: inherit !important;
	color: rgb(var(--artikel-accent));
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.artikel .et_pb_text a:not(.artikel-cta a):hover {
	text-decoration-thickness: 2px;
}

/* Punktlistor */
.artikel .et_pb_text ul {
	margin: 4px 0 24px;
	padding: 0 !important;
	list-style: none !important;
}

.artikel .et_pb_text ul li {
	position: relative;
	padding: 6px 0 6px 28px;
}

.artikel .et_pb_text ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: calc(6px + 0.85em - 4px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgb(var(--artikel-accent));
}

/* --------------------------------------------------------------------------
   Bilder
   -------------------------------------------------------------------------- */
.artikel .artikel-bild {
	margin: 48px 0 0 !important;
}

.artikel .artikel-bild .et_pb_image_wrap {
	display: block;
	width: 100%;
}

.artikel .artikel-bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Tabeller
   -------------------------------------------------------------------------- */
.artikel .et_pb_text table {
	width: 100% !important;
	margin: 12px 0 28px;
	border: 1px solid var(--artikel-linje) !important;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
	font-size: 16px;
	line-height: 1.5;
}

.artikel .et_pb_text table caption {
	padding: 0 0 10px;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(var(--artikel-accent));
}

.artikel .et_pb_text table th,
.artikel .et_pb_text table td {
	padding: 14px 18px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--artikel-linje) !important;
	text-align: left;
	vertical-align: top;
	font-size: 16px;
}

.artikel .et_pb_text table tbody tr:last-child th,
.artikel .et_pb_text table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.artikel .et_pb_text table thead th {
	background-color: rgb(var(--artikel-accent));
	color: #fff;
	font-weight: 600;
}

.artikel .et_pb_text table tbody tr:nth-child(even) {
	background-color: var(--artikel-ljus);
}

/* Faktaruta (två kolumner, rubrik i första cellen) */
.artikel .et_pb_text table.artikel-fakta {
	margin-top: 28px;
	border-left: 4px solid rgb(var(--artikel-accent)) !important;
	background-color: var(--artikel-ljus);
}

.artikel .et_pb_text table.artikel-fakta tbody tr:nth-child(even) {
	background-color: transparent;
}

.artikel .et_pb_text table.artikel-fakta caption {
	padding: 20px 18px 6px;
	background-color: var(--artikel-ljus);
	caption-side: top;
}

.artikel .et_pb_text table.artikel-fakta th {
	width: 34%;
	font-weight: 600;
	color: var(--artikel-rubrik);
}

/* Mobil: tabeller blir kort, rubrikerna hämtas från data-label */
@media only screen and (max-width: 640px) {
	.artikel .et_pb_text table.artikel-tabell,
	.artikel .et_pb_text table.artikel-tabell tbody,
	.artikel .et_pb_text table.artikel-tabell tr,
	.artikel .et_pb_text table.artikel-tabell td {
		display: block;
		width: 100%;
	}

	.artikel .et_pb_text table.artikel-tabell {
		border: 0 !important;
		border-radius: 0;
		overflow: visible;
		background: transparent;
	}

	.artikel .et_pb_text table.artikel-tabell thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.artikel .et_pb_text table.artikel-tabell tr {
		margin-bottom: 12px;
		border: 1px solid var(--artikel-linje);
		border-radius: 8px;
		overflow: hidden;
		background-color: #fff !important;
	}

	.artikel .et_pb_text table.artikel-tabell td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 16px !important;
		text-align: right;
	}

	.artikel .et_pb_text table.artikel-tabell td::before {
		content: attr(data-label);
		flex-shrink: 0;
		text-align: left;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--artikel-grå);
		padding-top: 2px;
	}

	.artikel .et_pb_text table.artikel-tabell td:first-child {
		display: block;
		text-align: left;
		background-color: rgb(var(--artikel-accent));
		color: #fff;
		font-weight: 600;
	}

	.artikel .et_pb_text table.artikel-tabell td:first-child::before {
		display: block;
		margin-bottom: 2px;
		color: rgba(255, 255, 255, 0.75);
	}

	.artikel .et_pb_text table.artikel-tabell tr td:last-child {
		border-bottom: 0 !important;
	}

	/* Faktarutan staplas */
	.artikel .et_pb_text table.artikel-fakta,
	.artikel .et_pb_text table.artikel-fakta tbody,
	.artikel .et_pb_text table.artikel-fakta tr,
	.artikel .et_pb_text table.artikel-fakta th,
	.artikel .et_pb_text table.artikel-fakta td {
		display: block;
		width: 100% !important;
	}

	.artikel .et_pb_text table.artikel-fakta caption {
		display: block;
	}

	.artikel .et_pb_text table.artikel-fakta th {
		padding: 12px 16px 0 !important;
		border-bottom: 0 !important;
		font-size: 12px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--artikel-grå);
	}

	.artikel .et_pb_text table.artikel-fakta td {
		padding: 2px 16px 12px !important;
	}
}

/* --------------------------------------------------------------------------
   CTA-ruta (textmodul med klasserna "artikel-cta btn btn-sb-secondary-filled btn-wrapper")
   -------------------------------------------------------------------------- */
.artikel .artikel-cta {
	margin: 56px 0 0 !important;
	padding: 40px 44px;
	border-radius: 8px;
	background-color: rgb(var(--artikel-accent));
}

.artikel .artikel-cta p,
.artikel .artikel-cta .artikel-cta-rubrik {
	color: #fff;
}

.artikel .artikel-cta .artikel-cta-rubrik {
	padding-bottom: 8px;
	font-family: "Source Sans 3", sans-serif;
	font-size: clamp(24px, 1.1rem + 0.8vw, 30px) !important;
	font-weight: 600;
	line-height: 1.25 !important;
}

.artikel .artikel-cta p:not(:last-of-type) a {
	color: #fff !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.artikel .artikel-cta .et_pb_text_inner p:last-of-type a {
	display: inline-block;
	color: #1c1c1c !important;
}

/* Gula knappar (hero + CTA): lite mörkare bakgrund vid hover */
.artikel-hero .btn-sb-secondary-filled .et_pb_text_inner p:last-of-type a:hover,
.artikel .artikel-cta.btn-sb-secondary-filled .et_pb_text_inner p:last-of-type a:hover {
	background-color: rgb(214, 152, 38) !important;
	border-color: rgb(214, 152, 38) !important;
}

.artikel-hero .btn-sb-secondary-filled .et_pb_text_inner p:last-of-type a:hover {
	color: rgb(var(--white-color, 255, 255, 255)) !important;
}

@media only screen and (max-width: 640px) {
	.artikel .artikel-cta {
		padding: 28px 22px;
	}
}

/* --------------------------------------------------------------------------
   Vanliga frågor
   -------------------------------------------------------------------------- */
.artikel .artikel-faq h3 {
	margin-top: 16px;
	padding: 22px 0 6px !important;
	border-top: 1px solid var(--artikel-linje);
	font-size: 20px !important;
	color: var(--artikel-rubrik);
}

.artikel .artikel-faq h2 + h3 {
	border-top: 0;
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Innehållsförteckning – desktop
   -------------------------------------------------------------------------- */
.artikel .artikel-toc {
	padding: 70px 0 24px;
}

.artikel .artikel-toc-rubrik {
	padding-bottom: 14px !important;
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(var(--artikel-accent));
}

.artikel-toc-lista {
	margin: 0;
	padding: 0 !important;
	list-style: none !important;
}

.artikel .artikel-toc .artikel-toc-lista {
	border-left: 2px solid var(--artikel-linje);
}

.artikel-toc-lista li {
	margin: 0;
	padding: 0;
}

.artikel-toc-lista li::before {
	display: none;
}

.artikel-toc-lista a {
	display: block;
	margin-left: -2px;
	padding: 9px 0 9px 18px;
	border-left: 2px solid transparent;
	font-size: 15px !important;
	line-height: 1.45 !important;
	color: var(--artikel-grå, #5f5f5f) !important;
	text-decoration: none !important;
	transition: color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
}

.artikel-toc-lista a:hover {
	color: rgb(var(--sb-primary-color, 93, 20, 29)) !important;
}

.artikel-toc-lista a.aktiv {
	padding-left: 24px;
	border-left-color: rgb(var(--sb-primary-color, 93, 20, 29));
	font-weight: 600;
	color: rgb(var(--sb-primary-color, 93, 20, 29)) !important;
}

/* --------------------------------------------------------------------------
   Innehållsförteckning – mobil (knapp i botten som fälls upp)
   Elementet skapas av skriptet och läggs direkt i <body>
   -------------------------------------------------------------------------- */
.artikel-toc-mobil {
	display: none;
}

@media only screen and (max-width: 980px) {
	.artikel-toc-mobil {
		display: block;
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 9990;
		width: min(360px, calc(100vw - 96px));
		font-family: "IBM Plex Sans", sans-serif;
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.artikel-toc-mobil.dold {
		opacity: 0;
		transform: translateY(16px);
		pointer-events: none;
	}

	.artikel-toc-knapp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 12px 16px;
		border: 0;
		border-radius: 8px;
		background-color: rgb(var(--sb-primary-color, 93, 20, 29));
		color: #fff;
		text-align: left;
		cursor: pointer;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	}

	.artikel-toc-knapp-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.artikel-toc-knapp-etikett {
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: rgb(var(--sb-secondary-color, 237, 173, 55));
	}

	.artikel-toc-nu {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.4;
	}

	.artikel-toc-pil {
		flex-shrink: 0;
		width: 10px;
		height: 10px;
		margin-top: 4px;
		border-top: 2px solid #fff;
		border-left: 2px solid #fff;
		transform: rotate(45deg);
		transition: transform 0.2s ease, margin 0.2s ease;
	}

	.artikel-toc-mobil.oppen .artikel-toc-pil {
		margin-top: -6px;
		transform: rotate(225deg);
	}

	.artikel-toc-panel {
		max-height: min(60vh, 460px);
		margin-bottom: 8px;
		padding: 10px 8px;
		overflow-y: auto;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
	}

	.artikel-toc-panel[hidden] {
		display: none;
	}

	.artikel-toc-panel .artikel-toc-lista a {
		margin-left: 0;
		padding: 10px 12px;
		border-left: 0;
		border-radius: 6px;
	}

	.artikel-toc-panel .artikel-toc-lista a.aktiv {
		padding-left: 12px;
		background-color: #f7f4f1;
	}
}