/**
 * IndustrialForum — Exhibitor terms tags widget (sectors / services).
 *
 * Two rows, one per taxonomy: a visible "Settore:" / "Servizi e prodotti:" label leads
 * each row, followed by its filled chips. Each group's background color is set by an
 * Elementor color control; the chip text color (black/white) is set for contrast by
 * exhibitor-terms.js (sector chips are forced white by design).
 */

.if-terms {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.if-terms__group {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.if-terms__label {
	font-weight: 700;
}

.if-terms__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.if-terms__tag {
	display: inline-block;
	padding: 0.3em 0.9em;
	border-radius: 999px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: #fff; /* Fallback until exhibitor-terms.js sets the contrast color. */
}

.if-terms__tag:hover,
.if-terms__tag:focus-visible {
	text-decoration: underline;
}

/*
 * Focus ring must stay visible regardless of the chip's text color (which JS flips to
 * black/white per background): a white outline on a light page would vanish. A fixed
 * high-contrast color + a contrasting box-shadow halo guarantee ≥3:1 on any background.
 */
.if-terms__tag:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #005fcc;
}

/* Default group backgrounds (overridable by the widget's Elementor color controls). */
.if-terms__tag--sector {
	background-color: var(--e-global-color-961538e);
	color: #ffffff; /* Forced white per design request (may not meet WCAG on light orange). */
}

/* Keep the forced white on hover/focus too: the theme's link-hover color (orange) would
   otherwise tint the text orange-on-orange. Extra specificity to beat theme rules. */
.if-terms__list .if-terms__tag--sector:hover,
.if-terms__list .if-terms__tag--sector:focus-visible {
	color: #ffffff;
}

.if-terms__tag--service {
	background-color: #10396a;
	color: #ffffff; /* No-JS / pre-JS safe fallback: white on #10396a (~19:1). */
}