/*
 * Crisp Submenus — desktop dropdown + mobile accordion polish
 * for WordPress core's Navigation block (theme.json block themes).
 *
 * Requires the Navigation block's "Submenu Visibility" setting to be set
 * to "Click" (Site Editor -> select the Navigation block -> Settings ->
 * Submenu Visibility). In that mode WordPress's own Interactivity API
 * already toggles aria-expanded on .wp-block-navigation-submenu__toggle
 * correctly, including inside the mobile overlay. This file only changes
 * how that existing state is *displayed*. No JavaScript is added.
 *
 * Loaded with a dependency on the 'wp-block-library' stylesheet handle,
 * so these rules win the cascade purely by load order, without
 * !important, even where selector specificity matches core's own rules.
 */

/* ---------------------------------------------------------------------
 * 1. Desktop dropdown panel
 * ------------------------------------------------------------------- */

.wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	border-radius: 0.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #1e1e1e) 12%, transparent);
	box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--wp--preset--color--contrast, #1e1e1e) 30%, transparent);
	padding: 0.4em;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	transform: translateY(0);
}

/* Hover/focus state for links inside the open dropdown */
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #1e1e1e) 7%, transparent);
	border-radius: 0.3rem;
}

/* ---------------------------------------------------------------------
 * 2. Mobile overlay: a real accordion instead of a flat, always-open list
 *
 * Core deliberately forces every submenu open inside its default mobile
 * overlay (see Gutenberg packages/block-library/src/navigation/style.scss,
 * search for "Always expand/unfold submenus inside the modal"). The
 * selectors below mirror that override's exact selector chain so it's
 * load order — not !important — that decides which rule wins.
 * ------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
	.wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	pointer-events: none;
	transition: max-height 0.22s ease, opacity 0.16s ease;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
	.wp-block-navigation__responsive-container-content .has-child
	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	opacity: 1;
	max-height: 70vh;
	pointer-events: auto;
}

/* Core hides the chevron entirely inside the modal — restore it and use
 * it as the accordion's open/closed indicator. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
	.wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: inline-flex;
	margin-left: auto;
	transition: transform 0.2s ease;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
	.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

/* In Click mode the whole row is the toggle button — lay it out so the
 * chevron sits at the trailing edge instead of stacking under the label. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
	.has-child .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* ---------------------------------------------------------------------
 * 3. Respect reduced-motion preference
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container,
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon {
		transition: none;
	}
}