/*
 * Globale regler: reset, delt knapp, band-rytme, header og footer. Blokk-CSS hører hjemme i
 * src/blocks/<navn>/style.scss.
 */

/* ─────────────────────────────  RESET  ───────────────────────────── */

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

html {
	scroll-behavior: smooth;
}

/*
 * `clip`, ikke `hidden`: `hidden` på én akse gjør den andres `visible` til `auto`, og body blir en
 * scroll-container. Da løsner hvert `position: sticky` i dokumentet når mega-navs rullelås setter
 * `overflow: hidden` på `<html>`.
 */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;

	/*
	 * Prosamålet fanget der kjernen definerer det: et band overskriver
	 * `--wp--style--global--content-size` for seg og sine, så et prosaband trenger et navn på
	 * målet som ikke leser sitt eget nye tak.
	 */
	--ft-prosamaal: var(--wp--style--global--content-size);
}

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

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: none;
	border: none;
}

input,
select,
textarea {
	font: inherit;
	color: inherit;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

details summary {
	cursor: pointer;
	list-style: none;
}

details summary::-webkit-details-marker {
	display: none;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	/* 2px: fokusringens tykkelse og avstand — tilgjengelighet, ikke spacing. */
	outline: 2px solid var(--wp--preset--color--gul);
	outline-offset: 2px;
}

.sr-only,
.screen-reader-text {
	position: absolute;
	/* 1px: sr-only-idiomet — flaten må finnes for skjermlesere, men ikke sees. */
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

/* ──────────────────────  TYPOGRAFI, GLOBALT  ────────────────────── */

/* Amatic-titler skal alltid brytes logisk, ikke bare i én blokk. */
h1,
h2,
.wp-block-post-title,
.wp-block-query-title {
	text-wrap: balance;
	text-transform: none;
}

/* Arkivet er fullt av lange versaler i løpende tekst, og et ord bredere enn spalta drar sida sidelengs. */
p {
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* ──────────────────────────  CONTAINER  ─────────────────────────── */

/*
 * Layout-wrapperen for markup som ikke er blokker — PHP-malene i fru-timian-shopify. Blokkmarkup
 * får det samme gratis av kjernens constrained layout. Aldri en query container.
 */
.ft-container {
	/*
	 * `+ 2 * sideinnrykk` fordi `bandbredde` er kolonnen og denne wrapperen er `border-box`:
	 * paddingen ligger innenfor max-widthen her, mens et bands rotpadding ligger utenfor den.
	 */
	max-width: calc(
		var(--wp--custom--bandbredde) + 2 * var(--wp--custom--sideinnrykk)
	);
	margin-inline: auto;
	padding-inline: var(--wp--custom--sideinnrykk);
}

/*
 * Samme wrapper ett hakk lenger inn. Bare padding, fordi `border-box` legger den innenfor
 * max-widthen — et band må i tillegg senke barnas `max-width`, siden bandets padding ligger utenfor
 * `wideSize`-taket.
 */
.ft-container--innrykk {
	padding-inline: calc(
		var(--wp--custom--sideinnrykk) + var(--wp--custom--bandinnrykk)
	);
}

/* ────────────────────────  BAND OG RYTME  ───────────────────────── */

/*
 * Et band er en full-bredde seksjon med egen bakgrunn og egen vertikal rytme. Blokkene inni eier
 * ingen av de to.
 *
 * Bredden settes som `contentSize` på bandet selv, aldri på barna: da er det kjernens egen
 * layoutregel som måler, og «Innholdsbredde» på en enkelt gruppe virker fortsatt. Kolonnen er
 * bandets bredde og ikke prosamålet — et kortgrid skal ikke klemmes til 640px inne i et 1440px
 * band — og `.alignwide` får `wideSize` av kjernens egen regel.
 */
.ft-band {
	container-type: inline-size;
	container-name: ft-band;
	padding-block: var(--wp--preset--spacing--xxl);

	--wp--style--global--content-size: var(--wp--custom--bandbredde);
}

/*
 * Et bånd med et bredt barn gir fra seg sidepadding, og hever samtidig sitt eget barnetak.
 *
 * Bredden kan ikke ligge på barnet: kjernen skriver `margin-left/right: auto !important` på hvert
 * constrained barn som ikke er left/right/full — `.alignwide` er *ikke* utelatt — så ingen marg,
 * heller ikke en inline, bryter ut av bandets innholdsboks. Prototypens slike seksjoner har 24px
 * sidepadding der resten har `sideinnrykk`, og overskriften står i flukt med sporet, som er hvorfor
 * taket løftes for alle barna og ikke bare det brede.
 */
.ft-band.has-global-padding:has( > .alignwide ) {
	--wp--custom--bandbredde: var(--wp--style--global--wide-size);

	padding-inline: 1.5rem;
}

.ft-band--hero {
	background: var(--wp--preset--color--lys-blaa);
	padding-block: var(--wp--preset--spacing--xl);
}

/*
 * To klasser, fordi regelen konkurrerer med `padding-block` på `.ft-band--hero` selv. Faste rem:
 * prototypen har de samme to målene på 390px som på 1440px.
 */
.ft-band--hero.ft-band--hero-oppskrift {
	/* 3.625rem/6.25rem = prototypens 58px og 100px. */
	padding-block: 3.625rem 6.25rem;
}

.ft-band--filter {
	padding-block: var(--wp--preset--spacing--m);
}

/* Bandene hvor kolonnen *er* prosamålet — løpende tekst, ikke et rutenett. */
.ft-band.is-style-prosa {
	--wp--style--global--content-size: var(--ft-prosamaal);
}

/*
 * Det redaksjonelle innrykket. `min()` av to ledd og begge trengs: `100%` smalner med vinduet,
 * `bandbredde` er taket — uten det forsvinner innrykket på en bred skjerm, fordi et bands padding
 * ligger utenfor taket.
 */
.ft-band.is-style-innrykk {
	--wp--style--global--content-size: min(
		calc(var(--wp--custom--bandbredde) - 2 * var(--wp--custom--bandinnrykk)),
		calc(100% - 2 * var(--wp--custom--bandinnrykk))
	);
}

.ft-main > .ft-band + .ft-band {
	padding-block-start: 0;
}

/*
 * En blokk lagt rett i landingssidens innhold, utenfor et band, får bandets kolonne. Innholdet er en
 * flow-layout, så ellers har den ingen bredde i det hele tatt. Redigereren uten malvisning bærer ikke
 * malens klasse, bare layoutklassen, og det er derfor den står i lista.
 */
.wp-block-post-content.ft-landing > :where(:not(.alignfull, .alignleft, .alignright)),
.is-root-container.wp-block-post-content-is-layout-flow
	> :where(:not(.alignfull, .alignleft, .alignright)) {
	max-width: min(
		var(--wp--custom--bandbredde),
		calc(100% - 2 * var(--wp--custom--sideinnrykk))
	);
	margin-inline: auto;
}

/* «Bred» rett i innholdet er toolbarens brede mål, med samme sideinnrykk som kolonnen over. */
.wp-block-post-content.ft-landing > .alignwide,
.is-root-container.wp-block-post-content-is-layout-flow > .alignwide {
	max-width: min(
		var(--wp--style--global--wide-size),
		calc(100% - 2 * var(--wp--custom--sideinnrykk))
	);
}

/* Redigereren uten malvisning gir rotbeholderen sideinnrykket som padding, så kolonnen skal ikke trekke det fra igjen. */
.is-root-container.wp-block-post-content-is-layout-flow.has-global-padding
	> :where(:not(.alignfull, .alignleft, .alignright)) {
	max-width: var(--wp--custom--bandbredde);
}

.is-root-container.wp-block-post-content-is-layout-flow.has-global-padding > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

/* Kolonnen over har allerede trukket fra sideinnrykket, så en constrained gruppe i den skal ikke legge det til igjen. */
.wp-block-post-content.ft-landing > .has-global-padding:not(.alignfull),
.is-root-container.wp-block-post-content-is-layout-flow > .has-global-padding:not(.alignfull) {
	padding-inline: 0;
}

/*
 * En vanlig sides innhold står rett under tittelbandet og har ingen band rundt seg, så det får
 * bandets luft og innrykkets kolonne selv — men ikke luften over eller under et fullbreddeband, som
 * har sin egen. Kolonnen er `.ft-band.is-style-innrykk` sin, så tittelen står i flukt med teksten.
 */
.wp-block-post-content.ft-sideinnhold {
	padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xxl);

	--wp--style--global--content-size: min(
		calc(var(--wp--custom--bandbredde) - 2 * var(--wp--custom--bandinnrykk)),
		calc(100% - 2 * var(--wp--custom--bandinnrykk))
	);
}

/* Malen «Smal» står på prosamålet. Tre klasser, så den også slår papirarkets nulling av innrykket. */
.wp-block-post-content.ft-sideinnhold.ft-sideinnhold--smal {
	--wp--style--global--content-size: var(--ft-prosamaal);
}

.wp-block-post-content.ft-sideinnhold:has( > .alignfull:first-child ) {
	padding-block-start: 0;
}

.wp-block-post-content.ft-sideinnhold:has( > .alignfull:last-child ) {
	padding-block-end: 0;
}

/*
 * Tekst skrevet rett i en side. Bare barna av sloten, aldri etterkommerne: en kampanje bruker samme
 * mal, og blokkene der har egne lenker og lister.
 */
.wp-block-post-content.ft-sideinnhold > :is(p, ul, ol, .wp-block-details) a {
	color: var(--wp--preset--color--gul);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-post-content.ft-sideinnhold > :is(p, ul, ol, .wp-block-details) a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--tekst-hover);
}

.wp-block-post-content.ft-sideinnhold > :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.wp-block-post-content.ft-sideinnhold > ul {
	list-style: disc;
}

.wp-block-post-content.ft-sideinnhold > ol {
	list-style: decimal;
}

.wp-block-post-content.ft-sideinnhold > .wp-block-details {
	border-block-start: var(--wp--custom--linje);
}

.wp-block-post-content.ft-sideinnhold > .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

.wp-block-post-content.ft-sideinnhold > .wp-block-details:not( :has( + .wp-block-details ) ) {
	border-block-end: var(--wp--custom--linje);
}

.wp-block-post-content.ft-sideinnhold > .wp-block-details > summary {
	display: flex;
	gap: var(--wp--preset--spacing--s);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--wp--preset--spacing--xs);
	font-weight: 600;
}

/* 2px: strektykkelsen i vinkelen, en optisk verdi. */
.wp-block-post-content.ft-sideinnhold > .wp-block-details > summary::after {
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-block-end: 2px solid currentcolor;
	border-inline-end: 2px solid currentcolor;
	content: "";
	transform: translateY( -25% ) rotate( 45deg );
	transition: transform var(--wp--custom--overgang--rask);
}

.wp-block-post-content.ft-sideinnhold > .wp-block-details[open] > summary::after {
	transform: translateY( 25% ) rotate( -135deg );
}

.wp-block-post-content.ft-sideinnhold > .wp-block-details > :not( summary ) {
	margin-block: 0 var(--wp--preset--spacing--xs);
}

/* ───────────────────────  OPPSKRIFTSSIDEN  ──────────────────────── */

/*
 * Bandet under heroen beholder toppluften sin: `.ft-main > .ft-band + .ft-band` nuller den for
 * stablede band, men heroen har sin egen farge, og da er avstanden en del av designet.
 */
.ft-main > .ft-band--hero + .ft-band {
	padding-block-start: var(--wp--preset--spacing--xl);
}

/*
 * To-kolonnen på en enkelt oppskrift. Her og ikke i et blokkstilark, fordi rutenettet er forholdet
 * mellom blokkene, og hver av dem kan stå alene et annet sted.
 */
.ft-oppskrift {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
	align-items: start;
}

.ft-oppskrift__hoved,
.ft-oppskrift__sidespalte {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ft-oppskrift__sidespalte {
	position: relative;
	height: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	align-items: start;
	gap: var(--wp--preset--spacing--m);
}

.ft-oppskrift__sidespalte > .wp-block-fru-timian-author-card {
	grid-row: 1;
}

.ft-oppskrift__sidespalte > .wp-block-fru-timian-product-picks {
	grid-row: 3;
	position: relative;
	z-index: 2;
}

/*
 * Ingredienskortet følger leseren under den klebrige headeren, og et kort høyere enn vinduet ruller
 * inni seg. Et klebrig kort stopper ved spaltas bunn regnet med margen sin, så margen er produktenes
 * høyde (`--ft-plukkhoyde`, skrevet av `header-search/rulling.js`) og kortet stopper over dem.
 */
.ft-oppskrift__sidespalte > .wp-block-fru-timian-ingredients {
	--ft-klebetopp: calc(
		var(--ft-headerhoyde, 0rem) + var(--wp-admin--admin-bar--height, 0rem) + var(--wp--preset--spacing--s)
	);

	grid-row: 2;
	position: sticky;
	z-index: 1;
	top: var(--ft-klebetopp);
	max-block-size: calc(100vh - var(--ft-klebetopp) - var(--wp--preset--spacing--s));
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--lys-blaa);
}

.ft-oppskrift__sidespalte:has(> .wp-block-fru-timian-product-picks) > .wp-block-fru-timian-ingredients {
	margin-block-end: calc(var(--ft-plukkhoyde, 0rem) + var(--wp--preset--spacing--m));
}

/*
 * Begge er beholdere med egen `gap`, og gruppenes `blockGap` legger i tillegg en
 * `margin-block-start` på hvert barn utenom det første — i et rutenett en forskjøvet kolonne, i en
 * flexkolonne dobbel luft. To klasser, én mer enn `:root :where(.wp-block-group-is-layout-flow) > *`,
 * ellers avgjør lasterekkefølgen.
 */
.ft-oppskrift.is-layout-flow > *,
.ft-oppskrift__sidespalte.is-layout-flow > * {
	margin-block-start: 0;
}

/*
 * Prosasloten løses opp, så avsnittene blir søsken av bryteren og kan ordnes mot den. Malmodus
 * redigerer nøyaktig én `core/post-content`, så prosaen kan ikke deles i to blokker.
 */
.ft-oppskrift__hoved > .ft-prosa {
	display: contents;
}

/*
 * Instruksjonsgrensa, som `order`. `~ *` og ikke `:nth-child()`: hvor grensa står varierer per
 * oppskrift, og på en legacy-oppskrift uten h2 finnes den ikke — da treffer regelen ingenting, og
 * alt blir liggende i 0.
 */
.ft-oppskrift__hoved > .ft-prosa > h2:first-of-type,
.ft-oppskrift__hoved > .ft-prosa > h2:first-of-type ~ * {
	order: 2;
}

/*
 * `order` henger på `wp-block-*`-klassene og ikke på `.ft-*`: redigereren pakker blokka i sin egen
 * wrapper, som får `wp-block-*`, mens `.ft-*` blir sittende på markupen inni. En `order` der treffer
 * et element som ikke er et flex-barn.
 */

/*
 * En oppskrift uten sidespalte er én kolonne, ikke to med den ene tom. `:empty` krever at de to
 * blokkene står uten mellomrom i malen — linjeskiftet mellom to blokkkommentarer er en tekstnode og
 * teller som innhold. `:not(:has(*))` er ugyldig her: `:has()` kan ikke stå inne i `:has()`.
 */
.ft-oppskrift:has(> .ft-oppskrift__sidespalte:empty) {
	grid-template-columns: minmax(0, 1fr);
}

.ft-oppskrift:has(> .ft-oppskrift__sidespalte:empty) .ft-oppskrift__hoved {
	max-width: var(--ft-prosamaal);
	margin-inline: auto;
}

/*
 * Smalt band: én kolonne, og innholdet flettes. `display: contents` flater de to kolonnene ut slik
 * at alle fem blokkene blir barn av `.ft-oppskrift` og kan ordnes mot hverandre. Bandet spørres og
 * ikke vinduet — det er bandet som er containeren.
 */
@container ft-band (max-width: 70em) {
	.ft-oppskrift {
		display: flex;
		flex-direction: column;

		/*
		 * Ingen `gap`: prosaen er flatet ut hit, og en gap ville lagt seg mellom hvert avsnitt. Kortene
		 * under bærer sin egen luft.
		 */
		gap: 0;

		/*
		 * Overstyrer desktopens `align-items: start`, som i en kolonne betyr «så bredt som innholdet» og
		 * ikke «øverst».
		 */
		align-items: stretch;
	}

	.ft-oppskrift__hoved,
	.ft-oppskrift__sidespalte {
		display: contents;
	}

	/*
	 * Ingredienskortet og produktene flettes inn mellom prosaens egne barn. Innledningen ligger i 0.
	 */
	.ft-oppskrift .wp-block-fru-timian-ingredients {
		order: 1;
		margin-block: var(--wp--preset--spacing--m);
	}

	.ft-oppskrift__sidespalte > .wp-block-fru-timian-ingredients {
		position: static;
		max-block-size: none;
		overflow-y: visible;
	}

	.ft-oppskrift__sidespalte:has(> .wp-block-fru-timian-product-picks) > .wp-block-fru-timian-ingredients {
		margin-block-end: var(--wp--preset--spacing--m);
	}

	.ft-oppskrift__hoved > .ft-prosa > h2:first-of-type,
	.ft-oppskrift__hoved > .ft-prosa > h2:first-of-type ~ * {
		order: 3;
	}

	/*
	 * Forfatterkortet flytter seg mellom de to breddene: øverst i sidespalta på bredt band, etter
	 * fremgangsmåten her — hilsenen leses når man er ferdig, ikke mellom leseren og ingrediensene.
	 */
	.ft-oppskrift .wp-block-fru-timian-author-card {
		order: 4;
		margin-block-start: var(--wp--preset--spacing--m);
	}

	.ft-oppskrift .wp-block-fru-timian-product-picks {
		order: 5;
		margin-block-start: var(--wp--preset--spacing--m);
	}
}

/* ─────────────────────  PROSAEN I EN OPPSKRIFT  ──────────────────── */

/*
 * Prosaen i en oppskrift. Her og ikke i et blokk-stilark, fordi sloten er `core/post-content` — et
 * stilark på den kjerneblokka ville truffet hver eneste `core/post-content` på siten. `.ft-prosa` er
 * klassen malen gir denne ene.
 */
.ft-prosa {
	font-size: var(--wp--preset--font-size--brodtekst-l);
	line-height: 1.78;
	color: var(--wp--preset--color--tekst);
}

.ft-prosa > :first-child {
	margin-block-start: 0;
}

.ft-prosa > :last-child {
	margin-block-end: 0;
}

.ft-prosa p {
	margin-block: 0 var(--wp--preset--spacing--xs);
}

/*
 * Understrekingen er ikke pynt: gult på hvitt er den ene fargekombinasjonen i paletten som ikke
 * bærer et lenkesignal alene.
 */
.ft-prosa a {
	color: var(--wp--preset--color--gul);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ft-prosa a:hover,
.ft-prosa a:focus-visible {
	color: var(--wp--preset--color--tekst-hover);
}

/*
 * `figure` er posisjoneringskonteksten pin-knappen henger i. `.ft-prosabilde` er reserven for
 * legacy-markup uten figure.
 */
.ft-prosa figure,
.ft-prosa .ft-prosabilde {
	position: relative;
	margin-block: var(--wp--preset--spacing--l);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--kant);
}

.ft-prosa img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--kant);
}

/*
 * Overskriftene i oppskriftsteksten er Amatic, ett trinn under theme.json sitt globale mål. Kjernens
 * egen regel veier én klasse, så en klasse pluss et element slår den uansett lasterekkefølge.
 */
.ft-prosa :is(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1.1;
	text-transform: none;
}

.ft-prosa h2 {
	margin-block: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--display-m);
}

.ft-prosa :is(h3, h4) {
	margin-block: var(--wp--preset--spacing--m) var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--display-s);
}

.ft-prosa ul,
.ft-prosa ol {
	margin-block: 0 var(--wp--preset--spacing--xs);
	padding-inline-start: 1.4em;
}

.ft-prosa ul {
	list-style: disc;
}

.ft-prosa ol {
	list-style: decimal;
}

/* Seksjonsoverskriften over en samling: en `core/heading` i malen, med temaets egen form på seg. */
:root .ft-seksjonstittel {
	margin-block: 0 var(--wp--preset--spacing--l);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-weight: 600;
	line-height: 1.2;
}

/* ─────────────────────  FORSIDENS BAND  ──────────────────────────── */

/*
 * Seksjonsoverskriften på forsiden er midtstilt. Klassen og ikke `:first-child` på bandet: den
 * skiller «en overskrift over et forsideband» fra «en overskrift», og arkivmalenes egne
 * bandoverskrifter er ikke midtstilte.
 */
:root .ft-bandtittel {
	margin-block: 0 var(--wp--preset--spacing--xl);
	text-align: center;
}

/*
 * Egen klasse, siden det er et valg om et band har en linje under overskriften. Med en står
 * overskriften tettere.
 */
:root .ft-bandtittel:has( + .ft-seksjonsingress ) {
	margin-block-end: var(--wp--preset--spacing--xs);
}

:root .ft-seksjonsingress {
	max-width: 44rem; /* 44rem: målt kolonne for overskrift og ingress. */
	margin-block: 0 var(--wp--preset--spacing--xl);
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--brodtekst-l);
	line-height: 1.35;
	text-align: center;
	color: var(--wp--preset--color--tekst-svak);
}

/*
 * Den lille linja over en bandoverskrift: Inter Tight, versaler, gul. Bandene deler den; produktbandet
 * er unntaket lenger ned.
 */
:root .ft-bandkicker,
:root .is-style-kicker {
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--gul);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/*
 * Bandkickeren er den samme linja midtstilt over en bandoverskrift; blokkstilen `kicker` er den
 * venstrestilt i en bilde-og-tekst-rad. Typografien deles, plasseringen ikke.
 */
:root .ft-bandkicker {
	margin-block: 0 var(--wp--preset--spacing--xxs);
	text-align: center;
}

/* Produktbandets linje er en setning i brødtekst, ikke en versallinje. */
:root .ft-band--produkter .ft-bandkicker {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 500;
	color: var(--wp--preset--color--tekst);
	text-transform: none;
	letter-spacing: normal;
}

/*
 * Kommentarbåndet på oppskriftssida er hvitt: kortene i det bærer sin egen lyse tint, og en tint på
 * en tint gir dem ingen kant. Forsidens omtalebånd deler `--anmeldelser` og skal
 * fortsatt være lys blått, som er skillet mot bandet over.
 */
.ft-band--anmeldelser.ft-band--kommentarer {
	background: var(--wp--preset--color--hvit);
}

/* Et band eier bakgrunnen sin, ikke blokkene inni. Annenhver seksjon står på lys blå. */
.ft-band--populaert,
.ft-band--kategorier,
.ft-band--anmeldelser {
	background: var(--wp--preset--color--lys-blaa);
}

/*
 * Og toppluften sin: `.ft-main > .ft-band + .ft-band` nuller den for stablede band, men et band med
 * egen farge er en flate, og overskriften klistret mot fargekanten er ingen avstand mellom
 * seksjonene. Samme grunn som unntaket under heroen. Tre klasser, ellers taper regelen mot
 * nullingen — og den står her, etter den, siden vektene er like.
 */
.ft-main > .ft-band.ft-band--anmeldelser,
.ft-main > .ft-band.ft-band--populaert,
.ft-main > .ft-band.ft-band--kategorier {
	padding-block-start: var(--wp--preset--spacing--xxl);
}

/*
 * Ukemenybandet står hvitt mellom to lyse flater, så nullingen over klistrer det mot kanten av den
 * forrige. Tre klasser, av samme grunn som gruppa over.
 */
.ft-main > .ft-band.ft-band--ukemeny {
	padding-block-start: var(--wp--preset--spacing--xxl);
}

/*
 * Luft mellom en oppskriftssamling og det som står under den i samme band. Temaets globale blockGap
 * er 0, så bandet legger ingenting mellom barna sine på egen hånd. Universell etterfølger, fordi
 * `recipe-collection` er ment å stå i mange sammenhenger.
 */
:root .wp-block-fru-timian-recipe-collection + * {
	margin-block-start: var(--wp--preset--spacing--xl);
}

/* ─────────────  BILDE OG TEKST (core/media-text)  ───────────────── */

/*
 * Husets form på `core/media-text`. Her og ikke i et blokkstilark, fordi blokka er kjernens og har
 * ingen `style.scss` å legge ved seg. Hvert ledd under er ett klasseledd mer enn kjernens egen
 * regel, og begge bildesider står skrevet ut, fordi kjernens ark laster i motsatt rekkefølge på
 * fronten og i redigereren.
 */

/*
 * Like halvdeler, ikke kjernens `50% 1fr`: med en gate mellom kolonnene blir kjernens 50 % bildets
 * hele halvdel og teksten resten minus gaten. Drar en redaktør i skillet, vinner kjernens inline
 * `grid-template-columns` fortsatt over dette.
 */
:root .wp-block-media-text,
:root .wp-block-media-text.has-media-on-the-right {
	grid-template-columns: 1fr 1fr;
	column-gap: var(--wp--preset--spacing--xl);
}

/*
 * Luft mellom to rader under hverandre. Ikke `blockGap`: temaets globale er 0, og en `blockGap` på
 * bandet ville lagt den samme luften mellom bandoverskriften og raden også.
 */
:root .wp-block-media-text + .wp-block-media-text {
	margin-block-start: var(--wp--preset--spacing--xl);
}

/*
 * Tekstkolonnen eier luften mellom elementene sine gjennom `gap`, så kjernens `padding: 0 8%` må
 * bort og elementmargene med den. `flex` og ikke `flow`, fordi `__content` ikke er en
 * layout-beholder for kjernen og derfor ikke har noen `blockGap` å sette.
 */
:root .wp-block-media-text > .wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	padding: 0;
}

:root .wp-block-media-text__content > * {
	margin-block: 0;
}

/* 27.5rem: tekstbredden i denne raden — halve bandet er for bredt. */
:root .wp-block-media-text__content > p {
	max-width: 27.5rem;
}

/* Knappen står litt friere enn avsnittene fra hverandre. */
:root .wp-block-media-text__content > .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--xxs);
}

/*
 * En lenke i teksten er gul og understreket. theme.json gir alle lenker `inherit` uten strek, som er
 * riktig for et kort og en meny og feil midt i et avsnitt.
 */
:root .wp-block-media-text__content a:not( .wp-block-button__link ) {
	color: var(--wp--preset--color--gul);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Bildeforholdet er temaets valg, fordi blokka ikke har noen kontroll for det: `imageFill` fyller
 * radens høyde, altså tekstens, så en rad med lite tekst gir et lavt bilde.
 */
:root .wp-block-media-text > .wp-block-media-text__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--kant);
}

:root .wp-block-media-text__media img {
	height: 100%;
	object-fit: cover;
}

/*
 * `portrett`: sitatradens stående bilde. Bildet er en portrettflate og ikke en halv rad, så det står
 * midtstilt i sin egen kolonne.
 */
:root .wp-block-media-text.is-style-portrett > .wp-block-media-text__media {
	aspect-ratio: 3 / 4;
	max-width: 27.5rem;
	justify-self: center;
}

/*
 * `sitat`: overskriftsstilen med den håndtegnede loddrette streken. Skrift og størrelse står her og
 * arves ikke fra nivået, fordi nivået er et semantisk valg og stilen skal se lik ut uansett hvilket
 * redaktøren velger. Streken er et SVG og ikke en `border-left`, fordi den skal skjelve.
 */
:root .is-style-sitat {
	position: relative;
	/* 1.375rem: streken er 8px bred og teksten skal stå fri av den. */
	padding-inline-start: 1.375rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
	line-height: 1.1;
	/*
	 * 33rem: uten et mål står setningen på én linje, og da blir den håndtegnede streken en kort strek
	 * ved siden av én linje i stedet for den høye streken designet tegner.
	 */
	max-width: 33rem;
	text-wrap: balance;
}

/*
 * Sitatet står litt friere fra teksten under seg. Skrevet mot kolonnen og ikke bare mot stilen,
 * fordi `__content > *` nuller margene med de samme to klassene.
 */
:root .wp-block-media-text__content > .is-style-sitat {
	margin-block-end: var(--wp--preset--spacing--xxs);
}

/*
 * Fargen står som en literal: en `data:`-URL er en streng, og CSS setter ikke en custom property inn
 * i den. %23E09900 er `gul`.
 */
:root .is-style-sitat::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	/* 8px: strekens egen bredde i tegningen. */
	width: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 200' preserveAspectRatio='none'%3E%3Cpath d='M3.5 0 Q5 14 4 28 Q3 42 5 56 Q6 70 4 84 Q3 98 5 112 Q6 126 4 140 Q3 154 5 168 Q6 182 4 200' stroke='%23E09900' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/*
 * Én kolonne når bandet ikke er bredt nok til to. Bandet spørres og ikke raden: `core/media-text`
 * erklærer ingen container, og en container kan ikke spørres av elementet som erklærer den.
 * Rekkefølgen er skrevet ut for begge bildesider, fordi kjernens egne
 * `has-media-on-the-right`-regler veier (0,3,0).
 */
@container ft-band (max-width: 48em) {
	:root .wp-block-media-text,
	:root .wp-block-media-text.has-media-on-the-right {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--m);
	}

	:root .wp-block-media-text > .wp-block-media-text__media,
	:root .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
	}

	:root .wp-block-media-text > .wp-block-media-text__content,
	:root .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 2;
	}

	/* I én kolonne er portrettet ikke et innrykk lenger, bare et smalere bilde. */
	:root .wp-block-media-text.is-style-portrett > .wp-block-media-text__media {
		max-width: none;
	}
}

/*
 * `enkel`: oppskriftskortets andre tegning, brukt bare på «Populært akkurat nå». Den overstyrer bare
 * det som er annerledes — kortets standardutseende blir stående i kort.css. Ingen ny markup:
 * `inc/recipe-card.php` tegner det samme for alle fire variasjonene, så «enkel» skjuler tre av de
 * fire meta-punktene i stedet for å be om en annen liste.
 */
:root .is-style-enkel {
	/* Prototypens `.popular-now__grid` står tettere enn arkivets `.recipes__grid`. */
	--ft-mellomrom: var(--wp--preset--spacing--s);
}

:root .is-style-enkel .ft-kort__bilde {
	/* 1/1, mot standardkortets 4/3. */
	aspect-ratio: 1 / 1;
}

:root .is-style-enkel .ft-kort__etikett {
	/* Kroppens `gap` er hele avstanden ned til tittelen. */
	position: static;
	margin: 0;
}

:root .is-style-enkel .ft-merke {
	/*
	 * Ren tekst, ikke en pille. `block` og ikke `inline-flex`: en inline-boks arver kroppens
	 * linjehøyde og legger luft over og under en etikett som er mindre enn den.
	 */
	display: block;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--gul);
	font-size: var(--wp--preset--font-size--kicker-s);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

:root .is-style-enkel .ft-kort .ft-kort__tittel {
	/* brodtekst-l, ikke kortstandardens egen størrelse. */
	font-size: var(--wp--preset--font-size--brodtekst-l);
}

/*
 * Bare lagretellingen står igjen i meta-raden. Tiden har ingen modifikatorklasse, så treffet er på
 * fraværet av `--lagringer` og ikke på en liste av det som skal bort.
 */
:root .is-style-enkel .ft-kort__meta-punkt:not(.ft-kort__meta-punkt--lagringer) {
	display: none;
}

/*
 * `kant`: ukearkivets paginering, prototypens `.ukemeny-pagination` (ukemeny.html) — firkantede
 * hvite bokser med kantstrek, mot standardens lyseblå piller fra oppskriftsarkivet. Prototypen
 * tegner de to arkivenes paginering ulikt, så `archive-ukemeny.html` velger denne stilen.
 * Hover-beigen er `lys-blaa` av samme grunn som `.ft-merke` i kort.css.
 */
:root .is-style-kant .ft-paginering__tall,
:root .is-style-kant .ft-paginering__pil {
	min-width: 2.5rem;
	height: 2.5rem;
	border-color: rgb(0 0 0 / 12%);
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--hvit);
	font-weight: 600;
}

:root .is-style-kant a.ft-paginering__tall:hover,
:root .is-style-kant a.ft-paginering__tall:focus-visible,
:root .is-style-kant .ft-paginering__pil:hover,
:root .is-style-kant .ft-paginering__pil:focus-visible {
	border-color: rgb(0 0 0 / 20%);
	background: var(--wp--preset--color--lys-blaa);
}

:root .is-style-kant .ft-paginering__tall.er-aktiv {
	border-color: var(--wp--preset--color--tekst);
	background: var(--wp--preset--color--tekst);
	color: var(--wp--preset--color--hvit);
}

:root .is-style-kant .ft-paginering__hopp {
	height: 2.5rem;
}

/* ───────────────────────────  PINTEREST  ────────────────────────── */

/*
 * Pin-knappen henger på to helt ulike bilder — heroens `<figure>` og hvert `core/image` i prosaen —
 * og er derfor global. `!important` og ikke spesifisitet: et bilde i prosaen står ofte i et
 * `core/gallery`, og kjernens regel for en beskåret flis veier (1,4,2), siden `:not(#individual-image)`
 * teller som en id.
 */
.ft-pin {
	position: absolute;
	/* 16px: knappens avstand fra bildekanten, optisk og ikke et spacing-steg. */
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 40px: en trykkflate, ikke et mål på skalaen. */
	width: 40px !important;
	height: 40px !important;
	border-radius: var(--wp--custom--radius--rund);
	background: color-mix(in srgb, var(--wp--preset--color--hvit) 90%, transparent);
	opacity: 0;
	transition: opacity var(--wp--custom--overgang--myk) ease, transform var(--wp--custom--overgang--rask) ease;
}

.ft-pin svg {
	/* 20px: glyfen inne i den 40px trykkflaten. */
	width: 20px;
	height: 20px;
	fill: var(--wp--preset--color--roed);
}

/*
 * Synlig når leseren peker på bildet, og alltid når knappen selv har fokus — uten fokusregelen er
 * pinnen usynlig for alle som tabber.
 */
:hover > .ft-pin,
.ft-pin:focus-visible {
	opacity: 1;
}

.ft-pin:hover {
	background: var(--wp--preset--color--hvit);
	transform: scale(1.1);
}

/*
 * Kjernens egen lenke i bildeblokka veier (0,2,0) mot `.ft-pin`s (0,1,0), og gjør knappen til en
 * `inline-block` med bildets radius. Én klasse mer enn kjernens regel er nok; bredden og høyden over
 * står mot flisregelen og beholder sine `!important`.
 */
.wp-block-image > a.ft-pin,
.wp-block-image > figure > a.ft-pin,
.wp-block-image[style*="border-radius"] > a.ft-pin {
	display: flex;
	border-radius: var(--wp--custom--radius--rund);
}

/* En pekerflate uten hover får aldri `:hover`. Der står pinnen synlig hele tiden i stedet. */
@media (hover: none) {
	.ft-pin {
		opacity: 1;
	}
}

/* ──────────────────────────  STJERNER  ──────────────────────────── */

/*
 * Vurderingsraden, delt av kortet, oppskriftsheroen, vurderingslista og kundesitatene. Markupen er
 * inc/recipe-meta.php.
 */
.ft-stjerner {
	display: inline-flex;
	/* 1px: hårstrek mellom glyfene, optisk. */
	gap: 1px;
}

.ft-stjerner svg {
	width: 1em;
	height: 1em;
	fill: var(--wp--preset--color--tekst-svak);
	opacity: 0.25;
}

.ft-stjerner svg.er-fylt {
	fill: var(--wp--preset--color--gul);
	opacity: 1;
}

/* ──────────────────────────  DELT KNAPP  ────────────────────────── */

/*
 * Temaets ene knapp er kjernens `.wp-element-button`, og formen bor i theme.json
 * (`styles.elements.button`) slik at redigereren og fronten leser samme kilde. Her står bare det
 * theme.json ikke kan si: geometrien, løftet på hover og den mørke varianten `.ft-knapp--moerk`.
 *
 * Hver velger bærer `:root`. Kjernens egen knappregel er `:root :where(.wp-element-button,
 * .wp-block-button__link)`, og `:where()` teller null — en bar klasse står uavgjort og avgjøres av
 * lasterekkefølgen, som snur mellom en blokkmal og butikkens PHP-maler.
 */
:root .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xxxs);
	/* 2.5rem: prototypens 40px høyde — luften alene gir 38. */
	min-block-size: 2.5rem;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	transition: transform var(--wp--custom--overgang--rask) ease, filter var(--wp--custom--overgang--rask) ease;
}

:root .wp-element-button:hover,
:root .wp-element-button:focus-visible {
	color: var(--wp--preset--color--hvit);
	/* 1px: optisk løft, ikke spacing — knappen skal så vidt bevege seg. */
	transform: translateY(-1px);
	filter: brightness(1.08);
}

:root .ft-knapp--moerk {
	background: var(--wp--preset--color--tekst);
}

:root .ft-knapp--moerk:hover,
:root .ft-knapp--moerk:focus-visible {
	background: var(--wp--preset--color--tekst-hover);
}

@media (prefers-reduced-motion: reduce) {
	:root .wp-element-button:hover,
	:root .wp-element-button:focus-visible {
		transform: none;
	}
}

/* ─────────────────────────  HEADER-PART  ────────────────────────── */

.ft-header {
	container-type: inline-size;
	container-name: ft-band;
	position: sticky;
	/* Negativ topp i toppbarens høyde: baren ruller ut av bildet, og bare headerraden står igjen. */
	top: calc(-1 * var(--wp--custom--topbar-hoyde));
	z-index: var(--wp--custom--lag--topp);
	background: color-mix(in srgb, var(--wp--preset--color--hvit) 92%, transparent);
}

/*
 * Uskarpheten bor på et pseudoelement og ikke på headeren selv: `backdrop-filter` gjør elementet til
 * containing block for alt `fixed` under seg, og mega-nav-skuffen er `fixed` inne i headeren. Med
 * filteret på headeren ble skuffens `top: 0` headerens topp og ikke viewportens.
 */
.ft-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* 12px: blur-radius, en optisk effekt uten forhold til spacing-skalaen. */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.ft-topbar {
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 500;
	background: var(--wp--preset--color--hvit);
	border-block-end: var(--wp--custom--linje);
	/* Fast høyde, fordi headerens negative `top` må vite den. */
	block-size: var(--wp--custom--topbar-hoyde);
	padding-block: 0;
	display: grid;
	align-content: center;
	overflow: hidden;
}

.ft-header__bar {
	padding-block: 0;
	/*
	 * Festet for de to tingene som på smal visning står utenfor radens flexlinje: den absolutt
	 * sentrerte logoen, og søkelinja som felles ut under headeren. Bandet og ikke raden, fordi bandet
	 * er like bredt som viewporten.
	 */
	position: relative;
}

/*
 * Headerraden er én flex-beholder med to linjer: `.ft-header__navrow` har `flex-basis: 100%` på bred
 * visning og `display: contents` på smal, som er det ene grepet som får barna opp på radens egen
 * linje uten å flytte noe i DOM-en.
 */
/*
 * Hver regel i headeren bærer `:root`. Rekkefølgen mellom `main.css` og blokkarkene snur mellom en
 * blokkmal og `fru-timian-shopify`s PHP-maler, så hver uavgjort på én klasse faller ut motsatt vei
 * på de to.
 */
:root .ft-header__row {
	column-gap: var(--wp--preset--spacing--s);
	/*
	 * 0 på tvers av linjeskiftet: luften mellom logolinja og navlinja er navradens egen padding-block.
	 */
	row-gap: 0;
}

/*
 * Logoen er linjas høyeste element og bærer derfor logolinjas høyde. En `min-height` på raden ville
 * ikke gjort noe: raden er begge linjene.
 */
:root .ft-header__logo {
	display: flex;
	align-items: center;
	min-height: 5rem;
}

:root .ft-header__logo img {
	width: auto;
	/* 70px: logoen er en fast bildehøyde i designet, ikke et spacing-steg. */
	height: 70px;
}

/*
 * `:root` foran velgeren: kjernens margin-nulling for barna av en flex-beholder er
 * `:root :where(.is-layout-flex) > :is(*, div)` — (0,1,1), fordi `:is()` teller sitt tyngste
 * argument og en type er med. En bar klasse taper uansett rekkefølge.
 */
:root .ft-header__actions {
	gap: var(--wp--preset--spacing--xs);
	margin-inline-start: auto;
}

/*
 * Navigasjonsraden er menyen og kontolenkene ytterst. Plasseringen bor her og ikke i blokkas eget
 * stilark: blokka emitterer innhold, parten bestemmer hvor det står. `flex-basis: 100%` er
 * linjeskiftet, og `:root` foran av samme grunn som actions over.
 */
:root .ft-header__navrow {
	flex-basis: 100%;
	gap: var(--wp--preset--spacing--s);
	padding-block: var(--wp--preset--spacing--xxxs);
	border-block-start: var(--wp--custom--linje);
}

:root .ft-header__navrow > .ft-konto {
	margin-inline-start: auto;
}

/*
 * En rad uten innhold tar ingen plass. Spørsmålet går til radens barn og ikke til raden: raden er en
 * `core/group` med lagret markup, så `:empty` ville aldri slått til.
 */
.ft-header__navrow:not(:has(> *)) {
	display: none;
}

/*
 * Smal visning: prototypens ene rad, med logoen absolutt sentrert over den. Betingelsen gjentar
 * verdien literalt, fordi en `@container`-betingelse ikke kan lese en custom property. Søkefeltet
 * blir en ikonknapp, kontolenkene flytter til skuffens fot, og navradens hårstrek går med raden.
 */
@container ft-band (max-width: 48em) {
	:root .ft-header__row {
		flex-wrap: nowrap;
		/* 56px: logolinjas høyde på smal visning. */
		min-height: 3.5rem;
		/*
		 * 6px: avstanden mellom søkeikonet og vogna, en optisk verdi mellom to knapper. Den store luften
		 * mot hamburgeren er søkeskallets `margin-inline-start: auto`.
		 */
		column-gap: 6px;
	}

	/*
	 * Logoen sentreres på raden og ikke mellom knappene: en logo som fant midten mellom en hamburger
	 * til venstre og to knapper til høyre ville stått for langt til venstre.
	 */
	:root .ft-header__logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		/*
		 * Raden driver linjehøyden her, ikke logoen. En logoboks som beholdt høyden fra bred visning
		 * ville stått utenfor en rad den er absolutt plassert i.
		 */
		min-height: 0;
	}

	:root .ft-header__logo img {
		/* 44px: logoens bildehøyde på smal visning. */
		height: 44px;
	}

		/*
		 * Navraden slutter å være en linje og blir sine egne barn. `display: contents` er hele
		 * ombyggingen: hamburgeren står i mega-nav, som står i navraden. Hårstreken og paddingen
		 * forsvinner med boksen, som er riktig — de hørte linja.
		 */
	:root .ft-header__navrow {
		display: contents;
	}

	/*
	 * Hamburgeren først, så søk og vogn presset mot høyre av søkeskallets egen
	 * `margin-inline-start: auto`. Logoen er absolutt og deltar ikke.
	 */
	:root .ft-nav {
		order: 1;
	}

	:root .ft-header__actions {
		order: 3;
		/* Margen er søkeskallets nå; to auto-marger ville delt luften mellom dem. */
		margin-inline-start: 0;
	}

	/*
	 * Kontolenkene står i skuffens fot her. Skjult og ikke fjernet fra parten: på bred visning er de
	 * radens ytterste innhold, og det er bredden som avgjør hvilken plassering som gjelder.
	 */
	:root .ft-konto {
		display: none;
	}
}

/* ─────────────────────────  FOOTER-PART  ────────────────────────── */

/*
 * Bare bandene. Alt som står inne i dem er blokker med sin egen style.scss; reglene under er det
 * parten selv eier: bakgrunn, hårstrek, padding-block og rutenettet kolonnene står i.
 */

.ft-footer {
	background: var(--wp--preset--color--hvit);
}

.ft-footer__cta {
	background: var(--wp--preset--color--lys-blaa);
	padding-block: var(--wp--preset--spacing--xxl);
	text-align: center;
}

.ft-footer__trust {
	border-block: var(--wp--custom--linje);
	padding-block: var(--wp--preset--spacing--s);
}

.ft-footer__main {
	padding-block: var(--wp--preset--spacing--xxl);
}

.ft-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: var(--wp--preset--spacing--l);
}

/* Samme unntak som på oppskriftssiden: rutenettet eier luften, ikke gruppenes `blockGap`. */
.ft-footer__grid.is-layout-flow > * {
	margin-block-start: 0;
}

.ft-footer__bottom {
	border-block-start: var(--wp--custom--linje);
	padding-block: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--tekst-svak);
}

/*
 * Kolonnene stables når footeren er smal. Trygghetsradens eget brekk står i blokkas style.scss.
 */
@container ft-band (max-width: 48em) {
	.ft-footer__grid {
		grid-template-columns: 1fr;
	}
}