/*
 * Menus : robustesse face aux modifications du client.
 *
 * Le client peut ajouter des entrées, des sous-menus ou des libellés longs :
 * la barre ne doit jamais déborder ni masquer une entrée. Règle Mega-Ique de
 * parité : tout ce qui est dans le menu desktop est accessible dans le menu
 * mobile (burger Astra), sous-niveaux compris. Vérifié par tests/e2e/menu.spec.ts.
 */

/* Desktop : les entrées passent à la ligne au lieu de déborder. */
@media (min-width: 922px) {
	.main-header-menu {
		flex-wrap: wrap;
		row-gap: 0.25rem;
	}

	/* Jamais de coupure au milieu d'un mot (« HERRENKOLLEKTIO-N »). */
	.main-header-menu .menu-link {
		overflow-wrap: normal;
		word-break: normal;
	}

	/* Sous-menus : largeur bornée, libellés longs sur plusieurs lignes. */
	.main-header-menu .sub-menu {
		min-width: 14rem;
		max-width: min(22rem, 90vw);
	}

	.main-header-menu .sub-menu .menu-link {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* Ouverture au clavier, pas seulement au survol. */
	.main-header-menu .menu-item:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
	}
}

/* Mobile et tablette : menu burger. */
@media (max-width: 921px) {
	.ast-mobile-header-content .main-header-menu .menu-link,
	.ast-mobile-popup-drawer .main-header-menu .menu-link {
		min-height: 44px;
		display: flex;
		align-items: center;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* Bouton d'ouverture des sous-menus : zone tactile confortable. */
	.ast-header-break-point .main-header-menu .ast-menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}

	/* Le panneau défile si le menu est très long. */
	.ast-mobile-header-content,
	.ast-mobile-popup-drawer .ast-mobile-popup-inner {
		max-height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/*
 * Contenu saisi par le client : rien ne doit élargir la page. Pas de
 * overflow-x global (il masquerait les débordements au lieu de les corriger,
 * et rendrait le test de régression inutile).
 */
.entry-content img,
.entry-content video,
.entry-content iframe {
	max-width: 100%;
	height: auto;
}

.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.entry-content a,
.entry-content p {
	overflow-wrap: anywhere;
}