/**
 * [mmv_voedingsadvies] styles, plus the circle scale both nutrition blocks share.
 *
 * The old site drew these circles with the Font Awesome webfont. This install
 * does not load it: Elementor inlines its icons as SVG, so `fas fa-circle`
 * would render nothing at all. The circle is therefore drawn in CSS here, and
 * the webfont glyph is suppressed — so the block looks the same whether or not
 * Font Awesome is ever added to the site.
 *
 * Colours are the ones from webfundament-core on www.mmv.nl, kept so the block
 * reads identically to the old one.
 *
 * Scoping: the circles and the legend hang off .mmv-bolletjes, a class that
 * both [mmv_voedingsadvies] and [mmv_ingredienten] put on their wrapper — the
 * two must never draw different circles. Layout rules stay scoped to their own
 * block. The bare .toepassing__N classes are left alone in case the theme
 * wants them elsewhere.
 */

.mmv-voedingsadvies {
	width: 100%;
}

/* ── The advice grid ──────────────────────────────────────────────────────────
 *
 * Label and value alternate in the markup — label, value, label, value — and
 * the whole layout switch is one property:
 *
 *   wide    grid-auto-flow: column over two fixed rows, so each pair fills one
 *           column: all labels land on row 1, all values on row 2.
 *   narrow  grid-auto-flow: row over two fixed columns, so each pair fills one
 *           row: label left, value right.
 *
 * Neither needs per-cell placement, so both work unchanged if a column is
 * added or removed through the mvf_advies_kolommen filter.
 */

.mmv-voedingsadvies__advies {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: auto auto;
	grid-auto-columns: 1fr;

	/* The container draws the top and left edges, every cell the right and
	   bottom ones. That gives one continuous, always-aligned rule grid in both
	   layouts, whatever the cells contain — no cell can draw a line the cell
	   beside it does not also draw. */
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
}

.mmv-voedingsadvies__label,
.mmv-voedingsadvies__waarde {
	display: flex;
	align-items: center;
	padding: 0.5em 0.75em;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.mmv-voedingsadvies__label {
	font-size: 0.9em;
	line-height: 1.25;
}

/* ── Narrow: one pair per row ─────────────────────────────────────────────────
 *
 * 1100px, not a device width: the block lives in a sidebar column, and three
 * columns of it get cramped well before the viewport is phone-sized.
 */

@media (max-width: 1100px) {

	.mmv-voedingsadvies__advies {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: 1fr auto;
	}

	.mmv-voedingsadvies__waarde {
		justify-content: flex-end;
	}

	/* The forced line break only earns its keep in a narrow column. */
	.mmv-voedingsadvies__label br {
		display: none;
	}
}

/* ── Circles ─────────────────────────────────────────────────────────────────
 *
 * Shared. Both nutrition blocks put .mmv-bolletjes on their wrapper.
 */

.mmv-bolletjes .fa-circle,
.mmv-bolletjes .fa-check-circle {
	display: inline-block;
	position: relative;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: currentColor;
	font-size: 1.1em;
	font-style: normal;
	vertical-align: -0.125em;
}

/* Two classes beat Font Awesome's own `.fa-circle::before`, so the glyph stays
   out of the box we just drew even if the webfont does get loaded later. */
.mmv-bolletjes .fa-circle::before,
.mmv-bolletjes .fa-check-circle::before {
	content: none;
}

/* Aanbevolen is a check inside the circle, as it was on the old site. */
.mmv-bolletjes .toepassing__2::after {
	content: "";
	position: absolute;
	top: 0.18em;
	left: 0.34em;
	width: 0.2em;
	height: 0.42em;
	border: solid #fff;
	border-width: 0 0.13em 0.13em 0;
	transform: rotate(45deg);
}

.mmv-bolletjes .toepassing__1 { color: #3f97c4; }
.mmv-bolletjes .toepassing__2 { color: #3f97c4; }
.mmv-bolletjes .toepassing__3 { color: #ffa500; }
.mmv-bolletjes .toepassing__4 { color: #ff0000; }
.mmv-bolletjes .toepassing__5 { color: #ccc; }

/* ── Legend ──────────────────────────────────────────────────────────────────
 *
 * Shared too: [mmv_voedingsadvies] legenda="ja" and the explanation block under
 * the ingredient table both render it.
 */

.mmv-legenda {
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
}

/* Standing on its own — legenda="alleen" — there is no grid to sit under. */
.mmv-legenda:first-child {
	margin-top: 0;
}

.mmv-legenda li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.25em;
}