/* ==========================================================================
   Responsit – huvudstilmall
   ========================================================================== */

/* Rubriktypsnittet laddas från fonts.css, och bara när assets/fonts/BricolageGrotesque.woff2 finns
   (annars används systemets typsnitt, utan fel i konsolen). */

/* ---------- Färger och mått ---------- */
:root {
	--sund: #0c3550;
	--sund-deep: #082539;
	--hav: #1b6b8a;
	/* Samma färger för bakgrunder, med -bg i namnet så att DT-Darkmode behandlar dem som bakgrund (mörka ytor förblir mörka). */
	--sund-bg: #0c3550;
	--sund-deep-bg: #082539;
	--hav-bg: #1b6b8a;
	--signal-bg: #f4c247;
	--signal-hover-bg: #ffd56b;
	--signal: #f4c247;
	--signal-ink: #1d1600;
	--signal-hover: #ffd56b;
	--shade-rgb: 6, 26, 41;

	--bg: #eff2f1;
	--surface: #ffffff;
	--surface-2: #f6f8f7;
	--ink: #17191c;
	--muted: #55595f;
	--line: #d5dee2;
	--link: #155f7c;
	--link-hover: #0c3550;

	--on-dark: #f4f4f5;
	--on-dark-muted: #c7c9cd;
	/* Samma färger för text, med -text i namnet så att DT-Darkmode behandlar dem som text (ljus text förblir ljus). */
	--on-dark-text: #f4f4f5;
	--on-dark-muted-text: #c7c9cd;
	--signal-text: #f4c247;
	--signal-hover-text: #ffd56b;
	--on-dark-line: rgba(244, 244, 245, 0.18);

	--font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--header-h: 4.5rem;
	--admin-bar: var(--wp-admin--admin-bar--height, 0px);
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--wide: 75rem;
	--measure: 45rem;
	--section: clamp(4rem, 9vw, 7rem);
	--radius-s: 6px;
	--radius-m: 14px;

	color-scheme: light;
}

/* ---------- Grund ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--admin-bar) + 1rem);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--link-hover);
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--signal);
	outline-offset: 3px;
	border-radius: 2px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p {
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: calc(var(--admin-bar) + 0.75rem);
	left: 0.75rem;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.1rem;
	clip: auto;
	background: var(--signal-bg);
	color: var(--signal-ink);
	font-weight: 600;
	border-radius: var(--radius-s);
}

.site-main:focus {
	outline: none;
}

/* ---------- Knappar ---------- */
.button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 2.9rem;
	padding: 0.7rem 1.4rem;
	border: 2px solid var(--sund);
	border-radius: 999px;
	background: var(--sund-bg);
	color: var(--on-dark-text);
	font: 600 1rem/1.2 var(--font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
	background: var(--hav-bg);
	border-color: var(--hav);
	color: var(--on-dark-text);
	text-decoration: none;
}

.button--signal,
.contact input[type="submit"],
.contact button[type="submit"],
.contact .wpcf7-submit {
	background: var(--signal-bg);
	border-color: var(--signal);
	color: var(--signal-ink);
}

.button--signal:hover,
.contact input[type="submit"]:hover,
.contact button[type="submit"]:hover,
.contact .wpcf7-submit:hover {
	background: var(--signal-hover-bg);
	border-color: var(--signal-hover);
	color: var(--signal-ink);
}

.button--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff;
}

.button--ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--sund);
}

.button--outline,
.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: var(--link);
}

.button--outline:hover,
.is-style-outline > .wp-block-button__link:hover {
	background: var(--sund-bg);
	border-color: var(--sund);
	color: var(--on-dark-text);
}

.button--small {
	min-height: 2.5rem;
	padding: 0.5rem 1.1rem;
	font-size: 0.95rem;
}

/* ---------- Sidhuvud ---------- */
.site-header {
	position: sticky;
	top: var(--admin-bar);
	z-index: 100;
	height: var(--header-h);
	background: var(--menu-bg, var(--sund-bg));
	color: var(--menu-text, var(--on-dark-text));
	-webkit-backdrop-filter: var(--menu-blur, none);
	backdrop-filter: var(--menu-blur, none);
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.3s ease;
}

/* Glider undan uppåt när man rullar ned, och fram igen när man rullar upp (theme.js). */
.site-header.is-hidden {
	transform: translateY(calc(-100% - var(--admin-bar, 0px) - 2px));
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
	}
}

/* Överst på startsidan, ovanpå videon. */
.has-hero .site-header:not(.is-scrolled):not(.is-open) {
	background: var(--menu-top-bg, transparent);
	color: var(--menu-top-text, #fff);
	-webkit-backdrop-filter: var(--menu-top-blur, none);
	backdrop-filter: var(--menu-top-blur, none);
}

/* Oskärpa gör att den fasta mobilmenyn hamnar fel, så den stängs av när menyn är öppen. */
.site-header.is-open {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.site-header.is-scrolled {
	box-shadow: 0 1px 0 var(--menu-line, var(--on-dark-line));
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	height: 100%;
	max-width: calc(var(--wide) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.brand {
	display: inline-flex;
	align-items: center;
	margin-right: auto;
	color: inherit;
	text-decoration: none;
}

.brand:hover {
	color: inherit;
}

.brand__logo {
	display: block;
	width: auto;
	height: 2.6rem;
	max-width: 13rem;
	object-fit: contain;
}

.brand__name {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Meny */
.site-nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.site-nav .menu {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav .menu > li {
	position: relative;
}

.site-nav .menu a {
	display: block;
	padding: 0.5rem 0.8rem;
	border-radius: var(--radius-s);
	color: inherit;
	font-weight: 500;
	text-decoration: none;
}

.site-nav .menu a:hover {
	background: var(--menu-hover-bg, rgba(255, 255, 255, 0.1));
	color: var(--menu-hover-text, inherit);
}

.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a {
	box-shadow: inset 0 -2px 0 var(--menu-hover, var(--signal));
	border-radius: 0;
}

.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 14rem;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: var(--menu-solid-bg, var(--sund-deep-bg));
	color: var(--menu-text, var(--on-dark-text));
	border-radius: var(--radius-s);
	box-shadow: 0 12px 30px rgba(4, 18, 28, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.site-nav .menu > li:hover > .sub-menu,
.site-nav .menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-nav__tools {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.25rem;
	border: 0;
	background: none;
	color: inherit;
	font: 600 1rem var(--font-body);
	cursor: pointer;
}

.nav-toggle__icon {
	position: relative;
	display: block;
	width: 1.4rem;
	height: 0.95rem;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after,
.nav-toggle__icon span {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__icon::before { top: 0; }
.nav-toggle__icon span { top: calc(50% - 1px); }
.nav-toggle__icon::after { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(0.43rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-0.43rem) rotate(-45deg); }

@media (max-width: 959px) {
	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		position: fixed;
		top: calc(var(--header-h) + var(--admin-bar));
		right: 0;
		bottom: 0;
		left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2rem;
		padding: 1.5rem var(--gutter) 3rem;
		overflow-y: auto;
		background: var(--menu-solid-bg, var(--sund-bg));
		color: var(--menu-text, var(--on-dark-text));
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease, visibility 0.2s;
	}

	.site-header.is-open .site-nav {
		visibility: visible;
		opacity: 1;
	}

	.site-nav .menu {
		flex-direction: column;
		gap: 0;
	}

	.site-nav .menu a {
		padding: 0.85rem 0;
		border-bottom: 1px solid var(--menu-line, var(--on-dark-line));
		border-radius: 0;
		font-family: var(--font-display);
		font-size: 1.35rem;
	}

	.site-nav .menu a:hover {
		background: none;
	}

	.site-nav .current-menu-item > a,
	.site-nav .current_page_item > a {
		box-shadow: inset 3px 0 0 var(--menu-hover, var(--signal));
		padding-left: 0.9rem;
	}

	.site-nav .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 1rem;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav .sub-menu a {
		font-family: var(--font-body);
		font-size: 1.05rem;
	}

	.site-nav__tools {
		justify-content: space-between;
	}

	body.nav-open {
		overflow: hidden;
	}
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 100vh;
	min-height: 100svh;
	margin-top: calc(-1 * var(--header-h));
	overflow: hidden;
	min-height: 100dvh;
	background: var(--sund-deep-bg) var(--hero-poster, none) center / cover no-repeat;
	color: #fff;
	isolation: isolate;
}

.admin-bar .hero {
	min-height: calc(100svh - var(--admin-bar));
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero--no-video .hero__video {
	display: none;
}

.hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(var(--shade-rgb), 0.9) 0%, rgba(var(--shade-rgb), 0) 60%),
		linear-gradient(to right, rgba(var(--shade-rgb), 0.55) 0%, rgba(var(--shade-rgb), 0) 70%),
		rgba(var(--shade-rgb), var(--hero-shade, 0.45));
}

.hero__content {
	width: 100%;
	max-width: calc(var(--wide) + 2 * var(--gutter));
	margin: 0 auto;
	padding: calc(var(--header-h) + 4rem) var(--gutter) clamp(5.5rem, 12vh, 8.5rem);
}

.hero__title {
	max-width: 11ch;
	margin: 0 0 1.25rem;
	font-size: clamp(3rem, 9vw, 7rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.hero__lead {
	max-width: 34ch;
	margin: 0 0 2.25rem;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	line-height: 1.45;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Titelns inträde – den enda rörelsen sidan gör av sig själv. */
@media (prefers-reduced-motion: no-preference) {
	.hero__title,
	.hero__lead,
	.hero__actions {
		animation: hero-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.hero__lead { animation-delay: 0.12s; }
	.hero__actions { animation-delay: 0.22s; }
}

@keyframes hero-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

.hero__toggle,
.hero__scroll {
	position: absolute;
	bottom: clamp(1.25rem, 3vh, 2rem);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: rgba(var(--shade-rgb), 0.35);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
}

.hero__toggle:hover,
.hero__scroll:hover {
	background: rgba(var(--shade-rgb), 0.6);
	color: #fff;
}

.hero__toggle {
	right: var(--gutter);
	padding: 0;
}

.hero__scroll {
	left: 50%;
	transform: translateX(-50%);
}

/* Pausknapp utan synliga kontroller: dyker bara upp vid tangentbordsfokus. */
.hero__toggle--quiet {
	opacity: 0;
	pointer-events: none;
}

.hero__toggle--quiet:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Bara video: ingen text ovanpå. */
.hero--bare {
	align-items: stretch;
}

.hero__icon-play { display: none; }
.hero__toggle[aria-pressed="true"] .hero__icon-play { display: inline-flex; }
.hero__toggle[aria-pressed="true"] .hero__icon-pause { display: none; }
.hero__icon-pause { display: inline-flex; }

.hero--no-video .hero__toggle {
	display: none;
}

/* ---------- Sidrubriker ---------- */
.page-header {
	margin-top: calc(-1 * var(--header-h));
	padding: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
	background: var(--sund-bg);
	color: var(--on-dark-text);
}

.page-header__inner {
	max-width: var(--wide);
	margin: 0 auto;
}

.page-header__title {
	max-width: 20ch;
	margin: 0;
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.page-header__lead {
	max-width: 52ch;
	margin: 1.25rem 0 0;
	color: var(--on-dark-muted-text);
	font-size: 1.2rem;
}

.page-header__meta {
	margin: 1rem 0 0;
	color: var(--on-dark-muted-text);
	font-size: 0.95rem;
}

/* ---------- Innehåll ---------- */
.entry-content,
.front-content {
	padding: var(--section) var(--gutter);
}

.entry-content > *,
.front-content > * {
	max-width: var(--measure);
	margin-left: auto;
	margin-right: auto;
}

.entry-content > .alignwide,
.front-content > .alignwide {
	max-width: var(--wide);
}

.entry-content > .alignfull,
.front-content > .alignfull {
	max-width: none;
	margin-left: calc(-1 * var(--gutter));
	margin-right: calc(-1 * var(--gutter));
}

/* Sektioner från mönstren får vara breda; innehållet i dem hålls läsbart. */
.entry-content > .responsit-section,
.front-content > .responsit-section {
	max-width: var(--wide);
}

.responsit-section > * {
	max-width: var(--measure);
	margin-left: auto;
	margin-right: auto;
}

.responsit-section > .alignwide {
	max-width: var(--wide);
}

.responsit-section > h2:first-child {
	margin-top: 0;
}

.responsit-section + .responsit-section {
	margin-top: var(--section);
}

.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }

.entry-content h2,
.front-content h2 {
	margin-top: 2em;
}

.entry-content h3,
.front-content h3 {
	margin-top: 1.6em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3em;
}

.entry-content li + li {
	margin-top: 0.35em;
}

.entry-content blockquote,
.wp-block-quote {
	margin: 2em auto;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 4px solid var(--signal);
	font-family: var(--font-display);
	font-size: 1.3rem;
	line-height: 1.4;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.75em;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-style: normal;
}

.entry-content figure:not(.dtss__slide):not(.dtbs__slide) {
	margin-top: 2em;
	margin-bottom: 2em;
}

.entry-content img:not(.dtss__img):not(.dtss__side-img):not(.dtbs__img):not(.dtbs__side-img) {
	border-radius: var(--radius-s);
}

figcaption,
.wp-element-caption {
	margin-top: 0.6em;
	color: var(--muted);
	font-size: 0.9rem;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.entry-content th,
.entry-content td {
	padding: 0.65em 0.75em;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.wp-block-table {
	overflow-x: auto;
}

.entry-content hr,
.wp-block-separator {
	height: 0;
	margin: 3em auto;
	border: 0;
	border-top: 1px solid var(--line);
}

.entry-hero {
	margin: 0;
}

.entry-hero img {
	display: block;
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.wp-block-column {
	flex: 1 1 14rem;
	min-width: 0;
}

/* Frågor och svar (details-blocket) */
.wp-block-details {
	border-bottom: 1px solid var(--line);
}

.wp-block-details:first-of-type,
h2 + .wp-block-details {
	border-top: 1px solid var(--line);
}

.wp-block-details summary {
	position: relative;
	padding: 1.1rem 2.5rem 1.1rem 0;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.35rem;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.wp-block-details > :not(summary) {
	margin-top: 0;
	color: var(--muted);
}

/* Ett ensamt details-block (inte en lista med frågor) får inga avgränsare. */
.wp-block-details:not(.wp-block-details + .wp-block-details):not(:has(+ .wp-block-details)) {
	border-top: 0;
	border-bottom: 0;
}

/* Mjuk in- och utfällning sköts av theme.js; under animationen döljs det som sticker ut. */
.wp-block-details.is-animating {
	overflow: hidden;
}

/* Mönster: arbetsgång */
.responsit-steps {
	counter-reset: step;
	margin-top: 2.5rem;
}

.responsit-steps > .wp-block-column {
	counter-increment: step;
	padding-top: 1.25rem;
	border-top: 2px solid var(--ink);
}

.responsit-steps > .wp-block-column::before {
	content: counter(step);
	display: block;
	margin-bottom: 0.75rem;
	color: var(--link);
	font-family: var(--font-display);
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
}

.responsit-steps h3 {
	margin-top: 0;
	font-size: 1.2rem;
}

.responsit-steps p {
	color: var(--muted);
}

/* Mönster: tjänster */
.responsit-service {
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.responsit-service h3 {
	margin-top: 0;
}

/* Mönster: uppmaning */
.responsit-cta {
	margin-top: 3rem;
	margin-bottom: 3rem;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: var(--radius-m);
	background: var(--sund-bg);
	color: var(--on-dark-text);
}

.responsit-cta > * {
	max-width: var(--measure);
}

.responsit-cta h2 {
	margin-top: 0;
	color: var(--on-dark-text);
}

.responsit-cta .wp-block-button__link {
	background: var(--signal-bg);
	border-color: var(--signal);
	color: var(--signal-ink);
}

.responsit-cta .is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--on-dark-text);
}

/* ---------- Bildspel som DT-Slideshow (tidigare DT-Bildspel, klasserna .dtbs) lagt direkt i sidan ---------- */
.site-main > .dtss:not(.dtss--w-full),
.site-main > .dtbs:not(.dtbs--w-full) {
	width: min(var(--wide), calc(100% - 2 * var(--gutter)));
	margin: clamp(2.5rem, 6vw, 4.5rem) auto;
}

.site-main > .dtss--w-content,
.site-main > .dtbs--w-content {
	width: min(var(--measure), calc(100% - 2 * var(--gutter)));
}

.site-main > .dtss--w-full,
.site-main > .dtbs--w-full {
	margin-top: 0;
	margin-bottom: 0;
}

.entry-content > .dtss:not(.dtss--w-content):not(.alignfull),
.entry-content > .dtbs:not(.dtbs--w-content):not(.alignfull) {
	max-width: var(--wide);
}

/* DT-Slideshow med eget avstånd först eller sist i innehållet: temats luft runt innehållet tas bort, så att valt avstånd gäller. */
.entry-content:has(> .dtss--space-top:first-child),
.front-content:has(> .dtss--space-top:first-child),
.entry-content:has(> .dtbs--space-top:first-child),
.front-content:has(> .dtbs--space-top:first-child) {
	padding-top: 0;
}

.entry-content:has(> .dtss--space-bottom:last-child),
.front-content:has(> .dtss--space-bottom:last-child),
.entry-content:has(> .dtbs--space-bottom:last-child),
.front-content:has(> .dtbs--space-bottom:last-child) {
	padding-bottom: 0;
}

/* ---------- Startsidans sektioner ---------- */
.panel {
	padding: var(--section) var(--gutter);
	background: var(--surface);
}

.panel:nth-child(even) {
	background: var(--bg);
}

.panel__inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 5.5rem);
	max-width: var(--wide);
	margin: 0 auto;
}

.panel--flip .panel__inner {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.panel--flip .panel__media {
	order: 2;
}

.panel--text .panel__inner {
	grid-template-columns: minmax(0, 1fr);
}

.panel--text .panel__body {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1rem, 5vw, 5rem);
}

.panel__media {
	margin: 0;
}

.panel__media--slideshow .dtss,
.panel__media--slideshow .dtss--w-full,
.panel__media--slideshow .dtbs,
.panel__media--slideshow .dtbs--w-full {
	width: auto;
	max-width: none;
	margin: 0;
}

.panel__media:not(.panel__media--slideshow) img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-m);
}

.panel__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* DT-Slideshow: bildspelets namn med storleken ”Som sidans andra rubriker” ser ut som sektionernas rubriker. */
.dtss-name:not([class*="dtss-name--size-"]) {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

/* Långa svenska ord (t.ex. webbutveckling) får inte gå ut i nästa kolumn. */
.panel__body,
.panel__body > * {
	min-width: 0;
}

.panel--text .panel__title {
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

.panel__text {
	max-width: 38rem;
	color: var(--ink);
	opacity: 0.82; /* i stället för en egen grå färg – följer med när ett tillägg för mörkt läge byter färger */
	font-size: 1.1rem;
}

.panel__text > :last-child {
	margin-bottom: 0;
}

.panel__more {
	margin-top: 1.75rem;
}

@media (max-width: 800px) {
	.panel__inner,
	.panel--flip .panel__inner,
	.panel--text .panel__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.panel--flip .panel__media {
		order: 0;
	}
}

.admin-hint {
	max-width: var(--wide);
	margin: 2rem auto;
	padding: 1rem 1.25rem;
	border: 2px dashed var(--line);
	border-radius: var(--radius-s);
	color: var(--muted);
}

.admin-hint p {
	margin: 0;
}

/* Sektionens egen bakgrundsfärg (Anpassa → Startsida: sektioner). Texten, de dämpade texterna och linjerna följer färgen, så att
   allt syns mot den. Ljust läge och mörkt läge har var sin färg (tom = temats vanliga). */
html:not(.dark-mode) .has-bg {
	--ink: var(--pink);
	--muted: var(--pmuted);
	--line: var(--pline);
	--on-dark: var(--pink);
	--on-dark-muted: var(--pmuted);
	--on-dark-text: var(--pink);
	--on-dark-muted-text: var(--pmuted);
	--on-dark-line: var(--pline);
	background: var(--pbg) !important;
	color: var(--pink);
}
html.dark-mode .has-bg-d {
	--ink: var(--pink-d);
	--muted: var(--pmuted-d);
	--line: var(--pline-d);
	--on-dark: var(--pink-d);
	--on-dark-muted: var(--pmuted-d);
	--on-dark-text: var(--pink-d);
	--on-dark-muted-text: var(--pmuted-d);
	--on-dark-line: var(--pline-d);
	background: var(--pbg-d) !important;
	color: var(--pink-d);
}

/* ---------- Kontakt ---------- */
/* Kontaktsidan: hela sidan har kontaktsektionens bakgrund, så att ett bildspel överst tonas ut i den utan skarv. */
.site-main--contact {
	background: var(--sund-bg);
	color: var(--on-dark-text);
}
/* Kontaktsektionen får ingen egen bakgrund här – annars skär den av bildspelets mjuka kant med en rak kant. */
.site-main--contact > .contact {
	background: transparent;
}

.contact {
	padding: var(--section) var(--gutter);
	background: var(--sund-bg);
	color: var(--on-dark-text);
}

.contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	max-width: var(--wide);
	margin: 0 auto;
}

.contact__title {
	color: var(--on-dark-text);
	font-size: clamp(2.2rem, 4.5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.contact__lead {
	max-width: 36ch;
	color: var(--on-dark-muted-text);
	font-size: 1.15rem;
}

/* Texten från kontaktsidans innehåll (stycken, listor, länkar). */
.contact__lead > :first-child { margin-top: 0; }
.contact__lead > :last-child { margin-bottom: 0; }
.contact__lead p { max-width: 36ch; }
/* Radlängden (36ch) gäller texten – ett stycke med bilder i får använda hela bredden så att bilderna inte hamnar på en ny rad (från 1.16.9). */
.contact__lead:has(img),
.contact__lead p:has(img) { max-width: none; }

.contact a {
	color: var(--on-dark-text);
}

.contact a:hover {
	color: var(--signal-text);
}

.contact .button--signal,
.contact .button--signal:hover {
	color: var(--signal-ink);
}

.contact__details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2rem;
	margin: 2.5rem 0 0;
}

.contact__details dt {
	margin-bottom: 0.2rem;
	color: var(--on-dark-muted-text);
	font-size: 0.9rem;
}

.contact__details dd {
	margin: 0;
	font-size: 1.1rem;
}

/* Ikoner vid kontaktuppgifterna (från 1.16.4): en rund platta till vänster, rubrik och uppgift bredvid. */
.contact__details.has-icons > div {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 1rem;
	align-items: start;
	align-content: start;
}

.contact__details.has-icons dt,
.contact__details.has-icons dd {
	grid-column: 2;
}

.contact__ico {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: 0.1rem;
	border: 1px solid var(--on-dark-line);
	border-radius: 0.85rem;
	background: color-mix(in srgb, var(--on-dark-text) 6%, transparent);
	color: var(--on-dark-text);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.contact__ico svg {
	width: 1.3rem;
	height: 1.3rem;
	fill: none !important;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.9;
}

.contact__details.has-icons > div:hover .contact__ico {
	border-color: color-mix(in srgb, var(--on-dark-text) 35%, transparent);
	background: color-mix(in srgb, var(--on-dark-text) 11%, transparent);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.contact__ico { transition: none; }
	.contact__details.has-icons > div:hover .contact__ico { transform: none; }
}

.contact__form {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--on-dark-line);
	border-radius: var(--radius-m);
	background: rgba(255, 255, 255, 0.04);
}

.contact__form-title {
	color: var(--on-dark-text);
}

.contact__hint {
	margin-top: 1.5rem;
	color: var(--on-dark-muted-text);
	font-size: 0.9rem;
}

@media (max-width: 800px) {
	.contact__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.contact__details {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Formulär (gäller även Contact Form 7, WPForms m.fl.) ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: 2.9rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
	outline: 3px solid var(--signal);
	outline-offset: 1px;
	border-color: var(--hav);
}

label {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.contact label,
.contact .wpforms-field-label {
	color: var(--on-dark-text);
}

.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"],
.contact textarea,
.contact select {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.95);
	color: #17191c;
}

.wpcf7-form p {
	margin-bottom: 1rem;
}

.wpcf7-not-valid-tip {
	color: var(--signal-text);
	font-size: 0.9rem;
}

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 32rem;
}

/* ---------- Inläggslista ---------- */
.post-list {
	max-width: var(--wide);
	margin: 0 auto;
	padding: var(--section) var(--gutter);
}

.post-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 2.5rem 2rem;
}

.post-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-s);
}

.post-card__body {
	padding-top: 1rem;
}

.post-card__title {
	margin-bottom: 0.3rem;
	font-size: 1.35rem;
}

.post-card__title a {
	color: var(--ink);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--link);
	text-decoration: underline;
}

.post-card__meta {
	margin-bottom: 0.6rem;
	color: var(--muted);
	font-size: 0.9rem;
}

.post-card__excerpt {
	color: var(--muted);
}

.empty-state {
	max-width: var(--measure);
}

.pagination,
.post-navigation,
.page-links {
	max-width: var(--measure);
	margin: 3rem auto 0;
}

.pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
}

.post-navigation {
	padding: 0 var(--gutter) var(--section);
}

.nav-label {
	display: block;
	color: var(--muted);
	font-size: 0.85rem;
}

.page-numbers {
	padding: 0.4rem 0.75rem;
	border-radius: var(--radius-s);
}

.page-numbers.current {
	background: var(--sund-bg);
	color: var(--on-dark-text);
}

/* ---------- Kommentarer ---------- */
.comments-area {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--gutter) var(--section);
}

.comment-list {
	padding: 0;
	list-style: none;
}

.comment-body {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--line);
}

/* ---------- Sidfot ---------- */
.site-footer {
	background: var(--sund-deep-bg);
	color: var(--on-dark-muted-text);
	font-size: 0.97rem;
}

.site-footer a {
	color: var(--on-dark-text);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--signal-text);
	text-decoration: underline;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(var(--footer-cols, 3), minmax(0, 1fr));
	gap: 2.5rem;
	max-width: var(--wide);
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 5rem) var(--gutter) 3rem;
	box-sizing: content-box;
}

.site-footer__brand .brand {
	margin-bottom: 1.25rem;
	color: var(--on-dark-text);
}

.site-footer__brand p {
	max-width: 32ch;
}

.site-footer__heading {
	margin-bottom: 1rem;
	color: var(--on-dark-text);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
}

.footer-menu,
.contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu li + li,
.contact-list li + li {
	margin-top: 0.55rem;
}

.contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.contact-list svg {
	flex: none;
	margin-top: 0.2rem;
	color: var(--on-dark-muted-text);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	max-width: var(--wide);
	margin: 0 auto;
	padding: 1.5rem var(--gutter) 2rem;
	border-top: 1px solid var(--on-dark-line);
	box-sizing: content-box;
	font-size: 0.9rem;
}

.site-footer__bottom p {
	margin: 0;
}

/* Bilder med länkar i sidfoten */
.footer-images {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-images li {
	margin: 0;
}

.footer-images a {
	display: block;
	border-radius: 6px;
	transition: opacity 0.15s ease;
}

.footer-images a:hover {
	opacity: 0.8;
}

/* Varje bild visas på sitt eget sätt: vit (logotyper med genomskinlig bakgrund), svartvit, svartvit och dämpad, eller på en ljus
   platta (syns alltid, även mörka logotyper och logotyper med egen bakgrund). Riktiga färger när man pekar eller tabbar dit. */
.footer-img__box {
	display: block;
	border-radius: 8px;
}

.footer-img--white img {
	filter: brightness(calc(1 - var(--fimg-t, 1))) invert(var(--fimg-t, 1));
}

.footer-img--bw img,
.footer-img--plate-bw img {
	filter: grayscale(var(--fimg-t, 1)) contrast(calc(1 + 0.1 * var(--fimg-t, 1)));
}

.footer-img--gray img {
	filter: grayscale(var(--fimg-t, 1));
	opacity: calc(1 - 0.45 * var(--fimg-t, 1));
}

/* Plattan: styrkan är hur täckande den är. Svartvit platta: plattan är hel, styrkan är hur svartvit bilden är. */
.footer-img--plate .footer-img__box,
.footer-img--plate-bw .footer-img__box {
	padding: 0.5rem 0.75rem;
	border-radius: 10px;
}

.footer-img--plate .footer-img__box {
	background: color-mix(in srgb, var(--fimg-plate, #ffffff) calc(var(--fimg-t, 1) * 100%), transparent);
}

.footer-img--plate-bw .footer-img__box {
	background: var(--fimg-plate, #ffffff);
}

.footer-img img {
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.footer-img a.footer-img__box:hover img,
.footer-img a.footer-img__box:focus-visible img {
	filter: none;
	opacity: 1;
}

.footer-img--white a.footer-img__box:hover,
.footer-img--bw a.footer-img__box:hover,
.footer-img--gray a.footer-img__box:hover,
.footer-img--plate-bw a.footer-img__box:hover {
	opacity: 1;
}

.footer-images img {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--fimg-h, 60px);
	object-fit: contain;
}

.site-footer__bottom span + span {
	margin-left: 1.25rem;
}

@media (max-width: 900px) {
	.site-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Mindre rörelse ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------- Utskrift ---------- */
@media print {
	.site-header,
	.hero__media,
	.hero__toggle,
	.hero__scroll,
	.site-nav,
	.contact__form {
		display: none !important;
	}

	.hero,
	.page-header,
	.contact {
		min-height: 0;
		margin: 0;
		background: none;
		color: #000;
	}
}

/* ---------- Till toppen: samma runda knapp som DT-Darkmodes knapp för ljust och mörkt läge, till vänster om den ---------- */
.to-top {
	position: fixed;
	z-index: 2147482999;
	right: max(14px, env(safe-area-inset-right));
	bottom: max(14px, env(safe-area-inset-bottom));
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #dfe3ee;
	border-radius: 50%;
	background: #ffffff;
	color: #141824;
	box-shadow: 0 10px 28px rgba(20, 28, 60, 0.22);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s, background 0.15s;
}

.to-top.has-mode {
	right: calc(max(14px, env(safe-area-inset-right)) + 54px);
}

.to-top.is-on {
	opacity: 1;
	transform: none;
}

.to-top[hidden] {
	display: none;
}

.to-top:hover {
	border-color: var(--signal-bg, #e9832b);
	background: #eef1f8;
}

.to-top:focus-visible {
	outline: 2px solid var(--signal-bg, #e9832b);
	outline-offset: 2px;
}

.to-top svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Mörkt läge (DT-Darkmode): samma färger som dess knapp */
html[data-dt-dark] .to-top {
	border-color: #34373e;
	background: #1b1d21;
	color: #f4f5f7;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

html[data-dt-dark] .to-top:hover {
	background: #26282d;
}

@media (prefers-reduced-motion: reduce) {
	.to-top {
		transition: none;
	}
}

@media print {
	.to-top {
		display: none !important;
	}
}

/* ==========================================================================
   Sidans upplägg (1.13.0, valen i rutan ”Responsit: sidans upplägg” på sidan)
   ========================================================================== */
/* Sidhuvudet längst ned på första bilden: det ligger i flödet efter en skärmhöjd och är klistrigt, så det följer med uppåt
   när man rullar, stannar högst upp och går tillbaka ned när man rullar högst upp igen. Den första sektionen dras upp bakom. */
.header-low .site-header {
	margin-top: calc(100vh - var(--admin-bar) - var(--header-h));
	margin-top: calc(100svh - var(--admin-bar) - var(--header-h));
}

.header-low .hero,
.header-low .page-header {
	min-height: calc(100vh - var(--admin-bar));
	min-height: calc(100svh - var(--admin-bar));
	margin-top: calc(-100vh + var(--admin-bar)) !important;
	margin-top: calc(-100svh + var(--admin-bar)) !important;
}

.header-low .page-header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: clamp(3rem, 7vw, 5.5rem);
	padding-bottom: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
}

.header-low .page-header__inner {
	width: 100%;
}

/* Pilen och videoknapparna i den första sektionen ligger ovanför sidhuvudet. */
.header-low .page-header > .section-next,
.header-low .hero__toggle {
	bottom: calc(var(--header-h) + clamp(1rem, 3vh, 1.75rem));
}

/* Videons pil ligger ovanför sidhuvudets rad (från 1.16.14 – i raden krockade den med en bredare meny, t.ex. på engelska). */
.header-low .hero__scroll {
	bottom: calc(var(--header-h) + clamp(0.5rem, 1.5vh, 1rem));
}

.header-low .site-header {
	pointer-events: none;
}

.header-low .site-header__inner > * {
	pointer-events: auto;
}

/* Sektioner i full höjd: varje sektion fyller skärmen under sidhuvudet, med innehållet i mitten. */
.sections-full .hero,
.sections-full .page-header {
	min-height: calc(100vh - var(--admin-bar));
	min-height: calc(100svh - var(--admin-bar));
}

.sections-full .page-header {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sections-full .page-header__inner {
	width: 100%;
}

.sections-full .panel,
.sections-full .contact,
.sections-full .front-intro:not(:empty),
.sections-full .entry-content > :is(.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-media-text, .dtss) {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--admin-bar) - var(--header-h));
	min-height: calc(100svh - var(--admin-bar) - var(--header-h));
}

.sections-full .panel > :not(.section-next),
.sections-full .contact > :not(.section-next) {
	width: 100%;
}

/* Inget får sticka ut åt sidan (fullbreda block använder 50vw-marginaler). */
.sections-full,
.header-low {
	overflow-x: clip;
}

/* En sektion som är högre än skärmen: pilen följer med längst ned i fönstret medan sektionen syns (theme.js sätter is-tall). */
.section-next.is-sticky {
	position: sticky;
	bottom: clamp(1rem, 3vh, 1.75rem);
	left: auto;
	flex: none;
	align-self: center;
	/* Samma avstånd till sektionens nederkant som pilarna i de andra sektionerna. */
	margin: 1.5rem auto calc(clamp(1rem, 3vh, 1.75rem) - var(--section-pad-b, 0px));
	transform: none;
}

.section-next.is-sticky:hover {
	transform: translateY(2px);
}

/* Pilen till nästa sektion (läggs till av theme.js). */
.section-next {
	position: absolute;
	bottom: clamp(1rem, 3vh, 1.75rem);
	left: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 2.75rem !important;
	min-width: 0;
	max-width: none;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: inherit;
	cursor: pointer;
	transform: translateX(-50%);
	transition: background 0.15s ease, transform 0.2s ease, opacity 0.45s ease;
}

/* Pilen man klickade på tonas bort; nästa sektions pil väntar tills sidan har stannat och tonas sedan in. */
.section-next.is-gone,
.section-next.is-waiting,
.hero__scroll.is-gone {
	opacity: 0;
	pointer-events: none;
}

.hero__scroll {
	transition: opacity 0.45s ease;
}

.section-next:hover {
	background: color-mix(in srgb, currentColor 18%, transparent);
	transform: translateX(-50%) translateY(2px);
}

.section-next:focus-visible {
	outline: 2px solid var(--signal-bg, #e9832b);
	outline-offset: 3px;
}

.section-next svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Glider sidhuvudet undan när man går till nästa sektion är sektionerna en hel skärm höga (sidhuvudet tar ingen plats). */
.header-autohide.sections-full .panel,
.header-autohide.sections-full .contact,
.header-autohide.sections-full .front-intro:not(:empty),
.header-autohide.sections-full .entry-content > :is(.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-media-text, .dtss) {
	min-height: calc(100vh - var(--admin-bar));
	min-height: calc(100svh - var(--admin-bar));
}

@media print {
	.section-next {
		display: none;
	}
}

/* Hjälpklass (från 1.16.5): lägg class="vertical-align-middle" på en bild i texten så hamnar den mitt i raden. Fungerar också på ett block (Avancerat → Ytterligare CSS-klass). */
.vertical-align-middle,
.vertical-align-middle img {
	vertical-align: middle !important;
}

.is-style-img-middle img {
	vertical-align: middle !important;
}

/* Avstånd runt bild i texten (från 1.16.8): knappen Avstånd runt bild i redigeraren lägger bilden i <span class="img-pad" data-pad="…">. */
.img-pad img { box-sizing: content-box; } /* utfyllnaden läggs utanför bildens bredd, så bilden behåller sin storlek */
.img-pad[data-pad="2"] img { padding: 2px; }
.img-pad[data-pad="4"] img { padding: 4px; }
.img-pad[data-pad="6"] img { padding: 6px; }
.img-pad[data-pad="8"] img { padding: 8px; }
.img-pad[data-pad="10"] img { padding: 10px; }
.img-pad[data-pad="12"] img { padding: 12px; }
.img-pad[data-pad="14"] img { padding: 14px; }
.img-pad[data-pad="16"] img { padding: 16px; }
.img-pad[data-pad="18"] img { padding: 18px; }
.img-pad[data-pad="20"] img { padding: 20px; }
.img-pad[data-pad="22"] img { padding: 22px; }
.img-pad[data-pad="24"] img { padding: 24px; }
.img-pad[data-pad="26"] img { padding: 26px; }
.img-pad[data-pad="28"] img { padding: 28px; }
.img-pad[data-pad="30"] img { padding: 30px; }
.img-pad[data-pad="32"] img { padding: 32px; }
.img-pad[data-pad="34"] img { padding: 34px; }
.img-pad[data-pad="36"] img { padding: 36px; }
.img-pad[data-pad="38"] img { padding: 38px; }
.img-pad[data-pad="40"] img { padding: 40px; }