/*
 * Papiret (spec 0071 §7).
 *
 * Ett stilark over de *vanlige* malene, lastet med `media="print"`. Ingen utskriftsvisning, ingen
 * utskriftsadresse, ingen annen markup: en oppskrift som skrives ut er den samme siden en leser står
 * på, med kromet borte.
 *
 * **`media="print"` og ikke en `@media print` her inne.** ADR-0003 forbyr media queries i temaets CSS
 * og `test-theme-css.php` sveiper denne katalogen for dem — og attributtet er dessuten det som gjør at
 * nettleseren ikke laster arket for skjermen i det hele tatt.
 *
 * To mål: **oppskriften** — en topprad med merket, tittel, byline og metaliste ved siden av bildet,
 * og under den to spalter med ingrediensene til venstre og fremgangsmåten til høyre —
 * og **handlelista**, én blekksparsom kolonne med en rute per rad.
 *
 * **Arket lastes på hver side, og bare foten er avgrenset til de to.** Kromreglene er riktige på
 * hvilken som helst utskrift. Papirfoten spør derimot `ft_print_surface()`, fordi en fot med adresse
 * og dato er en påstand om et ark vi har tegnet — og det har vi gjort for to.
 *
 * ADR-0003 gjelder her som ellers: bare tokens, ingen farger i fila.
 */

/*
 * Margen er arkets, ikke bandets. Sideinnrykket på skjermen (`clamp(1.5rem, …, 5rem)`) er en regel om
 * et vindu, og et vindu finnes ikke her.
 */
@page {
	margin: 12mm;
}

html,
body {
	background: none;
}

/*
 * **Arket er en kolonne, slik at handlelistas merke kan stå først i den.** Der kommer markupen fra
 * `wp_footer` og står nederst i dokumentet; en `order` trenger en flexbeholder å stå i, og her er
 * beholderen hele arket. `.wp-site-blocks` er det ene barnet som bærer innholdet, og et brudd inne i
 * det er et vanlig sidebrudd i blokkflyten under. Oppskriftens merke står i heroen og trenger ingen.
 */
body {
	display: flex;
	flex-direction: column;
}

/*
 * Bandene bærer skjermens vertikale rytme, og på papir er den luft ingen ba om: åtte tomme
 * centimeter mellom heroen og ingrediensene er et halvt ark.
 *
 * Oppskriftsheroens eget band står med tre klasser: `main.css` gir det 58/100px med to, og en
 * uavgjort på spesifisitet avgjøres av en lasterekkefølge ingen kan lese ut av fila.
 */
.ft-band,
.ft-band.ft-band--hero.ft-band--hero-oppskrift,
.ft-main > .ft-band + .ft-band,
.ft-main > .ft-band--hero + .ft-band {
	padding-block: 0;
}

.ft-band--hero {
	background: none;
}

/*
 * **Det redaksjonelle innrykket faller, slik at de to rutenettene deler én venstrekant.** På arket
 * er heroen og oppskriftsbandet ett rutenett, og en spaltekant som flytter seg mellom dem leses som
 * en feil. En vanlig sides innhold står på det samme innrykket og faller med tittelbandet. Like mange
 * klasser som `main.css`-reglene, og papirarket lastes etter.
 */
.ft-band.is-style-innrykk,
.wp-block-post-content.ft-sideinnhold {
	--wp--style--global--content-size: var(--wp--custom--bandbredde);
}

/* ────────────────────  MERKET ØVERST  ──────────────────── */

/*
 * **Et `<img>` og ikke en bakgrunn.** Et bilde tegnet med `background` er bakgrunnsgrafikk, og Chromes
 * utskriftsdialog står med den avslått — et merke som bare kommer med hvis leseren har funnet bryteren,
 * kommer ikke. `inc/utskrift.php` skriver merket `hidden`, og én klasse her avslører det, av samme
 * grunn som papirfoten nederst.
 *
 * Venstrekanten er bandenes egen rotpadding: på handlelista står merket utenfor bandet i markupen og
 * må be om den selv. I oppskriftsheroen står det i tekstspalten, og regelen under nuller innrykket.
 */
.ft-utskriftslogo {
	order: -1;
	display: block;
	/* px: merket er en rasterfil, og 90px er bredden arket tegner den i. */
	inline-size: 90px;
	margin-inline-start: var(--wp--custom--sideinnrykk);
	margin-block-end: var(--wp--preset--spacing--xxs);
}

.ft-utskriftslogo img {
	inline-size: 100%;
	block-size: auto;
}

/* ────────────────────  KROMET FALLER  ──────────────────── */

/*
 * §7s egen liste: piller, vurdering, annonser, bio, produkter, relaterte, anmeldelser, header,
 * footer, skjermbryter. **En utelatelse her kan ikke feile før flaten den gjelder finnes**, og da er
 * den ikke en utelatelse lenger men et forfatterkort på hvert utskrevne ark.
 *
 * Skjermbryteren er den som er verdt et ord: «Hold skjermen på» er et løfte om en skjerm. Trykt på et
 * ark er den en bryter uten noe å bryte.
 *
 * Forfatterkortet er «bio»-en §7 mener. Bylinen er en annen flate — «Av Fru Timian» under tittelen —
 * og den står i tittelkolonnen; bare portrettet i den faller, siden en rund 52px-avatar er blekk
 * teksten ved siden av alt har sagt.
 */
.ft-header,
.ft-footer,
.ft-topbar,
.ft-piller,
.ft-piller__velgerfelt,
.ft-oppskriftshero__byline-avatar,
.ft-oppskriftshero__meta-punkt--vurdering,
.ft-pin,
.wp-block-fru-timian-wakelock-toggle,
.wp-block-fru-timian-author-card,
.wp-block-fru-timian-product-picks,
.ft-band--relatert,
.ft-band--anmeldelser {
	display: none;
}

/*
 * Tredjepartenes egne flater. Cookiebot og annonseinnstikkene skriver `display` i sine egne ark og i
 * `style`-attributter, så bare `!important` når dem.
 */
#CookiebotWidget,
#CybotCookiebotDialog,
#CybotCookiebotDialogBodyUnderlay,
.fta-annonse {
	display: none !important;
}

/*
 * Ikonene i metaraden. «1 time 15 min» og «4 porsjoner» sier seg selv i ord; en klokke og to
 * personer er strektegninger en blekkpatron betaler for.
 *
 * Teksten i raden står — det er §7s «values kept, pill chrome dropped», og en regel på hele
 * `.ft-oppskriftshero__meta` ville tatt tida og porsjonene med stjernene.
 */
.ft-oppskriftshero__meta-punkt .ft-kort__ikon {
	display: none;
}

/* ────────────────────  TOPPRADEN  ──────────────────── */

/*
 * To spalter: tittelkolonnen til venstre, bildet til høyre. Forholdet er dagens utskrifts eget
 * (0,8 mot 1,2), og heroens markup har bildet først fordi det er sidas LCP-element — derfor `order`,
 * og derfor står rutenettet her og ikke i blokkas eget ark, som ikke vet noe om et ark.
 *
 * **Hver regel her bærer blokkas egen klasse i tillegg.** Blokkas eget ark lastes etter dette — et
 * blokkstilark skrives ut når blokka rendres, altså etter `wp_head()` i et blokktema — så en regel
 * med like mange klasser som blokkas taper på lasterekkefølgen. Det andre leddet er vekta som
 * avgjør, ikke et navnevalg.
 *
 * `break-inside: avoid` er trygg *her* og bare her: raden er det første på arket, så den har alltid
 * en hel side å få plass på. Den samme erklæringen på en spalte under kan ikke feile på annet vis enn
 * å skyve hele rutenettraden til neste ark.
 */
.ft-oppskriftshero.wp-block-fru-timian-recipe-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--wp--preset--spacing--m);
	align-items: center;
	break-inside: avoid;
	break-after: avoid;
}

/* I heroen står merket i spalten allerede, så bandkantens innrykk faller. */
.ft-oppskriftshero.wp-block-fru-timian-recipe-hero .ft-utskriftslogo {
	margin-inline-start: 0;
	margin-block-end: var(--wp--preset--spacing--xxs);
}

/*
 * Tittelkolonnen står øverst i raden og ikke midt i den: merket er arkets første linje, og en kolonne
 * som sentreres mot et 9cm bilde legger et halvt bilde med luft mellom merket og tittelen under det.
 * Bildet er fortsatt det som setter radhøyden.
 */
.ft-oppskriftshero.wp-block-fru-timian-recipe-hero .ft-oppskriftshero__tekst {
	order: 0;
	display: block;
	align-self: start;
	text-align: start;
}

/* Amatic på 60px er heroens mål på en skjerm; i en spalte på 70mm er den to og en halv linje. */
.ft-oppskriftshero.wp-block-fru-timian-recipe-hero .ft-oppskriftshero__tittel {
	margin: 0 0 var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1.05;
}

/*
 * Byline og metaliste er vanlige tekstlinjer under hverandre: «Av: Fru Timian», «Tid: 50 min»,
 * «10 porsjoner». Kolonene er papirets, siden skjermen har ikonene i stedet.
 */
.ft-oppskriftshero.wp-block-fru-timian-recipe-hero .ft-oppskriftshero__byline,
.ft-oppskriftshero.wp-block-fru-timian-recipe-hero .ft-oppskriftshero__meta,
.ft-oppskriftshero.wp-block-fru-timian-recipe-hero .ft-oppskriftshero__meta-punkt {
	display: block;
	margin: 0;
	font-size: var(--wp--preset--font-size--brodtekst-s);
	line-height: 1.5;
	color: var(--wp--preset--color--tekst-svak);
}

.ft-oppskriftshero.wp-block-fru-timian-recipe-hero .ft-oppskriftshero__byline-av::after,
.ft-utskriftsetikett::after {
	content: ":";
}

/*
 * Ledetekstene i metaraden. `inc/utskrift.php` skriver dem `hidden`, så skjermen beholder
 * prototypens korte form; på papiret står «1 t» uten ikonet ved siden av seg og trenger ordet.
 */
.ft-utskriftsetikett {
	display: inline;
}

/*
 * `aspect-ratio: auto` slår av *begge* formatene blokka setter: 1086/534 er prototypens hero, og
 * blokkas container query bytter til 4/3 under 48em — som et A4-ark er (~45em). Høyden er arkets sak,
 * og 9cm er en tredjedel av den.
 */
.ft-oppskriftshero.wp-block-fru-timian-recipe-hero .ft-oppskriftshero__bilde {
	order: 1;
	aspect-ratio: auto;
	max-height: 9cm;
	margin: 0;
}

.ft-oppskriftshero.wp-block-fru-timian-recipe-hero .ft-oppskriftshero__bilde img {
	width: 100%;
	height: auto;
	max-height: 9cm;
	object-fit: cover;
	break-inside: avoid;
}

/* ────────────────────  DE TO SPALTENE  ──────────────────── */

/*
 * Ingrediensene til venstre, fremgangsmåten til høyre, i samme forhold som toppraden. Én kolonne er
 * utgangspunktet, fordi en oppskrift uten strukturerte ingredienslinjer (ADR-0005) ikke har noe kort.
 */
.ft-band .ft-oppskrift {
	display: block;
	margin-block-start: var(--wp--preset--spacing--m);
}

.ft-band .ft-oppskrift:has( .wp-block-fru-timian-ingredients ) {
	display: flex;
	flex-direction: row;
	gap: 0 var(--wp--preset--spacing--m);
	align-items: flex-start;
}

.ft-oppskrift:has( .wp-block-fru-timian-ingredients ) > .ft-oppskrift__sidespalte {
	flex: 0.8 1 0;
	min-width: 0;
}

.ft-oppskrift:has( .wp-block-fru-timian-ingredients ) > .ft-oppskrift__hoved {
	flex: 1.2 1 0;
	min-width: 0;
}

/*
 * Spaltene er egne bokser på papiret. `main.css` løser dem opp i ett flettet spor under 70em, og et
 * A4-ark er ~45em — så uten disse to leddene arver arket en kolonne det ikke ba om.
 *
 * **`block` og ikke skjermens `flex`.** En flexkolonne som er høyere enn arket brytes ikke, den
 * flyttes hel til neste ark — og da står første side med heroen alene og resten på side to.
 */
.ft-oppskrift > .ft-oppskrift__hoved,
.ft-oppskrift > .ft-oppskrift__sidespalte {
	display: block;
	height: auto;
}

/*
 * Skjermens klebrige kort har en høyde lik vinduet og ruller inni seg. På papiret er et vindu ett ark,
 * så uten dette ville ingredienslista blitt klippet ved arkkanten.
 */
.ft-oppskrift > .ft-oppskrift__sidespalte > .wp-block-fru-timian-ingredients {
	position: static;
	max-block-size: none;
	overflow: visible;
	margin-block-end: 0;
}

/*
 * Forfatterkortet står først i sidespalten og er skjult her, så ingredienskortet er spaltens andre
 * barn og arver kjernens flytavstand over seg. Uten nullingen starter det ett trinn under metoden.
 */
.ft-oppskrift > .ft-oppskrift__sidespalte > * {
	margin-block-start: 0;
}

/*
 * **Sidespalta går først, og bare når den har kortet i seg.** Uten det er den en tom boks — bio-en og
 * produktene er borte — og en tom boks foran teksten er en tom første spalte.
 */
.ft-oppskrift > .ft-oppskrift__sidespalte:has( > .wp-block-fru-timian-ingredients ) {
	order: -1;
}

/*
 * Prosasloten løses opp, som på skjermen: avsnittene blir barn av hovedspalta, og hver regel under er
 * skrevet mot dem der.
 */
.ft-oppskrift > .ft-oppskrift__hoved > .ft-prosa {
	display: contents;
}

/*
 * Brødteksten på papir er 15–16px, ikke skjermens 17,6/1,78 — en linjeavstand på 31px er en tredjedel
 * mer papir per oppskrift.
 */
.ft-oppskrift .ft-prosa {
	font-size: var(--wp--preset--font-size--brodtekst);
	line-height: 1.55;
}

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

/* Papiret setter sitt eget mål på overskriftene under grensa, som på resten av arket. */
.ft-oppskrift .ft-prosa h2 {
	font-size: var(--wp--preset--font-size--display-s);
}

.ft-oppskrift .ft-prosa :is( h3, h4 ) {
	margin-block: var(--wp--preset--spacing--xs) 0;
	font-size: var(--wp--preset--font-size--tittel-m);
}

/* ────────────────────  SEKSJONSETIKETTENE  ──────────────────── */

/*
 * «Ingredienser» og oppskriftens egen første `<h2>` er de to spaltetitlene, og de er ett uttrykk:
 * versaler, sperret. Etiketten til høyre er forfatterens egne ord og ingen generert
 * streng — en oppskrift uten grense har ingen fremgangsmåte å navngi, og får da ingen etikett.
 *
 * Ett ledd mer enn blokkas og prosaens egne regler for de samme to elementene: den rekkefølgen
 * `main.css` og blokkstilarkene lastes i er ikke den samme på fronten som i redigereren.
 */
.ft-oppskrift .ft-ingredienser .ft-ingredienser__tittel,
.ft-oppskrift .ft-prosa > h2:first-of-type {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker-s);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-svak);
}

/* ────────────────────  FREMGANGSMÅTEN ER EN TILLATELSESLISTE  ──────────────────── */

/*
 * §7: `p`, `h2`–`h6`, `ul`, `ol`, `li` skrives ut, alt annet faller, i hele prosaen. Annonseinnstikk
 * har ingen klasse å sikte på og skriver `style="display: block"` på seg selv, derav `!important`.
 */
.ft-prosa > :not( p, h2, h3, h4, h5, h6, ul, ol, li ) {
	display: none !important;
}

/*
 * Og det tillatelseslista ikke kan ta: et bilde inne i et tillatt element. Legacy-markup har dem der
 * — `.ft-prosabilde` i `inc/pinterest.php` finnes nettopp fordi bildene i det gamle arkivet ikke står
 * i en `figure`. En `<p>` med et bilde i ville sluppet bildet gjennom.
 */
.ft-prosa :is( figure, img, iframe, video, embed, object, svg ) {
	display: none;
}

/*
 * Etiketten over en annonse arket ikke tegner. **Begge leddene må til**: et avsnitt kan ha ett
 * uthevet barn og likevel være et steg, og et steg kan stå rett foran en annonse — men ikke begge.
 * Naboen er plassholderen, eller den klasseløse `<div style>` innstikket bytter den ut med.
 */
.ft-prosa > p:has( > em:only-child ):has( + :is( div[id^="embed-"], div[style]:not( [class] ) ) ) {
	display: none;
}

/*
 * **Innledningen faller ved ADR-0005s grense — men bare hvis grensa finnes.**
 *
 * `:has( > h2 )` er hele vakta, og den er den viktigste linja i fila. Uten den treffer `:not()` hvert
 * barn på en oppskrift *uten* `<h2>`, og arket blir blankt: det er ~1 218 av ~2 270 oppskrifter
 * (ADR-0005), 39 % av arkivet, og ingen av dem er den oppskriften noen her ville testet med. Med den
 * skrives hele prosaen ut i stedet — §7s «degradation as mechanism», som en selektor.
 *
 * `:not( h2:first-of-type, h2:first-of-type ~ * )` er «verken grensa eller noe etter den», altså
 * nøyaktig innledningen. Den samme første `<h2>`-en `main.css` ordner etter og `FTR_Prose::split()`
 * deler på — én grense, tre lesere.
 */
.ft-prosa:has( > h2 ) > :not( h2:first-of-type, h2:first-of-type ~ * ) {
	display: none;
}

/*
 * Lenkene i prosaen er gule og understreket på skjermen, og understrekingen er der fordi gult på hvitt
 * ikke bærer et lenkesignal alene (spec 0071 §9). På papir er begge halvdeler feil: gult er nesten
 * ingen blekk, og et lenkesignal peker på noe leseren ikke kan trykke på og ikke får adressen til. Så
 * teksten står i tekstfargen, som tekst.
 */
.ft-prosa a {
	color: inherit;
	text-decoration: none;
}

/* ────────────────────  SIDEBRUDDENE  ──────────────────── */

/*
 * Ingen av dem tvinger et brudd, og ingen av dem forbyr et brudd i noe som er høyere enn et ark.
 * **Ingredienskortet får derfor ingen `break-inside: avoid`**: kortet er en spalte i rutenettet, og en
 * spalte som nekter å brytes flytter hele raden til neste ark og lar den første siden stå med heroen
 * alene.
 */
.ft-prosa :is( h2, h3, h4, h5, h6 ),
.ft-ingredienser__tittel,
.ft-ingredienser__gruppe,
.ft-liste__spor-tittel {
	break-after: avoid;
}

.ft-liste__rad {
	break-inside: avoid;
}

.ft-prosa p,
.ft-liste__tekst {
	orphans: 3;
	widows: 3;
}

/* ────────────────────  INGREDIENSKORTET  ──────────────────── */

/*
 * Kortet er en boks med bakgrunn og runde hjørner på skjermen. På papiret er det en spalte, og en
 * flate bak teksten er blekk uten et skille å tegne — etiketten over den gjør den jobben.
 */
.ft-oppskrift .ft-ingredienser {
	background: none;
	padding: 0;
	border-radius: 0;
}

.ft-oppskrift .ft-ingredienser__linje,
.ft-oppskrift .ft-ingredienser__etikett {
	line-height: 1.5;
}

/*
 * Papiret ser kortet i hvile, uansett hva matlagingsmodus står på: en tom rute er blekk uten en
 * beskjed, og en avkryssing er lesertilstand papiret ikke kan endre. Selektorene bærer
 * `[data-ft-matlaging]` fordi det er den regelen de skal veie mer enn.
 */
:root[data-ft-matlaging] .ft-oppskrift .ft-ingredienser__boks {
	display: none;
}

:root[data-ft-matlaging] .ft-oppskrift .ft-ingredienser__linje {
	display: block;
	padding-block: 0;
}

/* ────────────────────  HANDLELISTA  ──────────────────── */

/*
 * Kontrollene faller. Skriv ut-pilla er den åpenbare: en knapp som ber om en utskrift, trykt på
 * utskriften. Feltet for egne linjer og ×-ene på radene er de to andre — begge er skrivinger, og
 * papir tar ikke imot. Stabelen med oppskrifter faller av en annen grunn: sporet ved siden av lista
 * navngir de samme oppskriftene, og fire miniatyrer per rad er blekk uten et svar.
 */
.ft-liste__topp,
.ft-liste__egen,
.ft-liste__skjul,
.ft-liste__fra,
.ft-liste__tom {
	display: none;
}

.ft-liste {
	background: none;
}

/*
 * **Ruta er tegnet, ikke en avkryssingsboks.** `<input type="checkbox">` er en kontroll nettleseren
 * tegner selv, og hvor mye blekk den koster på papir er nettleserens valg — Chrome fyller den, Safari
 * tegner en grå boks. `☐` er en glyf i teksten, i tekstfargen, og koster det samme som en bokstav.
 *
 * Avkryssede rader strykes over *der de står* (§7) og flyttes ikke ned: lista er sortert slik leseren
 * har lest den i butikken, og en rad som flytter seg mens man handler er en rad man leter etter.
 */
.ft-liste__rader {
	list-style: none;
	padding-inline: 0;
}

.ft-liste__rad {
	display: block;
	border: 0;
	padding-block: 0;
}

.ft-liste__boks {
	display: none;
}

.ft-liste__merk::before {
	content: "☐ ";
}

.ft-liste__rad:has( .ft-liste__boks:checked ) .ft-liste__tekst {
	text-decoration: line-through;
}

/*
 * Spaltene faller sammen: to spalter ved siden av hverandre på skjermen er ett ark der lista skal ha
 * bredden. Miniatyrene faller med dem — et bilde er blekk uten en beskjed i en butikk.
 */
.ft-liste__kolonner {
	display: block;
}

.ft-liste__kilde-bilde {
	display: none;
}

/*
 * Sporet — «Fra disse oppskriftene:» — er §7s papirfot for lista, og det er serverens markup
 * allerede. Titlene står; lenkene under dem gjør ikke, siden en understreking på papir er en
 * understreking av ingenting.
 */
.ft-liste__kilder {
	list-style: none;
	padding-inline: 0;
}

.ft-liste__kilder a,
.ft-liste__kilde-lenke {
	color: inherit;
	text-decoration: none;
	padding: 0;
}

/* ────────────────────  PAPIRFOTEN  ──────────────────── */

/*
 * `inc/utskrift.php` skriver den `hidden`, og én klasse her er nok til å avsløre den — ikke fordi
 * `[hidden]` er svak (den veier som en klasse, 0,1,0), men fordi den står i nettleserens eget ark, og
 * kaskaden setter opphav foran spesifisitet. Den motsatte veien, en `display: none` i `main.css`
 * overstyrt herfra, ville vært to regler i samme opphav og dermed avgjort av lasterekkefølgen.
 *
 * Datoen står tom til `lib/utskrift.js` fyller den på `beforeprint`: sida er cachbar, og en dato
 * skrevet av serveren ville stått på papiret måneder senere.
 */
.ft-utskriftsfot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--s);
	/* Venstrekanten er bandenes, som merket øverst: foten står utenfor hvert band i markupen. */
	margin-inline: var(--wp--custom--sideinnrykk);
	margin-block-start: var(--wp--preset--spacing--m);
	padding-block-start: var(--wp--preset--spacing--xxs);
	border-block-start: var(--wp--custom--linje);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker-s);
	color: var(--wp--preset--color--tekst-svak);
}