/* Cora Nav — core/navigation extension styles.
 *
 * Applied to ANY core/navigation the user styles via the "Cora menu & overlay"
 * panel. Each declaration is keyed on a per-property marker class (added by
 * includes/nav-ext.php only when that value is set) so an unset value never
 * forces the property to its initial (e.g. padding:0). The CSS variables live
 * on the nav root and cascade to the submenus. */

/* ----- Menu items ----- */
.cora-mip .wp-block-navigation-item__content {
	padding: var( --cora-mi-padding ) !important;
}
.cora-mih .wp-block-navigation-item__content:hover,
.cora-mih .wp-block-navigation-item__content:focus {
	color: var( --cora-mi-hover ) !important;
}

/* ----- Dropdown / submenu container ----- */
.cora-ddoff .wp-block-navigation__submenu-container {
	margin-top: var( --cora-dd-offset );
}
.cora-ddbg .wp-block-navigation__submenu-container {
	background-color: var( --cora-dd-bg ) !important;
}
.cora-ddtext .wp-block-navigation__submenu-container {
	color: var( --cora-dd-text ) !important;
}
.cora-ddrad .wp-block-navigation__submenu-container {
	border-radius: var( --cora-dd-radius );
}
.cora-ddpad .wp-block-navigation__submenu-container {
	padding: var( --cora-dd-padding );
}
.cora-ddmw .wp-block-navigation__submenu-container {
	min-width: var( --cora-dd-minwidth );
}
.cora-ddshadow .wp-block-navigation__submenu-container {
	box-shadow: var( --cora-dd-shadow );
}

/* ===== Paginated pages (drill-down) =====
 * Each submenu becomes a full-panel page that slides in over the menu. The
 * `.is-paginating` gate is toggled by view.js ONLY when the menu is in a
 * collapsed/column context (our off-canvas drawer or core's open overlay), so
 * desktop hover-dropdowns are left untouched. The nav root is the page
 * viewport. */
/* DISPLAY-SWAP: hide every submenu, then view.js shows exactly one page at a
 * time in normal flow (and hides that level's siblings). No absolute
 * positioning, so it works identically in our drawer and core's overlay. The
 * active page resets core's dropdown styling to a plain in-flow list. */
.cora-nav-paginated.is-paginating .wp-block-navigation__submenu-container {
	display: none !important;
}
.cora-nav-paginated.is-paginating .wp-block-navigation__submenu-container.cora-page-active {
	display: block !important;
	position: static !important;
	inset: auto !important;
	transform: none !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	/* core/theme collapses closed submenus with height/max-height:0 + overflow
	 * hidden — reset all of it so the page sizes to its content. */
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
}
/* The items inside the active page must also escape any collapse the parent
 * submenu chain imposes. */
.cora-nav-paginated.is-paginating .wp-block-navigation__submenu-container.cora-page-active > .wp-block-navigation-item,
.cora-nav-paginated.is-paginating .wp-block-navigation__submenu-container.cora-page-active > .cora-nav__back-item {
	max-height: none !important;
	overflow: visible !important;
}

/* Drill affordance: a › on every parent row while paginating, in case core's
 * own submenu chevron isn't rendered in this menu/overlay. */
.cora-nav-paginated.is-paginating .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
}
.cora-nav-paginated.is-paginating .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
	content: "\203A"; /* › */
	margin-left: auto;
	padding-left: 0.6em;
	font-size: 1.2em;
	line-height: 1;
	opacity: 0.7;
}

/* Back control injected by view.js — visible only at the top of the active page. */
.cora-nav__back-item {
	display: none;
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
}
.cora-nav-paginated.is-paginating .wp-block-navigation__submenu-container.cora-page-active > .cora-nav__back-item {
	display: block;
}
.cora-nav__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	padding: 0.25rem 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
}
.cora-nav__back:hover,
.cora-nav__back:focus {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.cora-nav-paginated.is-paginating .wp-block-navigation__submenu-container {
		transition: none;
	}
}