/* Grunden: nollställning, typografi och hjälpklasser. Värdena är theme.json:s variabler (samma som prototypens tokens.css). */

/* Typsnitten Jost och Schibsted Grotesk deklareras i theme.json (fontFace) och ligger i assets/fonts. */

/* theme.json har inga mediefrågor: sidhuvudet är lägre under 64rem (prototypens tokens.css) */
@media (max-width: 63.99rem) {
	:root {
		--wp--custom--sidhuvud-hojd: 4rem;
	}
}

/* Reservtypsnitt med samma mått som Jost och Schibsted Grotesk, så att texten inte flyttar sig när typsnitten har laddats
 * (CLS). size-adjust är kvoten mellan typsnittens genomsnittliga teckenbredd, viktad efter hur ofta tecknen används
 * (Capsize, @capsizecss/unpack), med Jost i vikt 500 som rubrikerna och Schibsted Grotesk i 400; ascent- och descent-override
 * är typsnittets egna mått delade med size-adjust. Arial finns i Windows, macOS och iOS (Liberation Sans har samma
 * mått), Roboto i Android och DejaVu Sans i Linux. Saknas ett typsnitt går webbläsaren vidare till nästa i listan.
 * I temat står reglerna i temats CSS, eftersom fontFace i theme.json bara tar filer. */
@font-face {
	font-family: "Jost reserv";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
	size-adjust: 100.04%;
	ascent-override: 106.95%;
	descent-override: 37.48%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Jost reserv Roboto";
	src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
	size-adjust: 100.26%;
	ascent-override: 106.72%;
	descent-override: 37.4%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Jost reserv DejaVu";
	src: local("DejaVu Sans"), local("DejaVuSans");
	size-adjust: 87.74%;
	ascent-override: 121.95%;
	descent-override: 42.74%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Schibsted Grotesk reserv";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
	size-adjust: 104.49%;
	ascent-override: 93.46%;
	descent-override: 24.67%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Schibsted Grotesk reserv Roboto";
	src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
	size-adjust: 104.72%;
	ascent-override: 93.25%;
	descent-override: 24.62%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Schibsted Grotesk reserv DejaVu";
	src: local("DejaVu Sans"), local("DejaVuSans");
	size-adjust: 91.64%;
	ascent-override: 106.56%;
	descent-override: 28.13%;
	line-gap-override: 0%;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--wp--custom--sidhuvud-hojd) + var(--wp--preset--spacing--40));
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Mindre rörelse (beslut 6): inga övergångar eller animationer, för den som bett om det i systemet */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
	}
}

body {
	margin: 0;
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--bas);
	line-height: var(--wp--custom--radavstand-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
	border-radius: var(--wp--custom--radie-bild);
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-rubrik);
	letter-spacing: var(--wp--custom--spatiering-rubrik);
	text-wrap: balance;
	overflow-wrap: anywhere;
	/* Ingen automatisk avstavning: tillsammans med balance delade webbläsaren vanliga ord som "bäs-ta" för att jämna
	   ut raderna (Hugo 2026-10-13). Ett ord som inte ryms på raden bryts ändå (overflow-wrap), och ett mjukt
	   bindestreck (­) i texten avstavar där det behövs. "anywhere" och inte "break-word": i ett rutnät gjorde det
	   långa ordet annars spalten bredare än skärmen ("Trampolinspecialistens" på Hoppskolan i 390 px) */
	hyphens: manual;
}

h1 {
	font-size: var(--wp--preset--font-size--rubrik-1);
	line-height: var(--wp--custom--radavstand-stor);
}

h2 {
	font-size: var(--wp--preset--font-size--rubrik-2);
}

h3 {
	font-size: var(--wp--preset--font-size--rubrik-3);
}

h4 {
	font-size: var(--wp--preset--font-size--rubrik-4);
}

/* Rubriknivån följer sidans struktur, storleken följer vikten: en H2 kan vara stor eller liten */
.display {
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--wp--custom--radavstand-display);
	letter-spacing: var(--wp--custom--spatiering-display);
}

.rubrik--stor {
	font-size: var(--wp--preset--font-size--rubrik-1);
}

.rubrik--liten {
	font-size: var(--wp--preset--font-size--rubrik-3);
}

p,
ul,
ol,
dl,
dd {
	margin: 0;
}

p {
	text-wrap: pretty;
}

/* Långa ord och adresser, som info@trampolinspecialisten.se och finska sammansättningar, bryts hellre än att sidan
   blir bredare än skärmen (WCAG 1.4.10) */
p,
li,
dd,
dt,
label,
summary {
	overflow-wrap: break-word;
}

/* En adress som står som text i en länk (produkttexterna har sådana) får brytas var som helst: break-word ändrar inte
   minsta bredden, så i ett rutnät (köprutan) gjorde den långa adressen kolumnen bredare än skärmen */
:where(p, li) a {
	overflow-wrap: anywhere;
}

ul[role="list"],
ol[role="list"] {
	padding: 0;
	list-style: none;
}

a {
	color: var(--wp--preset--color--gron-mork);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--wp--preset--color--text);
}

:focus-visible {
	outline: var(--wp--custom--fokus) solid var(--wp--preset--color--gron);
	outline-offset: var(--wp--custom--fokus);
}

/* Det som är dolt ska vara dolt, även när en komponent sätter display (mobilmenyn, undermenyn, pausknappen) */
[hidden] {
	display: none !important;
}

button {
	font: inherit;
	color: inherit;
}

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

.hoppa {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 100;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	transform: translateY(-200%);
}

.hoppa:focus {
	transform: none;
}

.ikon {
	width: var(--wp--custom--ikon);
	height: var(--wp--custom--ikon);
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ikon--mellan {
	width: var(--wp--custom--ikon-mellan);
	height: var(--wp--custom--ikon-mellan);
}

.ikon--liten {
	width: var(--wp--custom--ikon-liten);
	height: var(--wp--custom--ikon-liten);
}

.ikon--fylld {
	fill: currentColor;
	stroke: none;
}

/* Innehållsbredd med sidmarginal */
.inre {
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--marginal));
	margin-inline: auto;
	padding-inline: var(--wp--custom--marginal);
}

.etikett {
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 500;
	letter-spacing: var(--wp--custom--spatiering-etikett);
	text-transform: uppercase;
}

.ingress {
	font-size: var(--wp--preset--font-size--ingress);
	line-height: var(--wp--custom--radavstand-ingress);
	color: var(--wp--preset--color--text-dampad);
}

/* CookieYes runda knapp för att öppna kakinställningarna igen (nere till vänster) visas inte: den låg över den fasta
   köpraden i mobilen och över knappen Pausa filmen på startsidan (lanseringen 2026-11-10). Vägen till inställningarna
   är länken Cookies och personuppgifter i sidfoten och knappen Ändra mina cookie-inställningar på sidan Cookies. */
.cky-btn-revisit-wrapper {
	display: none !important;
}