/*
 * Sikker-redningsvest.dk: bredere indholdskolonne, købsknapper, forsidens produkttabel og hovedmenuen.
 *
 * Twenty Twenty låser teksten til 58rem (580 px). På skærme fra 1000 px
 * placerer temaet billeder med alignleft og alignright absolut ude i margenen,
 * så kun afsnit med billeder ser brede ud. Her får indholdet 120rem, temaets
 * egen "wide"-bredde, og billederne flyder inde i kolonnen med teksten rundt om.
 *
 * Temaets egen fil i /wp-content/ røres ikke. Denne fil ligger uden for
 * /wp-content/, så den ikke caches en uge.
 */

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 120rem;
}

@media (min-width: 660px) {

	.entry-content > p .alignleft,
	.entry-content > .wp-block-image .alignleft {
		margin-left: 0;
	}

	.entry-content > p .alignright,
	.entry-content > .wp-block-image .alignright {
		margin-right: 0;
	}

	.entry-content > .alignleft {
		margin-left: max(2rem, calc((100% - 120rem) / 2));
	}

	.entry-content > .alignright {
		margin-right: max(2rem, calc((100% - 120rem) / 2));
	}
}

@media (min-width: 1000px) {

	.entry-content > .alignleft,
	.entry-content > p .alignleft,
	.entry-content > .wp-block-image .alignleft,
	.entry-content > .alignright,
	.entry-content > p .alignright,
	.entry-content > .wp-block-image .alignright {
		position: static;
		right: auto;
		left: auto;
		max-width: 50%;
	}
}

/*
 * Købsknapper: "Til butik" i forsidens tabel og de centrerede knapper på
 * undersiderne (de tidligere [button]-koder).
 *
 * Temaets egen knap (.faux-button) er stor, står med versaler og knækkede
 * midt i ordet ("TIL BUTI K") i tabellens smalle linkkolonne. Denne er mindre,
 * har almindelige bogstaver og temaets accentfarve.
 */

.entry-content a.knap {
	background-color: #cd2653;
	border-radius: 0.4rem;
	color: #fff;
	display: inline-block;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.25;
	padding: 1rem 1.8rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s linear;
}

@supports ( font-variation-settings: normal ) {

	.entry-content a.knap {
		font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	}
}

.entry-content a.knap:hover,
.entry-content a.knap:focus {
	background-color: #a51e43;
	color: #fff;
	text-decoration: none;
}

/*
 * Topbaren med reklameoplysningen øverst på hver side og mærket
 * "Reklamelink" ved hvert kommercielt link (src/data/site.ts,
 * src/lib/reklame.ts). Obsidian Media-afgørelsen 15-10-2026 og Thomas'
 * reklame-standard 17-10-2026: oplysningen står før menuen og før første link
 * og bliver stående øverst på skærmen, og linkene skal selv fremstå som
 * reklame - så ingen nedtonet småtekst.
 *
 * Topbaren er klæbende alene. Headeren under den var aldrig klæbende og er
 * det heller ikke nu: den ruller væk som før og glider ind BAG topbaren
 * (z-index 50 er over headerens indhold, der højst har z-index auto/1).
 * Menu- og søgemodalen (z-index 99 og 999) starter under topbaren, så den
 * også står, når menuen er åben på mobil.
 *
 * --reklamebar-hoejde er topbarens højde. public/skript/ui.js måler den og
 * sætter den præcist; tallene her er reserven, før scriptet har kørt (fx et
 * ankerhop ved indlæsning) og uden JavaScript. Målt igen 17-10-2026 med den
 * korte mobiltekst under 768 px: kort tekst 43 px (to linjer) under 352 px og
 * 26 px (én linje) til 699, 36 px fra 700 til 767; lang tekst 57 px (to
 * linjer) fra 768 til 871 og 36 px (én linje) fra 872. Grænserne her ligger
 * lidt højere end målt, så en klassisk rullebjælke på 15-17 px er regnet med,
 * og tallene er rundet op, så et anker hellere lander lidt for lavt end bag
 * topbaren.
 */

:root {
	--reklamebar-hoejde: 4.8rem;
}

@media (min-width: 420px) {

	:root {
		--reklamebar-hoejde: 3rem;
	}
}

@media (min-width: 700px) {

	:root {
		--reklamebar-hoejde: 4rem;
	}
}

@media (min-width: 768px) {

	:root {
		--reklamebar-hoejde: 6rem;
	}
}

@media (min-width: 900px) {

	:root {
		--reklamebar-hoejde: 4rem;
	}
}

/*
 * Ankre lander lige under topbaren. Afstanden ligger KUN her: scroll-margin
 * på selve målet ville blive lagt oven i (Thomas' standard, punkt 1).
 */
html {
	scroll-padding-top: calc(var(--reklamebar-hoejde) + 1rem);
}

/* En tone mørkere end indholdets sandfarve, så topbaren står tydeligt både over den hvide header og over indholdet. */
.reklamebar {
	background-color: #e9e2d0;
	border-bottom: 0.1rem solid #dcd7ca;
	color: #000;
	font-size: 1.5rem;
	padding: 0.7rem 2rem;
	position: sticky;
	text-align: center;
	top: 0;
	z-index: 50;
}

/* Temaets p har line-height 1.5 og 1em bundmargen; her skal linjen være tæt. */
.reklamebar p {
	line-height: 1.4;
	margin: 0 auto;
	max-width: 120rem;
}

/*
 * Kort tekst under 768 px, den lange fra 768 px (REKLAME.oplysningKort og
 * .oplysning i src/data/site.ts). Den skjulte er display:none, så skærmlæsere
 * kun læser den synlige. Mobil først: uden mediaforespørgsel står den korte.
 */
.reklamebar-lang {
	display: none;
}

@media (min-width: 768px) {

	.reklamebar-lang {
		display: block;
	}

	.reklamebar-kort {
		display: none;
	}
}

/*
 * Kompakt på mobil, hvor topbaren hele tiden står i vejen. Den korte tekst er
 * ca. 336 px bred; med 0.8rem luft i siderne står den på én linje fra 352 px,
 * så en 360 px-skærm har lidt margen.
 */
@media (max-width: 699px) {

	.reklamebar {
		font-size: 1.3rem;
		padding: 0.4rem 0.8rem;
	}

	.reklamebar p {
		line-height: 1.3;
	}
}

.menu-modal,
.search-modal {
	top: var(--reklamebar-hoejde);
}

.reklamelink {
	border: 0.1rem solid currentColor;
	border-radius: 0.3rem;
	color: #6d6d6d;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.6;
	padding: 0 0.5rem;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/*
 * Knapper og billedlinks: mærket står på sin egen linje under knappen eller
 * billedet, aldrig ved siden af og aldrig inde i linket, med 12 px luft
 * (1rem = 10 px i temaet). Standarden kræver mindst 12 px synlig luft ved
 * knapper og 8 px i sammenligningstabeller (Thomas 19-10-2026; før 6 px).
 * Knappens farvede flade og produktfotoets går helt ud til kanten, så de
 * 12 px er den synlige luft - også i forsidens tabel. scripts/tjek-reklame.mjs
 * håndhæver det. Linjen følger forælderens tekstjustering, så mærket står
 * midt under de centrerede knapper. Billedet i forsidens tabel flyder til
 * venstre (alignleft); clear lægger mærket under det i stedet for ved siden af.
 */
.reklamelink-linje {
	display: block;
	line-height: 1;
	margin-top: 1.2rem;
}

/* clear sluger margin-top, når linjen skal under et flydende billede, så luften er polstring her. */
.reklamelink-linje--billede {
	clear: both;
	margin-top: 0;
	padding-top: 1.2rem;
}

/*
 * Artikelkort og lister (Thomas' reklame-standard 18-10-2026, § 3a).
 *
 * I arkiverne (blog, kategori, tag, forfatter) står hvert indlæg med sit
 * fremhævede billede. Har indlægget kommercielle links, står
 * REKLAME.artikelkort i billedets øverste venstre hjørne (Artikel.astro):
 * .kortbillede slutter tæt om billedet (temaet centrerer billeder, der er
 * smallere end spalten), og mærket ligger over det. Topbarens farver
 * (sandfarvet flade, sort tekst, 16,3:1) og kant og "Reklamelink"-mærkets skrift
 * (1,2rem, 600, spærret 0,04em) - men ikke versaler, så sætningen kan læses.
 * Fladen er helt dækkende, så kontrasten er den samme på ethvert billede.
 * scripts/tjek-reklame.mjs stopper buildet, hvis reglerne forsvinder.
 */
.kortbillede {
	margin: 0 auto;
	max-width: 100%;
	position: relative;
	width: fit-content;
}

.kortbillede .artikelreklame {
	background-color: #e9e2d0;
	border-bottom: 0.1rem solid #dcd7ca;
	border-right: 0.1rem solid #dcd7ca;
	color: #000;
	font-size: 1.2rem;
	font-weight: 600;
	left: 0;
	letter-spacing: 0.04em;
	line-height: 1.4;
	max-width: calc(100% - 2rem);
	padding: 0.4rem 0.8rem;
	pointer-events: none;
	position: absolute;
	top: 0;
	z-index: 1;
}

/* Linjen over en liste uden billeder, hvor alle sider har kommercielle links,
   og mærket ved den enkelte side i en blandet liste (404-siden:
   REKLAME.artikelpunkt) - lige efter linket, uden for det. Og
   REKLAME.artikelkort som tekst under et indlæg uden fremhævet billede i
   arkiverne (præciseringerne 19-10-2026, punkt 3 og 4). Som
   "Reklamelink"-mærkets skrift, men en tone mørkere: #6d6d6d gav 4,5:1 på
   sandfarven (målt i browseren), #555 giver 6,5:1. */
.artikelliste-reklame,
.listereklame,
.artikelreklame-tekst {
	color: #555;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* Teksten under kortets hoved står, hvor billedet ellers står: centreret i
   hovedets bredde, lige under metalinjen. */
.artikelreklame-tekst {
	margin: 1rem auto 0;
	max-width: 58rem;
	text-align: center;
	width: calc(100% - 4rem);
}

/* Arkivernes uddrag (src/komponenter/Artikel.astro, src/lib/uddrag.ts): linket "Læs
   hele indlægget" står under uddraget med luft til næste indlæg. */
.entry-content p.laes-videre {
	margin-bottom: 4rem;
	margin-top: 1.6rem;
}

/* Den dataansvarlige på /privatlivspolitik/ (src/lib/ejeroplysninger.ts): en
   adresse, ikke et citat, så browserens kursiv skal væk. Registreringsnummeret
   holdes samlet, ellers brydes det ved bindestregen ved 360 px. */
.entry-content address.dataansvarlig {
	font-style: normal;
	overflow-wrap: anywhere;
}

.dataansvarlig .hel {
	white-space: nowrap;
}

/*
 * Klik-for-at-afspille på YouTube-videoerne (src/lib/youtube.ts, ui.js).
 * Fladen er 16:9 og så bred som den gamle iframe (inline max-width), centreret
 * under sin overskrift. Bliver titlen for lang til fladen på en smal skærm,
 * vokser fladen i højden i stedet for at klippe teksten (aspect-ratio giver
 * efter for indholdet). Afspilleren ligger absolut i samme flade efter klik.
 * Temaets knapstil (rød, versaler, polstring) er nulstillet; fokusringen står
 * uden for fladen i temaets accentfarve. Linjen under har #555 som
 * reklamemærkerne (6,5:1 på sandfarven).
 */
.yt-video {
	display: block;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.yt {
	aspect-ratio: 16 / 9;
	background: #1d1d1d;
	display: flex;
	position: relative;
}

.yt iframe {
	border: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.entry-content .yt-knap {
	align-items: center;
	background: #1d1d1d;
	color: #fff;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	font-size: 1.6rem;
	gap: 1rem;
	justify-content: center;
	letter-spacing: normal;
	line-height: 1.3;
	padding: 1.6rem;
	text-transform: none;
	width: 100%;
}

.entry-content .yt-knap:focus-visible {
	outline: 0.3rem solid #cd2653;
	outline-offset: 0.3rem;
}

.yt-ikon {
	flex: none;
	height: auto;
	width: 6.8rem;
}

.yt-ikon rect {
	fill: #cd2653;
}

.yt-ikon path {
	fill: #fff;
}

.yt-tekst {
	font-weight: 600;
	max-width: 46rem;
}

.yt-titel {
	display: block;
	font-weight: 400;
	margin-top: 0.4rem;
}

.yt-note {
	color: #555;
	display: block;
	font-size: 1.4rem;
	line-height: 1.4;
	margin-top: 0.8rem;
}

/* Forsidens tabel: mærket midt under knappen. */
.tablepress-id-1 td.column-5 {
	text-align: center;
}

/*
 * ... og midt under billedet. På mobil er billedkolonnen 8rem, smallere end
 * mærket (ca. 10 rem). Flex centrerer det alligevel, så det stikker lige
 * langt ud til begge sider - ud i kortets polstring og kolonneafstanden, ikke
 * ind over navnet og beskrivelsen. En bredere kolonne ville skubbe "Til butik"
 * ud over kanten ved 340 px.
 */
.tablepress-id-1 td.column-1 .reklamelink-linje {
	display: flex;
	justify-content: center;
}

/*
 * Forsidens produkttabel (TablePress-tabel 1).
 *
 * Knappen og prisen må ikke knække over flere linjer ("349, -"). Under 700 px
 * var tabellen bredere end skærmen (461 px på en telefon med 375 px), og main
 * skjuler det, der stikker ud, så pris og link forsvandt. Derfor bliver hver
 * række her et kort: billedet til venstre, navn og beskrivelse ved siden af og
 * pris og knap nederst. Kolonneoverskrifterne skjules, for kortet forklarer
 * sig selv.
 */

.tablepress-id-1 .knap,
.tablepress-id-1 td.column-4 {
	white-space: nowrap;
}

@media (min-width: 700px) {

	.tablepress-id-1 > tbody > tr > td {
		vertical-align: middle;
	}
}

@media (max-width: 699px) {

	.tablepress-id-1,
	.tablepress-id-1 > tbody {
		display: block;
	}

	.tablepress-id-1 > thead {
		display: none;
	}

	/* TablePress giver rækkerne content-visibility: auto, der får kortene til at hoppe, når man scroller. */
	.tablepress-id-1.tablepress > .row-hover > tr {
		content-visibility: visible;
	}

	.tablepress-id-1 > tbody > tr {
		align-items: start;
		background-color: #fff;
		border-top: 0.1rem solid #dcd7ca;
		column-gap: 1.5rem;
		display: grid;
		grid-template-columns: 8rem auto 1fr;
		padding: 1.5rem;
		row-gap: 0.6rem;
	}

	.tablepress-id-1 > tbody > tr:last-child {
		border-bottom: 0.1rem solid #dcd7ca;
	}

	/* TablePress lægger stribe- og hoverfarven på cellerne; kortet skal være hvidt hele vejen. */
	.tablepress-id-1 > tbody > tr > * {
		background-color: transparent !important;
		border: 0;
		padding: 0;
	}

	.tablepress-id-1 td.column-1 {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	.tablepress-id-1 td.column-1 img {
		float: none;
		height: 8rem;
		width: 8rem;
	}

	.tablepress-id-1 td.column-2,
	.tablepress-id-1 td.column-3 {
		grid-column: 2 / 4;
	}

	.tablepress-id-1 td.column-2,
	.tablepress-id-1 td.column-4 {
		font-weight: 700;
	}

	.tablepress-id-1 td.column-4,
	.tablepress-id-1 td.column-5 {
		align-self: center;
	}

	.tablepress-id-1 td.column-4 {
		grid-column: 2;
	}

	.tablepress-id-1 td.column-5 {
		grid-column: 3;
		justify-self: end;
	}
}

/*
 * Under 340 px er der ikke plads til pris og knap side om side. Ved 280 px
 * (fx Safaris tekstzoom) stak rækkerne 26-37 px ud, og tabellen klipper, så
 * "Til butik" og enden af navn og beskrivelse var skåret af. Ved 320 px gik
 * cellerne 12 af rækkens 15 px polstring ind, så knappen stod helt ude ved
 * kanten. Her får knappen sin egen linje under prisen (09-10-2026).
 */

@media (max-width: 339px) {

	.tablepress-id-1 td.column-5 {
		grid-column: 2 / 4;
		justify-self: start;
	}
}

/*
 * Hovedmenuen.
 *
 * Temaet lægger titel, menu og søgeknap på én række. Med ni menupunkter var
 * der ikke plads, så menuen knækkede over to linjer med "Redningsflåde" og
 * "Blog" alene til højre, også ved 1920 px. Nu er teksten 17 px og afstanden
 * lidt mindre, og menuen knækker aldrig midt i et menupunkt. Fra 1760 px står
 * det hele på én række som før. Mellem 1000 og 1759 px får menuen sin egen
 * række under titlen, venstrestillet, og søgeknappen står ud for titlen.
 * Under 1000 px bruger temaet sin egen menuknap, og den er ikke rørt.
 */

@media (min-width: 1000px) {

	ul.primary-menu {
		font-size: 1.7rem;
		margin: -0.8rem 0 0 -1.8rem;
	}

	.primary-menu > li {
		margin: 0.8rem 0 0 1.8rem;
	}

	.primary-menu a {
		white-space: nowrap;
	}
}

@media (min-width: 1760px) {

	.header-titles {
		align-items: flex-start;
		flex-direction: column;
	}

	.header-titles-wrapper {
		flex: 0 0 auto;
		max-width: none;
	}

	ul.primary-menu {
		flex-wrap: nowrap;
	}
}

@media (min-width: 1000px) and (max-width: 1759px) {

	.header-inner {
		flex-wrap: wrap;
	}

	/* Menuen og søgeknappen ligger i samme wrapper; display: contents lader dem få hver sin plads i rækkerne. */
	.header-navigation-wrapper {
		display: contents;
	}

	.header-titles-wrapper {
		flex: 1 1 auto;
		justify-content: flex-start;
		max-width: none;
		order: 1;
	}

	.header-toggles {
		order: 2;
	}

	.primary-menu-wrapper {
		flex: 1 0 100%;
		margin-top: 2rem;
		order: 3;
	}

	ul.primary-menu {
		justify-content: flex-start;
	}
}

/*
 * Grundlagsboksen lige efter H1 på sider med reklamelinks og popuppen, den
 * åbner (src/komponenter/Grundlagsboks.astro, src/data/grundlagsboks.ts).
 * Popuppen er HTML's popover-attribut: den åbnes og lukkes af knapperne uden
 * JavaScript og ligger i browserens øverste lag, så den også dækker den
 * klæbende topbar. Sandfarve og mørk kant, så boksen ikke ligner en
 * købsknap (accentfarven er forbeholdt knapperne). Sort tekst på #f4f0e4 er
 * over 15:1, og knapteksten #a51e43 på samme flade er over 6:1.
 */
.entry-content > .grundlagsboks {
	background-color: #f4f0e4;
	border-left: 0.4rem solid #6f6648;
	border-radius: 0 0.4rem 0.4rem 0;
	box-sizing: border-box;
	margin-bottom: 3rem;
	margin-top: 0;
	padding: 1.2rem 1.6rem;
}

.grundlagsboks > p {
	color: #000;
	font-size: 1.7rem;
	line-height: 1.5;
	margin: 0;
	overflow-wrap: break-word;
}

.grundlagsboks-knap {
	background: none;
	border: 0;
	border-radius: 0;
	color: #a51e43;
	cursor: pointer;
	display: inline;
	font: inherit;
	font-weight: 700;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
	text-decoration: underline;
	text-decoration-thickness: 0.2rem;
	text-transform: none;
	text-underline-offset: 0.4rem;
	white-space: nowrap;
}

.grundlagsboks-knap:hover,
.grundlagsboks-knap:focus-visible {
	color: #7a1632;
}

.grundlagsboks-knap:focus-visible,
.grundlagsboks-luk:focus-visible {
	outline: 0.3rem solid #cd2653;
	outline-offset: 0.3rem;
}

.grundlagsboks-popup {
	background: #fff;
	border: 0;
	border-radius: 0.4rem;
	border-top: 0.4rem solid #6f6648;
	box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.28);
	box-sizing: border-box;
	color: #000;
	margin: auto;
	max-height: calc(100vh - 3.2rem);
	max-height: calc(100dvh - 3.2rem);
	overflow-y: auto;
	padding: 2.4rem 2.4rem 2rem;
	width: min(54rem, calc(100vw - 3.2rem));
}

.grundlagsboks-popup::backdrop {
	background: rgba(20, 20, 20, 0.55);
}

.grundlagsboks-popup p {
	font-size: 1.7rem;
	line-height: 1.5;
	margin: 0 0 1.4rem;
	overflow-wrap: break-word;
}

.grundlagsboks-popup .grundlagsboks-popup-titel {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 1.2rem;
}

.grundlagsboks-luk {
	background-color: #6f6648;
	border: 0;
	border-radius: 0.4rem;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: normal;
	margin-top: 0.4rem;
	padding: 1rem 2rem;
	text-transform: none;
}

.grundlagsboks-luk:hover {
	background-color: #4f4833;
}

@media (max-width: 479px) {

	.entry-content > .grundlagsboks {
		padding: 1rem 1.2rem;
	}

	.grundlagsboks > p {
		font-size: 1.6rem;
	}

	.grundlagsboks-popup {
		padding: 2rem 1.6rem 1.6rem;
	}
}