/**
 * MD-act — Pills (thema-labels)
 * Hoort bij [mdact_thema_pills] en [mdact_expertises].
 *
 * Zachtgroen vlakje met groene tekst, zoals de labels op de nieuwskaartjes
 * van Sterker. Geen randlijn, alleen een vulling.
 *
 * Kleuren komen uit de variabelen van mdact-dienstblokken.css (:root), met
 * een hex als terugval.
 */

/* Geen eigen marge: de ruimte eromheen bepaal je in Elementor, bij de widget
   waar de shortcode in staat. Anders staat er ruimte onder de pil die je daar
   niet weg krijgt. Kaartjes die wel ruimte nodig hebben, zetten die zelf
   (zie .mdact-kaart .mdact-pills in mdact-overzicht.css). */
.mdact-pills {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
	margin: 0;
}

.mdact-pills .mdact-pill {
	display: inline-block;
	padding: 6px 14px;
	border: 0;
	border-radius: 18px;
	background-color: rgba(74, 124, 107, 0.12);
	color: var(--mdact-donkergroen, #2C4A3E);
	font-size: 13px;
	line-height: 1.4;

	/* Nooit breder worden dan het vak waar hij in staat, anders steekt de pil
	   buiten het kaartje uit. Past een lange themanaam niet op een regel, dan
	   breekt hij af; met deze hoekronding blijft dat er netjes uitzien. */
	max-width: 100%;
	text-decoration: none;
	transition: background-color .2s ease;
}

/* De pil is soms een link (in een loop-kaartje), soms alleen tekst. Als link
   mag hij niet het groen met onderstreping van de gewone links krijgen. */
.mdact-pills a.mdact-pill {
	color: var(--mdact-donkergroen, #2C4A3E) !important;
	text-decoration: none !important;
}

.mdact-pills a.mdact-pill:hover,
.mdact-pills a.mdact-pill:focus-visible {
	background-color: rgba(74, 124, 107, 0.22);
}

/* --- Op een donkere achtergrond ---
   [mdact_thema_pills is-donker], bedoeld voor de hero van het blogbericht.
   Zachtgroen op donkergroen valt weg, dus daar wordt de pil licht: een
   doorschijnend vlakje met witte tekst. Geen randlijn, net als hierboven. */
.mdact-pills.is-donker .mdact-pill {
	background-color: rgba(197, 217, 206, 0.14);
	color: #FFFFFF;
}

.mdact-pills.is-donker a.mdact-pill {
	color: #FFFFFF !important;
}

.mdact-pills.is-donker a.mdact-pill:hover,
.mdact-pills.is-donker a.mdact-pill:focus-visible {
	background-color: rgba(197, 217, 206, 0.26);
}