/*
Theme Name: SKM Base
Theme URI: https://simonmunk.dk/
Author: Simon Kolath Munk
Description: Generisk block-tema, fundamentet under alle vores kundesites. Selvstaendigt tema uden foraelder-tema, med theme.json som design-fundament og functions.php som ren indlaesningsloekke over moduler i inc/.
Version: 1.2.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skm
Tags: block-theme, full-site-editing
*/

/*
 * Basis-CSS. Skriv mobil-foerst: ingen media query paa grundreglerne,
 * forstaerk opad med min-width. Hoved-breakpoint for hele sitet er 782px,
 * saa temaets lag skifter praecis samtidig med WP-kernens egne blok-stilarter.
 */

.skm-skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--skm-baggrund);
	color: var(--wp--preset--color--skm-tekst);
	text-decoration: underline;
}

.skm-skiplink:focus {
	left: 0;
}

/* Synligt fokus overalt, ogsaa hvor et tema-reset ellers ville fjerne det. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--skm-accent);
	outline-offset: 2px;
}

@media (min-width: 782px) {
	.skm-kun-mobil {
		display: none;
	}
}

/* Designmanual */
.skm-designmanual-saektion {
	margin-bottom: var(--wp--preset--spacing--skm-40);
}

.skm-designmanual-farver {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--skm-20);
}

.skm-designmanual-farve {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.skm-designmanual-svatch {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--skm-kant);
}

/*
 * Sektioner (moenstre i patterns/). content-visibility: auto lader browseren
 * springe rendering af sektioner uden for skaermen over, og
 * contain-intrinsic-size er noedvendig sammen med den: uden en estimeret
 * plads-reservation regner browseren sektionen for 0px hoej foer den er
 * renderet, hvilket giver et hop i scrollbaren naar indholdet "popper ind".
 * 600px er et groft gennemsnit, ikke en maaling: det skal blot forhindre et
 * stort hop.
 */
.skm-sektion {
	padding: var(--wp--preset--spacing--skm-40) 0;
	border-top: 1px solid var(--wp--preset--color--skm-kant);
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

.skm-sektion-titel {
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--skm-30);
	text-align: center;
}