/**
 * SkelPress Advanced Menu — Effets d'ouverture des dropdowns de nav.
 *
 * Deux familles, sélectionnées par `data-skp-dropdown-fx` posé sur la nav (PHP) :
 *
 * 1. EFFETS SIMPLES (fade/slide/scale/flip/blur) — animent le conteneur de
 *    sous-menu NATIF. Au repos on lui pose un `transform`/`filter` ; aux 3
 *    conditions d'ouverture du cœur (hover / focus-within / toggle aria-expanded)
 *    on remet à plat. Pur CSS, tous dropdowns, clavier + tactile inclus.
 * 2. MORPH (`morph-floating` / `morph-fullwidth`) — un panneau PARTAGÉ rendu dans
 *    la top layer par assets/js/dropdown-effects.js ; le conteneur natif est
 *    neutralisé au survol (souris fine) au profit du panneau. Structure interne :
 *    box (carte qui morphe) > caret + viewport (clippe) > panes (cross-fade).
 *
 * Durée commune : --skp-dropdown-fx-dur (posée par PHP sur la nav d'après le
 * réglage ; héritée par le conteneur natif, lue par le moteur pour le morph).
 */

/* ===================================================================== *
 *  Famille 1 — Effets simples sur le conteneur de sous-menu natif        *
 * ===================================================================== */

/* Valeurs « au repos » par effet, posées sur la nav (héritées par le conteneur). */
.wp-block-navigation[data-skp-dropdown-fx="fade"] {
	--skp-dfx-transform: none;
	--skp-dfx-blur: 0;
}
.wp-block-navigation[data-skp-dropdown-fx="slide"] {
	--skp-dfx-transform: translateY( -10px );
	--skp-dfx-blur: 0;
}
.wp-block-navigation[data-skp-dropdown-fx="scale"] {
	--skp-dfx-transform: scale( 0.96 );
	--skp-dfx-blur: 0;
	--skp-dfx-origin: top center;
}
.wp-block-navigation[data-skp-dropdown-fx="flip"] {
	--skp-dfx-transform: perspective( 900px ) rotateX( -14deg );
	--skp-dfx-blur: 0;
	--skp-dfx-origin: top center;
}
.wp-block-navigation[data-skp-dropdown-fx="blur"] {
	--skp-dfx-transform: none;
	--skp-dfx-blur: 8px;
}

/* État fermé : on applique l'effet au conteneur natif (sauf en mode morph, qui le
   neutralise plus bas). Le cœur gère déjà opacity/visibility/width/height. */
.wp-block-navigation[data-skp-dropdown-fx]:not( [data-skp-dropdown-fx^="morph"] )
	.has-child
	> .wp-block-navigation__submenu-container {
	transform: var( --skp-dfx-transform, none );
	filter: blur( var( --skp-dfx-blur, 0 ) );
	transform-origin: var( --skp-dfx-origin, top center );
}

@media not ( prefers-reduced-motion ) {
	.wp-block-navigation[data-skp-dropdown-fx]:not( [data-skp-dropdown-fx^="morph"] )
		.has-child
		> .wp-block-navigation__submenu-container {
		transition: opacity var( --skp-dropdown-fx-dur, 220ms ) ease,
			transform var( --skp-dropdown-fx-dur, 220ms )
				cubic-bezier( 0.4, 0.75, 0.2, 1 ),
			filter var( --skp-dropdown-fx-dur, 220ms ) ease;
	}
}

/* État ouvert : on calque EXACTEMENT les 3 conditions du cœur et on remet à plat.
   (hover souris fine / focus-within clavier / toggle au clic.) */
@media ( hover: hover ) {
	.wp-block-navigation[data-skp-dropdown-fx]:not( [data-skp-dropdown-fx^="morph"] )
		.has-child:not( .open-on-click ):hover
		> .wp-block-navigation__submenu-container {
		transform: none;
		filter: none;
	}
}
.wp-block-navigation[data-skp-dropdown-fx]:not( [data-skp-dropdown-fx^="morph"] )
	.has-child:not( .open-on-click ):not( .open-on-hover-click ):focus-within
	> .wp-block-navigation__submenu-container,
.wp-block-navigation[data-skp-dropdown-fx]:not( [data-skp-dropdown-fx^="morph"] )
	.has-child
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	~ .wp-block-navigation__submenu-container {
	transform: none;
	filter: none;
}

/* Effets simples — bloc mega-menu (skp/mega-menu). Mêmes valeurs « au repos » que le
   sous-menu natif, mais la condition d'ouverture est PROPRE au mega : classe
   `is-menu-open` posée par son view.js sur le toggle. view.js positionne le panneau
   via `left`/`width` (jamais `transform`) → le transform de l'effet est libre. */
.wp-block-navigation[data-skp-dropdown-fx]:not( [data-skp-dropdown-fx^="morph"] )
	.wp-block-skp-mega-menu
	> .wp-block-skp-mega-menu__menu-container {
	transform: var( --skp-dfx-transform, none );
	filter: blur( var( --skp-dfx-blur, 0 ) );
	transform-origin: var( --skp-dfx-origin, top center );
}

@media not ( prefers-reduced-motion ) {
	.wp-block-navigation[data-skp-dropdown-fx]:not( [data-skp-dropdown-fx^="morph"] )
		.wp-block-skp-mega-menu
		> .wp-block-skp-mega-menu__menu-container {
		transition: opacity var( --skp-dropdown-fx-dur, 220ms ) ease,
			transform var( --skp-dropdown-fx-dur, 220ms )
				cubic-bezier( 0.4, 0.75, 0.2, 1 ),
			filter var( --skp-dropdown-fx-dur, 220ms ) ease;
	}
}

.wp-block-navigation[data-skp-dropdown-fx]:not( [data-skp-dropdown-fx^="morph"] )
	.wp-block-skp-mega-menu__toggle.is-menu-open
	~ .wp-block-skp-mega-menu__menu-container {
	transform: none;
	filter: none;
}

/* ---------------------------------------------------------------------- *
 *  Repli d'animation — nav en effet MORPH mais réglée « ouvrir au clic »  *
 * ---------------------------------------------------------------------- */

/* Le morph est une amélioration au SURVOL : sur une nav « ouvrir au clic »
   (`open-on-click`) le moteur JS ne l'engage pas (cf. dropdown-effects.js). Sans
   repli, le déroulé natif s'ouvrirait alors SANS animation (l'attribut morph exclut
   les effets simples ci-dessus). On anime donc le panneau NATIF façon « glissement +
   fondu » à l'ouverture au clic (condition cœur : toggle `aria-expanded="true"`),
   pour la parité visuelle avec les effets simples. `transform` (et non `translate`)
   → la propriété `translate` reste réservée au placement du méga (cf. mega-native.css,
   qui la neutralise sur les panneaux bornés : aucun conflit possible).
   Ne touche QUE `open-on-click` : les navs « survol (+ chevron) » gardent le morph. */
.wp-block-navigation[data-skp-dropdown-fx^="morph"]
	.has-child.open-on-click
	> .wp-block-navigation__submenu-container {
	transform: translateY( -10px );
}
.wp-block-navigation[data-skp-dropdown-fx^="morph"]
	.has-child.open-on-click
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	~ .wp-block-navigation__submenu-container {
	transform: none;
}
@media not ( prefers-reduced-motion ) {
	.wp-block-navigation[data-skp-dropdown-fx^="morph"]
		.has-child.open-on-click
		> .wp-block-navigation__submenu-container {
		transition: opacity var( --skp-dropdown-fx-dur, 340ms ) ease,
			transform var( --skp-dropdown-fx-dur, 340ms )
				cubic-bezier( 0.4, 0.75, 0.2, 1 );
	}
}

/* ===================================================================== *
 *  Famille 2 — Morph : panneau partagé dans la top layer                 *
 * ===================================================================== */

/* « Stage » : couche plein écran de la top layer, transparente et NON interactive. */
.skp-megamorph {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent;
	overflow: visible;
	pointer-events: none;
}

.skp-megamorph::backdrop {
	background: transparent;
}

.skp-megamorph:not( .is-open ) {
	opacity: 0; /* repli sans Popover API */
}

/* La carte : c'est elle qui morphe (taille + position). overflow visible pour
   laisser dépasser le caret ; le clip des panes est sur le viewport. */
.skp-megamorph__box {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: auto;
	/* BOÎTE ALIGNÉE SUR LE CONTRAT `settings.custom.nav` (feature `nav-bar` de skp-blocks).
	   Le panneau morph est rendu dans la TOP LAYER : il n'est donc PAS un descendant de la
	   nav et n'hérite d'aucun jeton défini sur elle. On lit par conséquent le contrat
	   `theme.json` directement — que WordPress émet sur `:root`, donc lisible partout — avec
	   les valeurs historiques du morph en repli : un projet qui règle l'apparence de ses
	   panneaux déplace le morph du même coup, et un projet qui ne règle rien garde
	   exactement le rendu actuel. Sans cela, activer `nav-bar` faisait diverger le morph des
	   panneaux natifs (cf. skp-starter/docs/plan-menus-globaux.md §10.5).
	   L'ombre et le rayon restent VOLONTAIREMENT plus marqués en repli : un panneau qui
	   flotte dans la top layer a besoin de se détacher davantage. */
	background: var(
		--wp--custom--nav--panel--background,
		var( --wp--preset--color--base, #fff )
	);
	color: var( --wp--custom--nav--panel--text, inherit );
	border: var(
		--wp--custom--nav--panel--border,
		1px solid var( --wp--preset--color--border, rgba( 0, 0, 0, 0.1 ) )
	);
	border-radius: var( --wp--custom--nav--panel--radius, 12px );
	box-shadow: var(
		--wp--custom--nav--panel--shadow,
		0 16px 40px rgba( 0, 0, 0, 0.12 )
	);
	transition: transform var( --skp-dropdown-fx-dur, 340ms )
			cubic-bezier( 0.4, 0.75, 0.2, 1 ),
		width var( --skp-dropdown-fx-dur, 340ms ) cubic-bezier( 0.4, 0.75, 0.2, 1 ),
		height var( --skp-dropdown-fx-dur, 340ms )
			cubic-bezier( 0.4, 0.75, 0.2, 1 ),
		opacity 0.2s ease;
}

.skp-megamorph.is-open .skp-megamorph__box {
	opacity: 1;
	will-change: transform, width, height;
}

/* 1re ouverture : « snap » la position/taille sans morph (apparaît en place).
   Posée/retirée en synchrone par le JS (pas de requestAnimationFrame). */
.skp-megamorph__box.is-snap {
	transition: opacity 0.2s ease !important;
}

/* Viewport interne : clippe les panes (la carte, elle, garde overflow visible). */
.skp-megamorph__viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
}

/* Caret : pointe vers l'item actif. Carré pivoté, fond + bordure raccord carte.
   Posé dans l'écart au-dessus de la carte (top:-7px ; la carte laisse dépasser via
   overflow:visible). RÔLE DOUBLE — décoratif ET pont de survol : il DOIT rester
   `pointer-events:auto`. Le survoler (il appartient à la carte) déclenche le
   `mouseenter` de la carte et empêche la fermeture en traversant l'écart item→panneau.
   Il n'intercepte AUCUN clic du panneau : sa partie basse est recouverte par le
   viewport (peint après), sa partie haute est dans l'écart (aucun contenu). Étroit
   (centré sur l'item) → ne recouvre jamais les items voisins. */
.skp-megamorph__caret {
	position: absolute;
	top: -7px;
	left: 24px;
	width: 13px;
	height: 13px;
	pointer-events: auto;
	background: var( --wp--preset--color--base, #fff );
	border-top: 1px solid var( --wp--preset--color--border, rgba( 0, 0, 0, 0.1 ) );
	border-left: 1px solid
		var( --wp--preset--color--border, rgba( 0, 0, 0, 0.1 ) );
	border-radius: 3px 0 0 0;
	transform: translateX( -50% ) rotate( 45deg );
	transition: left var( --skp-dropdown-fx-dur, 340ms )
		cubic-bezier( 0.4, 0.75, 0.2, 1 );
}

/* Contenus clonés, empilés ; un seul visible (cross-fade + glissement directionnel).
   En flottant : dimensionné au contenu mais clampé. En pleine largeur : 100 %. */
.skp-megamorph__pane {
	position: absolute;
	top: 0;
	left: 0;
	width: max-content;
	max-width: min( 720px, 92vw );
	opacity: 0;
	/* Les panes sont TOUTES empilées en (top:0,left:0) ; seule l'active est visible
	   (opacity). Sans ceci, une pane inactive (invisible) plus bas dans le DOM se
	   peindrait AU-DESSUS de la pane active et capterait les clics par-dessus le haut
	   du panneau (liens « pas ou difficilement cliquables »). On rend donc les panes
	   inactives transparentes au pointeur — les clics traversent jusqu'à la pane active. */
	pointer-events: none;
	transition: opacity var( --skp-dropdown-fx-dur, 340ms ) ease,
		transform var( --skp-dropdown-fx-dur, 340ms )
			cubic-bezier( 0.4, 0.75, 0.2, 1 );
}

.skp-megamorph__pane.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.skp-megamorph__pane.no-tr {
	transition: none !important;
}

.skp-megamorph.is-fullwidth .skp-megamorph__pane {
	width: 100%;
	max-width: none;
}

/* Largeur par item : une pane « étirée » (préréglage large/pleine, ou nav en
   pleine largeur) remplit la boîte ; sinon elle se dimensionne au contenu. */
.skp-megamorph__pane.is-stretch {
	width: 100%;
	max-width: none;
}

/* Pastille d'édition (skp-core `Modules\EditAffordance`) reportée dans la
   pane active par le moteur (`reportEditAffordance`) : en mode morph le
   déroulé natif qui la PORTE est neutralisé et le clone ne reprend que
   `.skp-mega__inner` — sans ce report la pastille sortirait de l'écran.
   Apparence de base fournie par la feuille `skp-edit-affordance` ; ici on
   ne pilote que la RÉVÉLATION au survol de la CARTE — parité exacte avec
   le déroulé natif, où elle se révèle au survol du PANNEAU
   (`.skp-mega__panel:hover`, mega-native.css) et non de l'intitulé. Le
   positionnement est déjà résolu : la pane est `position:absolute`, donc
   bloc englobant de la pastille. */
.skp-megamorph__box:hover .skp-edit-btn,
.skp-megamorph__box:focus-within .skp-edit-btn {
	opacity: 1;
	pointer-events: auto;
}

/* Sous-menu CLASSIQUE cloné dans une pane : le <ul> conteneur est nativement un
   dropdown absolu/masqué. Dans la carte morph on le repasse en flux, visible, et on
   rend une liste de liens lisible (la carte fournit déjà fond/bordure/ombre). */
.skp-megamorph__pane .skp-megamorph__list {
	position: static;
	display: block;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	inset: auto;
	margin: 0;
	min-width: 0;
	width: auto;
	list-style: none;
	padding: var( --wp--preset--spacing--small, 12px );
	background: transparent;
	border: 0;
	box-shadow: none;
}

.skp-megamorph__pane .skp-megamorph__list li {
	margin: 0;
	list-style: none;
}

.skp-megamorph__pane
	.skp-megamorph__list
	.wp-block-navigation-item__content {
	display: block;
	padding: 6px 10px;
	border-radius: 8px;
	white-space: nowrap;
	text-decoration: none;
	color: inherit;
}

.skp-megamorph__pane
	.skp-megamorph__list
	.wp-block-navigation-item__content:hover {
	background: var( --wp--preset--color--base-2, rgba( 0, 0, 0, 0.04 ) );
}

@media ( prefers-reduced-motion: reduce ) {
	.skp-megamorph__box,
	.skp-megamorph__caret,
	.skp-megamorph__pane {
		transition: opacity 0.12s ease !important;
		will-change: auto;
	}
}

/* Mode morph actif : on neutralise le déroulé NATIF des items morphés (le panneau
   partagé prend le relais) MAIS on le rétablit au focus CLAVIER → l'accessibilité
   clavier reste sur le rendu cœur (doublon morph inerte). Gâté par la nav (data-*) ET
   par le marqueur `skp-morph-item` posé par le moteur sur chaque item RÉELLEMENT morphé
   (souris fine ; méga + classiques sans sous-niveau) → les sous-menus classiques
   imbriqués et les navs non morphées ne sont jamais touchés.

   L'exception utilise `:has(:focus-visible)` et NON `:focus-within` : un clic SOURIS
   pose bien le focus mais pas `:focus-visible`, donc il ne rétablit plus le panneau
   natif. Sinon, en « ouvrir au survol + chevron » (`open-on-hover-click`), un clic
   souris sur le chevron rouvrait le natif PAR-DESSUS le panneau morph (doublon signalé).
   Seule une navigation au CLAVIER (`:focus-visible`) révèle le natif accessible. */
@media ( hover: hover ) and ( pointer: fine ) {
	html.skp-dfx-on
		.wp-block-navigation[data-skp-dropdown-fx^="morph"]
		.skp-morph-item
		> .wp-block-navigation__submenu-container {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
	html.skp-dfx-on
		.wp-block-navigation[data-skp-dropdown-fx^="morph"]
		.skp-morph-item:has( :focus-visible )
		> .wp-block-navigation__submenu-container {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
}