/*
 * Grundstilar. Laddas på sajten och i editorn.
 *
 * WordPress laddar blockens och temats stilar även i adminsidan runt editorns ram. Globala regler
 * för element avgränsas därför till dokument utan klassen wp-admin: sajten och editorns ram, men
 * inte adminsidan. :where() gör att specificiteten blir densamma som för ett rent elementval.
 */
:where(body:not(.wp-admin)), :where(body:not(.wp-admin)) *, :where(body:not(.wp-admin)) *::before, :where(body:not(.wp-admin)) *::after { box-sizing: border-box; }

body:not(.wp-admin) {
	margin: 0;
	font-family: var(--loft-typsnitt-brod);
	font-size: var(--loft-storlek-m);
	line-height: var(--loft-radavstand);
	color: var(--loft-farg-text);
	background: var(--loft-farg-bakgrund);
	-webkit-font-smoothing: antialiased;
	/* Långa obrutna strängar (webbadresser, e-post, sammansatta ord) bryts i stället för att ge sidledsscroll.
	   anywhere, till skillnad från break-word, låter även flex- och gridbarn krympa. */
	overflow-wrap: var(--loft-ordbrytning);
}

/* Rubrikerna hämtar allt från tokens, så att designen styr varje nivå utan att skriva över reglerna. */
:where(body:not(.wp-admin)) :is(h1, h2, h3, h4) {
	margin: var(--loft-rubrik-marginal);
	text-wrap: var(--loft-rubrik-radbalans);
	/* Standard auto: avstavning före radbrytning mitt i ord för långa svenska ord. Kräver lang="sv-SE" på <html>. */
	hyphens: var(--loft-rubrik-avstavning);
}
:where(body:not(.wp-admin)) h1 { font-family: var(--loft-h1-typsnitt); font-size: var(--loft-h1-storlek); font-weight: var(--loft-h1-vikt); line-height: var(--loft-h1-radavstand); letter-spacing: var(--loft-h1-sparrning); }
:where(body:not(.wp-admin)) h2 { font-family: var(--loft-h2-typsnitt); font-size: var(--loft-h2-storlek); font-weight: var(--loft-h2-vikt); line-height: var(--loft-h2-radavstand); letter-spacing: var(--loft-h2-sparrning); }
:where(body:not(.wp-admin)) h3 { font-family: var(--loft-h3-typsnitt); font-size: var(--loft-h3-storlek); font-weight: var(--loft-h3-vikt); line-height: var(--loft-h3-radavstand); letter-spacing: var(--loft-h3-sparrning); }
:where(body:not(.wp-admin)) h4 { font-family: var(--loft-h4-typsnitt); font-size: var(--loft-h4-storlek); font-weight: var(--loft-h4-vikt); line-height: var(--loft-h4-radavstand); letter-spacing: var(--loft-h4-sparrning); }

:where(body:not(.wp-admin)) p { margin: 0 0 var(--loft-avstand-s); }
:where(body:not(.wp-admin)) p:last-child { margin-bottom: 0; }

:where(img) { object-position: var(--loft-fokus, 50% 50%); }
:where(body:not(.wp-admin)) img { max-width: 100%; height: auto; display: block; }

:where(body:not(.wp-admin)) a { color: var(--loft-farg-accent); transition: color var(--loft-overgang); }
:where(body:not(.wp-admin)) a:hover { color: var(--loft-farg-accent-hover); }

:where(body:not(.wp-admin)) :focus-visible { outline: var(--loft-fokus); outline-offset: var(--loft-fokus-avstand); }

/* Mörka ytor: block och sidfot sätter klassen .loft-pa-mork. */
.loft-pa-mork a:not(.loft-knapp) { color: inherit; }
.loft-pa-mork :focus-visible { outline-color: currentColor; }

/* Innehållsbredd */
.loft-wrap {
	width: 100%;
	max-width: calc(var(--loft-bredd-innehall) + var(--loft-kantmarginal) * 2);
	margin-inline: auto;
	padding-inline: var(--loft-kantmarginal);
}
.loft-wrap--text { max-width: calc(var(--loft-bredd-text) + var(--loft-kantmarginal) * 2); }

/* Knappar */
.loft-knapp {
	display: inline-block;
	max-width: 100%;
	min-height: var(--loft-knapp-minhojd);
	padding: var(--loft-knapp-padding);
	border-radius: var(--loft-radie-knapp);
	font-family: var(--loft-knapp-typsnitt);
	font-size: var(--loft-knapp-storlek);
	font-weight: var(--loft-knapp-vikt);
	line-height: var(--loft-knapp-radavstand);
	letter-spacing: var(--loft-knapp-sparrning);
	text-transform: var(--loft-knapp-versaler);
	text-decoration: none;
	transition: background var(--loft-overgang), color var(--loft-overgang);
}
/* Knappelement ärver inte typsnitt och har egen kant i webbläsaren. */
button.loft-knapp { cursor: pointer; }
button.loft-knapp--primar { border: 0; }
.loft-knapp--primar { background: var(--loft-farg-accent); color: var(--loft-farg-pa-accent); }
.loft-knapp--primar:hover { background: var(--loft-farg-accent-hover); color: var(--loft-farg-pa-accent); }
.loft-knapp--sekundar { border: var(--loft-knapp-ram) solid currentColor; color: inherit; }
.loft-knapp--sekundar:hover { background: var(--loft-farg-text); color: var(--loft-farg-bakgrund); }
/* På mörka ytor inverteras hovringen, annars syns ingen förändring mot den mörka bakgrunden. */
.loft-pa-mork .loft-knapp--sekundar:hover { background: var(--loft-farg-pa-mork); color: var(--loft-farg-mork); }

/* Sökformulär (searchform.php) */
.loft-sok { margin-block: var(--loft-avstand-m); }
.loft-sok__etikett { display: block; margin-bottom: var(--loft-avstand-xs); font-weight: var(--loft-vikt-fet); }
.loft-sok__rad { display: flex; flex-wrap: wrap; gap: var(--loft-avstand-xs); }
.loft-sok__falt {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.7em 0.9em;
	border: 1px solid var(--loft-farg-text-dampad);
	border-radius: var(--loft-radie-falt);
	background: var(--loft-farg-bakgrund);
	color: var(--loft-farg-text);
	font: inherit;
}

/* Tillgänglighet */
.skarmlasare {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Hopplänk: dold tills den får tangentbordsfokus. */
.loft-hopplank {
	position: absolute;
	top: var(--loft-avstand-xs);
	left: var(--loft-avstand-xs);
	z-index: 1000;
	padding: var(--loft-avstand-xs) var(--loft-avstand-s);
	background: var(--loft-farg-bakgrund);
	color: var(--loft-farg-text);
	transform: translateY(-200%);
}
.loft-hopplank:focus { transform: none; }

/* Huvudinnehållet tar emot fokus från hopplänken utan synlig ram runt hela sidan. */
:where(body:not(.wp-admin)) main:focus { outline: none; }

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

/*
 * Löptext från kärnblock (inlägg). Riktas mot kärnblockens egna klasser, så att reglerna
 * gäller både i editorn och på sajten men inte påverkar LOFT:s block på sidor.
 */
.wp-block-heading { margin-top: var(--loft-avstand-l); }
.wp-block-heading + .wp-block-heading { margin-top: var(--loft-avstand-s); }
:where(h1, h2) + .wp-block-heading { margin-top: 0; }

.wp-block-list { padding-left: 1.2em; margin: 0 0 var(--loft-avstand-s); }
.wp-block-list li + li { margin-top: 0.25em; }
.wp-block-list .wp-block-list { margin-block: 0.25em 0; }

.wp-block-quote {
	margin: var(--loft-avstand-m) 0;
	padding-left: var(--loft-avstand-m);
	border-left: 3px solid var(--loft-farg-accent);
	font-size: var(--loft-storlek-l);
	font-family: var(--loft-typsnitt-rubrik);
}
.wp-block-quote cite { display: block; margin-top: var(--loft-avstand-xs); font-size: var(--loft-storlek-s); font-style: normal; font-family: var(--loft-typsnitt-brod); color: var(--loft-farg-text-dampad); }

.wp-block-image, .wp-block-embed { margin: var(--loft-avstand-m) 0; }
.wp-element-caption, .wp-block-image figcaption {
	margin-top: var(--loft-avstand-xs);
	font-size: var(--loft-storlek-s);
	color: var(--loft-farg-text-dampad);
}
/* Stilvarianten Rundad är borttagen i editorn. Redan sparade bilder med varianten visas som vanliga bilder. */
.wp-block-image.is-style-rounded img { border-radius: 0; }

/* Inbäddningar som laddas vid klick (inc/inbaddningar.php). Samma proportion som videon. */
.loft-inbaddning {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--loft-avstand-s);
	aspect-ratio: 16 / 9;
	padding: var(--loft-avstand-m);
	background: var(--loft-farg-mork);
	color: var(--loft-farg-pa-mork);
	border-radius: var(--loft-radie-yta);
}
.loft-inbaddning__text { max-width: 36em; margin: 0; }
.loft-inbaddning__lank { margin: 0; font-size: var(--loft-storlek-s); }
.loft-inbaddning.ar-laddad { display: block; padding: 0; background: none; }
.loft-inbaddning__iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Smala skärmar: texten får plats även om rutan blir högre än 16:9. */
@media (max-width: 30rem) {
	.loft-inbaddning:not(.ar-laddad) { aspect-ratio: auto; min-height: 12rem; }
}
/* Kärnans responsiva inbäddning lägger in ett distansblock (::before). Platshållaren har egen proportion. */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:has(> .loft-inbaddning)::before { content: none; padding-top: 0; }
.loft-inbaddning-lank { padding: var(--loft-avstand-s) var(--loft-avstand-m); border-left: 3px solid var(--loft-farg-accent); }

/* Platshållare och notiser i editorn */
.loft-platshallare {
	padding: var(--loft-avstand-l);
	border: 2px dashed var(--loft-farg-kant);
	text-align: center;
	color: var(--loft-farg-text-dampad);
	font-family: var(--loft-typsnitt-brod);
}
.loft-editornotis {
	margin-top: var(--loft-avstand-xs);
	font-family: var(--loft-typsnitt-brod);
	font-size: var(--loft-storlek-s);
	font-style: italic;
}