/**
 * core/navigation — bascule en menu burger jusqu'à 1024px.
 *
 * Nativement le bloc passe en overlay/burger sous 600px. On étend ce
 * seuil à 1024px : le menu inline n'apparaît qu'à partir de 1025px.
 *
 * Annule sur la plage <= 1024px les deux règles core `@media (min-width: 600px)`
 * (wp-includes/blocks/navigation/style.css) qui affichent le menu inline
 * et masquent le bouton burger.
 *
 * Prérequis : le bloc doit utiliser overlayMenu « mobile » (défaut) ou « always ».
 * Avec overlayMenu « never », aucun markup burger n'est rendu, le CSS est sans effet.
 */


@media (max-width: 1024px) {
	/* Bouton burger visible */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* Menu inline masqué : on garde le conteneur en mode overlay (caché tant que fermé) */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Icône burger custom : 3 barres horizontales 26×4, gap 4, couleur primary.
	   Masque le SVG natif WP et dessine les barres en background (3 dégradés). */
	.wp-block-navigation__responsive-container-open {
		width: 26px;
		height: 20px;
		color: var(--wp--preset--color--primary);
		background:
			linear-gradient(currentColor, currentColor) 0 0    / 26px 4px no-repeat,
			linear-gradient(currentColor, currentColor) 0 8px  / 26px 4px no-repeat,
			linear-gradient(currentColor, currentColor) 0 16px / 26px 4px no-repeat;
	}

	.wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	/* Bouton close (visible quand menu ouvert) : croix 21.21×21.21 px,
	   positionnée à l'emplacement du burger (centre vertical du header 80 px,
	   marge droite spacing|40). Masque le SVG natif et dessine 2 barres
	   pivotées via ::before / ::after. Animée à l'apparition. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: calc((80px - 21.21px) / 2);
		right: var(--wp--custom--spacing--40, 2.5rem);
		width: 21.21px;
		height: 21.21px;
		color: var(--wp--preset--color--primary);
	}

	.wp-block-navigation__responsive-container-close svg {
		display: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 30px;
		height: 4px;
		background: currentColor;
		transform-origin: center;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
		animation: tt-cross-in-pos 0.3s ease forwards;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
		animation: tt-cross-in-neg 0.3s ease forwards;
	}
}

/* Tailles & espacements mobile spécifiques.
   Nav principale (ref:125, dans .tt-header) : items 20 px, gap 40 px.
   Nav secondaire (ref:4, dans .is-style-primary.hide-on-tablet) : 18 px, gap 30 px.
   Sur desktop on garde les valeurs par défaut du bloc (theme.json / attributs). */
@media (max-width: 1024px) {
	/* Cible le lien (.wp-block-navigation-item__content) directement :
	   certains items ont un attribut `fontSize` preset (ex. "entreprises",
	   "Laboratoire de recherche") qui pose `.has-s-font-size` sur le <a> et
	   bat l'héritage depuis .wp-block-navigation. Trois classes ici = on
	   gagne en spécificité sans recourir à !important. */
	.tt-header .wp-block-navigation .wp-block-navigation-item__content {
		font-size: 20px;
	}

	.tt-header .wp-block-navigation .wp-block-navigation__container {
		gap: 40px;
	}

	.wp-block-navigation.tt-overlay-main {
		padding-top: 20px;
	}

	/* Flèche petite bleue à droite de chaque item du nav principal en overlay
	   (classe `tt-overlay-main` posée dans le template part 996
	   `superposition-de-navigation`). `__content` cible le <a> ET le bouton
	   `.wp-block-navigation-submenu__toggle` pour couvrir items avec et sans
	   sous-menu. L'icône submenu native est déjà masquée côté plugin
	   (teamtreize-hooks/src/navigation/style.scss). */
	.wp-block-navigation.tt-overlay-main .wp-block-navigation-item {
		width: 100%;
	}

	.wp-block-navigation.tt-overlay-main .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: var(--wp--preset--spacing--30, 1.25rem);
	}

	.wp-block-navigation.tt-overlay-main .wp-block-navigation-item__content::after {
		content: "";
		flex: 0 0 auto;
		width: 24.372px;
		height: 18.08px;
		background: url("../img/fleche-petite-bleue.svg") no-repeat center / contain;
	}

	.is-style-primary.hide-on-tablet .wp-block-navigation .wp-block-navigation-item__content {
		font-size: 18px;
	}

	.is-style-primary.hide-on-tablet .wp-block-navigation .wp-block-navigation__container {
		gap: 30px;
	}

	/* Nav secondaire (ref:4 "Sur-menu") rendue dans l'overlay du burger.
	   Le template part `superposition-de-navigation` (post 996) ajoute la
	   classe `tt-overlay-secondary` sur ce nav pour le distinguer du nav
	   principal réaffiché au-dessus. */
	.wp-block-navigation.tt-overlay-secondary .wp-block-navigation-item__content {
		font-size: 18px;
		text-transform: none;
	}

	.wp-block-navigation.tt-overlay-secondary .wp-block-navigation__container {
		gap: 30px;
	}
}

/* Nav secondaire (ref:4 "Sur-menu") desktop : items soulignés au hover.
   Le parent `.hide-on-tablet` masque déjà ≤1024 px, donc pas besoin de media
   query — la règle ne s'applique de fait qu'en desktop. */
.is-style-primary.hide-on-tablet .wp-block-navigation .wp-block-navigation-item__content {

	font-weight: 600;
	padding : 11px 0;

	&:hover {
		text-decoration: underline;
	}
}

/* Burger → croix : barres tournent depuis 0 (horizontales empilées) jusqu'à ±45°. */
@keyframes tt-cross-in-pos {
	0%   { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(45deg); }
}

@keyframes tt-cross-in-neg {
	0%   { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(-45deg); }
}