/**
 * Composant « onglets » partagé (frontend).
 *
 * Dépend de tokens.css. Classes neutres (`nirmata-tabs`, pas `nirmata-events-tabs`) :
 * la page événement et l'espace bénévole rendent le même composant, il n'a donc
 * pas à porter le nom de l'une des deux vues.
 *
 * Extrait d'events.css en 0.26.0, à l'identique — l'apparence de la page
 * événement est inchangée.
 */

/* Barre d'onglets masquée tant que le JS n'a pas amélioré le composant : sans
 * JS, tous les panneaux restent affichés (empilés). */
.nirmata-tabs__nav {
	display: none;
}

.nirmata-tabs.is-enhanced .nirmata-tabs__nav {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	border-bottom: 2px solid var( --nirmata-border );
	margin: 0 0 22px;
}

.nirmata-tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	font-size: 1.05rem;
	color: var( --nirmata-text-muted );
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nirmata-tab:hover { color: var( --nirmata-primary ); }

.nirmata-tab.is-active {
	color: var( --nirmata-primary );
	border-bottom-color: var( --nirmata-primary );
}

/* Focus : aucune boîte (ni outline ni box-shadow), quel que soit le navigateur
 * ou le mode de focus (souris comme clavier) — la bague par défaut restait
 * visible après clic. Le soulignage de l'onglet reste le seul indicateur (y
 * compris au clavier via :focus-visible ci-dessous). */
.nirmata-tab:focus,
.nirmata-tab:focus-visible {
	outline: none;
	box-shadow: none;
}
.nirmata-tab:focus-visible {
	color: var( --nirmata-primary );
	border-bottom-color: var( --nirmata-primary );
}

/* Sans JS : panneaux empilés avec un espacement. Avec JS : un seul visible. */
.nirmata-tabs__panel { margin: 0 0 26px; }
.nirmata-tabs.is-enhanced .nirmata-tabs__panel { margin: 0; }
.nirmata-tabs.is-enhanced .nirmata-tabs__panel[hidden] { display: none; }

/* Sur mobile, la barre d'onglets doit tenir sans casser la lecture : les
 * libellés se resserrent plutôt que de passer à la ligne un par un. */
@media ( max-width: 600px ) {
	.nirmata-tab {
		padding: 9px 12px;
		font-size: 0.95rem;
	}
}