/* SSF widget styles */

/* Shared */

/* Button — Figma component 65:721; pills are 38px, 114px minimum, ~19px sides */
.ssf-btn-wrap {
	text-align: left;
}

.ssf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 114px;
	height: 38px;
	padding: 0 19px;
	border: 0;
	border-radius: 20px;
	font-family: var( --e-global-typography-button-font-family, "Heebo" ), sans-serif;
	font-size: var( --e-global-typography-button-font-size, 12px );
	font-weight: var( --e-global-typography-button-font-weight, 400 );
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.ssf-btn--blue {
	--ssf-btn-bg-d: var( --e-global-color-accent, #0171bc ); /* Blue */
	--ssf-btn-text-d: var( --e-global-color-white, #ffffff );
	--ssf-btn-bg-hover-d: var( --e-global-color-bluedark, #015f9e ); /* Blue (hover) — Figma Variant2 */
	--ssf-btn-text-hover-d: var( --e-global-color-white, #ffffff );
}

/* Yellow has no hover in Figma — ours darkens like the blue (kit "Yellow (hover)") */
.ssf-btn--yellow {
	--ssf-btn-bg-d: var( --e-global-color-secondary, #ffd549 ); /* Yellow */
	--ssf-btn-text-d: var( --e-global-color-primary, #17191f ); /* Ink */
	--ssf-btn-bg-hover-d: var( --e-global-color-yellowdark, #ffcc20 );
	--ssf-btn-text-hover-d: var( --ssf-btn-text-d );
}

/* Two classes: beats the kit's .elementor-kit-N a (0,1,1) */
.ssf-btn.ssf-btn--blue,
.ssf-btn.ssf-btn--yellow {
	background-color: var( --ssf-btn-bg, var( --ssf-btn-bg-d ) );
	color: var( --ssf-btn-text, var( --ssf-btn-text-d ) );
}

/* (0,2,1): beats Hello's a:hover (0,1,1) */
a.ssf-btn.ssf-btn--blue:hover,
a.ssf-btn.ssf-btn--yellow:hover {
	background-color: var( --ssf-btn-bg-hover, var( --ssf-btn-bg-hover-d ) );
	color: var( --ssf-btn-text-hover, var( --ssf-btn-text-hover-d ) );
}

/* <button> too: Hello's reset paints button:hover pink at (0,1,1) */
button.ssf-btn.ssf-btn--blue:hover,
button.ssf-btn.ssf-btn--blue:focus {
	background-color: var( --ssf-btn-bg-hover, var( --ssf-btn-bg-hover-d ) );
	color: var( --ssf-btn-text-hover, var( --ssf-btn-text-hover-d ) );
}

/* Focus ring — ours, not from Figma */
a.ssf-btn:focus-visible,
button.ssf-btn:focus-visible {
	outline: 2px solid var( --e-global-color-accent, #0171bc );
	outline-offset: 2px;
}

/* Large — Figma 147:231: 52px, radius 25, 16/1.3 */
.ssf-btn.ssf-btn--large {
	height: 52px;
	padding: 0 20px;
	border-radius: 25px;
	font-size: var( --e-global-typography-button-lg-font-size, 16px );
	line-height: 1.3;
}

.ssf-btn.ssf-btn--full {
	display: flex;
	width: 100%;
}

/* The footer's Extranät — the old site's 138×46, rounded like every other button
   (Arqam, 2026-10-28; the old site's was square) */
.ssf-btn.ssf-btn--square {
	min-width: 138px;
	height: 46px;
	padding: 0 24px;
	border-radius: 23px;
}

.ssf-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ssf-btn-gap, 14px );
}

/* Figma text-box-trim (cap height → baseline) emulated for Heebo:
   ascent 1.048, descent 0.421, cap 0.711 → trim 0.3975em / 0.3135em. Figma gaps
   around trimmed text can then be used verbatim. */
.ssf-trim {
	margin-block: calc( 0.3975em - 0.5lh ) calc( 0.3135em - 0.5lh );
}

/* Text field — Figma 147:229: 52px, radius 25, #DDE1E8 border */
.ssf-field[type] {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	padding: 0 14px 0 24px;
	border: 1px solid var( --e-global-color-border, #dde1e8 ); /* Field Border */
	border-radius: 25px;
	background: var( --e-global-color-white, #ffffff );
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var( --e-global-color-text, #161616 );
}

.ssf-field[type]::placeholder {
	font-size: 13px;
	color: var( --e-global-color-placeholder, #9ba1ae ); /* Placeholder */
	opacity: 1;
}

.ssf-field[type]:focus {
	outline: 2px solid var( --e-global-color-accent, #0171bc ); /* ours */
	outline-offset: 1px;
}

/* Split hero — Figma 199:1314 / 199:1318 (Kunskapsbas) */

.ssf-hero {
	display: grid;
	grid-template-columns: 538fr 762fr; /* narrow panel, media right */
	gap: 20px;
	min-height: var( --ssf-hero-min-h, 528px );
}

.ssf-hero.ssf-hero--media-right.ssf-hero--wide,
.ssf-hero.ssf-hero--media-left.ssf-hero--narrow {
	grid-template-columns: 762fr 538fr;
}

.ssf-hero.ssf-hero--media-left .ssf-hero__media {
	order: -1;
}

.ssf-hero.ssf-hero--no-image {
	grid-template-columns: 1fr;
}

.ssf-hero__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: var( --ssf-hero-pad, 63px 51px 40px 43px );
	border-radius: 20px;
	background: var( --e-global-color-panel, #f3f2f6 ); /* Panel */
}

.ssf-hero.ssf-hero--plain .ssf-hero__panel {
	justify-content: center;
	padding: var( --ssf-hero-pad, 0 0 0 108px );
	border-radius: 0;
	background: none;
}

/* Two classes: beats the kit's .elementor-kit-N hN (0,1,1). Always the
   page-title style, whatever the tag. */
.ssf-hero .ssf-hero__heading {
	margin: 0;
	font-family: var( --e-global-typography-h1-font-family, "Heebo" ), sans-serif;
	font-size: var( --e-global-typography-h1-font-size, 54px );
	font-weight: var( --e-global-typography-h1-font-weight, 400 );
	line-height: var( --e-global-typography-h1-line-height, 1.12em );
	letter-spacing: var( --e-global-typography-h1-letter-spacing, -0.7px );
	color: var( --e-global-color-primary, #17191f ); /* Ink */
}

.ssf-hero .ssf-hero__body {
	max-width: 444px;
	margin-top: var( --ssf-hero-heading-gap, 22px );
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-muted, #676e7b ); /* Grey (ingress) */
}

.ssf-hero.ssf-hero--wide .ssf-hero__body {
	max-width: 673px; /* Om oss 199:909 */
}

.ssf-hero.ssf-hero--plain .ssf-hero__body {
	max-width: 430px;
	color: var( --e-global-color-text, #161616 ); /* Black — text-image rows */
}

.ssf-hero .ssf-hero__body p {
	margin: 0;
}

.ssf-hero .ssf-hero__body p + p {
	margin-top: 1.5em; /* one empty line, as in Figma */
}

.ssf-hero__buttons {
	margin-top: var( --ssf-hero-actions-gap, 31px );
}

.ssf-hero__search {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 444px;
	margin: var( --ssf-hero-actions-gap, 20px ) 0 0;
}

.ssf-hero__media {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: 20px;
	isolation: isolate;
}

/* (0,2,1): beats .elementor img { height: auto } */
.ssf-hero .ssf-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var( --ssf-hero-img-pos, 50% 50% );
}

.ssf-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Startsida 147:223 */
.ssf-hero__media--fade::after {
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0.54 ) 60%, rgba( 0, 0, 0, 0.54 ) );
	mix-blend-mode: multiply;
}

/* Kunskapsbas 199:1318 */
.ssf-hero__media--soft::after {
	background: linear-gradient( 217.69deg, rgba( 255, 255, 255, 0.2 ) 22.279%, rgba( 0, 0, 0, 0.2 ) 92.305% );
}

.ssf-hero__caption-row {
	position: absolute;
	right: 41px;
	bottom: var( --ssf-hero-caption-bottom, 26px );
	left: 42px;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.ssf-hero .ssf-hero__caption {
	max-width: 385px;
	margin: 0;
	font-family: var( --e-global-typography-overlay-font-family, "Heebo" ), sans-serif;
	font-size: var( --e-global-typography-overlay-font-size, 24px );
	font-weight: var( --e-global-typography-overlay-font-weight, 600 );
	line-height: var( --e-global-typography-overlay-line-height, 1.5em );
	color: var( --e-global-color-white, #ffffff );
}

.ssf-hero__caption-row .ssf-btn {
	flex: none;
}

/* Image band — Figma 199:1599 (Kunskapsbas), 199:802 (Startsida) */

.ssf-band {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var( --ssf-band-min-h, 600px );
	overflow: hidden;
	border-radius: 20px;
	isolation: isolate;
	background: var( --e-global-color-panel, #f3f2f6 ); /* shows while the image loads */
}

/* (0,2,1): beats .elementor img { height: auto } */
.ssf-band > img[src] {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var( --ssf-band-img-pos, 50% 50% );
}

.ssf-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Startsida 199:802 */
.ssf-band.ssf-band--overlay-side::before {
	background: linear-gradient( to right, rgba( 0, 0, 0, 0.3 ) 1.212%, rgba( 255, 255, 255, 0.3 ) );
	mix-blend-mode: multiply;
}

/* Kunskapsbas 199:1599 */
.ssf-band.ssf-band--overlay-diagonal::before {
	background: linear-gradient( 114.59deg, rgba( 0, 0, 0, 0.4 ) 28.829%, rgba( 255, 255, 255, 0.4 ) 87.761% );
	mix-blend-mode: multiply;
}

.ssf-band__content {
	padding: var( --ssf-band-pad-t, 63px ) var( --ssf-band-pad-r, 43px ) var( --ssf-band-pad-b, 0px ) var( --ssf-band-pad-l, 43px );
}

.ssf-band .ssf-band__heading {
	max-width: 495px;
	margin: 0;
	font-family: var( --e-global-typography-h1-font-family, "Heebo" ), sans-serif;
	font-size: var( --e-global-typography-h1-font-size, 54px );
	font-weight: var( --e-global-typography-h1-font-weight, 400 );
	line-height: var( --e-global-typography-h1-line-height, 1.12em );
	letter-spacing: var( --e-global-typography-h1-letter-spacing, -0.7px );
	color: var( --e-global-color-white, #ffffff );
}

.ssf-band .ssf-band__body {
	max-width: 444px;
	margin: var( --ssf-band-body-gap, 30px ) 0 0;
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-white, #ffffff );
}

.ssf-band__card {
	position: absolute;
	bottom: var( --ssf-band-card-bottom, 46px );
	left: var( --ssf-band-pad-l, 43px );
	box-sizing: border-box;
	width: var( --ssf-band-card-w, 384px );
	max-width: calc( 100% - 2 * var( --ssf-band-pad-l, 43px ) );
	padding: var( --ssf-band-card-pad, 37px 43px 23px 26px );
	border-radius: 20px;
	background: var( --e-global-color-panel, #f3f2f6 ); /* Panel */
}

.ssf-band .ssf-band__card-text {
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-text, #161616 ); /* Black */
}

.ssf-band__buttons {
	--ssf-btn-gap: 18px; /* Kunskapsbas 199:1604 → 199:1612 */
	margin-top: var( --ssf-band-card-gap, 24px );
}

/* Section intro — Figma 195:367 (centred), 199:900 + 199:1259 (side link) */

.ssf-intro__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
}

.ssf-intro.ssf-intro--center .ssf-intro__row {
	justify-content: center;
}

/* Two classes: beats the kit's .elementor-kit-N hN (0,1,1). Page-title style: the
   designed section headings are 54/1.12/−0.7 (kit H2's 72px leading only
   appears on single-line, trimmed headings, where it doesn't show). */
.ssf-intro .ssf-intro__heading {
	max-width: var( --ssf-intro-max, 874px );
	margin: 0;
	font-family: var( --e-global-typography-h1-font-family, "Heebo" ), sans-serif;
	font-size: var( --e-global-typography-h1-font-size, 54px );
	font-weight: var( --e-global-typography-h1-font-weight, 400 );
	line-height: var( --e-global-typography-h1-line-height, 1.12em );
	letter-spacing: var( --e-global-typography-h1-letter-spacing, -0.7px );
	color: var( --e-global-color-text, #161616 ); /* Black — Figma uses #000 on some (designer Q1) */
}

.ssf-intro.ssf-intro--center .ssf-intro__heading {
	text-align: center;
}

.ssf-intro .ssf-intro__link {
	flex: none;
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: normal;
	color: var( --e-global-color-primary, #17191f ); /* Ink */
	text-decoration: underline;
	text-underline-position: from-font;
}

.ssf-intro a.ssf-intro__link {
	transition: color 0.25s ease, text-underline-offset 0.25s ease;
}

/* Hover — ours, not in Figma */
.ssf-intro a.ssf-intro__link:hover {
	color: var( --e-global-color-accent, #0171bc );
	text-underline-offset: 5px;
}

.ssf-intro .ssf-intro__body {
	max-width: var( --ssf-intro-max, 874px );
	margin: var( --ssf-intro-body-gap, 22px ) 0 0;
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-text, #161616 );
}

.ssf-intro.ssf-intro--center .ssf-intro__body {
	margin-inline: auto;
	text-align: center;
}

/* Trimmed text (.ssf-trim) takes its Figma gap as padding-top: the trim lives in
   margin-block, so the two don't fight. */

/* Media cards — Figma 199:784–795; image→title 33, title→text 21 on every page */

.ssf-mcards {
	--ssf-mc-cols-d: 3;
	display: grid;
	grid-template-columns: repeat( var( --ssf-mc-cols, var( --ssf-mc-cols-d ) ), minmax( 0, 1fr ) ); /* control wins; CSS default otherwise */
	gap: 20px;
}

.ssf-mcards__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.ssf-mcards__media {
	width: 100%;
	aspect-ratio: 427 / 240;
	overflow: hidden;
	border-radius: 20px;
}

/* (0,2,1): beats .elementor img { height: auto } */
.ssf-mcards .ssf-mcards__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ssf-mcards .ssf-mcards__title {
	padding-top: 33px;
	font-family: var( --e-global-typography-h3-font-family, "Heebo" ), sans-serif;
	font-size: var( --e-global-typography-h3-font-size, 24px );
	font-weight: var( --e-global-typography-h3-font-weight, 400 );
	line-height: var( --e-global-typography-h3-line-height, 24px );
	color: var( --e-global-color-text, #161616 ); /* Black */
}

.ssf-mcards .ssf-mcards__text {
	padding-top: 21px;
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-text, #161616 );
}

/* Buttons line up across the row: pushed to the card bottom */
.ssf-mcards__actions {
	margin-top: auto;
	padding-top: var( --ssf-mc-btn-gap, 28px );
}

/* News — Figma 199:1157–1210 (Om oss). Trimmed text: meta cap at the card top,
   title cap 21 under the meta baseline, excerpt cap 25 under the title baseline */

.ssf-news {
	--ssf-news-cols-d: 4;
	display: grid;
	grid-template-columns: repeat( var( --ssf-news-cols, var( --ssf-news-cols-d ) ), minmax( 0, 1fr ) );
	gap: 40px 20px; /* row gap ours — one row in Figma */
}

.ssf-news__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.ssf-news .ssf-news__meta {
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-darkgrey, #616161 ); /* Dark Grey */
}

.ssf-news .ssf-news__cat {
	color: var( --e-global-color-accent, #0171bc ); /* Blue */
}

.ssf-news .ssf-news__title {
	padding-top: 21px;
	font-family: var( --e-global-typography-h3-font-family, "Heebo" ), sans-serif;
	font-size: var( --e-global-typography-h3-font-size, 24px );
	font-weight: var( --e-global-typography-h3-font-weight, 400 );
	line-height: 1.2; /* Figma 24/1.2 — the kit H3 card title is 24/24 */
	color: var( --e-global-color-text, #161616 ); /* Black */
	box-sizing: content-box;
	min-height: calc( var( --ssf-news-title-lines, 2 ) * 1lh ); /* Figma: a fixed two-line slot, so excerpts line up */
	/* Main-site titles run longer than Figma's: clamp to the slot */
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var( --ssf-news-title-lines, 2 );
	line-clamp: var( --ssf-news-title-lines, 2 );
}

.ssf-news a.ssf-news__link,
.ssf-news a.ssf-news__link:hover {
	color: inherit;
	text-decoration: none;
}

.ssf-news a.ssf-news__link:focus-visible {
	outline: 2px solid var( --e-global-color-accent, #0171bc );
	outline-offset: 2px;
}

.ssf-news .ssf-news__excerpt {
	display: -webkit-box;
	overflow: hidden;
	padding-top: 25px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var( --ssf-news-lines, 4 );
	line-clamp: var( --ssf-news-lines, 4 );
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-text, #161616 );
}

.ssf-news.ssf-news--single {
	display: block;
}

/* Buttons line up across the row: pushed to the card bottom */
.ssf-news__actions {
	margin-top: auto;
	padding-top: var( --ssf-news-btn-gap, 26px );
}

/* Feature cards — Figma 195:335 (Medlemskap), 199:855 (Startsida). Title cap
   height sits 182px below the card top on both pages. */

.ssf-fcards {
	--ssf-fc-cols-d: 3;
	display: grid;
	grid-template-columns: repeat( var( --ssf-fc-cols, var( --ssf-fc-cols-d ) ), minmax( 0, 1fr ) );
	gap: 20px;
}

.ssf-fcards__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	min-width: 0;
	min-height: var( --ssf-fc-min-h, 336px );
	padding: 44px 27px 40px 43px; /* bottom 40: Startsida's 3-line card still fits 336 */
	border-radius: 20px;
	background: var( --e-global-color-panel, #f3f2f6 ); /* Panel */
}

.ssf-fcards__icon {
	height: 138px; /* 44 + 138 = the title's 182 */
}

/* Sized by its width/height attributes (no collapse while lazy-loading) */
.ssf-fcards .ssf-fcards__icon img {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 138px;
	object-fit: contain;
}

.ssf-fcards.ssf-fcards--blend-multiply .ssf-fcards__icon img {
	mix-blend-mode: multiply; /* Startsida 199:864–866: screenshots on white */
}

/* Native Video widget with the composer's `radius` — Medlemskap 199:781: r20 and
   Figma's 1320×743 (16:9 would be 742.5). The ratio itself, not Elementor's
   --video-aspect-ratio: the page CSS sets that per instance at (0,4,0) */
.elementor-widget-video.ssf-video .elementor-wrapper {
	aspect-ratio: 1320 / 743;
	overflow: hidden;
	border-radius: 20px;
}

/* The poster shows YouTube's own play button, so Elementor's play icon is drawn
   invisibly over the whole poster: it stays the keyboard control (Enter/Space)
   and shows a focus ring inside the rounded corners */
.elementor-widget-video.ssf-video .elementor-custom-embed-play {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: none;
	border-radius: 20px;
}

.elementor-widget-video.ssf-video .elementor-custom-embed-play > * {
	opacity: 0;
}

.elementor-widget-video.ssf-video .elementor-custom-embed-play:focus {
	outline: none;
}

.elementor-widget-video.ssf-video .elementor-custom-embed-play:focus-visible {
	outline: 3px solid var( --e-global-color-accent, #0171bc );
	outline-offset: -6px;
}

/* Animated icons (lottie.js): the animation is laid over the static image, which
   stays in place as the fallback and fades out once the animation is ready */
.ssf-lottie {
	position: relative;
	display: inline-block;
	vertical-align: top;
	line-height: 0;
}

.ssf-lottie.ssf-lottie--fill {
	display: block;
	width: 100%;
	height: 100%;
}

.ssf-lottie__anim {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.ssf-lottie img {
	transition: opacity 0.4s ease;
}

.ssf-lottie.is-ready .ssf-lottie__anim {
	opacity: 1;
}

.ssf-lottie.is-ready img {
	opacity: 0;
}

.ssf-fcards.ssf-fcards--blend-multiply .ssf-lottie__anim {
	mix-blend-mode: multiply;
}

.ssf-fcards .ssf-fcards__title {
	font-family: var( --e-global-typography-h3-font-family, "Heebo" ), sans-serif;
	font-size: var( --e-global-typography-h3-font-size, 24px );
	font-weight: var( --e-global-typography-h3-font-weight, 400 );
	line-height: var( --e-global-typography-h3-line-height, 24px );
	color: var( --e-global-color-text, #161616 ); /* Black */
}

.ssf-fcards .ssf-fcards__text {
	padding-top: 37px;
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-text, #161616 );
}

.ssf-fcards__list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 40px 0 0;
	list-style: none;
}

.ssf-fcards__item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ssf-fcards__check {
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	color: var( --ssf-fc-check, var( --e-global-color-accent, #0171bc ) ); /* Blue */
}

.ssf-fcards__check svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ssf-fcards .ssf-fcards__item-text {
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-text, #161616 );
}

/* Icon list — Figma 199:1933–2405 (Att lita på): hairlines 152px apart, text cap
   height 50px below each line, 140px illustration boxes hanging 18px left */

.ssf-ilist {
	display: grid;
	grid-template-columns: 762fr 538fr;
	gap: 20px;
}

.ssf-ilist.ssf-ilist--no-image {
	grid-template-columns: 1fr;
}

.ssf-ilist__rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var( --ssf-il-line, #d9d9d9 ); /* Figma line — not a kit colour */
}

.ssf-ilist__row {
	position: relative;
	box-sizing: border-box;
	min-height: var( --ssf-il-row, 152px );
	padding: 49px 0 0 164px; /* 49 + the 1px line = cap height 50 below it */
	border-top: 1px solid var( --ssf-il-line, #d9d9d9 );
}

.ssf-ilist__icon {
	position: absolute;
	top: 0;
	left: -18px;
	width: 140px;
	height: 140px;
}

.ssf-ilist .ssf-ilist__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ssf-ilist .ssf-ilist__text {
	max-width: 539px;
	font-family: "Heebo", sans-serif;
	font-size: 24px;
	line-height: normal;
	color: var( --e-global-color-text, #161616 ); /* Black — Figma #000 (designer Q1) */
}

.ssf-ilist__media {
	position: relative;
	min-height: 300px;
	overflow: hidden;
	border-radius: 20px;
}

.ssf-ilist .ssf-ilist__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var( --ssf-il-img-pos, 50% 50% );
}

/* Site navigation — Figma 199:1576 */

.ssf-nav {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	height: 75px;
}

.ssf-nav__logo {
	display: block;
	flex: none;
	margin-top: 13px;
	line-height: 0;
}

.ssf-nav .ssf-nav__logo img {
	display: block;
	width: 118px;
	height: 50px;
}

.ssf-nav__list {
	display: flex;
	gap: var( --ssf-nav-gap, 28px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssf-nav__item {
	position: relative;
}

/* Nav type from the kit; colour is Figma's #000 (third near-black — designer Q1) */
.ssf-nav .ssf-nav__link {
	display: block;
	box-sizing: border-box;
	height: 75px;
	padding-top: 29.2px; /* caps centred in the 75px header (Figma 26 → Arqam, 2026-10-28) */
	font-family: var( --e-global-typography-nav-font-family, "Heebo" ), sans-serif;
	font-size: var( --e-global-typography-nav-font-size, 12px );
	font-weight: var( --e-global-typography-nav-font-weight, 400 );
	line-height: normal;
	letter-spacing: var( --e-global-typography-nav-letter-spacing, 1.2px );
	text-transform: var( --e-global-typography-nav-text-transform, uppercase );
	text-decoration: none;
	color: #000000;
}

.ssf-nav a.ssf-nav__link:hover {
	color: #000000;
}

.ssf-nav a.ssf-nav__link:focus-visible {
	outline: 2px solid var( --e-global-color-accent, #0171bc );
	outline-offset: -2px;
}

/* Active page — 5px bar, label width, on the header's bottom edge */
.ssf-nav__item.is-current::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 5px;
	background: var( --ssf-nav-bar, var( --e-global-color-accent, #0171bc ) ); /* Blue */
}

.ssf-nav__empty {
	margin: 26px 0 0;
	font-size: 12px;
}

/* Mobile menu toggle — shown ≤767 only (provisional, Phase 6). Two classes: beats
   Hello's button reset and its pink button:hover (0,1,1). */
.ssf-nav .ssf-nav__toggle {
	display: none;
}

html.ssf-nav-lock {
	overflow: hidden;
}

/* Site footer — measured from the Figma bitmap (old-site screenshot) */

.ssf-footer {
	padding: 46px 0 47px 21px; /* band 435px tall */
	color: var( --e-global-color-darkgrey, #616161 ); /* Dark Grey */
}

.ssf-footer__grid {
	display: grid;
	grid-template-columns: 368fr 395fr 536fr; /* columns at x 81 / 449 / 844 on 1440 */
}

.ssf-footer__groups,
.ssf-footer__links,
.ssf-footer__contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssf-footer__groups {
	display: flex;
	flex-direction: column;
	gap: 23px;
}

.ssf-footer .ssf-footer__heading {
	margin: 0 0 10px;
	font-family: "Heebo", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	color: var( --e-global-color-text, #161616 ); /* Black */
}

.ssf-footer__menu {
	max-width: 160px; /* the old site's column: "Solskydd med rätt barnsäkerhet …" wraps to 3 lines */
}

.ssf-footer .ssf-footer__link,
.ssf-footer .ssf-footer__contact-text {
	font-family: "Heebo", sans-serif;
	font-size: 14px;
	line-height: normal; /* 20.5px pitch */
	color: var( --e-global-color-darkgrey, #616161 );
	text-decoration: none;
}

/* Block, or the 24px body line box sets the pitch. 24px targets (WCAG 2.5.8):
   Figma's rows are 20.5px and touch — Arqam chose AA over the exact footer */
.ssf-footer .ssf-footer__link {
	display: block;
	padding: 1.75px 0;
}

.ssf-footer .ssf-footer__contact-text {
	line-height: 23px;
}

.ssf-footer .ssf-footer__link,
.ssf-footer .ssf-footer__contact-link,
.ssf-footer .ssf-footer__social {
	transition: color 0.25s ease;
}

/* Hover — ours (the old site's footer had none) */
.ssf-footer a.ssf-footer__link:hover,
.ssf-footer a.ssf-footer__contact-link:hover,
.ssf-footer a.ssf-footer__social:hover {
	color: var( --e-global-color-accent, #0171bc );
}

.ssf-footer .ssf-footer__contact-link--underline {
	text-decoration: underline;
}

.ssf-footer .ssf-footer__contact > .ssf-footer__heading:first-child {
	margin-bottom: 4px;
}

.ssf-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 21px;
}

.ssf-footer__contact-row {
	display: flex;
	align-items: flex-start;
	gap: 5px;
}

.ssf-footer__icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var( --e-global-color-darkgrey, #616161 );
}

.ssf-footer__icon svg,
.ssf-footer__social svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ssf-footer__social {
	display: block;
	width: 23px;
	height: 23px;
	color: var( --e-global-color-darkgrey, #616161 );
}

.ssf-footer .ssf-footer__about-text {
	max-width: 522px;
	margin: 0 0 45px;
	font-family: "Heebo", sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: var( --e-global-color-darkgrey, #616161 );
}

/* Tablet keeps the desktop footer (Figma Tablet: the desktop footer scaled) */
@media (max-width: 1024px) {
	.ssf-footer {
		padding-left: 0;
	}

	/* Touch: 20.5px link pitch → 28.5 (≥24px targets, WCAG 2.5.8) */
	.ssf-footer .ssf-footer__link {
		padding: 4px 0;
	}
}

@media (max-width: 1024px) {
	.ssf-news {
		--ssf-news-cols-d: 2;
	}
}

/* Phones — no mobile design, provisional (Phase 6): everything stacks */
@media (max-width: 767px) {
	.ssf-hero,
	.ssf-hero.ssf-hero--media-right.ssf-hero--wide,
	.ssf-hero.ssf-hero--media-left.ssf-hero--narrow {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ssf-hero.ssf-hero--media-left .ssf-hero__media {
		order: 0;
	}

	/* Fixed, not the per-instance --ssf-hero-pad: desktop insets (108px) don't fit */
	.ssf-hero.ssf-hero--plain .ssf-hero__panel {
		padding: 0;
	}

	.ssf-hero__panel {
		padding: 32px 20px; /* fixed: per-instance desktop padding doesn't carry down */
	}

	/* Fixed too: desktop gaps are tuned per frame (16–43px) to match Figma */
	.ssf-hero .ssf-hero__body {
		margin-top: 16px;
	}

	.ssf-hero__buttons,
	.ssf-hero__search {
		margin-top: 24px;
	}

	/* 36px is ours — no mobile type in Figma */
	.ssf-hero .ssf-hero__heading,
	.ssf-band .ssf-band__heading,
	.ssf-intro .ssf-intro__heading {
		font-size: 36px;
		line-height: 1.12; /* the kit's tablet 46px would otherwise reach phones */
		letter-spacing: -0.5px;
		overflow-wrap: break-word; /* "Solskyddsförbundet?" is wider than a phone panel */
		hyphens: auto;
	}

	.ssf-intro__row {
		flex-wrap: wrap;
	}

	.ssf-mcards {
		--ssf-mc-cols-d: 1;
	}

	.ssf-news {
		--ssf-news-cols-d: 1;
	}

	.ssf-fcards {
		--ssf-fc-cols-d: 1;
	}

	/* Provisional — no mobile design */
	.ssf-ilist {
		grid-template-columns: 1fr;
	}

	.ssf-ilist__row {
		min-height: 0;
		padding: 24px 0 24px 84px;
	}

	.ssf-ilist__icon {
		top: 12px;
		left: -8px;
		width: 80px;
		height: 80px;
	}

	.ssf-ilist .ssf-ilist__text {
		font-size: 18px;
	}

	.ssf-fcards__card {
		min-height: 0;
	}

	.ssf-hero__media {
		min-height: 300px;
	}

	.ssf-hero__caption-row {
		right: 20px;
		left: 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* 18px is ours — no mobile type in Figma */
	.ssf-hero .ssf-hero__caption {
		font-size: 18px;
	}

	.ssf-band__content {
		padding: 32px 20px 0;
	}

	.ssf-band.ssf-band--has-card {
		min-height: 0;
		padding-bottom: 20px;
	}

	.ssf-band__card {
		position: relative;
		bottom: auto;
		left: auto;
		width: auto;
		max-width: none;
		margin: 120px 20px 0;
	}

	/* Mobile nav — burger + full-screen panel (ours; no mobile design) */
	.ssf-nav .ssf-nav__toggle {
		position: relative;
		display: block;
		flex: none;
		width: 44px;
		height: 44px;
		margin: 15.5px -10px 0 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: #000000; /* as the nav labels */
		cursor: pointer;
	}

	.ssf-nav .ssf-nav__toggle:hover,
	.ssf-nav .ssf-nav__toggle:focus {
		background: none;
		color: #000000;
	}

	.ssf-nav .ssf-nav__toggle:focus-visible {
		outline: 2px solid var( --e-global-color-accent, #0171bc );
		outline-offset: -2px;
	}

	.ssf-nav__toggle-bars,
	.ssf-nav__toggle-bars::before,
	.ssf-nav__toggle-bars::after {
		position: absolute;
		left: 11px;
		width: 22px;
		height: 2px;
		background: currentColor;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.ssf-nav__toggle-bars {
		top: 21px;
	}

	.ssf-nav__toggle-bars::before,
	.ssf-nav__toggle-bars::after {
		content: "";
		left: 0;
	}

	.ssf-nav__toggle-bars::before {
		top: -7px;
	}

	.ssf-nav__toggle-bars::after {
		top: 7px;
	}

	.ssf-nav.is-open .ssf-nav__toggle-bars {
		background: transparent;
	}

	.ssf-nav.is-open .ssf-nav__toggle-bars::before {
		transform: translateY( 7px ) rotate( 45deg );
	}

	.ssf-nav.is-open .ssf-nav__toggle-bars::after {
		transform: translateY( -7px ) rotate( -45deg );
	}

	.ssf-nav__nav {
		display: none;
	}

	/* Open: the bar pins to the top and the menu fills the screen below it */
	.ssf-nav.is-open {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		padding: 0 var( --site-gutter, 20px );
		background: var( --e-global-color-white, #ffffff );
	}

	.ssf-nav.is-open .ssf-nav__nav {
		position: fixed;
		top: 75px;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		padding: 8px var( --site-gutter, 20px ) 32px;
		overflow-y: auto;
		background: var( --e-global-color-white, #ffffff );
	}

	.admin-bar .ssf-nav.is-open {
		top: 46px;
	}

	.admin-bar .ssf-nav.is-open .ssf-nav__nav {
		top: 121px;
	}

	.ssf-nav.is-open .ssf-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.ssf-nav.is-open .ssf-nav__item {
		border-bottom: 1px solid var( --e-global-color-border, #dde1e8 );
	}

	.ssf-nav.is-open .ssf-nav__link {
		height: auto;
		padding: 18px 0;
		font-size: 16px;
	}

	/* Active page: the 5px bar moves to the row's left edge */
	.ssf-nav.is-open .ssf-nav__item.is-current::after {
		top: 0;
		right: auto;
		left: calc( -1 * var( --site-gutter, 20px ) );
		width: 5px;
		height: auto;
	}

	.ssf-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* Hover motion — ours, not in Figma. A growing bar under nav links, a slow zoom on
   linked card images; buttons only change colour (no lift — Arqam, 2026-10-28).
   Pointer devices only. */
@media (hover: hover) {
	.ssf-nav__item::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 5px;
		background: var( --ssf-nav-bar, var( --e-global-color-accent, #0171bc ) );
		transform: scaleX( 0 );
		transform-origin: left center;
		transition: transform 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 );
	}

	.ssf-nav__item:hover::before,
	.ssf-nav__item:focus-within::before {
		transform: scaleX( 1 );
	}

	.ssf-nav.is-open .ssf-nav__item::before {
		display: none;
	}

	.ssf-nav a.ssf-nav__logo:hover img {
		opacity: 0.8;
	}

	.ssf-mcards__card:has( a.ssf-btn ):hover .ssf-mcards__media img {
		transform: scale( 1.045 );
	}
}

.ssf-nav .ssf-nav__logo img {
	transition: opacity 0.25s ease;
}

/* Clip the zoom to the radius in Safari too */
.ssf-mcards__media {
	transform: translateZ( 0 );
}

.ssf-mcards .ssf-mcards__media img {
	transition: transform 0.9s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.gform_wrapper.ssf-form_wrapper .gform_footer .gform_button,
.gform_wrapper.ssf-form_wrapper .gform-footer .gform_button {
	transition: background-color 0.25s ease !important;
}

.ssf-field[type] {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ssf-field[type]:focus {
	border-color: var( --e-global-color-accent, #0171bc );
	box-shadow: 0 0 0 4px rgba( 1, 113, 188, 0.12 );
}

@media (prefers-reduced-motion: reduce) {
	.ssf-btn,
	.ssf-nav__toggle-bars,
	.ssf-nav__toggle-bars::before,
	.ssf-nav__toggle-bars::after,
	.ssf-nav__item::before,
	.ssf-mcards .ssf-mcards__media img {
		transition: none;
	}

	.ssf-mcards__card:hover .ssf-mcards__media img {
		transform: none;
	}
}

/* Gravity Forms — SSF theme (form CSS class "ssf-form" → wrapper .ssf-form_wrapper).
   Figma 199:2411. Gravity's Orbital theme sets its tokens and controls at ID level
   (#gform_wrapper_N[data-form-index].gform-theme, (1,2,0)), so overrides need
   !important — the one accepted case (05-css-specificity). */

.gform_wrapper.ssf-form_wrapper.gform-theme {
	--gf-color-primary: var( --e-global-color-accent, #0171bc ) !important; /* Blue */
	--gf-color-primary-rgb: 1, 113, 188 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-darker: var( --e-global-color-bluedark, #015f9e ) !important; /* Blue (hover) */
	--gf-ctrl-border-color-focus: var( --e-global-color-accent, #0171bc ) !important;
	--gf-ctrl-shadow-color-focus: rgba( 1, 113, 188, 0.25 ) !important;
	--gf-local-outline-color: rgba( 1, 113, 188, 0.25 ) !important;
	--gf-radius: 20px !important;
	--gf-form-gap-x: 16px !important;
	--gf-form-gap-y: 20px !important;
}

.gform_wrapper.ssf-form_wrapper .gform_fields {
	column-gap: 16px !important;
	row-gap: 20px !important;
}

/* Fields — white, no border, radius 20 (Figma's square row 2 treated as a slip),
   36px, 12px Heebo, 8px inset */
.gform_wrapper.ssf-form_wrapper .gform_fields input[type="text"],
.gform_wrapper.ssf-form_wrapper .gform_fields input[type="email"],
.gform_wrapper.ssf-form_wrapper .gform_fields input[type="tel"],
.gform_wrapper.ssf-form_wrapper .gform_fields textarea {
	box-sizing: border-box !important;
	height: 36px !important;
	min-height: 0 !important;
	padding: 0 8px !important;
	border: 0 !important;
	border-radius: 20px !important;
	background-color: var( --e-global-color-white, #ffffff ) !important;
	box-shadow: none !important;
	font-family: "Heebo", sans-serif !important;
	font-size: 12px !important;
	line-height: normal !important;
	color: var( --e-global-color-text, #161616 ) !important;
}

.gform_wrapper.ssf-form_wrapper .gform_fields textarea {
	height: 105px !important;
	padding: 14px 8px !important;
	resize: vertical;
}

/* Figma #A9A9A9 — its own placeholder grey, not the kit's #9BA1AE (designer Q) */
.gform_wrapper.ssf-form_wrapper .gform_fields input::placeholder,
.gform_wrapper.ssf-form_wrapper .gform_fields textarea::placeholder {
	color: #a9a9a9;
	opacity: 1;
}

.gform_wrapper.ssf-form_wrapper .gform_fields input:focus,
.gform_wrapper.ssf-form_wrapper .gform_fields textarea:focus {
	outline: 2px solid var( --e-global-color-accent, #0171bc ) !important; /* ours */
	outline-offset: 1px;
}

/* Submit — mirrors .ssf-btn--blue */
.gform_wrapper.ssf-form_wrapper .gform_footer,
.gform_wrapper.ssf-form_wrapper .gform-footer {
	margin-top: 24px !important;
	padding: 0 !important;
}

.gform_wrapper.ssf-form_wrapper .gform_footer .gform_button,
.gform_wrapper.ssf-form_wrapper .gform-footer .gform_button {
	box-sizing: border-box !important;
	min-width: 114px !important;
	height: 38px !important;
	padding: 0 19px !important;
	border: 0 !important;
	border-radius: 20px !important;
	background-color: var( --e-global-color-accent, #0171bc ) !important;
	box-shadow: none !important;
	font-family: "Heebo", sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #ffffff !important;
}

.gform_wrapper.ssf-form_wrapper .gform_footer .gform_button:hover,
.gform_wrapper.ssf-form_wrapper .gform-footer .gform_button:hover,
.gform_wrapper.ssf-form_wrapper .gform_footer .gform_button:focus-visible,
.gform_wrapper.ssf-form_wrapper .gform-footer .gform_button:focus-visible {
	background-color: var( --e-global-color-bluedark, #015f9e ) !important;
}


/* Phones: 16px text so iOS Safari doesn't zoom into a focused field; 44px fields
   for touch (ours — no mobile design, Phase 6) */
@media (max-width: 767px) {
	.gform_wrapper.ssf-form_wrapper .gform_fields input[type="text"],
	.gform_wrapper.ssf-form_wrapper .gform_fields input[type="email"],
	.gform_wrapper.ssf-form_wrapper .gform_fields input[type="tel"],
	.gform_wrapper.ssf-form_wrapper .gform_fields textarea {
		height: 44px !important;
		padding: 0 16px !important;
		font-size: 16px !important;
	}

	.gform_wrapper.ssf-form_wrapper .gform_fields textarea {
		height: 120px !important;
		padding: 12px 16px !important;
	}
}

/* Member search — Figma 147:337: field 177:1164 (y +10), cards 147:843 (y +87,
   699 tall, scrolls), map 147:411 (761×786, r20), markers 147:469–472 */

.ssf-msearch {
	display: grid;
	grid-template-columns: 538fr 762fr;
	gap: 20px;
	min-height: 786px;
}

.ssf-msearch__side {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 10px 0 0 3px; /* Figma: field and list at x 63 */
}

.ssf-msearch__form {
	position: relative;
	flex: none;
}

.ssf-msearch .ssf-msearch__input[type] {
	padding-right: 60px;
	color: #000000; /* Figma 177:1165 */
}

/* Two classes + tag: beats Hello's button reset and pink button:hover */
.ssf-msearch button.ssf-msearch__submit {
	position: absolute;
	top: 4px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --e-global-color-accent, #0171bc ); /* Blue */
	color: var( --e-global-color-white, #ffffff );
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.ssf-msearch button.ssf-msearch__submit:hover,
.ssf-msearch button.ssf-msearch__submit:focus {
	background: var( --e-global-color-bluedark, #015f9e );
	color: var( --e-global-color-white, #ffffff );
}

.ssf-msearch button.ssf-msearch__submit:focus-visible {
	outline: 2px solid var( --e-global-color-accent, #0171bc );
	outline-offset: 2px;
}

.ssf-msearch__submit svg {
	width: 19px;
	height: 20px;
}

.ssf-msearch .ssf-msearch__notice {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: var( --e-global-color-text, #161616 );
}

.ssf-msearch .ssf-msearch__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 699px;
	margin: 25px 0 0;
	padding: 0 0 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.ssf-msearch__card {
	padding: 22px;
	border-radius: 20px;
	background: var( --e-global-color-white, #ffffff );
	box-shadow: 0 4px 2px rgba( 0, 0, 0, 0.1 );
	cursor: pointer;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Selected — Figma 147:872: Blue at 3% + 1px Blue border (inset: no size change) */
.ssf-msearch__card.is-selected {
	background: rgba( 1, 113, 188, 0.03 );
	box-shadow: inset 0 0 0 1px var( --e-global-color-accent, #0171bc );
}

.ssf-msearch__head {
	display: flow-root; /* keeps the name's trim margins inside: otherwise they
	                       collapse with the description's and one is lost */
	position: relative;
	padding-right: 40px; /* room for the chevron, which stays out of the flow so
	                        the trimmed name sets the height alone */
}

.ssf-msearch .ssf-msearch__name {
	font-family: "Heebo", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 40px;
	color: var( --e-global-color-text, #161616 ); /* Black */
}

.ssf-msearch button.ssf-msearch__toggle {
	position: absolute;
	top: -4px;
	right: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: #1c1b1f; /* Figma icon fill */
	cursor: pointer;
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.ssf-msearch button.ssf-msearch__toggle:hover,
.ssf-msearch button.ssf-msearch__toggle:focus {
	background: none;
	color: #1c1b1f;
}

.ssf-msearch button.ssf-msearch__toggle:focus-visible {
	outline: 2px solid var( --e-global-color-accent, #0171bc );
	outline-offset: 2px;
}

/* Open = chevron up (Figma); closed points down */
.ssf-msearch__card:not( .is-open ) .ssf-msearch__toggle {
	transform: rotate( 180deg );
}

.ssf-msearch .ssf-msearch__desc {
	display: -webkit-box;
	overflow: hidden;
	padding-top: 36px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: var( --e-global-color-text, #161616 );
}

.ssf-msearch__body {
	padding-top: 36px;
}

.ssf-msearch__card:not( .is-open ) .ssf-msearch__body {
	display: none;
}

/* Company logo — Figma 147:868 / 147:924: bottom-right of the open card, fitted
   into 182×62; the contact rows stop short of it (long URLs end in an ellipsis) */
.ssf-msearch__body.ssf-msearch__body--logo {
	position: relative;
}

.ssf-msearch__body--logo .ssf-msearch__contact {
	padding-right: 196px;
}

.ssf-msearch .ssf-msearch__logo {
	position: absolute;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	max-width: 182px;
	max-height: 62px;
	object-fit: contain;
}

.ssf-msearch .ssf-msearch__label {
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var( --e-global-color-text, #161616 );
}

.ssf-msearch .ssf-msearch__contact {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 20px 0 0;
	list-style: none;
}

.ssf-msearch__contact li {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

.ssf-msearch__contact svg {
	flex: none;
	width: 24px;
	height: 24px;
	color: #1c1b1f;
}

.ssf-msearch a.ssf-msearch__link {
	overflow: hidden;
	font-family: "Heebo", sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: var( --e-global-color-accent, #0171bc ); /* Blue */
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ssf-msearch a.ssf-msearch__link:hover {
	color: var( --e-global-color-bluedark, #015f9e );
	text-decoration: underline;
}

/* Chrome draws hairline seams between Leaflet's tiles (visible since the map is in
   colour); adding overlapping edges instead closes them — Leaflet 2's own fix */
.ssf-msearch__map img.leaflet-tile {
	mix-blend-mode: plus-lighter;
}

/* No results: the list holds only the card of a clicked map dot */
.ssf-msearch.ssf-msearch--empty .ssf-msearch__list {
	height: auto;
	max-height: none;
}

.ssf-msearch.ssf-msearch--empty .ssf-msearch__list:not( :has( > li:not( [hidden] ) ) ) {
	display: none;
}

/* Own stacking context: Leaflet's panes go up to z-index 1000 and would sit over
   the sticky header and the mobile menu */
.ssf-msearch__map {
	position: relative;
	z-index: 0;
	min-height: 400px;
	overflow: hidden;
	border-radius: 20px;
	background: var( --e-global-color-panel, #f3f2f6 );
	isolation: isolate;
}

/* Phones — no mobile design, provisional (Phase 6): field, map, then the list
   (Arqam, 2026-10-28). The side column's children join the grid so the map can sit
   between the field and the list. */
@media (max-width: 767px) {
	.ssf-msearch {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ssf-msearch__side {
		display: contents;
	}

	.ssf-msearch__form {
		order: 1;
	}

	.ssf-msearch__map {
		order: 2;
	}

	.ssf-msearch .ssf-msearch__notice,
	.ssf-msearch .ssf-msearch__list {
		order: 3;
		margin-top: 0;
	}

	.ssf-msearch .ssf-msearch__list {
		height: auto;
		max-height: 70vh;
	}

	.ssf-msearch__map {
		height: 320px;
		min-height: 0;
	}

	.ssf-msearch .ssf-msearch__name {
		font-size: 20px;
		line-height: 32px;
	}

	/* Too narrow beside the rows: the logo goes under them */
	.ssf-msearch__body--logo .ssf-msearch__contact {
		padding-right: 0;
	}

	.ssf-msearch .ssf-msearch__logo {
		position: static;
		display: block;
		margin-top: 20px;
		max-width: 160px;
		max-height: 54px;
	}
}

/* Tablet — Figma Tablet page 239:37 (1024 frames, file OnAoB4rkCdPIZyAnZDc5HB): the
   desktop layouts kept, 32px gutters, 20px column gaps, r14.22, Tablet/H1 38/46 (kit),
   Tablet/H2 32/40, H4 22/30, H5 20/28 Medium, 50.67px buttons with 16px text.
   Trimmed text (.ssf-trim) gets Figma's line-box gaps + its trim: 16/24 → +5.64 top,
   +6.98 bottom; 20/28 → +6.05 / +7.73; 22/30 → +6.26 / +8.1.
   Per-instance desktop values (panel padding, gaps, heights) are overridden by each
   instance's tablet value in the page specs; defaults sit on the widget wrapper so
   those per-instance values still win. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ssf-btn {
		min-width: 152px;
		height: 50.67px;
		padding: 0 25.33px;
		border-radius: 26.67px;
		font-size: 16px;
	}

	.ssf-btn.ssf-btn--large {
		height: 52px;
		border-radius: 17.78px;
	}

	.ssf-btn.ssf-btn--square {
		min-width: 161px;
		height: 53.17px;
		border-radius: 26.59px;
		font-size: 14px;
	}

	.ssf-btn-row {
		--ssf-btn-gap: 16px;
	}

	.ssf-field[type] {
		height: 52px;
		padding: 0 10px 0 17px;
		border-radius: 17.78px;
		font-size: 14px;
		line-height: 20px;
	}

	.ssf-field[type]::placeholder {
		font-size: 14px;
	}

	/* Header — 53.33 tall; logo 84×35.56 at x 42.67; OM OSS ends 55 from the edge */
	.ssf-nav {
		height: 53.33px;
	}

	.ssf-nav__logo {
		margin: 9.24px 0 0 10.67px;
	}

	.ssf-nav .ssf-nav__logo img {
		width: 84px;
		height: 35.56px;
	}

	.ssf-nav__list {
		--ssf-nav-gap: 70px;
		padding-right: 23px;
	}

	.ssf-nav .ssf-nav__link {
		height: 53.33px;
		padding-top: 18.36px; /* caps centred in the 53.33px header (Figma 17) */
		line-height: 18px;
	}

	.ssf-nav__item.is-current::after {
		height: 3.56px;
	}

	/* Split hero: two equal columns (all variants) */
	.elementor-widget-ssf-split-hero {
		--ssf-hero-pad: 58px 26px 40px 32px; /* headings 412 wide, body 406 */
		--ssf-hero-heading-gap: 24px;
		--ssf-hero-actions-gap: 24px;
		--ssf-hero-caption-bottom: 17px;
	}

	.ssf-hero,
	.ssf-hero.ssf-hero--media-right.ssf-hero--wide,
	.ssf-hero.ssf-hero--media-left.ssf-hero--narrow {
		grid-template-columns: 1fr 1fr;
	}

	.ssf-hero__panel,
	.ssf-hero__media {
		border-radius: 14.22px;
	}

	.ssf-hero .ssf-hero__body,
	.ssf-hero.ssf-hero--wide .ssf-hero__body,
	.ssf-hero__search {
		max-width: 406px;
	}

	/* Section-level H2 heroes ("För ett tryggare köp", "Räkna med solskydd") */
	.ssf-hero h2.ssf-hero__heading {
		font-size: 32px;
		line-height: 40px;
		letter-spacing: -0.4px;
	}

	.ssf-hero.ssf-hero--plain .ssf-hero__panel {
		justify-content: flex-start;
	}

	.ssf-hero.ssf-hero--plain .ssf-hero__body {
		max-width: 446px;
	}

	.ssf-hero__search {
		gap: 14px;
	}

	/* Startsida 245:15: caption 32 in (Figma 28 — at 28 it breaks into 3 lines, not
	   Figma's 4), button 32 in */
	.ssf-hero__caption-row {
		right: 32px;
		left: 32px;
	}

	.ssf-hero .ssf-hero__caption {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
	}

	/* Kunskapsbas 245:789: caption above the button (32 in), 24 between */
	.ssf-hero--caption-stack .ssf-hero__caption-row {
		flex-direction: column;
		align-items: flex-end;
		gap: 24px;
	}

	.ssf-hero--caption-stack .ssf-hero__caption {
		align-self: flex-start;
	}

	/* Image band */
	.elementor-widget-ssf-image-band {
		--ssf-band-pad-t: 56px;
		--ssf-band-pad-r: 32px;
		--ssf-band-pad-l: 32px;
		--ssf-band-body-gap: 24px;
		--ssf-band-card-w: 273.1px;
		--ssf-band-card-pad: 25.64px 19px 40px 19px; /* Startsida: 20 above the text */
		--ssf-band-card-gap: 24.1px;
		--ssf-band-card-bottom: 17.5px;
	}

	.ssf-band,
	.ssf-band__card {
		border-radius: 14.22px;
	}

	.ssf-band .ssf-band__heading {
		max-width: 412px;
		font-size: 32px;
		line-height: 40px;
		letter-spacing: -0.4px;
	}

	.ssf-band .ssf-band__body {
		max-width: 400px;
	}

	.ssf-band .ssf-band__card-text {
		max-width: 340px; /* Kunskapsbas 245:794: narrower than its two buttons */
	}

	.ssf-band__buttons {
		--ssf-btn-gap: 12px;
	}

	/* Section intro: Tablet/H2; Startsida's ("Följ med Casper", "Anslutna
	   partners") are H4 22/30 — class ssf-intro--small */
	.ssf-intro .ssf-intro__heading {
		font-size: 32px;
		line-height: 40px;
		letter-spacing: -0.4px;
	}

	.ssf-intro--small .ssf-intro .ssf-intro__heading {
		font-size: 22px;
		line-height: 30px;
		letter-spacing: 0;
	}

	/* Om oss 245:860: "Alla nyheter" bottom-aligned with the heading's line box */
	.ssf-intro__row {
		align-items: flex-end;
	}

	.ssf-intro .ssf-intro__link {
		line-height: 24px;
	}

	/* Media cards — Om oss / Medlemskap: images 306.7×191.1, title 31.9 below,
	   text 16 below, button 24 below. Startsida's video cards (ssf-mcards--video):
	   307×198, 22 and 14. */
	.elementor-widget-ssf-media-cards {
		--ssf-mc-btn-gap: 31px;
	}

	.ssf-mcards__media {
		aspect-ratio: 306.7 / 191.1;
		border-radius: 14.22px;
	}

	.ssf-mcards .ssf-mcards__title {
		padding-top: 37.95px;
		font-size: 20px;
		font-weight: 500;
		line-height: 28px;
	}

	.ssf-mcards .ssf-mcards__text {
		padding-top: 29.37px;
	}

	.ssf-mcards--video .ssf-mcards__media {
		aspect-ratio: 307 / 198;
	}

	.ssf-mcards--video .ssf-mcards .ssf-mcards__title {
		padding-top: 28.05px;
	}

	.ssf-mcards--video .ssf-mcards .ssf-mcards__text {
		padding-top: 27.37px;
	}

	/* News — 2×2, Om oss 245:806: date → title 16, title slot 2 lines, excerpt 3
	   lines 16 below it, button 24 below; 43.3 from a button to the next date */
	.elementor-widget-ssf-news {
		--ssf-news-btn-gap: 31px;
		--ssf-news-lines: 3;
	}

	.ssf-news {
		row-gap: 48.94px;
	}

	.ssf-news .ssf-news__title {
		padding-top: 29.03px;
		font-size: 20px;
		font-weight: 500;
		line-height: 28px;
	}

	.ssf-news .ssf-news__excerpt {
		padding-top: 29.37px;
	}

	/* Feature cards — Medlemskap 245:346: icon box 111 at 12 from the top, H5 title
	   146 below that, body 29 below, list 28.44 below (17px checks, rows 10.67
	   apart, untrimmed). Startsida (ssf-fcards--compact): 72px icons at 40, H4
	   title at 150, body 16 below. */
	.ssf-fcards__card {
		min-height: 0;
		padding: 12px 23px 36px 30px; /* text column 253.9 (Figma) */
		border-radius: 14.22px;
	}

	.ssf-fcards__icon {
		height: 111px;
	}

	.ssf-fcards .ssf-fcards__icon img {
		max-height: 111px;
	}

	.ssf-fcards .ssf-fcards__title {
		padding-top: 41.05px;
		font-size: 20px;
		font-weight: 500;
		line-height: 28px;
	}

	.ssf-fcards .ssf-fcards__text {
		padding-top: 42.37px;
	}

	.ssf-fcards__list {
		gap: 10.67px;
		padding-top: 35.42px;
	}

	.ssf-fcards__item {
		gap: 11.38px;
	}

	.ssf-fcards__check {
		width: 17.07px;
		height: 17.07px;
	}

	.ssf-fcards .ssf-fcards__item-text.ssf-trim {
		margin-block: 0;
	}

	.ssf-fcards--compact .ssf-fcards__card {
		padding: 40px 25px 40px 31px; /* text column 251 (Figma) */
	}

	.ssf-fcards--compact .ssf-fcards__icon {
		height: 72px;
	}

	.ssf-fcards--compact .ssf-fcards .ssf-fcards__icon img {
		max-height: 72px;
	}

	.ssf-fcards--compact .ssf-fcards .ssf-fcards__title {
		padding-top: 44.26px;
		font-size: 22px;
		font-weight: 400;
		line-height: 30px;
	}

	.ssf-fcards--compact .ssf-fcards .ssf-fcards__text {
		padding-top: 29.74px;
	}

	/* Native video — Medlemskap 245:587: 960×591.8 (not 16:9: the player
	   letterboxes slightly once it plays) */
	.elementor-widget-video.ssf-video .elementor-wrapper {
		aspect-ratio: 960 / 591.8;
	}

	.elementor-widget-video.ssf-video .elementor-wrapper,
	.elementor-widget-video.ssf-video .elementor-custom-embed-play {
		border-radius: 14.22px;
	}

	/* Icon list — Att lita på 245:611: rows 138 apart, 99.6px icons 12 in, text
	   (H5 20/28 Medium) 38 below each line at x 111; image 470×602 beside it */
	.ssf-ilist {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.ssf-ilist__row {
		min-height: 138px;
		padding: 43px 0 0 111px;
	}

	.ssf-ilist__icon {
		left: 12px;
		width: 99.6px;
		height: 99.6px;
	}

	.ssf-ilist .ssf-ilist__text {
		max-width: 347px;
		font-size: 20px;
		font-weight: 500;
		line-height: 28px;
	}

	.ssf-ilist__media {
		aspect-ratio: 470 / 602.1;
		min-height: 0;
		border-radius: 14.22px;
	}

	/* Member search — 245:96: field inset 32 in a 470 column, list 546 tall 18
	   below it, map 470×626; cards r14.22, 15.6 padding, H5 name + KONTAKT */
	.ssf-msearch {
		grid-template-columns: 1fr 1fr;
		min-height: 626px;
	}

	.ssf-msearch__side {
		padding: 10px 0 0;
	}

	.ssf-msearch__form {
		margin: 0 32px;
	}

	.ssf-msearch .ssf-msearch__input[type] {
		padding-right: 52px;
	}

	.ssf-msearch button.ssf-msearch__submit {
		top: 10.35px;
		right: 10.35px;
		width: 31.3px;
		height: 31.3px;
	}

	.ssf-msearch__submit svg {
		width: 13.5px;
		height: 14.2px;
	}

	.ssf-msearch .ssf-msearch__list {
		gap: 12px;
		height: 546px;
		margin-top: 18px;
	}

	.ssf-msearch__card {
		padding: 21.65px 15.6px 15.6px; /* name line box 15.6 down = its cap 21.65 */
		border-radius: 14.22px;
		box-shadow: 0 2.8px 1.4px rgba( 0, 0, 0, 0.1 );
	}

	.ssf-msearch .ssf-msearch__name,
	.ssf-msearch .ssf-msearch__label {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px;
	}

	.ssf-msearch button.ssf-msearch__toggle {
		top: -6px;
		width: 17.1px;
		height: 17.1px;
	}

	.ssf-msearch .ssf-msearch__desc {
		padding-top: 38.97px;
	}

	.ssf-msearch__body {
		padding: 38.63px 0 25px;
	}

	.ssf-msearch .ssf-msearch__contact {
		gap: 9.2px;
		padding-top: 21.93px;
	}

	.ssf-msearch__contact li {
		gap: 14.2px;
	}

	.ssf-msearch__contact svg {
		width: 17.1px;
		height: 17.1px;
	}

	.ssf-msearch__body--logo .ssf-msearch__contact {
		padding-right: 143px;
	}

	.ssf-msearch .ssf-msearch__logo {
		bottom: 25px;
		max-width: 129.3px;
		max-height: 44.1px;
	}

	.ssf-msearch__map {
		border-radius: 14.22px;
	}
}