/**
 * "Broccoli cress" — markering en uitlegkaartje.
 *
 * De markering moet opvallen dat er iets te halen valt, zonder de tekst te
 * verminken: de term staat tientallen keren op een pagina, dus een volle
 * onderstreping zou de pagina laten ruisen. Vandaar een stippellijn in de
 * merkkleur, die bij hover dicht wordt.
 */

/* De markeerkleur. Geel zou logisch lijken omdat het de merkkleur is, maar een
   dunne gele lijn is op wit vrijwel onzichtbaar en op de gele secties helemaal.
   Dit roze komt uit dezelfde familie als de aubergine van het merk en houdt op
   alle drie de ondergronden stand: wit, het huidtinte vlak en het felgeel. */
:root {
	--rf-term-lijn: #C2456F;
}

.rf-term {
	cursor: help;
	text-decoration: underline solid var(--rf-term-lijn);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
	/* Nooit de regelhoogte veranderen — anders verspringt de hele alinea zodra
	   de tekst gemarkeerd wordt. */
	display: inline;
}

/* De lijn is al doorgetrokken, dus hover onderscheidt zich met dikte in plaats
   van met stijl. Alleen de dikte veranderen laat de tekst niet verspringen. */
.rf-term:hover,
.rf-term:focus-visible,
.rf-term.is-open {
	text-decoration-thickness: 2.5px;
}

.rf-term:focus-visible {
	outline: 2px solid var(--main-dark, #5C434D);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------- kaartje */

/* Wit kaartje. Een witte kaart op een deels witte pagina moet het van zijn rand
   en schaduw hebben om als losse laag te lezen, dus die zijn hier iets steviger
   dan je normaal op wit zou zetten: een zichtbare lijn in de merkkleur en een
   schaduw met genoeg diepte om ook op het gele vlak los te komen. */
.rf-term-card {
	position: fixed;
	z-index: 100000; /* boven de vaste bovenbalk (99999) */
	width: min(278px, calc(100vw - 24px));
	/* Ruim genoeg dat het kaartje niet klemt: de inhoud is ongeveer 300px, dus
	   met 88vh houdt ook een kort venster de onderste regel heel. */
	max-height: min(88vh, 520px);
	overflow-y: auto;
	box-sizing: border-box;
	padding: 14px 15px;
	background: #fff;
	color: var(--main-dark, #5C434D);
	border: 1px solid rgba(92, 67, 77, 0.22);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(36, 27, 32, 0.1), 0 18px 44px -14px rgba(36, 27, 32, 0.45);
	font-family: var(--font-base, "Cabin", helvetica, sans-serif);
	font-size: 13.5px;
	line-height: 1.5;
	text-align: left;
	/* Muisgebeurtenissen AAN: de tabel kan op een kleine telefoon net te hoog
	   worden, en dan moet je erin kunnen scrollen zonder dat het kaartje sluit. */
	pointer-events: auto;
}

.rf-term-card[hidden] {
	display: none !important;
}

.rf-term-card__titel {
	margin: 0 0 5px;
	font-family: var(--font-headings, "Bellamy", helvetica, sans-serif);
	font-size: 15px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rf-term-card__intro {
	margin: 0 0 10px;
	font-size: 13px;
	color: rgba(92, 67, 77, 0.8);
}

/* ------------------------------------------------------------ feitenlijst */

/* Vier feiten met een icoon in plaats van een label. Het icoon draagt de
   categorie, de tekst alleen nog de waarde. */
.rf-term-card__feiten {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 9px 0 0;
	list-style: none;
	border-top: 1px solid rgba(92, 67, 77, 0.16);
}

.rf-term-card__feiten li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12.5px;
}

.rf-term-card__feiten svg {
	flex: none;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Kleur per soort icoon, niet per positie: hetzelfde blaadje hoort op elk
   kaartje dezelfde tint te hebben, ook als het ene drie feiten heeft en het
   andere vier. Lichte tinten, want ze staan nu op aubergine. */
.rf-term-card__feiten li[data-icoon="schaar"]   { color: #7A5C68; }  /* oogst       */
.rf-term-card__feiten li[data-icoon="peper"]    { color: #C0532F; }  /* smaak       */
.rf-term-card__feiten li[data-icoon="bakje"]    { color: #9A7622; }  /* portie      */
.rf-term-card__feiten li[data-icoon="blad"]     { color: #3F7A4F; }  /* plant       */
.rf-term-card__feiten li[data-icoon="molecuul"] { color: #4A6E92; }  /* plantenstof */

.rf-term-card__feiten li span {
	color: var(--main-dark, #5C434D);
}

/* --------------------------------------------------- voedingswaardetabel */

/* Een definitielijst met flexregels in plaats van een <table>.

   De tabel bleef structureel 10px buiten het kaartje vallen: het thema legt
   globale regels op <table> die zelfs van table-layout:fixed wonnen, waardoor
   de getallen tegen de rand plakten. Met flex kan dat niet gebeuren: de naam
   krimpt (min-width:0 maakt dat mogelijk), de waarde niet, en de rechterkant
   valt altijd samen met de padding van het kaartje. */
.rf-term-card__vw {
	margin: 9px 0 0;
	padding: 9px 0 0;
	border-top: 1px solid rgba(92, 67, 77, 0.16);
	font-variant-numeric: tabular-nums;
}

.rf-term-card__vw-kop,
.rf-term-card__vw-rij {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	border-bottom: 1px solid rgba(92, 67, 77, 0.12);
}

.rf-term-card__vw-kop {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(92, 67, 77, 0.55);
	border-bottom-color: rgba(92, 67, 77, 0.2);
}

/* De onderste regel houdt zijn lijn, zodat de lijst een duidelijke onderkant
   heeft en niet zomaar ophoudt boven de voetnoot. */
.rf-term-card__vw-rij:last-child {
	border-bottom-color: rgba(92, 67, 77, 0.2);
}

.rf-term-card__vw dt {
	margin: 0;
	font-size: 12.5px;
	color: rgba(92, 67, 77, 0.72);
	/* Krimpen mag, en min-width:0 is wat een flexitem daadwerkelijk toestaat
	   om kleiner te worden dan zijn inhoud. */
	flex: 1 1 auto;
	min-width: 0;
}

.rf-term-card__vw dd {
	margin: 0;
	font-size: 12.5px;
	color: var(--main-dark, #5C434D);
	/* De waarde breekt nooit af: "67 kJ / 16 kcal" hoort op één regel, anders
	   wordt die ene rij hoger dan de rest en lijkt er iets misgegaan. */
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Subregels springen in en staan lichter, zoals op een etiket. */
.rf-term-card__vw-rij.is-sub dt,
.rf-term-card__vw-rij.is-sub dd {
	font-size: 11.5px;
	color: rgba(92, 67, 77, 0.5);
}

.rf-term-card__vw-rij.is-sub dt {
	padding-left: 10px;
}

/* Vitamine C is de enige regel waar een toegestane claim aan hangt
   (78% RI = "hoog gehalte aan"), dus die mag opvallen. */
.rf-term-card__vw-rij.is-kern dt,
.rf-term-card__vw-rij.is-kern dd {
	font-weight: 600;
	color: #2F6B4F;
}

/* Het percentage staat achter de waarde op DEZELFDE regel.

   display:inline staat er expliciet, niet omdat een span dat niet vanzelf is,
   maar omdat een eerdere versie van dit bestand hier display:block had staan.
   Die eigenschap alleen weghalen is niet genoeg: zolang er ergens nog een oude
   versie van deze stylesheet in een cache zit, blijft die block winnen en wordt
   de vitamine C-regel anderhalf keer zo hoog als de rest. */
.rf-term-card__ri {
	display: inline;
	margin-left: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.85;
}

/* Voetnoot onder de lijst: legt uit waar %RI op slaat. */
.rf-term-card__voet {
	margin: 9px 0 0;
	font-size: 10.5px;
	line-height: 1.4;
	color: rgba(92, 67, 77, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.rf-term,
	.rf-term-card {
		transition: none !important;
	}
}