/*
 * UniD Category Nav — desktop/tablet vertical sidebar (v2)
 * Scoped to elementor-element-322e1c8a's "main" nav only — the widget also
 * renders a separate .elementor-nav-menu--dropdown burger panel for narrow
 * widths, which this file deliberately never touches.
 * Colors sampled directly from new_vertical_menu/desktop.png.
 *
 * !important is used throughout because this widget's Elementor "Style" tab
 * settings compile into a per-post CSS file (post-15609.css) scoped as
 * ".elementor-15609 .elementor-element...", which out-specifies plain
 * descendant selectors scoped only from .elementor-element-322e1c8a (5+
 * chained classes vs. ours) — confirmed via live testing, not a
 * hypothetical. Matching/exceeding that specificity defensively isn't
 * reliable since it can change if anyone edits the widget's Style tab
 * later, so !important is the deliberate, stable choice.
 */

.elementor-element-322e1c8a nav.elementor-nav-menu--main {
	--umnav-blue: #0B54BC;
	--umnav-blue-tint-bg: #F1F6FD;
	--umnav-blue-rule: rgba(11, 84, 188, 0.35);
	--umnav-text: #1B2540;
	--umnav-text-light: #5A6478;
	--umnav-border: #EEF0F3;
	--umnav-card-border: #E7ECF3;
}

/* Sticky sidebar — desktop/tablet only (matches the mobile widget's own
   max-width:768px breakpoint). top:42px accounts for another horizontal
   sticky bar above this widget on the live page. The containing .elementor-column
   is stretched to match the course-listing column's height (confirmed
   ~6400px on a typical category page vs. this menu's much shorter natural
   height), so there's room to stick through, and no ancestor sets
   overflow other than visible up to <body> (verified — that silently
   breaks position:sticky otherwise). It naturally stops sticking at the
   bottom of that column, before the footer — no extra bottom boundary
   needed. */
@media (min-width: 769px) {
	.elementor-element-322e1c8a {
		position: sticky !important;
		top: 42px;
		z-index: 1;
	}
}

/* Card container */
.elementor-element-322e1c8a nav.elementor-nav-menu--main ul.elementor-nav-menu {
	background: #ffffff;
	border: 1px solid var(--umnav-card-border);
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06);
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Top-level rows */
.elementor-element-322e1c8a nav.elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item {
	border-bottom: 1px solid var(--umnav-border);
}
.elementor-element-322e1c8a nav.elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item:last-child {
	border-bottom: none;
}

.elementor-element-322e1c8a nav.elementor-nav-menu--main .elementor-item {
	display: block;
	padding: 16px 20px !important;
	color: var(--umnav-text) !important;
	font-weight: 400;
	line-height: 1.35;
	border-left: 4px solid transparent;
	transition: background-color .15s ease, color .15s ease;
}

/* Elementor's own "pointer" hover-underline effect (e--pointer-double-line,
   set via the widget's Style tab) animates a bar using :before/:after on
   every .elementor-item, on hover/focus/active. Not used anywhere in this
   design (the chevron is a real inserted element, not a pseudo-element —
   see .umnav-toggle below), so it's fully neutralized here. */
.elementor-element-322e1c8a nav.elementor-nav-menu--main .elementor-item:before,
.elementor-element-322e1c8a nav.elementor-nav-menu--main .elementor-item:after {
	content: none !important;
	display: none !important;
}

/* Active / current top-level item */
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.current-menu-item > .elementor-item.elementor-item-active {
	background-color: var(--umnav-blue-tint-bg) !important;
	border-left-color: var(--umnav-blue) !important;
	color: var(--umnav-blue) !important;
	font-weight: 700 !important;
}

/* Has-children parent: blue text, no background tint. The server-rendered
   .sub-arrow icon is hidden — a real chevron indicator element is inserted
   by desktop-nav.js instead of a CSS ::after (purely visual now — hover is
   the only trigger, see .sub-menu below). */
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.menu-item-has-children > .elementor-item {
	color: var(--umnav-blue) !important;
	position: relative;
	padding-right: 44px !important;
}
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.menu-item-has-children > .elementor-item .sub-arrow {
	display: none !important;
}
/* If the has-children item is also the active/current one, keep the bold
   active text color rather than the plain has-children blue */
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.current-menu-item.menu-item-has-children > .elementor-item.elementor-item-active {
	color: var(--umnav-blue) !important;
	font-weight: 700 !important;
}

/* Chevron toggle — real element inserted by desktop-nav.js as the last
   child of .elementor-item, positioned over the same spot the old CSS
   ::after chevron used. */
.elementor-element-322e1c8a nav.elementor-nav-menu--main .umnav-toggle {
	position: absolute !important;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--umnav-blue);
	font-size: 12px;
	z-index: 2;
}
/* Rotate the chevron whenever the submenu is shown, for any of the reasons
   below (hover preview, keyboard focus inside the item, or the page
   currently being on/under this category). Hover uses .is-hover-open
   (JS-managed, see desktop-nav.js) rather than :hover — see the .sub-menu
   comment below for why. */
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.menu-item-has-children.is-hover-open > .elementor-item .umnav-toggle i,
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.menu-item-has-children:focus-within > .elementor-item .umnav-toggle i,
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.current-menu-item > .elementor-item .umnav-toggle i,
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.current-menu-parent > .elementor-item .umnav-toggle i,
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.current-menu-ancestor > .elementor-item .umnav-toggle i {
	transform: rotate(180deg);
}

/* Submenu: collapsed by default. Expands on .is-hover-open (JS-managed
   hover, see desktop-nav.js), keyboard focus landing anywhere inside the
   item (the only way to reach it via keyboard now that there's no
   click-to-toggle control), or whenever the current page is this category
   or one of its descendants (current-menu-item / current-menu-parent /
   current-menu-ancestor are WordPress's own server-rendered classes for
   that — confirmed live on
   /corsi/master-gdpr-protezione-dati/dpo-data-protection-officer/, no extra
   PHP needed).

   Hover deliberately does NOT use plain CSS :hover. On pages with several
   has-children rows stacked close together (e.g. /corsi/corsi-di-laurea/,
   6 of them vs. 1 on /corsi/master-e-alta-formazione/), a submenu expanding
   pushes every row below it down. Root cause of the "stuck / doesn't show"
   bug reported live turned out to be a page-dependent legacy jQuery
   conflict (astra-professional/js/custom.js, neutralized in
   desktop-nav.js), not this — but container-level delegation (see
   desktop-nav.js) is still the right, more robust design regardless: it
   tolerates a momentary pointer pass through a gap between rows without
   ever visibly breaking, where per-item hover boundaries wouldn't.

   max-height transitions again now that the real conflict above is fixed
   — a prior "removed the transition to fix the stuck bug" theory turned
   out to be treating a symptom of that same JS conflict, not its cause.
   SmartMenus is still destroy()'d in JS — these !important rules are the
   defense-in-depth baseline if that JS ever fails to run. */
.elementor-element-322e1c8a nav.elementor-nav-menu--main .sub-menu {
	/* SmartMenus sets an inline display:none on collapsed submenus during
	   its own init, before this file's JS gets a chance to destroy() it —
	   and destroy() doesn't necessarily clear that inline style. A plain
	   stylesheet rule can't win against an inline style, but !important
	   can (it beats inline styles too, not just other stylesheets), so
	   display must stay explicitly block here at all times — the actual
	   collapse/expand is entirely handled by max-height + overflow below. */
	display: block !important;
	max-height: 0;
	overflow: hidden !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	box-shadow: none !important;
	background: transparent !important;
	list-style: none;
	margin: 0 0 0 40px !important;
	padding: 0 0 0 16px !important;
	border-left: 2px solid var(--umnav-blue-rule) !important;
	transition: max-height .45s ease;
}
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.menu-item-has-children.is-hover-open > .sub-menu,
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.menu-item-has-children:focus-within > .sub-menu,
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.current-menu-item > .sub-menu,
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.current-menu-parent > .sub-menu,
.elementor-element-322e1c8a nav.elementor-nav-menu--main li.current-menu-ancestor > .sub-menu {
	max-height: 600px;
	margin: 4px 0 12px 40px !important;
	padding: 2px 0 2px 16px !important;
}

.elementor-element-322e1c8a nav.elementor-nav-menu--main .sub-menu li.menu-item {
	border-bottom: none;
}

.elementor-element-322e1c8a nav.elementor-nav-menu--main .sub-menu .elementor-sub-item {
	display: block;
	padding: 8px 12px 8px 0 !important;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--umnav-text) !important;
	font-weight: 400;
	border-left: none;
}

/* Active / current sub-item — same current-menu-item + elementor-item-active
   pattern as the top-level active rule above, just on .elementor-sub-item */
.elementor-element-322e1c8a nav.elementor-nav-menu--main .sub-menu li.current-menu-item > .elementor-sub-item.elementor-item-active {
	color: var(--umnav-blue) !important;
	font-weight: 700 !important;
}