/**
 * Entête — menu tablette/mobile (≤ 1024px).
 *
 * Desktop (≥ 1025px) : entête inchangée ; burger et volet masqués.
 * iPad + mobile (≤ 1024px) : la navigation inline et le bouton « Je rejoins le
 * club » sont masqués, remplacés par un burger qui ouvre un volet PLEIN ÉCRAN
 * (fond blanc) contenant les items du menu centrés (couleur primary, taille
 * « Titre 3 ») puis le bouton en dessous.
 *
 * Le volet réutilise le même menu (wp:navigation ref=4) : source unique des
 * liens. Couleurs/tailles tirées exclusivement des presets theme.json.
 *
 * @package TCG
 */

/* --------------------------------------------------------------------------
 * Burger (masqué par défaut = desktop).
 * -------------------------------------------------------------------------- */
.tcg-header .tcg-burger {
	display: none;
	/* Reste au-dessus du volet plein écran (z-index 1000) pour servir de croix. */
	position: relative;
	z-index: 1001;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var( --wp--preset--color--contrast ); /* icône foncée */
}

.tcg-burger__box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 26px;
	height: 26px;
}

.tcg-burger__line {
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transform-origin: center;
	transition: transform 300ms ease, opacity 200ms ease;
}

/* État ouvert : les trois barres se transforment en croix (X). */
.tcg-burger.is-active .tcg-burger__line:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}

.tcg-burger.is-active .tcg-burger__line:nth-child( 2 ) {
	opacity: 0;
}

.tcg-burger.is-active .tcg-burger__line:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.tcg-burger__line {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Volet plein écran (masqué/inactif par défaut, révélé via .is-open).
 * .tcg-mobile-menu est un groupe flex vertical : display:flex vient du cœur.
 * -------------------------------------------------------------------------- */
.tcg-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
	background-color: var( --wp--preset--color--base );
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--20 );
	gap: var( --wp--preset--spacing--30 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 300ms ease, visibility 300ms ease;
}

.tcg-mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
 * Items de navigation dans le volet : empilés, centrés, primary, « Titre 3 ».
 * -------------------------------------------------------------------------- */
.tcg-mobile-menu .tcg-nav-mobile .wp-block-navigation__container {
	flex-direction: column;
	align-items: center;
	gap: var( --wp--preset--spacing--20 );
}

.tcg-mobile-menu .tcg-nav-mobile .wp-block-navigation-item__content {
	color: var( --wp--preset--color--primary );
	font-size: var( --wp--preset--font-size--x-large );
	line-height: var( --wp--custom--line-height--heading );
	font-weight: 600;
}

/* Pas de soulignement au survol/focus (surcharge le style de lien global). */
.tcg-mobile-menu .tcg-nav-mobile .wp-block-navigation-item__content:hover,
.tcg-mobile-menu .tcg-nav-mobile .wp-block-navigation-item__content:focus {
	text-decoration: none;
}

/* Bouton « Je rejoins le club » sous les items. */
.tcg-mobile-menu__cta {
	margin-top: var( --wp--preset--spacing--20 );
}

/* Verrouille le défilement de la page quand le volet est ouvert. */
html.tcg-menu-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Bascule responsive.
 * -------------------------------------------------------------------------- */
@media ( max-width: 1024px ) {
	.tcg-header .tcg-nav-desktop,
	.tcg-header .tcg-cta-desktop {
		display: none !important;
	}

	.tcg-header .tcg-burger {
		display: inline-flex;
	}
}

@media ( min-width: 1025px ) {
	/* Sécurité : aucun burger ni volet sur desktop. */
	.tcg-header .tcg-burger,
	.tcg-mobile-menu {
		display: none !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tcg-mobile-menu {
		transition: none;
	}
}