/*
 * Cyberfabriken – designsystem
 *
 * Laddas efter Blocksys stilar (se inc/setup.php) och som redigerarstil.
 * Struktur: 1 typsnitt · 2 tokens · 3 grund · 4 sektioner · 5 komponenter
 *           6 sidhuvud · 7 sidfot · 8 kalender · 9 tillgänglighet
 *
 * Färger och mått styrs från :root. Komponenterna väljs i redigeraren som blockstilar
 * (t.ex. "Sektion – mörk", "Arbetssteg") eller via klasserna i blockmönstren.
 */

/* 1. Typsnitt: Inter (OFL), latinsk delmängd, lokalt i temat ------------------------- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens ------------------------------------------------------------------------ */
:root {
	--cf-navy: #101b2d;
	--cf-navy-2: #18263c;
	--cf-navy-deep: #0b1422;
	--cf-bg: #f5f7fa;
	--cf-white: #fff;
	--cf-teal: #007f86;
	--cf-teal-dark: #006b72;
	--cf-teal-light: #5cc8cd;
	--cf-text: #182438;
	--cf-muted: #4b5a6e;
	--cf-line: #d9e0e8;
	--cf-on-dark: #c9d3e0;
	--cf-line-dark: rgba(255, 255, 255, 0.16);

	--cf-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cf-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--cf-container: 1200px;
	--cf-measure: 68ch;
	--cf-gutter: clamp(20px, 4.5vw, 40px);
	--cf-section-y: clamp(64px, 8vw, 120px);
	--cf-space-s: 0.75rem;
	--cf-space-m: 1.5rem;
	--cf-space-l: clamp(2rem, 4vw, 3rem);
	--cf-radius: 4px;
	--cf-overlap: clamp(56px, 9vw, 140px);
	--cf-ease: 160ms ease;

	/* Blocksy-variabler som designsystemet tar över */
	--theme-font-family: var(--cf-font);
	--theme-text-color: var(--cf-text);
	--theme-headings-color: var(--cf-navy);
	--theme-link-initial-color: var(--cf-teal-dark);
	--theme-link-hover-color: var(--cf-navy);
	--theme-border-color: var(--cf-line);
	--theme-content-spacing: 1.25em;
	--theme-button-background-initial-color: var(--cf-teal);
	--theme-button-background-hover-color: var(--cf-teal-dark);
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
	--theme-button-border-radius: var(--cf-radius);
	--theme-button-min-height: 48px;
	--theme-button-padding: 12px 22px;
	--theme-button-font-weight: 600;
	--theme-button-font-size: 1rem;
}

/* 3. Grund ------------------------------------------------------------------------- */
body {
	font-family: var(--cf-font);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--cf-text);
	background: var(--cf-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	--theme-font-family: var(--cf-font);
	--theme-font-weight: 700;
	color: var(--cf-navy);
	text-wrap: balance;
}
h1 { --theme-font-size: clamp(2.25rem, 1.55rem + 2.9vw, 4rem); --theme-line-height: 1.06; letter-spacing: -0.028em; }
h2 { --theme-font-size: clamp(1.75rem, 1.35rem + 1.55vw, 2.625rem); --theme-line-height: 1.14; letter-spacing: -0.022em; }
h3 { --theme-font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem); --theme-line-height: 1.3; letter-spacing: -0.012em; --theme-font-weight: 650; }
h4 { --theme-font-size: 1.0625rem; --theme-line-height: 1.4; --theme-font-weight: 650; }

p { text-wrap: pretty; }

.entry-content a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--cf-teal-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--cf-ease), text-decoration-color var(--cf-ease);
}
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):hover { color: var(--cf-navy); text-decoration-thickness: 2px; }

/* Sidor byggs av fullbreda sektioner; Blocksys sidmarginaler tas bort på innehållssidor. */
.page .site-main .entry-content > .alignfull,
.cf-404 > .alignfull { margin-block: 0; }
.page .site-main article > .entry-content > :first-child { margin-block-start: 0; }
.page .site-main .ct-container-full[data-content="normal"] { padding-block: 0; }

/* 4. Sektioner --------------------------------------------------------------------- */
.wp-block-group.is-style-section-light,
.wp-block-group.is-style-section-white,
.wp-block-group.is-style-section-dark {
	padding: var(--cf-section-y) var(--cf-gutter);
	margin-block: 0;
}
.wp-block-group.is-style-section-light { background: var(--cf-bg); }
.wp-block-group.is-style-section-white { background: var(--cf-white); }
.wp-block-group.is-style-section-white + .wp-block-group.is-style-section-white { padding-block-start: 0; }
.wp-block-group.is-style-section-dark {
	background: var(--cf-navy);
	color: var(--cf-on-dark);
	--theme-headings-color: #fff;
	--theme-text-color: var(--cf-on-dark);
}
.is-style-section-dark :is(h1, h2, h3, h4) { color: #fff; }
.is-style-section-dark a:not(.wp-element-button):not(.wp-block-button__link) { color: #fff !important; text-decoration-color: var(--cf-teal-light) !important; }

/* Innehållsbredd i sektioner: följer containern; text hålls till läsbar radlängd. */
.cf-wrap,
.is-style-section-light > *,
.is-style-section-white > *,
.is-style-section-dark > * {
	max-width: var(--cf-container);
	margin-inline: auto;
}
/* Smalare element linjeras mot containerns vänsterkant i stället för att centreras. */
:is(.is-style-section-light, .is-style-section-white, .is-style-section-dark) > :is(h1, h2, h3, h4, p, ul, ol, blockquote, .wp-block-buttons, .wp-block-shortcode) {
	margin-inline: max(0px, calc((100% - var(--cf-container)) / 2)) auto;
}
.cf-measure { max-width: 760px; }
.cf-section-head { margin-block-end: var(--cf-space-l); }
.cf-section-head > * { max-width: 760px; }
.cf-section-head > :last-child { margin-block-end: 0; }
.cf-center { text-align: center; margin-inline: auto; }

/* Rytm inne i sektioner */
:is(.is-style-section-light, .is-style-section-white, .is-style-section-dark) :is(h2, h3) { margin-block: 0 0.6em; }
:is(.is-style-section-light, .is-style-section-white, .is-style-section-dark) p { margin-block: 0 1em; }
:is(.is-style-section-light, .is-style-section-white, .is-style-section-dark) > :last-child,
.wp-block-column > :last-child,
.wp-block-media-text__content > :last-child { margin-block-end: 0; }

/* 5. Komponenter ------------------------------------------------------------------- */

/* Överrubrik: mono, versaler, kort linje före */
p.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block: 0 1.25rem !important;
	font-family: var(--cf-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cf-teal-dark);
}
p.is-style-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 1px;
	background: currentColor;
	flex: none;
}
.is-style-section-dark p.is-style-eyebrow { color: var(--cf-teal-light); }

p.is-style-lead {
	font-size: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);
	line-height: 1.6;
	color: var(--cf-muted);
	max-width: 62ch;
}
.is-style-section-dark p.is-style-lead { color: var(--cf-on-dark); }
p.is-style-fineprint { font-size: 0.875rem; color: var(--cf-muted); }
.is-style-section-dark p.is-style-fineprint { color: var(--cf-on-dark); }

/* Textlänk med pil */
p.is-style-more a {
	font-weight: 600;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}
p.is-style-more a::after {
	content: "→";
	transition: transform var(--cf-ease);
}
p.is-style-more a:hover::after { transform: translateX(3px); }

/* Knappar */
.wp-block-buttons { gap: 0.75rem; margin-block-start: 2rem; }
.wp-block-button .wp-block-button__link {
	border-radius: var(--cf-radius);
	font-weight: 600;
	padding: 0.8rem 1.4rem;
	line-height: 1.3;
	transition: background-color var(--cf-ease), color var(--cf-ease), border-color var(--cf-ease);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--cf-navy);
	border: 1.5px solid var(--cf-navy);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--cf-navy); color: #fff; }
.is-style-section-dark .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.is-style-section-dark .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--cf-navy); border-color: #fff; }

/* Startsidans hero: text på mörk yta, bild som går ut i kanten */
.cf-hero.wp-block-group { padding: 0; }
.cf-hero > .wp-block-columns { max-width: none; margin: 0; gap: 0; align-items: stretch; }
.cf-hero__text {
	padding: clamp(56px, 9vw, 128px) var(--cf-gutter) clamp(48px, 7vw, 112px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cf-hero h1 { margin-block: 0 1.5rem; max-width: 13ch; }
.cf-hero p.is-style-lead { color: var(--cf-on-dark); }
.cf-hero__media { position: relative; min-height: 300px; }
.cf-hero__media .wp-block-image { margin: 0; height: 100%; }
.cf-hero__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 960px) {
	.cf-hero > .wp-block-columns { min-height: min(78vh, 720px); }
	.cf-hero__text { padding-inline-start: max(var(--cf-gutter), calc((100% - var(--cf-container)) / 2)); padding-inline-end: clamp(32px, 5vw, 80px); }
	.cf-hero__media img { position: absolute; inset: 0; aspect-ratio: auto; }
}

/* Undersidornas sidhuvud, med valfri bild som överlappar kanten */
.cf-pagehead.wp-block-group { padding-block: clamp(56px, 8vw, 112px) clamp(56px, 7vw, 96px); }
.cf-pagehead h1 { margin-block: 0 1.25rem; max-width: 20ch; }
.cf-pagehead.has-overlap { padding-block-end: calc(var(--cf-overlap) + clamp(40px, 5vw, 72px)); }
.cf-pagehead.has-overlap + .cf-overlap { margin-block: calc(var(--cf-overlap) * -1) 0 !important; position: relative; z-index: 1; }
.cf-overlap { padding-inline: var(--cf-gutter); max-width: calc(var(--cf-container) + 2 * var(--cf-gutter)) !important; margin-inline: auto !important; width: 100% !important; }
.cf-overlap img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; border-radius: var(--cf-radius); }
.cf-overlap + .wp-block-group { padding-block-start: clamp(48px, 6vw, 88px); }
@media (max-width: 781px) { .cf-overlap img { aspect-ratio: 4 / 3; } }

/* Brödsmulor */
.cf-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 1.75rem; padding: 0; font-size: 0.875rem; }
.cf-breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 0.5rem; color: var(--cf-muted); }
.is-style-section-dark .cf-breadcrumbs li::after { color: var(--cf-on-dark); }
.cf-breadcrumbs [aria-current] { color: inherit; opacity: 0.85; }

/* Introduktion: rubrik och text i två kolumner under en linje */
.cf-intro.wp-block-columns { border-top: 1px solid var(--cf-line); padding-top: var(--cf-space-l); gap: var(--cf-space-l); }
.cf-intro h2 { max-width: 16ch; }

/* Kolumner med linjer och nummer */
.wp-block-columns.is-style-ruled { gap: clamp(1.5rem, 3vw, 3rem); }
.wp-block-columns.is-style-ruled > .wp-block-column { border-top: 1px solid var(--cf-navy); padding-top: 1.5rem; }
.is-style-section-dark .wp-block-columns.is-style-ruled > .wp-block-column { border-top-color: var(--cf-line-dark); }
.cf-index {
	font-family: var(--cf-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--cf-teal-dark);
	margin-block: 0 1.25rem !important;
}
.is-style-section-dark .cf-index { color: var(--cf-teal-light); }

/* Arbetssteg: numrerad lista med vertikal linje */
ol.is-style-steps, ul.is-style-steps {
	list-style: none;
	counter-reset: cf-step;
	margin-block: 2rem 0;
	padding: 0;
}
.is-style-steps > li {
	counter-increment: cf-step;
	position: relative;
	padding: 0 0 1.75rem 3.5rem;
	margin: 0;
}
.is-style-steps > li:last-child { padding-block-end: 0; }
.is-style-steps > li::before {
	content: counter(cf-step, decimal-leading-zero);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.1rem;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	display: grid;
	place-items: center;
	font-family: var(--cf-mono);
	font-size: 0.8125rem;
	color: var(--cf-teal-dark);
	border: 1px solid var(--cf-teal);
	border-radius: var(--cf-radius);
	background: var(--cf-white);
}
.is-style-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: calc(1.125rem - 0.5px);
	inset-block: 2.5rem 0.25rem;
	border-inline-start: 1px solid var(--cf-line);
}
.is-style-steps strong { display: block; color: var(--cf-navy); font-size: 1.0625rem; margin-block-end: 0.15rem; }
.is-style-section-dark .is-style-steps > li::before { background: var(--cf-navy); color: var(--cf-teal-light); border-color: var(--cf-teal-light); }
.is-style-section-dark .is-style-steps strong { color: #fff; }
.is-style-section-dark .is-style-steps > li:not(:last-child)::after { border-color: var(--cf-line-dark); }

/* Specifikation: tvåspaltig lista med linjer och index */
ul.is-style-spec, ol.is-style-spec {
	list-style: none;
	counter-reset: cf-spec;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: clamp(2rem, 5vw, 4.5rem);
	margin-block: 0;
	padding: 0;
}
@media (min-width: 782px) { ol.is-style-spec, ul.is-style-spec { grid-template-columns: 1fr 1fr; } }
.is-style-spec > li {
	counter-increment: cf-spec;
	border-top: 1px solid var(--cf-line);
	padding: 1.5rem 0 1.75rem 3rem;
	position: relative;
	margin: 0;
	color: var(--cf-muted);
}
.is-style-spec > li::before {
	content: counter(cf-spec, decimal-leading-zero);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 1.6rem;
	font-family: var(--cf-mono);
	font-size: 0.8125rem;
	color: var(--cf-teal-dark);
}
.is-style-spec strong { display: block; color: var(--cf-navy); font-size: 1.125rem; font-weight: 650; margin-block-end: 0.35rem; letter-spacing: -0.01em; }
.is-style-section-dark .is-style-spec > li { border-color: var(--cf-line-dark); color: var(--cf-on-dark); }
.is-style-section-dark .is-style-spec strong { color: #fff; }
.is-style-section-dark .is-style-spec > li::before { color: var(--cf-teal-light); }

/* Länklista: hela raden är klickbar, länktexten är radens namn */
ul.is-style-link-list { list-style: none; margin-block: 0; padding: 0; border-top: 1px solid var(--cf-navy); }
.is-style-link-list > li {
	position: relative;
	display: grid;
	gap: 0.25rem 2rem;
	padding: 1.5rem 3rem 1.5rem 0;
	margin: 0;
	border-bottom: 1px solid var(--cf-line);
	color: var(--cf-muted);
	transition: background-color var(--cf-ease);
}
@media (min-width: 782px) { .is-style-link-list > li { grid-template-columns: minmax(14rem, 1fr) 2fr; align-items: baseline; } }
.is-style-link-list > li > a {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	font-weight: 650;
	letter-spacing: -0.015em;
	color: var(--cf-navy) !important;
	text-decoration: none !important;
}
.is-style-link-list > li > a::before { content: ""; position: absolute; inset: 0; }
.is-style-link-list > li::after {
	content: "→";
	position: absolute;
	inset-inline-end: 0.25rem;
	inset-block-start: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	color: var(--cf-teal);
	transition: transform var(--cf-ease);
}
.is-style-link-list > li:hover::after { transform: translate(4px, -50%); }
.is-style-link-list > li:hover > a { color: var(--cf-teal-dark) !important; }
.is-style-link-list > li:focus-within { outline: 3px solid var(--cf-teal); outline-offset: 2px; }
.is-style-link-list > li > a:focus-visible { outline: none; }

/* Delad layout: två kolumner med generöst mellanrum */
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.cf-split.wp-block-columns { gap: var(--cf-space-l) clamp(2.5rem, 6vw, 6rem); }
.cf-split .wp-block-image { margin: 0; }
.cf-tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 781px) { .cf-tall img { aspect-ratio: 3 / 2; } }
.cf-space-top { margin-block-start: var(--cf-space-l) !important; }
.cf-list-title { font-size: 0.8125rem !important; font-family: var(--cf-mono); font-weight: 500 !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-muted) !important; margin-block-end: 1rem !important; }

/* Rader: rubrik och text bredvid varandra med linjer */
.cf-rows { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--cf-navy); }
.cf-rows > h3 { margin: 0 !important; padding-block: 1.25rem 0.25rem; font-size: 1.125rem; border-top: 1px solid var(--cf-line); }
.cf-rows > h3:first-child { border-top: 0; }
.cf-rows > p { margin: 0 !important; padding-block: 0 1.25rem; color: var(--cf-muted); }
@media (min-width: 782px) {
	.cf-rows { grid-template-columns: minmax(10rem, 1fr) 2fr; column-gap: 2rem; }
	.cf-rows > h3, .cf-rows > p { padding-block: 1.25rem; border-top: 1px solid var(--cf-line); }
	.cf-rows > h3:first-child, .cf-rows > h3:first-child + p { border-top: 0; }
}
.is-style-section-dark .cf-rows { border-top-color: var(--cf-line-dark); }
.is-style-section-dark .cf-rows > :is(h3, p) { border-color: var(--cf-line-dark); }
.is-style-section-dark .cf-rows > p { color: var(--cf-on-dark); }

.cf-demo-list { margin-block: 0; }

/* Media och text */
.wp-block-media-text { gap: 0; }
.wp-block-media-text .wp-block-media-text__content { padding: clamp(1.75rem, 4vw, 4rem) 0 0; }
@media (min-width: 782px) {
	.wp-block-media-text .wp-block-media-text__content { padding: 0 0 0 clamp(2rem, 5vw, 5rem); }
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 0 clamp(2rem, 5vw, 5rem) 0 0; }
}
.wp-block-media-text__media img { border-radius: var(--cf-radius); }
.wp-block-media-text.is-image-fill-element .wp-block-media-text__media { min-height: 420px; }

/* Etikett: märker demo, exempel och produktinformation */
.cf-tag {
	display: inline-block;
	font-family: var(--cf-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cf-teal-dark);
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: 0.2rem 0.5rem;
	line-height: 1.4;
	margin-block: 0 0.75rem !important;
}
.cf-tag--neutral { color: var(--cf-muted); }
.is-style-section-dark .cf-tag { color: var(--cf-teal-light); }

/* Demorader på översiktssidan */
.cf-demo-row.wp-block-columns {
	border-top: 1px solid var(--cf-line);
	padding-block: 2rem;
	margin-block: 0 !important;
	gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
}
.cf-demo-row:last-of-type { border-bottom: 1px solid var(--cf-line); }
.cf-demo-row h3 { margin-block: 0 0.5rem; }
.cf-demo-row p { color: var(--cf-muted); }
@media (min-width: 782px) { .cf-demo-row > .wp-block-column:last-child { text-align: end; } }

/* Informationsruta */
.wp-block-group.is-style-note {
	border-inline-start: 3px solid var(--cf-teal);
	background: var(--cf-bg);
	padding: 1.25rem 1.5rem;
	border-radius: 0 var(--cf-radius) var(--cf-radius) 0;
}
.is-style-section-light .wp-block-group.is-style-note { background: var(--cf-white); }
.is-style-section-dark .wp-block-group.is-style-note { background: var(--cf-navy-2); }
.wp-block-group.is-style-note > :last-child { margin-block-end: 0; }
.wp-block-group.is-style-note h3 { font-size: 1.0625rem; margin-block-end: 0.35rem; }

/* Kort (används på komponentsidan) */
.wp-block-group.is-style-card {
	background: var(--cf-white);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	padding: 1.5rem;
	height: 100%;
}
.wp-block-group.is-style-card > :last-child { margin-block-end: 0; }

/* Flöde: steg i rad med pil mellan (WF Security) */
.cf-flow.wp-block-columns { gap: 0; counter-reset: cf-flow; }
.cf-flow > .wp-block-column { counter-increment: cf-flow; position: relative; padding: 1.5rem 1.5rem 1.5rem 0; border-top: 1px solid var(--cf-line-dark); }
.cf-flow > .wp-block-column::before { content: counter(cf-flow, decimal-leading-zero); display: block; font-family: var(--cf-mono); font-size: 0.8125rem; color: var(--cf-teal-light); margin-block-end: 1rem; }
@media (min-width: 782px) {
	.cf-flow > .wp-block-column:not(:last-child)::after { content: "→"; position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1.25rem; color: var(--cf-teal-light); }
}

/* Jämförelse i två kolumner */
.cf-compare.wp-block-columns { gap: 0; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); }
.cf-compare > .wp-block-column { padding: clamp(1.5rem, 3vw, 2.5rem); }
.cf-compare > .wp-block-column + .wp-block-column { border-top: 1px solid var(--cf-line); }
@media (min-width: 782px) { .cf-compare > .wp-block-column + .wp-block-column { border-top: 0; border-inline-start: 1px solid var(--cf-line); } }
.cf-compare ul { padding-inline-start: 1.1rem; margin: 0; }
.cf-compare li { margin-block-end: 0.4rem; }

/* Tabell */
.entry-content .wp-block-table table { border: 0; border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.entry-content .wp-block-table :is(th, td) { border: 0; border-bottom: 1px solid var(--cf-line); padding: 0.85rem 1rem 0.85rem 0; text-align: start; vertical-align: top; }
.entry-content .wp-block-table thead th { font-family: var(--cf-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--cf-muted); border-bottom: 1px solid var(--cf-navy); }
.wp-block-table figcaption { font-size: 0.875rem; color: var(--cf-muted); text-align: start; }

/* Utfällbara informationsrutor */
.wp-block-details { border-top: 1px solid var(--cf-line); padding: 1.1rem 0; margin-block: 0 !important; }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--cf-line); }
.wp-block-details summary { cursor: pointer; font-weight: 650; color: var(--cf-navy); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-family: var(--cf-mono); color: var(--cf-teal-dark); font-weight: 400; }
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > :not(summary) { margin-block: 0.75rem 0; color: var(--cf-muted); }

/* Citat */
.wp-block-quote { border-inline-start: 3px solid var(--cf-teal); padding-inline-start: 1.5rem; margin-block: var(--cf-space-l) 0; }
.wp-block-quote p { font-size: 1.25rem; line-height: 1.5; color: var(--cf-navy); font-weight: 500; }
.wp-block-quote cite { font-size: 0.875rem; color: var(--cf-muted); font-style: normal; }

/* Avdelare */
.wp-block-separator { border: 0; border-top: 1px solid var(--cf-line); opacity: 1; }

/* Bilder i innehåll */
.entry-content .wp-block-image img { border-radius: var(--cf-radius); }
.entry-content .wp-block-image figcaption { font-size: 0.875rem; color: var(--cf-muted); margin-block-start: 0.75rem; }

/* Webbplatsindex */
.cf-site-index { display: grid; gap: var(--cf-space-l) clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 782px) { .cf-site-index { grid-template-columns: 1fr 1fr; } }
.cf-site-index__group h2 { font-size: 0.8125rem; font-family: var(--cf-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-teal-dark); border-bottom: 1px solid var(--cf-navy); padding-block-end: 0.75rem; margin-block: 0 !important; }
.cf-site-index ul { list-style: none; margin: 0; padding: 0; }
.cf-site-index li { border-bottom: 1px solid var(--cf-line); padding: 1rem 0; margin: 0; }
.cf-site-index li li { border: 0; padding: 0.75rem 0 0 1.25rem; position: relative; }
.cf-site-index li li::before { content: "└"; position: absolute; inset-inline-start: 0; color: var(--cf-line); font-family: var(--cf-mono); }
.cf-site-index a { font-weight: 650; font-size: 1.0625rem; }
.cf-site-index__desc { display: block; color: var(--cf-muted); font-size: 0.9375rem; margin-block-start: 0.25rem; }

/* Lista över demohändelser */
.cf-events { list-style: none; margin-block: 0; padding: 0; border-top: 1px solid var(--cf-navy); }
.cf-events__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.15rem 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--cf-line);
	margin: 0;
}
.cf-events__item time { font-weight: 650; color: var(--cf-navy); }
.cf-events__item time::first-letter { text-transform: uppercase; }
.cf-events__time { font-family: var(--cf-mono); font-size: 0.875rem; color: var(--cf-muted); justify-self: end; }
.cf-events__item a { grid-column: 1 / -1; }
.cf-events__tag { grid-column: 1 / -1; font-family: var(--cf-mono); font-size: 0.75rem; color: var(--cf-muted); letter-spacing: 0.04em; }
.is-style-section-dark .cf-events { border-top-color: var(--cf-line-dark); }
.is-style-section-dark .cf-events__item { border-color: var(--cf-line-dark); }
.is-style-section-dark .cf-events__item time { color: #fff; }
.is-style-section-dark .cf-events__time, .is-style-section-dark .cf-events__tag { color: var(--cf-on-dark); }

/* 404 */
.cf-404 { padding: 0; }

/* 6. Sidhuvud ------------------------------------------------------------------------ */
#header { border-bottom: 1px solid var(--cf-line); background: var(--cf-white); }
#header [data-row*="top"] { background: var(--cf-navy); color: var(--cf-on-dark); }
#header [data-row*="top"] .ct-header-text { font-size: 0.8125rem; line-height: 1.4; color: var(--cf-on-dark); }
#header [data-row*="top"] .ct-header-text p { margin: 0; }
@media (max-width: 599px) { #header [data-row*="top"] .ct-header-text { font-size: 0.75rem; } }
#header [data-row*="top"] .ct-header-text strong { color: #fff; font-weight: 600; }
#header .site-logo-container svg,
#header .site-logo-container img { height: 34px; width: auto; max-height: none; }
@media (max-width: 999px) { #header .site-logo-container svg, #header .site-logo-container img { height: 28px; } }

#header .header-menu-1 .menu > li > .ct-menu-link {
	font-size: 0.9375rem;
	font-weight: 550;
	text-transform: none;
	letter-spacing: 0;
	color: var(--cf-text);
	position: relative;
	transition: color var(--cf-ease);
}
#header .header-menu-1 .menu > li > .ct-menu-link::after {
	content: "";
	position: absolute;
	inset-inline: var(--menu-item-padding, 12px);
	inset-block-end: 0.6rem;
	block-size: 2px;
	background: var(--cf-teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cf-ease);
}
#header .header-menu-1 .menu > li > .ct-menu-link:hover { color: var(--cf-navy); }
#header .header-menu-1 .menu > li > .ct-menu-link:hover::after,
#header .header-menu-1 .menu > li:is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > .ct-menu-link::after { transform: scaleX(1); }
#header .header-menu-1 .menu > li:is(.current-menu-item, .current-menu-ancestor) > .ct-menu-link { color: var(--cf-navy); }

/* Mobilmeny */
/* Blocksys dynamiska CSS sätter panelens bakgrund med högre specificitet. */
#offcanvas .ct-panel-inner { background-color: var(--cf-navy) !important; }
#offcanvas .mobile-menu a { color: #fff; font-size: 1.25rem; font-weight: 600; }
#offcanvas .mobile-menu .current-menu-item > a,
#offcanvas .mobile-menu .current-menu-item > .ct-sub-menu-parent > a { color: var(--cf-teal-light); }
#offcanvas .mobile-menu li { border-bottom: 1px solid var(--cf-line-dark); }
#offcanvas .ct-toggle-close { --theme-icon-color: #fff; }

/* 7. Sidfot ------------------------------------------------------------------------- */
#footer { background: var(--cf-navy-deep); color: var(--cf-on-dark); font-size: 0.9375rem; border-top: 1px solid var(--cf-line-dark); }
#footer [data-row*="middle"], #footer [data-row*="bottom"] { background: var(--cf-navy-deep) !important; }
#footer [data-row*="middle"] > div { --container-spacing: clamp(56px, 7vw, 88px); }
#footer [data-row*="bottom"] { border-top: 1px solid var(--cf-line-dark); }
#footer [data-row*="bottom"] > div { --container-spacing: 20px; }
#footer [data-column] { --horizontal-alignment: flex-start; --vertical-alignment: flex-start; --text-horizontal-alignment: start; }
#footer .ct-widget { margin-block: 0 1rem; }
#footer .ct-widget > :last-child { margin-block-end: 0; }
#footer [data-id="menu"] { --horizontal-alignment: flex-start; --menu-item-alignment: flex-start; margin-block-end: 1rem; }
#footer [data-id="menu"] ul { --theme-text-transform: none; --theme-font-size: 0.9375rem; --theme-font-weight: 500; --theme-line-height: 1.5; }
#footer :is(h2, h3, .widget-title) {
	font-family: var(--cf-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cf-teal-light);
	margin-block: 0 1.25rem;
}
#footer p { color: var(--cf-on-dark); margin-block: 0 1rem; max-width: 40ch; }
#footer a { color: #fff; text-decoration: none; transition: color var(--cf-ease); }
#footer a:hover { color: var(--cf-teal-light); text-decoration: underline; text-underline-offset: 0.2em; }
#footer p a { text-decoration: underline; text-decoration-color: var(--cf-teal-light); text-underline-offset: 0.2em; }
#footer .cf-footer-logo { margin-block: 0 1.5rem; }
#footer .cf-footer-logo img { width: 220px; height: auto; }
#footer [data-id="menu"] .menu { flex-direction: column; align-items: flex-start; gap: 0.6rem; margin: 0; }
#footer [data-id="menu"] .menu > li > a { padding: 0; font-size: 0.9375rem; color: #fff; font-weight: 500; }
#footer [data-id="menu"] { --menu-items-spacing: 0; }
#footer .ct-footer-copyright { font-size: 0.8125rem; color: var(--cf-on-dark); }
#footer .ct-footer-copyright p { margin: 0; max-width: none; }
#footer ul.cf-footer-links { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; }
#footer ul.cf-footer-links li { margin: 0; }
#footer ul.cf-footer-links a { font-weight: 500; }

/* 8. Kalender (wf-simple-calender) ------------------------------------------------- */
.cf-calendar { background: var(--cf-white); border: 1px solid var(--cf-line); border-radius: var(--cf-radius); padding: clamp(1rem, 3vw, 2rem); }
.cf-calendar .wf-calendar-wrapper { max-width: none; text-align: start; }
.cf-calendar .wf-calendar-nav { justify-content: space-between; margin: 0 0 1.25rem; }
.cf-calendar .wf-calendar-nav span { font-size: 1.25rem; font-weight: 700; color: var(--cf-navy); letter-spacing: -0.01em; }
.cf-calendar .wf-calendar-nav a {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	color: var(--cf-navy);
	font-size: 1.25rem;
	text-decoration: none;
}
.cf-calendar .wf-calendar-nav a:hover { border-color: var(--cf-navy); }
.cf-calendar .wf-calendar-header { background: transparent; border-bottom: 1px solid var(--cf-navy); font-family: var(--cf-mono); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cf-muted); padding: 0 0 0.5rem; }
.cf-calendar .wf-calendar { background: var(--cf-line); gap: 1px; border-bottom: 1px solid var(--cf-line); }
.cf-calendar .wf-calendar-day { background: var(--cf-white); aspect-ratio: 1 / 0.9; }
.cf-calendar .wf-calendar-day.empty { background: var(--cf-bg); }
.cf-calendar .wf-calendar-day-number { font-size: 0.8125rem; font-family: var(--cf-mono); }
.cf-calendar .wf-calendar-day-number.no-event { color: var(--cf-muted); font-size: 0.8125rem; }
.cf-calendar .wf-calendar-day-number.event { background: var(--cf-teal); color: #fff; border-radius: 2px; }
.cf-calendar .wf-calendar-day img { opacity: 0.92; }
.cf-calendar .wf-event-hover {
	width: 220px;
	height: auto;
	min-height: 100%;
	padding: 0.75rem;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	box-shadow: 0 8px 24px rgba(16, 27, 45, 0.12);
	font-size: 0.875rem;
	line-height: 1.4;
}
.cf-calendar .wf-event-hover a { color: var(--cf-navy); }
/* Detaljerna nås även med tangentbord */
.cf-calendar .wf-calendar-day:focus-within .wf-event-hover { display: block; }
@media (max-width: 781px) {
	/* På små skärmar ersätts hovringsrutan av listan under kalendern. */
	.cf-calendar .wf-event-hover { display: none !important; }
	.cf-calendar .wf-calendar-header { font-size: 0.6875rem; letter-spacing: 0.02em; }
}

/* Enskild händelse */
.single-wf_event .wf-event-single { max-width: var(--cf-container); margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--cf-gutter); }
.single-wf_event .wf-event-hero { border-radius: var(--cf-radius); overflow: hidden; }
.single-wf_event .wf-event-hero-overlay { background: rgba(16, 27, 45, 0.62) !important; }

/* 9. Tillgänglighet ------------------------------------------------------------------ */
:focus-visible { outline: 3px solid var(--cf-teal); outline-offset: 3px; }
.is-style-section-dark :focus-visible,
#footer :focus-visible,
#offcanvas :focus-visible,
#header [data-row*="top"] :focus-visible { outline-color: var(--cf-teal-light); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Redigeraren: visa mörka sektioner med rätt kontrast */
.editor-styles-wrapper .is-style-section-dark { color: var(--cf-on-dark); }