/**
 * CSOS-moduler – gemensamma stilar
 *
 * Färger, typsnitt och avstånd kommer från designsystemets variabler (--ds-*).
 * Varje modul har sin egen CSS i bb-modules/<modul>/css/frontend.css.
 */

/* Modulerna ritar hela sektionen själva – BB:s modulmarginal ska inte ge glipor */
.fl-module[class*="fl-module-csos-"],
.fl-module[class*="fl-module-csos-"] > .fl-module-content {
	margin: 0;
}

/* Nollställ temats marginaler – modulerna sätter sina egna avstånd.
   csos.css laddas före BB:s layoutfil, så modulernas regler vinner vid lika specificitet. */
.csos-hero :where(h1, h2, h3, h4, p, ul, figure),
.csos-sidhero :where(h1, h2, h3, h4, p, ul, figure),
.csos-sektion :where(h1, h2, h3, h4, p, ul, figure) {
	margin: 0;
}

/* Länkar ärver textfärgen i stället för temats blå. Knapparna (.bb-btn) får behålla
   designsystemets färger, och modulernas egna länkfärger vinner eftersom de laddas senare. */
.csos-hero :where(a:not(.bb-btn)),
.csos-sidhero :where(a:not(.bb-btn)),
.csos-sektion :where(a:not(.bb-btn)) {
	color: inherit;
	text-decoration: none;
}

/* Temats a:hover / a:focus-visible (blått) ska inte slå igenom i modulerna.
   Specificitet 0,2,0: över temats 0,1,1 men lika med modulernas egna hoverregler,
   som laddas senare och därför vinner. Designsystemets länklistor (.bb-links) har
   högre specificitet och behåller sin orange hover. */
.csos-hero :where(a:not(.bb-btn)):hover,
.csos-sidhero :where(a:not(.bb-btn)):hover,
.csos-hero :where(a:not(.bb-btn)):focus-visible,
.csos-sektion :where(a:not(.bb-btn)):hover,
.csos-sektion :where(a:not(.bb-btn)):focus-visible {
	color: inherit;
}

/* Knappar med tangentbordsfokus behåller sin vita text (temat gör den annars blå).
   :not(:hover) låter designsystemets hovertillstånd gälla som vanligt. */
.csos-hero .bb-btn:focus-visible:not(:hover),
.csos-sidhero .bb-btn:focus-visible:not(:hover),
.csos-sektion .bb-btn:focus-visible:not(:hover) {
	color: var(--ds-color-on-dark);
}

/* Sektioner med valbar bakgrund */
.csos-sektion {
	padding: var(--ds-space-section) 0;
	background: var(--ds-color-surface);
	color: var(--ds-color-text);
}
.csos-sektion--ljus {
	background: var(--ds-color-surface-alt);
}
.csos-sektion--mork {
	background: var(--ds-color-ink);
	color: var(--ds-color-on-dark);
}

/* Sektionsrubrik: orange på ljus botten, vit på mörk */
.csos-sektion .csos-rubrik {
	font-size: var(--ds-text-2xl);
	color: var(--ds-color-brand);
}
.csos-sektion--mork .csos-rubrik {
	color: var(--ds-color-on-dark);
}
.csos-rubrik--center {
	text-align: center;
}

/* Ingress under en centrerad sektionsrubrik, med lagom radlängd */
.csos-sektion .csos-ingress {
	max-width: 640px;
	margin: var(--ds-space-sm) auto 0;
	font-size: var(--ds-text-lg);
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
}
.csos-sektion--mork .csos-ingress {
	color: var(--ds-color-on-dark-muted);
}

/* WordPress ger lat laddade bilder med sizes="auto" en platshållarstorlek på
   3000 × 1500 px (contain-intrinsic-size). Modulernas bilder har egna mått. */
.csos-hero img,
.csos-sidhero img,
.csos-sektion img {
	contain-intrinsic-size: none;
}

/* Meddelande i byggaren när en modul saknar innehåll */
.csos-tomt {
	margin: 0;
	padding: var(--ds-space-lg);
	border: 1px dashed var(--ds-color-line);
	text-align: center;
	color: var(--ds-color-text-muted);
}

/* Loggorad – används av modulen Loggorad och av loggofältet i Bild och text.
   Ligger här eftersom BB bara laddar en moduls egen CSS där just den modulen finns. */
.csos-loggorad {
	--csos-logga-hojd: 64px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-space-md) var(--ds-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}
.csos-loggorad--center {
	justify-content: center;
}
.csos-loggorad--hoger {
	justify-content: flex-end;
}
.csos-loggorad__logga {
	margin: 0;
}
.csos-loggorad__logga a {
	display: block;
	transition: opacity var(--ds-transition-base);
}
.csos-loggorad__logga a:hover,
.csos-loggorad__logga a:focus-visible {
	opacity: 0.8;
}
.csos-loggorad__logga img {
	display: block;
	width: auto;
	height: var(--csos-logga-hojd);
	max-width: none;
	contain-intrinsic-size: none;
}
@media (max-width: 640px) {
	.csos-loggorad__logga img {
		height: calc(var(--csos-logga-hojd) * 0.75);
	}
}