/*
 * Temaets stilark: bare det theme.json ikke kan uttrykke (oppsett, fokus og
 * overflyt).
 * Farger, skrift og avstander kommer fra preset-variablene i theme.json.
 */

/*
 * Sidelengs overflyt klippes på sidenivå med clip, ikke hidden: hidden
 * ødelegger sticky (hoppemenyen på mobil). wp-standards, «Vannrett overflow».
 */
.wp-site-blocks {
	overflow-x: clip;
}

:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--skog);
	outline-offset: 2px;
}

/* Header */
.reglene-topp {
	background: var(--wp--preset--color--flate);
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

.reglene-topp__indre,
.reglene-bunn__indre {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
}

.reglene-topp__indre {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	min-height: 72px;
	padding-block: var(--wp--preset--spacing--30);
}

.reglene-topp__hoyre {
	flex: 1 1 auto;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

/* Ordmerket: statisk tekst i mønstrene topp og bunn, ikke nettstedsnavnet
   (ORD-20261102-reglene-header-320). Logoen er to kort i palettens farger
   foran ordmerket. Pynt, ikke innhold. */
.reglene-logo {
	margin: 0;
	font-family: var(--wp--preset--font-family--overskrift);
	font-size: 1.625rem;
	font-weight: 400;
}

/* I headeren 22 px på mobil og 26 px fra nettbrett, som i designet. */
.reglene-topp .reglene-logo {
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.625rem);
}

.reglene-logo a {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--blekk);
	text-decoration: none;
}

.reglene-logo a::before {
	content: "";
	flex: none;
	width: 34px;
	height: 34px;
	background: url(../img/logo.svg) center / contain no-repeat;
}

.reglene-hovedmeny {
	flex: 1 1 auto;
	gap: 4px var(--wp--preset--spacing--50);
}

.reglene-hovedmeny .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--blekk);
	text-decoration: none;
}

.reglene-hovedmeny .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* Meny-knappene får fast størrelse før skriptet lastes, så de ikke flytter seg
   (CLS, 2.4). */
.reglene-hovedmeny .wp-block-navigation__responsive-container-open,
.reglene-toppsok .wp-block-search__button {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
}

.reglene-toppsok .wp-block-search__button {
	color: var(--wp--preset--color--blekk);
	background: var(--wp--preset--color--flate);
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: var(--wp--custom--radius--pille);
}

/* Søket krymper ikke: ellers klippes knappen av sin egen beholder når
   tittelen er lang. */
.reglene-toppsok {
	flex-shrink: 0;
}

/* Mobil (A6): knappene får plass først. Tittelen kan krympe og brytes,
   knappegruppen krymper ikke, og menyknappen blir innenfor vinduet ned til
   320 px uansett hvor lang tittelen er. */
@media (max-width: 599px) {

	.reglene-topp__indre {
		position: relative;
		gap: var(--wp--preset--spacing--20);
	}

	.reglene-topp .reglene-logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	.reglene-topp .reglene-logo a {
		gap: var(--wp--preset--spacing--10);
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.reglene-topp .reglene-logo a::before {
		width: 28px;
		height: 28px;
	}

	.reglene-topp__hoyre {
		flex: 0 0 auto;
		gap: 4px;
	}

	/* Søkeknappen som i designet: 44 × 44 uten ramme. */
	.reglene-toppsok .wp-block-search__button {
		width: 44px;
		padding: 0;
		border-color: transparent;
		background: transparent;
	}

	/* Utvidet søk legger seg over headeren fra venstre kant til menyknappen,
	   så menyknappen blir værende i vinduet (F2). */
	.reglene-toppsok:not(.wp-block-search__searchfield-hidden) {
		position: absolute;
		z-index: 2;
		inset-block: 0;
		inset-inline: var(--wp--style--root--padding-left) calc(var(--wp--style--root--padding-right) + 48px);
		display: flex;
		align-items: center;
		background: var(--wp--preset--color--flate);
	}

	/* Core setter bredden på søkefeltet inline. */
	.reglene-toppsok:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		width: 100% !important;
	}

	.reglene-toppsok:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}

/* Footer */
.reglene-bunn {
	color: var(--wp--preset--color--bunntekst);
	background: var(--wp--preset--color--blekk);
}

.reglene-bunn__indre {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
	padding-block: var(--wp--preset--spacing--70);
}

.reglene-bunn .reglene-logo a,
.reglene-bunn a {
	color: var(--wp--preset--color--flate);
}

.reglene-bunn__tekst {
	max-width: 420px;
	margin: 0;
	font-size: var(--wp--preset--font-size--liten);
}

.reglene-bunnmeny .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: underline;
}

/* Samtykkebanneret (laki-cmp, vendret uendret i reglene-kjerne):
   reglenes farger i stedet for standardblå. Variablene settes på
   #laki-cmp, så de vinner uansett rekkefølgen på stilarkene. Lenken,
   kanten, de sekundære knappene og fokusringen er blå rett i cmp.css
   og overstyres her. «Avvis alle» og «Aksepter alle» er fortsatt like
   (laki-cmp-regelen). */
#laki-cmp {
	--laki-cmp-btn-bg: var(--wp--preset--color--skog);
	--laki-cmp-btn-fg: #fff;
	--laki-cmp-btn-bg-hover: var(--wp--preset--color--skog-mork);
	border-top-color: var(--wp--preset--color--skog);
	accent-color: var(--wp--preset--color--skog);
}

#laki-cmp .laki-cmp__text a {
	color: var(--wp--preset--color--skog);
}

#laki-cmp .laki-cmp__btn--settings,
#laki-cmp .laki-cmp__btn--save {
	color: var(--wp--preset--color--skog);
	border-color: var(--wp--preset--color--skog);
}

#laki-cmp .laki-cmp__btn:focus-visible,
#laki-cmp .laki-cmp__title:focus-visible {
	outline-color: var(--wp--preset--color--skog);
}

/* Vanlige sider og arkiver */
.reglene-side {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--90);
}

/* Spillsiden: hovedkolonne og sidekolonne på bred skjerm, én kolonne ellers. */
.reglene-spillside {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--80);
	align-items: flex-start;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60) var(--wp--style--root--padding-left) var(--wp--preset--spacing--90);
}

.reglene-spillside__hoved {
	display: flex;
	flex: 999 1 640px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	min-width: 0;
}

.reglene-spillside__topp {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.reglene-spillside__topp > * {
	margin: 0;
}

.reglene-spillside__innhold {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
}

.reglene-spillside__innhold > * {
	margin-block: 0;
}

/* Overskriften i en seksjon står tett på innholdet under. */
.reglene-spillside__innhold > h2 {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--70) + 18px);
	scroll-margin-top: 96px;
}

.reglene-spillside__side {
	display: flex;
	flex: 1 1 280px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.reglene-spillside__side > * {
	margin: 0;
}

/* På smal skjerm erstattes sidekolonnens innholdsliste og annonse av chips og
   annonseplassen i hovedkolonnen (designet uno-mobil). */
@media (max-width: 781px) {

	.reglene-spillside {
		gap: var(--wp--preset--spacing--70);
		padding-top: var(--wp--preset--spacing--40);
	}

	.reglene-spillside__side .wp-block-reglene-hoppemeny,
	.reglene-spillside__side .wp-block-reglene-annonseplass {
		display: none;
	}

	.reglene-spillside__side:not(:has(> :not(.wp-block-reglene-hoppemeny, .wp-block-reglene-annonseplass))) {
		display: none;
	}
}

/*
 * Lange ord i overskrifter («Behandlingsansvarlig» ved 320 px) deles eller
 * brytes, så de aldri går utenfor vinduet (ORD-20261102).
 */
:where(h1, h2, h3, h4) {
	overflow-wrap: break-word;
	hyphens: auto;
}

/*
 * Tabeller ruller inne i seg selv, aldri hele siden.
 * Beholderen kan få fokus (functions.php).
 */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table:focus-visible {
	outline: 2px solid var(--wp--preset--color--skog);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

html {
	scroll-behavior: smooth;
}

/* Mobil: søk og meny til høyre, som i designet. Søket står før menyen i
   DOM (topp.php), så rekkefølgen er den samme visuelt og med tastaturet. */
@media (max-width: 599px) {

	.reglene-hovedmeny {
		flex: 0 0 auto;
	}
}

/* Bred skjerm: lenkene først og søket til slutt, som i designet. Det
   avviker fra DOM-rekkefølgen (søket først), se docs/komponenter.md K1. */
@media (min-width: 600px) {

	.reglene-toppsok {
		order: 2;
	}
}

/* Blokkstilen «poeng» på tabeller: tynne linjer, tall høyrestilt (K16). */
.wp-block-table.is-style-poeng {
	overflow-x: auto;
}

.wp-block-table.is-style-poeng table {
	border-collapse: collapse;
}

.wp-block-table.is-style-poeng :is(th, td) {
	padding: var(--wp--preset--spacing--20) 18px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

.wp-block-table.is-style-poeng thead {
	border-bottom: 0;
}

.wp-block-table.is-style-poeng th {
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 400;
	color: var(--wp--preset--color--dempet);
}

.wp-block-table.is-style-poeng tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-poeng :is(th, td):last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Merket på demoinnhold (bare i wp-env). */
.reglene-demo {
	align-self: flex-start;
	padding: 2px 10px;
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 700;
	color: var(--wp--preset--color--blekk);
	background: var(--wp--preset--color--sennep);
	border-radius: var(--wp--custom--radius--pille);
}

/* Forsiden: luft mellom seksjonene; overskrift og «Alle spill» på én linje. */
.reglene-forside {
	padding-bottom: var(--wp--preset--spacing--80);
}

.reglene-forside .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.reglene-forside .wp-block-post-content > .wp-block-reglene-tvistband {
	margin-block: var(--wp--preset--spacing--80);
}

.reglene-forside .wp-block-post-content > .wp-block-reglene-annonseplass {
	margin-block-start: var(--wp--preset--spacing--70);
}

.reglene-seksjonstopp {
	align-items: baseline;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--50);
}

.reglene-seksjonstopp > * {
	margin: 0;
}

.reglene-seksjonstopp a {
	font-weight: 700;
}

.reglene-kategorier {
	gap: var(--wp--preset--spacing--30);
}

/* Varianter står i et rutenett (gruppe med grid i innholdet). */
.reglene-varianter {
	gap: var(--wp--preset--spacing--30);
}