/**
 * Matt's Fit Chef — assets/css/recipe-badges.css
 * Diet + difficulty badge styles for recipe cards and WPRM card detail.
 */

/* ── Base badge ─────────────────────────────────────────────────────────────── */

.mfc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--mfc-bg-stone);
	color: var(--mfc-forest);
	border: 1px solid var(--mfc-border);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.mfc-badge svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* ── Badge row wrapper ──────────────────────────────────────────────────────── */

.mfc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.5rem;
}

/* ── Difficulty badges ──────────────────────────────────────────────────────── */

.mfc-badge--difficulty {
	background: var(--mfc-bg-stone);
	color: var(--mfc-text);
	border-color: var(--mfc-border);
}

.mfc-badge--easy {
	background: var(--mfc-diff-easy-bg);
	color: var(--mfc-diff-easy-text);
	border-color: var(--mfc-diff-easy-border);
}

.mfc-badge--medium {
	background: var(--mfc-diff-med-bg);
	color: var(--mfc-diff-med-text);
	border-color: var(--mfc-diff-med-border);
}

.mfc-badge--hard {
	background: var(--mfc-diff-hard-bg);
	color: var(--mfc-diff-hard-text);
	border-color: var(--mfc-diff-hard-border);
}