.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-menu-toggle{margin-left:auto;}.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-cream );fill:var( --e-global-color-cream );}.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--dropdown a, .elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-menu-toggle{color:var( --e-global-color-cream );fill:var( --e-global-color-cream );}.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--dropdown a:hover,
					.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--dropdown a:focus,
					.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-secondary );}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1366px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}@media(max-width:1024px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}@media(max-width:767px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}@media(min-width:2400px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}/* Start custom CSS for nav-menu, class: .elementor-element-64dccd31 */.elementor-element-64dccd31 .sub-arrow svg { display: none !important; } .elementor-element-64dccd31 .sub-arrow { display: inline-flex !important; align-items: center; width: 0.8em; height: 0.45em; margin-inline-start: 0.35em; background-image: url('https://astragali.commediasrl.it/wp-content/uploads/2026/09/astragali-nav-caret-cream.webp') !important; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle; }/* End custom CSS */
/* Start custom CSS *//* ============================================================================
   Astràgali Teatro — Site Header (Theme Builder template #142)
   Scoped to .elementor-142 so no other menu/component on the site is touched.
   ============================================================================ */

/* Design tokens (--astr-*) now live in Site Settings -> Variables and are
   emitted on :root by the kit. Edit them there, not in this file. */

/* ==========================================================================
   Bar placement - solid in-flow bar vs. transparent overlay

   The bar's DEFAULT state (in flow, ink background, symmetric padding-block,
   fluid padding-inline) now lives in the element's own V4 style. Edit it in
   the Elementor panel, not here.

   Templates that open with a dark full-bleed hero need the bar to overlay the
   hero instead, so the cream logo/menu read against the hero's own top scrim.
   That override is opt-in per template and stays here - add a body class
   below when a new template gets a full-bleed hero.

   Symmetric padding-block is kept in BOTH states: the desktop menu column
   uses margin-block: calc(-1 * var(--astr-bar-pad)) to stretch through the
   padding, which is what puts the mega panel flush under the bar.
   ========================================================================== */

/* Templates with a full-bleed hero: Home, single event */
body.home .elementor-142 .elementor-element.elementor-element-4282d9d1,
body.single-mec-events .elementor-142 .elementor-element.elementor-element-4282d9d1 {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	background-color: transparent;
}

/* --- Logo sits at the start of its grid track ----------------------------- */
.elementor-142 .elementor-element.elementor-element-4282d9d1 > a.e-image-link-base {
	justify-self: start;
	align-self: center;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.elementor-142 .elementor-element.elementor-element-4282d9d1 > a.e-image-link-base:focus-visible {
	outline: 2px solid var(--color-cream);
	outline-offset: 4px;
}

/* ==========================================================================
   Bookshop button - hover / focus / active
   The white fill + ink label lives on the element's own V4 style as "hover"
   and "active" states - edit them in the Elementor panel. Elementor renders
   the hover state as `:hover, :focus-visible`, so keyboard focus is covered.
   The easing curve and the chevron flip are no longer here: they come from
   the site-wide .btn / .btn--outline rules in Site Settings -> Custom CSS,
   which every button on the site now shares.
   ========================================================================== */

/* :active is the one state the global .btn--outline rule does not cover */
.elementor-142 .elementor-element.elementor-element-258fb59f:active .btn-icon {
	filter: brightness(0);
}

/* focus ring must sit on the black bar, not on the white fill */
.elementor-142 .elementor-element.elementor-element-258fb59f:focus-visible {
	outline: 2px solid var(--color-salmon);
	outline-offset: 3px;
}

/* --- Caret: reuse the existing astragali-nav-caret-cream asset ------------ */
/*     (the background-image itself lives in the widget's own Custom CSS)     */
.elementor-142 .elementor-element.elementor-element-64dccd31 .sub-arrow {
	transform-origin: 50% 50%;
	transition: transform var(--astr-speed) var(--astr-ease);
}

/* rotate 180° only while the submenu is really open — SmartMenus keeps
   aria-expanded / .highlighted in sync with the actual state                 */
.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-item[aria-expanded="true"] > .sub-arrow,
.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-item.highlighted > .sub-arrow {
	transform: rotate(180deg);
}

/* Elementor Pro rotates nested dropdown carets -90°; keep ours upright */
.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main .elementor-nav-menu--dropdown .sub-arrow i {
	transform: none;
}

/* the nav widget must never be a positioned ancestor, otherwise the panel
   would be trapped inside the (narrow) menu column                          */
.elementor-142 .elementor-element.elementor-element-64dccd31 {
	position: static;
	min-width: 0;
}

/* ========================================================================== */
/*  DESKTOP (>=1025px) — balanced bar + full-width mega menu                  */
/* ========================================================================== */
@media (min-width: 1025px) {

	/* the menu column fills the whole bar height (incl. its padding) so there
	   is no dead zone between a menu item and the panel below it             */
	.elementor-142 .elementor-element.elementor-element-64dccd31 {
		align-self: stretch;
		margin-block: calc(-1 * var(--astr-bar-pad));
		justify-content: stretch;
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 > nav.elementor-nav-menu--main {
		position: static;
		width: 100%;
		flex: 1 1 auto;
		align-items: stretch;
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu {
		position: static;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: stretch;
		height: 100%;
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li {
		position: static;
		align-items: stretch;
	}

	/* fluid horizontal padding: identical to the original 20px at >=1600px,
	   tightens gracefully down to 1025px so the bar never overflows          */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item {
		position: relative;
		padding-inline: var(--astr-item-pad);
		white-space: nowrap;
		align-items: center;
		color: var(--color-cream);
		letter-spacing: var(--astr-nav-track);
		transition: color 200ms var(--astr-ease);
	}

	/* ---- hover fill: the Bookshop button's treatment, on a nav item ------
	   The anchor itself stretches the whole bar height - that is what keeps
	   the mega panel reachable - so the fill cannot live on the anchor or it
	   would become a full-height column. ::before paints it instead, sized to
	   the Bookshop button's own min-height and centred, so hovering a nav item
	   and hovering Bookshop read as the same gesture: 1px border that turns
	   into the fill colour, 200ms, same easing.                             */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: 50%;
		height: clamp(2.75rem, 2.92vw, 3.5rem);
		transform: translateY(-50%);
		z-index: -1;
		border: 1px solid transparent;
		background-color: transparent;
		transition: background-color 200ms var(--astr-ease), border-color 200ms var(--astr-ease);
		pointer-events: none;
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:hover::before,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:focus-visible::before,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item.highlighted::before,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item[aria-expanded="true"]::before {
		background-color: var(--color-white);
		border-color: var(--color-white);
	}

	/* the caret asset is cream, so flip it to ink on the white fill - the same
	   trick the Bookshop chevron uses                                        */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:hover .sub-arrow,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:focus-visible .sub-arrow,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item.highlighted .sub-arrow,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item[aria-expanded="true"] .sub-arrow {
		filter: brightness(0);
	}

	/* ---- the whole bar previews the mega panel's glass while any item is
	   hovered/focused/open --------------------------------------------------
	   :has() lets the CONTAINER (the header bar, not each link) pick up the
	   panel's own translucent-ink background the moment a nav item is
	   engaged, so the bar and the panel that opens under it read as one
	   continuous surface. The bar's own opaque ink background-color (set in
	   the element style) is swapped for the panel's alpha value only while
	   the :has() condition holds - individual items keep their white pill,
	   unrelated to this.                                                    */
	.elementor-142 .elementor-element.elementor-element-4282d9d1 {
		transition: background-color 200ms var(--astr-ease), backdrop-filter 200ms var(--astr-ease);
	}

	.elementor-142 .elementor-element.elementor-element-4282d9d1:has(
		.elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:hover,
		.elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:focus-visible,
		.elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item.highlighted,
		.elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item[aria-expanded="true"]
	) {
		background-color: color-mix(in srgb, var(--color-ink) 78%, transparent) !important;
		-webkit-backdrop-filter: blur(10px) saturate(1.15);
		backdrop-filter: blur(10px) saturate(1.15);
	}

	/* ---- hover / focus / open / current-page indicator ------------------- */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item::after {
		content: "";
		position: absolute;
		inset-inline: var(--astr-item-pad);
		top: calc(50% + .8em);
		height: 2px;
		width: auto;
		background-color: currentColor;
		border: 0;
		opacity: 0;
		transform: scaleX(0);
		transform-origin: center left;
		transition: transform 220ms var(--astr-ease), opacity 220ms var(--astr-ease);
		pointer-events: none;
	}

	/* hover, keyboard focus, and "this mega menu is open" all read the same:
	   white fill + ink label, exactly like the Bookshop button              */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:hover,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:focus,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item.highlighted,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item[aria-expanded="true"] {
		color: var(--color-ink);
	}

	/* the white fill is the hover indicator now, so this is kept only for the
	   current page - hover no longer raises a second marker                 */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item.elementor-item-active::after {
		opacity: 1;
		transform: scaleX(1);
	}

	/* current page: permanent salmon rule, label stays cream so "you are
	   here" reads differently from "you are hovering"                        */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item.elementor-item-active::after {
		background-color: var(--color-salmon);
	}

	/* the ring now has to sit on the white fill, so it is salmon like the
	   Bookshop's                                                            */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:focus-visible {
		outline: 2px solid var(--color-salmon);
		outline-offset: -4px;
	}

	/* ---- the mega menu panel -------------------------------------------- */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu {
		/* break out of the menu column and span the whole header width        */
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		inset-inline-start: 0 !important;
		inset-inline-end: 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		z-index: 5 !important;
		box-sizing: border-box;

		padding-block: var(--astr-pad-block);
		/* The link column starts under its own parent nav item, not at the
		   gutter. That x cannot be expressed in CSS - the bar is a centred,
		   fluid grid - so the header JS publishes it as --astr-mega-start and
		   the gutter stays the floor (and the fallback if the JS never runs). */
		padding-inline-start: max(var(--astr-gutter), var(--astr-mega-start, var(--astr-gutter)));
		padding-inline-end: calc(var(--astr-gutter) + var(--astr-mega-img) + var(--astr-mega-gap));
		min-height: clamp(13rem, 19vw, 20rem);

		/* semi-transparent ink: the panel reads as glass over the page while
		   its own text, image and buttons stay fully opaque - the alpha is on
		   background-color, never on opacity. The blur keeps the cream text
		   legible whatever happens to scroll underneath.                     */
		background-color: color-mix(in srgb, var(--color-ink) 78%, transparent);
		-webkit-backdrop-filter: blur(10px) saturate(1.15);
		backdrop-filter: blur(10px) saturate(1.15);
		border-top: 1px solid var(--color-cream-tint-subtle);
		box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45);
		border-radius: 0;
		white-space: normal;
		overflow: visible;

		animation: astr-mega-in var(--astr-speed) var(--astr-ease) both;
	}

	/* hairline between the link list and the image */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu::before {
		content: "";
		position: absolute;
		inset-block: var(--astr-pad-block);
		inset-inline-end: calc(var(--astr-gutter) + var(--astr-mega-img) + var(--astr-mega-gap) / 2);
		width: 1px;
		background-color: var(--color-cream-tint-subtle);
		pointer-events: none;
	}

	/* poeticamente.webp — full-height editorial panel on the right */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu::after {
		content: "";
		position: absolute;
		inset-block: var(--astr-pad-block);
		inset-inline-end: var(--astr-gutter);
		width: var(--astr-mega-img);
		background-image: url("/wp-content/uploads/2026/09/poeticamente.webp");
		background-size: cover;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		pointer-events: none;
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li {
		display: block;
		width: 100%;
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item {
		position: relative;
		display: inline-flex;
		align-items: center;
		width: auto;
		max-width: min(100%, 34rem);
		padding: clamp(.35rem, .6vw, .75rem) 0;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		color: var(--color-cream);
		font-family: var(--font-heading), sans-serif;
		font-size: var(--fs-title);
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: .01em;
		white-space: normal;
		transition: color 200ms var(--astr-ease);
	}

	/* same white fill as a nav item, painted by ::before so the inline
	   breathing room around the label costs no layout - the link keeps its
	   padding: 0 inline and stays flush with the header gutter             */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline: -.65rem;
		z-index: -1;
		border: 1px solid transparent;
		background-color: transparent;
		transition: background-color 200ms var(--astr-ease), border-color 200ms var(--astr-ease);
		pointer-events: none;
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item:hover,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item:focus,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item.highlighted {
		background-color: transparent;
		color: var(--color-ink);
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item:hover::before,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item:focus::before,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item.highlighted::before {
		background-color: var(--color-white);
		border-color: var(--color-white);
	}

	/* current page keeps reading as "you are here", not as "you are hovering" */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item.elementor-item-active {
		background-color: transparent;
		color: var(--color-salmon);
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item:focus-visible {
		outline: 2px solid var(--color-salmon);
		outline-offset: .35rem;
	}
}

@keyframes astr-mega-in {
	from { opacity: 0; transform: translateY(-.6rem); }
	to   { opacity: 1; transform: none; }
}

/* ========================================================================== */
/*  TABLET / MOBILE (<=1024px) — logo | Bookshop | burger + full-width panel  */
/* ========================================================================== */
@media (max-width: 1024px) {

	.elementor-142 .elementor-element.elementor-element-64dccd31 {
		order: 3;
		justify-self: end;
		align-self: center;
	}

	/* burger */
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-menu-toggle {
		margin-inline-start: 0;
		background-color: transparent;
		border-radius: 0;
		padding: .35rem;
		color: var(--color-cream);
		--nav-menu-icon-size: clamp(1.5rem, 3.6vw, 2rem);
		--nav-menu-icon-color: var(--color-cream);
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-menu-toggle svg,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-menu-toggle .e-font-icon-svg {
		fill: var(--color-cream);
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-menu-toggle:focus-visible {
		outline: 2px solid var(--color-cream);
		outline-offset: 3px;
	}

	/* the burger panel: full header width, black, scrollable, below the bar  */
	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		inset-inline-start: 0;
		inset-inline-end: 0;
		width: auto;
		margin-top: 0;
		z-index: 9997;
		--menu-height: 78dvh;
		background-color: var(--color-ink);
		border-top: 1px solid var(--color-cream-tint-subtle);
		box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45);
		overscroll-behavior: contain;
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu {
		padding-block: clamp(.5rem, 2vw, 1.25rem);
		padding-inline: var(--astr-gutter);
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown .elementor-item,
	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown .elementor-sub-item {
		font-family: var(--font-heading), sans-serif;
		color: var(--color-cream);
		background-color: transparent;
		border-inline-start: 0;
		padding-block: clamp(.6rem, 1.6vw, .9rem);
		padding-inline: 0;
		transition: color 200ms var(--astr-ease);
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown .elementor-item {
		font-size: var(--fs-base);
		font-weight: 700;
		letter-spacing: var(--astr-nav-track);
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown .elementor-sub-item {
		font-size: var(--fs-small);
		font-weight: 400;
	}

	/* nested level: indent + hairline instead of a second floating overlay   */
	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown ul.sub-menu {
		position: static;
		width: auto;
		max-width: none;
		margin-inline-start: .25rem;
		padding-inline-start: 1rem;
		border-inline-start: 1px solid var(--color-cream-tint-subtle);
		background-color: transparent;
		box-shadow: none;
	}

	/* hover / focus / open */
	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown a:hover,
	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown a:focus,
	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown a.highlighted,
	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown a[aria-expanded="true"] {
		background-color: transparent;
		color: var(--color-salmon);
	}

	/* current page: salmon label + a salmon rule down the left edge          */
	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown a.elementor-item-active {
		background-color: transparent;
		color: var(--color-salmon);
		box-shadow: inset .1875rem 0 0 0 var(--color-salmon);
		padding-inline-start: .75rem;
	}

	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown a:focus-visible {
		outline: 2px solid var(--color-cream);
		outline-offset: 2px;
	}
}

/* ========================================================================== */
/*  Motion preferences                                                        */
/* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.elementor-142 .elementor-element.elementor-element-4282d9d1,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .sub-arrow,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item::after,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item::before,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item,
	.elementor-142 .elementor-element.elementor-element-64dccd31 .elementor-nav-menu--main ul.sub-menu > li > a.elementor-sub-item::before,
	.elementor-142 .elementor-element.elementor-element-258fb59f,
	.elementor-142 .elementor-element.elementor-element-64dccd31 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		animation: none !important;
		transition: none !important;
	}
}/* End custom CSS */