/*
 * Energipartner FAQ - design för samlingssida och frågesida.
 *
 * Färger och typsnittsval är hämtade ur temats style.css (djupblå #133a68,
 * signalröd #e0091d, rubrikbläck #1a161b, ytor #f7f7f7 / #e7ecf0).
 * Inga nya typsnitt laddas: brödtexten ärver sajtens stack, rubriker och
 * etiketter använder temats Montserrat-stack med systemfallback.
 *
 * Allt är scopat under .ep-faq-archive / .ep-faq-single. Divis CSS laddas
 * efter den här filen på ocachade visningar, därför använder selektorerna
 * minst två klasser där Divi har elementregler (a, h1-h6, p, ul, li).
 */

/* ---------------------------------------------------------------- Tokens */

.ep-faq-archive,
.ep-faq-single {
	/* Färg */
	--ep-faq-navy: #133a68;
	--ep-faq-navy-deep: #0e2c50;
	--ep-faq-navy-mid: #294c76;
	--ep-faq-signal: #e0091d;
	--ep-faq-ink: #1a161b;
	--ep-faq-body: #4d525c;
	--ep-faq-muted: #6a717c;
	--ep-faq-surface: #ffffff;
	--ep-faq-tint: #f3f6fa;
	--ep-faq-tint-deep: #e7ecf0;
	--ep-faq-line: #dde4ed;

	/* Spacing */
	--ep-faq-s1: 0.25rem;
	--ep-faq-s2: 0.5rem;
	--ep-faq-s3: 0.75rem;
	--ep-faq-s4: 1rem;
	--ep-faq-s5: 1.5rem;
	--ep-faq-s6: 2rem;
	--ep-faq-s7: 3rem;
	--ep-faq-s8: 4rem;
	--ep-faq-s9: 6rem;

	/* Mått. 67.5rem = 1080px, exakt samma kolumn som Divis .et_pb_row i
	   header, brödsmulor och sidfot, så FAQ-sidorna ligger i sajtens raster. */
	--ep-faq-wide: 67.5rem;
	--ep-faq-read: 48rem;
	--ep-faq-gutter: clamp(1.125rem, 5vw, 2.5rem);

	/* Form */
	--ep-faq-radius: 3px;
	--ep-faq-radius-lg: 6px;
	--ep-faq-shadow: 0 1px 2px rgba(19, 58, 104, 0.06), 0 6px 20px -8px rgba(19, 58, 104, 0.16);
	--ep-faq-shadow-lift: 0 2px 4px rgba(19, 58, 104, 0.07), 0 14px 34px -12px rgba(19, 58, 104, 0.28);

	/* Typografi */
	--ep-faq-display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ep-faq-ease: cubic-bezier(0.4, 0, 0.2, 1);

	color: var(--ep-faq-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* Delade primitiver ------------------------------------------------------ */

.ep-faq-archive *,
.ep-faq-single * {
	box-sizing: border-box;
}

.ep-faq-archive :focus-visible,
.ep-faq-single :focus-visible {
	outline: 2px solid var(--ep-faq-signal);
	outline-offset: 3px;
	border-radius: 2px;
}

.ep-faq-archive h1,
.ep-faq-archive h2,
.ep-faq-single h1,
.ep-faq-single h2 {
	padding-bottom: 0; /* Divi sätter 10px på alla rubriker */
	margin-top: 0;
}

/* =============================================================== Samling */

.ep-faq-archive {
	background: var(--ep-faq-tint);
	padding-bottom: clamp(3rem, 9vw, 6rem);
}

/* Hjältesektion. Bandet bär en mycket svag djupskala i vitt: en visuell
   referens till borrdjup, inte dekoration för dekorationens skull. */
.ep-faq-archive .ep-faq-hero {
	position: relative;
	overflow: hidden;
	background: var(--ep-faq-navy);
	padding: clamp(2.5rem, 7vw, 4.5rem) var(--ep-faq-gutter) clamp(3.75rem, 8vw, 5.5rem);
}

.ep-faq-archive .ep-faq-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.07) 0,
		rgba(255, 255, 255, 0.07) 1px,
		transparent 1px,
		transparent 14px
	);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 100%);
}

.ep-faq-archive .ep-faq-hero > h1 {
	position: relative;
	z-index: 1;
	width: min(var(--ep-faq-wide), 100%);
	margin: 0 auto;
	color: #ffffff;
	font-family: var(--ep-faq-display);
	font-size: clamp(2.125rem, 1.4rem + 3.4vw, 3.5rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.ep-faq-archive .ep-faq-hero > h1::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 4px;
	margin-top: clamp(1rem, 2.5vw, 1.5rem);
	background: var(--ep-faq-signal);
}

/* Filterrad. Ligger som ett eget kort en bit upp över hjältebandets kant. */
.ep-faq-archive .ep-faq-filter,
.ep-faq-archive .ep-faq-group {
	width: min(var(--ep-faq-wide), 100% - var(--ep-faq-gutter) * 2);
	margin-inline: auto;
}

.ep-faq-archive .ep-faq-filter {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ep-faq-s2);
	margin-top: clamp(-2.25rem, -5vw, -1.5rem);
	padding: var(--ep-faq-s3);
	background: var(--ep-faq-surface);
	border: 1px solid var(--ep-faq-line);
	border-radius: var(--ep-faq-radius-lg);
	box-shadow: var(--ep-faq-shadow);
}

.ep-faq-archive .ep-faq-filter button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0.625rem 1rem;
	background: transparent;
	border: 1px solid var(--ep-faq-line);
	border-radius: var(--ep-faq-radius);
	color: var(--ep-faq-navy);
	font-family: var(--ep-faq-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s var(--ep-faq-ease), border-color 0.18s var(--ep-faq-ease),
		color 0.18s var(--ep-faq-ease);
}

.ep-faq-archive .ep-faq-filter button:hover {
	background: var(--ep-faq-tint);
	border-color: var(--ep-faq-navy-mid);
}

.ep-faq-archive .ep-faq-filter button.is-active {
	background: var(--ep-faq-navy);
	border-color: var(--ep-faq-navy);
	color: #ffffff;
}

/* Kategorirubrik som etikett: frågorna är innehållet, kategorin är skylten. */
.ep-faq-archive .ep-faq-group {
	margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.ep-faq-archive .ep-faq-group[hidden] {
	display: none;
}

.ep-faq-archive .ep-faq-group > h2 {
	display: flex;
	align-items: center;
	gap: var(--ep-faq-s3);
	margin: 0 0 var(--ep-faq-s4);
	padding-bottom: var(--ep-faq-s3);
	border-bottom: 1px solid var(--ep-faq-tint-deep);
	color: var(--ep-faq-navy);
	font-family: var(--ep-faq-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ep-faq-archive .ep-faq-group > h2::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	background: var(--ep-faq-signal);
}

/* Dragspel --------------------------------------------------------------- */

.ep-faq-archive .ep-faq-item {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--ep-faq-s2);
	background: var(--ep-faq-surface);
	border: 1px solid var(--ep-faq-line);
	border-radius: var(--ep-faq-radius-lg);
	transition: box-shadow 0.2s var(--ep-faq-ease), border-color 0.2s var(--ep-faq-ease),
		transform 0.2s var(--ep-faq-ease);
}

/* Signaturen: skenan ritas nedåt när svaret öppnas. */
.ep-faq-archive .ep-faq-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--ep-faq-navy);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.32s var(--ep-faq-ease), background-color 0.2s var(--ep-faq-ease);
}

.ep-faq-archive .ep-faq-item:hover::before {
	background: var(--ep-faq-navy-mid);
	transform: scaleY(0.22);
}

.ep-faq-archive .ep-faq-item[open]::before,
.ep-faq-archive .ep-faq-item[open]:hover::before {
	background: var(--ep-faq-navy);
	transform: scaleY(1);
}

.ep-faq-archive .ep-faq-item:hover {
	border-color: #c9d6e6;
	box-shadow: var(--ep-faq-shadow-lift);
	transform: translateY(-1px);
}

.ep-faq-archive .ep-faq-item[open] {
	border-color: #c9d6e6;
	box-shadow: var(--ep-faq-shadow);
	transform: none;
}

.ep-faq-archive .ep-faq-item > summary {
	position: relative;
	display: block;
	padding: 1.0625rem 3rem 1.0625rem 1.25rem;
	color: var(--ep-faq-ink);
	font-family: var(--ep-faq-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.005em;
	cursor: pointer;
	list-style: none;
	transition: color 0.18s var(--ep-faq-ease);
}

.ep-faq-archive .ep-faq-item > summary::-webkit-details-marker {
	display: none;
}

.ep-faq-archive .ep-faq-item > summary::marker {
	content: "";
}

.ep-faq-archive .ep-faq-item > summary:hover {
	color: var(--ep-faq-navy);
}

/* Kortet klipper allt som sticker ut, därför ligger fokusringen på insidan. */
.ep-faq-archive .ep-faq-item > summary:focus-visible {
	outline: 2px solid var(--ep-faq-signal);
	outline-offset: -3px;
	border-radius: var(--ep-faq-radius-lg);
}

/* Vinkelhake i stället för plustecken: en riktning, inte en matematik. */
.ep-faq-archive .ep-faq-item > summary::after {
	content: "";
	position: absolute;
	right: 1.375rem;
	top: 1.4375rem;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--ep-faq-navy);
	border-bottom: 2px solid var(--ep-faq-navy);
	transform: rotate(45deg);
	transform-origin: 60% 60%;
	transition: transform 0.3s var(--ep-faq-ease);
}

.ep-faq-archive .ep-faq-item[open] > summary::after {
	transform: rotate(-135deg);
}

/* Ingen padding i botten: höjdanimationen i faq.js mäter den här boxen och
   ska kunna gå hela vägen till noll utan att paddingen blir kvar. */
.ep-faq-archive .ep-faq-item-body {
	overflow: hidden;
	padding: 0 1.25rem 0;
}

.ep-faq-archive .ep-faq-item-body > p {
	margin: 0 0 var(--ep-faq-s4);
	color: var(--ep-faq-body);
	font-size: 1rem;
	line-height: 1.7;
	max-width: 40rem;
}

.ep-faq-archive .ep-faq-item-body > *:last-child {
	margin-bottom: var(--ep-faq-s5);
}

.ep-faq-archive .ep-faq-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ep-faq-navy);
	font-family: var(--ep-faq-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 3px;
	transition: color 0.18s var(--ep-faq-ease), border-color 0.18s var(--ep-faq-ease);
}

.ep-faq-archive .ep-faq-more::after {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.18s var(--ep-faq-ease);
}

.ep-faq-archive .ep-faq-more:hover {
	color: var(--ep-faq-navy-deep);
	border-bottom-color: var(--ep-faq-navy-deep);
}

.ep-faq-archive .ep-faq-more:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

@media (min-width: 48em) {
	.ep-faq-archive .ep-faq-item > summary {
		padding: 1.25rem 3.5rem 1.25rem 1.75rem;
		font-size: 1.0625rem;
	}

	.ep-faq-archive .ep-faq-item > summary::after {
		right: 1.75rem;
		top: 1.625rem;
	}

	.ep-faq-archive .ep-faq-item-body {
		padding: 0 3.5rem 0 1.75rem;
	}
}

/* ================================================================ Fråga */

.ep-faq-single {
	background: var(--ep-faq-surface);
	padding: clamp(2.25rem, 6vw, 3.75rem) var(--ep-faq-gutter) clamp(3rem, 9vw, 5.5rem);
}

.ep-faq-single > article {
	width: min(var(--ep-faq-read), 100%);
	margin-inline: auto;
}

.ep-faq-single .ep-faq-header {
	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
	padding-bottom: var(--ep-faq-s4);
	border-bottom: 1px solid var(--ep-faq-line);
}

.ep-faq-single .ep-faq-header > h1 {
	margin: 0 0 var(--ep-faq-s3);
	color: var(--ep-faq-ink);
	font-family: var(--ep-faq-display);
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.625rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

.ep-faq-single .ep-faq-byline {
	margin: 0;
	color: var(--ep-faq-muted);
	font-family: var(--ep-faq-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Kortsvaret är sidans ankare och sätts därför större än brödtexten som
   följer. Löftet är ett rakt svar direkt, och typografin säger samma sak. */
.ep-faq-single .ep-faq-answer-short {
	margin: 0 0 clamp(1.75rem, 4.5vw, 2.75rem);
	padding: clamp(1.25rem, 3.5vw, 1.75rem);
	background: var(--ep-faq-tint);
	border-left: 3px solid var(--ep-faq-navy);
	border-radius: 0 var(--ep-faq-radius-lg) var(--ep-faq-radius-lg) 0;
}

.ep-faq-single .ep-faq-answer-short::before {
	content: "Kort svar";
	display: block;
	margin-bottom: var(--ep-faq-s2);
	color: var(--ep-faq-navy);
	font-family: var(--ep-faq-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
}

.ep-faq-single .ep-faq-answer-short p {
	margin: 0;
	color: var(--ep-faq-ink);
	font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
	font-weight: 500;
	line-height: 1.55;
}

/* Långt svar: brödtext */
/* Tomt långsvar ska inte lämna ett hål i sidan. Mallen skriver ut radbrytning
   inuti diven, därför duger inte :empty. */
.ep-faq-single .ep-faq-answer-long:not(:has(*)) {
	display: none;
}

.ep-faq-single .ep-faq-answer-long {
	color: var(--ep-faq-body);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.ep-faq-single .ep-faq-answer-long > *:first-child {
	margin-top: 0;
}

.ep-faq-single .ep-faq-answer-long p {
	margin: 0 0 1.25rem;
	padding: 0;
}

.ep-faq-single .ep-faq-answer-long h2,
.ep-faq-single .ep-faq-answer-long h3,
.ep-faq-single .ep-faq-answer-long h4 {
	margin: 2.25rem 0 0.75rem;
	padding-bottom: 0;
	color: var(--ep-faq-ink);
	font-family: var(--ep-faq-display);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ep-faq-single .ep-faq-answer-long h2 {
	font-size: 1.375rem;
}

.ep-faq-single .ep-faq-answer-long h3 {
	font-size: 1.1875rem;
}

.ep-faq-single .ep-faq-answer-long h4 {
	font-size: 1.0625rem;
}

.ep-faq-single .ep-faq-answer-long ul {
	list-style: none;
	margin: 0 0 1.25rem;
	padding-left: 0;
}

.ep-faq-single .ep-faq-answer-long ul li {
	position: relative;
	margin-bottom: 0.5rem;
	padding-left: 1.5rem;
}

.ep-faq-single .ep-faq-answer-long ul li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.7em;
	width: 7px;
	height: 7px;
	background: var(--ep-faq-navy);
	border-radius: 1px;
}

/* Divis reset nollställer list-style, siffrorna måste sättas tillbaka. */
.ep-faq-single .ep-faq-answer-long ol {
	list-style: decimal outside;
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}

.ep-faq-single .ep-faq-answer-long ol li {
	margin-bottom: 0.5rem;
	padding-left: 0.25rem;
}

.ep-faq-single .ep-faq-answer-long ol li::marker {
	color: var(--ep-faq-navy);
	font-family: var(--ep-faq-display);
	font-weight: 700;
}

.ep-faq-single .ep-faq-answer-long strong {
	color: var(--ep-faq-ink);
	font-weight: 600;
}

.ep-faq-single .ep-faq-answer-long a {
	color: var(--ep-faq-navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.18s var(--ep-faq-ease);
}

.ep-faq-single .ep-faq-answer-long a:hover {
	color: var(--ep-faq-signal);
}

/* Hänvisningsknapp: temats blå knapp, men utan den grova undersidan */
.ep-faq-single .ep-faq-guide-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9375rem 1.5rem;
	background: var(--ep-faq-navy);
	border-radius: var(--ep-faq-radius);
	color: #ffffff;
	font-family: var(--ep-faq-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: var(--ep-faq-shadow);
	transition: background-color 0.18s var(--ep-faq-ease), box-shadow 0.18s var(--ep-faq-ease),
		transform 0.18s var(--ep-faq-ease);
}

.ep-faq-single .ep-faq-guide-btn::after {
	content: "";
	width: 0.4375rem;
	height: 0.4375rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.18s var(--ep-faq-ease);
}

.ep-faq-single .ep-faq-guide-btn:hover {
	background: var(--ep-faq-navy-deep);
	box-shadow: var(--ep-faq-shadow-lift);
	transform: translateY(-1px);
	color: #ffffff;
}

.ep-faq-single .ep-faq-guide-btn:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

/* Relaterade frågor: rader med hårfina linjer, inte kort */
.ep-faq-single .ep-faq-related {
	margin-top: clamp(2.5rem, 6vw, 3.5rem);
	padding-top: clamp(1.5rem, 4vw, 2rem);
	border-top: 1px solid var(--ep-faq-line);
}

.ep-faq-single .ep-faq-related > h2 {
	display: flex;
	align-items: center;
	gap: var(--ep-faq-s3);
	margin: 0 0 var(--ep-faq-s2);
	color: var(--ep-faq-navy);
	font-family: var(--ep-faq-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ep-faq-single .ep-faq-related > h2::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	background: var(--ep-faq-signal);
}

.ep-faq-single .ep-faq-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ep-faq-single .ep-faq-related li {
	margin: 0;
	border-bottom: 1px solid var(--ep-faq-tint-deep);
}

.ep-faq-single .ep-faq-related li a {
	display: flex;
	align-items: center;
	gap: var(--ep-faq-s4);
	padding: 1rem 0.25rem 1rem 0;
	color: var(--ep-faq-ink);
	font-family: var(--ep-faq-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.18s var(--ep-faq-ease), padding-left 0.18s var(--ep-faq-ease);
}

.ep-faq-single .ep-faq-related li a::after {
	content: "";
	flex: 0 0 auto;
	width: 0.4375rem;
	height: 0.4375rem;
	margin-left: auto;
	border-top: 2px solid var(--ep-faq-navy);
	border-right: 2px solid var(--ep-faq-navy);
	transform: rotate(45deg);
	transition: transform 0.18s var(--ep-faq-ease);
}

.ep-faq-single .ep-faq-related li a:hover {
	color: var(--ep-faq-navy);
	padding-left: 0.375rem;
}

.ep-faq-single .ep-faq-related li a:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

/* ============================================================== Rörelse */

/* Under stängningsanimationen ligger [open] kvar tills höjden nått noll.
   is-closing låter skenan och vinkelhaken vända direkt vid klicket. */
.ep-faq-archive .ep-faq-item.is-closing::before,
.ep-faq-archive .ep-faq-item.is-closing:hover::before {
	transform: scaleY(0);
}

.ep-faq-archive .ep-faq-item.is-closing > summary::after {
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.ep-faq-archive *,
	.ep-faq-single * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.ep-faq-archive .ep-faq-item:hover {
		transform: none;
	}

	.ep-faq-single .ep-faq-guide-btn:hover {
		transform: none;
	}
}

/* ================================================================ Utskrift */

@media print {
	.ep-faq-archive,
	.ep-faq-single {
		background: #ffffff;
	}

	.ep-faq-archive .ep-faq-filter,
	.ep-faq-archive .ep-faq-item > summary::after {
		display: none;
	}

	.ep-faq-archive .ep-faq-item {
		box-shadow: none;
		break-inside: avoid;
	}

	.ep-faq-archive .ep-faq-item-body {
		overflow: visible;
		height: auto !important;
	}
}