/*
 * Sphera — superposition du bloc Navigation
 * Mobile : panneau 3/4 — Desktop : panneau latéral (~1/3).
 */

/* Au-dessus du contenu de page (z-index header = 40, blocs sticky/cover, etc.) */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.has-modal-open {
	position: fixed !important;
	z-index: 100000 !important;
	align-items: stretch;
	justify-content: flex-start;
	inset: 0;
}

/* Remonter le header tant que l'overlay est ouvert (évite le piège du stacking context) */
.sphera-header:has(.wp-block-navigation__responsive-container.is-menu-open),
.sphera-header:has(.wp-block-navigation__responsive-container.has-modal-open),
html.has-modal-open .sphera-header {
	z-index: 100000 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog {
	position: relative;
	z-index: 1;
}

.wp-block-navigation__overlay-container {
	position: relative;
	z-index: 2;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-close {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
	height: 100%;
}

.wp-block-navigation__overlay-container {
	width: 100%;
	height: 100%;
}

.wp-block-navigation__overlay-container > .wp-block-group {
	width: 100% !important;
	height: 100% !important;
	overflow-y: auto;
	box-sizing: border-box;
}

/* Mobile — panneau 3/4 de l'écran */
@media (max-width: 768px) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.has-modal-open {
		background-color: rgba(0, 19, 58, 0.45);
		height: 100vh;
		min-height: 100vh;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-close {
		flex: 0 0 75%;
		width: 75%;
		max-width: 75%;
		height: 100vh;
		min-height: 100vh;
		animation: sphera-nav-panel-in 220ms ease-out;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog {
		height: 100vh;
		min-height: 100vh;
	}

	.wp-block-navigation__overlay-container {
		height: 100%;
		min-height: 100vh;
	}

	.wp-block-navigation__overlay-container > .wp-block-group {
		min-height: 100vh !important;
		height: 100% !important;
		max-height: none;
	}
}

/* Desktop / tablette — panneau 1/3, pleine hauteur + fond assombri */
@media (min-width: 769px) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.has-modal-open {
		background-color: rgba(0, 19, 58, 0.45);
		height: 100vh;
		min-height: 100vh;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-close {
		flex: 0 0 33.333%;
		width: 33.333%;
		max-width: 33.333%;
		height: 100vh;
		min-height: 100vh;
		animation: sphera-nav-panel-in 220ms ease-out;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog {
		height: 100vh;
		min-height: 100vh;
	}

	.wp-block-navigation__overlay-container {
		height: 100%;
		min-height: 100vh;
	}

	.wp-block-navigation__overlay-container > .wp-block-group {
		min-height: 100vh !important;
		height: 100% !important;
		max-height: none;
	}
}

/* Champ recherche dans l'overlay menu */
.wp-block-navigation__overlay-container .wp-block-search,
.sphera-nav-search.wp-block-search {
	margin-inline: auto;
	width: 100%;
}

.wp-block-navigation__overlay-container .wp-block-search__inside-wrapper,
.sphera-nav-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--network-dark-blue, #00133a);
	border-radius: 6px;
	padding: 10px 16px;
	background: #fff;
}

.wp-block-navigation__overlay-container .wp-block-search__inside-wrapper::before,
.sphera-nav-search .wp-block-search__inside-wrapper::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url("../svg/search.svg") center / contain no-repeat;
}

.wp-block-navigation__overlay-container .wp-block-search__input,
.sphera-nav-search .wp-block-search__input {
	border: none !important;
	outline: none;
	background: transparent;
	text-align: left;
	flex: 0 1 auto;
	width: 9.5ch;
	max-width: calc(100% - 30px);
	min-width: 0;
	padding: 0;
	field-sizing: content;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--corps);
	color: var(--wp--preset--color--network-dark-blue, #00133a);
}

.wp-block-navigation__overlay-container .wp-block-search__input::placeholder,
.sphera-nav-search .wp-block-search__input::placeholder {
	text-align: left;
	color: var(--wp--preset--color--network-dark-blue, #00133a);
	opacity: 1;
}

/* Titres de section overlay (Media, Network, About us…) — icône + libellé */
.network-menu,
.sphera-nav-accordion__trigger {
	display: flex !important;
	align-items: center !important;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	gap: 6px;
	cursor: pointer;
	user-select: none;
}

.network-menu > .wp-block-image,
.sphera-nav-accordion__trigger > .wp-block-image {
	margin: 0 !important;
	padding: 0;
	line-height: 0;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.network-menu > .wp-block-image img,
.sphera-nav-accordion__trigger > .wp-block-image img {
	display: block;
	width: auto;
	height: auto;
	max-height: 22px;
}

.network-menu > .wp-block-paragraph,
.sphera-nav-accordion__trigger > .wp-block-paragraph {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3;
	flex: 1 1 auto;
	min-width: 0;
}

/* Chevron à droite — menu déroulant overlay */
.sphera-nav-accordion__trigger::after {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 8px;
	margin-left: auto;
	background: url("../svg/chevron-bas.svg") center / contain no-repeat;
	transition: transform 180ms ease;
}

.sphera-nav-accordion__trigger.is-open::after {
	transform: rotate(180deg);
}

/* Panneau sous le trigger (rangée de liens) */
.sphera-nav-accordion__panel {
	display: none;
}

.sphera-nav-accordion__panel.is-open {
	display: block;
}

.sphera-nav-accordion__panel > .wp-block-paragraph {
	margin: 0;
}

@keyframes sphera-nav-panel-in {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}