/*
 * Ingredienskortet.
 *
 * Blokka er `fru-timian-recipes` sin (#145) — pluginen eier substantivet og markupen, temaet eier
 * utseendet — så stilarket er globalt her og ikke et blokkstilark. `functions.php` legger det både
 * i køen på fronten og i `add_editor_style()`, slik at lerretet tegner kortet som siden gjør.
 *
 * Transkribert fra prototypens `.ingredients-card`
 * (html-prototype/oppskrift.html:654-691, markup :2083-2124). **Ingen avkrysningsbokser i hvile** —
 * kortet ser ut som prototypens. Boksene står i markupen hele tiden og vises bare under
 * `:root[data-ft-matlaging]`, flagget matlagingsmodus-pilla skriver.
 *
 * ADR-0003 gjelder: bare `var(--wp--preset--*)` og `var(--wp--custom--*)`, egne variabler bare under
 * blokkas eget prefiks på rotklassen, og hver rå px er en optisk verdi med kommentar.
 *
 * **Ingen container query, og ingen `container-type`.** Kortet har ingen breddeavhengig struktur —
 * prototypens eneste smale regel bumper linjehøyden, og typografien her er allerede flytende. En
 * manglende `container-type` feiler stille, så det er verdt å si at den mangler med vilje.
 */

.ft-ingredienser {
	background: var(--wp--preset--color--lys-blaa);
	padding: var(--wp--preset--spacing--m);
	border-radius: var(--wp--custom--radius--kant);
}

/*
 * Tittelen er en `h2`, og theme.json gir hver `h2` Amatic på 60px — riktig for en hero-tittel, feil
 * for et kort i sidespalta. Regelen er skrevet med to klasser fordi kjernens egen er `:root :where(h2)`
 * med samme spesifisitet som én klasse: med bare `.ft-ingredienser__tittel` ville hvem som vinner
 * hengt på rekkefølgen stilarkene lastes i, og den rekkefølgen er ikke den samme på fronten som i
 * redigereren. Samme grep som `.ft-band.is-layout-constrained` i assets/css/main.css.
 */
.ft-ingredienser .ft-ingredienser__tittel {
	margin: 0 0 var(--wp--preset--spacing--xxs);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--tekst);
	text-transform: none;
}

/*
 * Gruppetittelen er en `h3` — ett nivå under kortets egen tittel, som er det riktige nivået og det
 * #87 ber om («group labels render as headings»). Prototypen har den som en `<p>` med samme utseende;
 * utseendet er beholdt, semantikken rettet.
 */
.ft-ingredienser .ft-ingredienser__gruppe {
	/* 2px: avstanden ned til første linje i gruppa, en optisk detalj og ikke et spacing-steg. */
	margin: 0 0 2px;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--tekst);
}

/*
 * Hårstreken skiller gruppe fra gruppe, så den hører den *andre* gruppa og utover. `~` og ikke
 * `:not(:first-of-type)`: en ugruppert liste kan komme før den første gruppa (linjer skrevet uten
 * tittel), og da er den første `h3` i markupen ikke den første `:first-of-type` ville pekt på.
 */
.ft-ingredienser .ft-ingredienser__liste ~ .ft-ingredienser__gruppe {
	/* 14px: prototypens egen avstand rundt hårstreken, optisk og ikke et steg. */
	margin-top: 14px;
	padding-top: 14px;
	border-top: var(--wp--custom--linje);
}

.ft-ingredienser__liste {
	margin: 0 0 var(--wp--preset--spacing--xxs);
	padding: 0;
	list-style: none;
}

.ft-ingredienser__liste:last-child {
	margin-bottom: 0;
}

/* Et opprom (ADR-0031) er ingen rad, men luft over linja etter det. */
.ft-ingredienser .ft-ingredienser__linje--luft {
	margin-block-start: var(--wp--preset--spacing--xs);
}

/*
 * Etiketten er hele linja, ikke en merkelapp ved siden av den: under matlagingsmodus er den flata
 * leseren treffer med en finger, og i hvile skal den se ut som en `<li>` med tekst i.
 */
.ft-ingredienser__etikett {
	display: block;
	font-size: var(--wp--preset--font-size--brodtekst);
	line-height: 1.6;
	color: var(--wp--preset--color--tekst);
	cursor: default;
}

/*
 * To klasser, av samme grunn som tittelen over: wp-admin sin `forms.css` gjelder i redigereren, og
 * `input[type=checkbox] { display: inline-block }` der veier tyngre enn én klasse. Med én klasse sto
 * boksen synlig over hver linje i redigereren, og riktig på fronten, der `forms.css` ikke finnes.
 */
.ft-ingredienser .ft-ingredienser__boks {
	display: none;
}

:root[data-ft-matlaging] .ft-ingredienser__linje {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--xxxs);
	padding-block: 0;
}

:root[data-ft-matlaging] .ft-ingredienser__boks {
	display: block;
	flex-shrink: 0;
	margin: 0;
	/* `em`: boksen følger linjas skriftstørrelse, som er flytende. */
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--wp--preset--color--gul);
	/* 0.23em: optisk, senker boksen til x-høyden på en linje med `line-height: 1.6`. */
	transform: translateY(0.23em);
}

:root[data-ft-matlaging] .ft-ingredienser__etikett {
	cursor: pointer;
}

/*
 * `:has` på linja og ikke en søskenselektor: etiketten er boksens søsken, men strekingen er en
 * påstand om linja, og en gruppe uten tittel har ingen annen krok.
 */
:root[data-ft-matlaging] .ft-ingredienser__linje:has( > .ft-ingredienser__boks:checked ) .ft-ingredienser__etikett {
	color: var(--wp--preset--color--tekst-svak);
	text-decoration: line-through;
}