/**
 * [menu_block] base styles.
 *
 * Base reset applied everywhere the shortcode is used. Context-specific
 * styling (dots, colors, hover states) lives in the parent part stylesheet
 * where the menu is placed — e.g. parts/footer.css scopes
 * `.av-footer-main .av-menu-block` with green/grey dots.
 */
.av-menu-block {
	list-style: none;
	padding: 0;
	margin: 0;
}
.av-menu-block li { margin: 0; }
.av-menu-block a { text-decoration: none; color: inherit; }

/* Inline variant — pass via `class="is-inline"` or add the `is-inline` CSS
   class when rendering. Useful for copyright / legal link rows. */
.av-menu-block.is-inline {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.av-menu-block.is-inline li { padding: 0; }
.av-menu-block.is-inline li::before { display: none; }

/* show_dropdown="true" — mobile accordion override.
   The Flatsome walker produces .nav-dropdown / .nav-column submenus that are
   absolute-positioned by header CSS. On mobile we want them inline like an
   accordion: hidden by default, expanded when the parent <li> gets .is-open
   (toggled by menu-block.js). !important is required to beat Flatsome's
   per-menu-item inline width CSS (#menu-item-X > .nav-dropdown { width: ... }). */
@media (max-width: 849px) {
	/* Hide Flatsome's desktop dropdown-arrow indicator. It's a CSS triangle
	   drawn on li.has-dropdown::before / ::after, absolute-positioned at the
	   seam between the link and the floating dropdown. With the accordion
	   expanded inline, the absolute pseudo dangles at the bottom of its
	   positioned ancestor — see body class `.nav-dropdown-has-arrow`. */
	.av-menu-block li.has-dropdown::before,
	.av-menu-block li.has-dropdown::after {
		display: none !important;
	}

	/* Top-level dropdown — closed by default, full-width when .is-open.
	   !important wins against Flatsome's per-item inline CSS like
	   `#menu-item-X > .nav-dropdown { width: 1280px }`. */
	.av-menu-block .nav-dropdown {
		position: static !important;
		display: none;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		background: transparent !important;
		border: 0 !important;
		box-sizing: border-box;
		overflow: hidden;
	}

	.av-menu-block .has-dropdown.is-open > .nav-dropdown {
		display: block;
	}

	/* Depth-2 mega-menu sub-columns: always visible inside the open dropdown.
	   Visibility is gated by the parent .nav-dropdown's display, not a
	   separate toggle, so do NOT set display: none here. */
	.av-menu-block .nav-column {
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		background: transparent !important;
		border: 0 !important;
		box-sizing: border-box;
	}

	/* Stack mega-menu column wrappers full-width. */
	.av-menu-block .nav-dropdown-col,
	.av-menu-block li.nav-dropdown-col {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		display: block !important;
		box-sizing: border-box;
	}

	/* Indent nested items so the hierarchy is visible. */
	.av-menu-block .nav-dropdown > li,
	.av-menu-block .nav-column > li {
		padding-left: 16px;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Width containment — mega-menu blocks render their own [row]/[col]
	   grid with class-driven widths (large-3, medium-6, etc.). Clamp every
	   descendant so nothing overflows the dropdown when 2+ are open. */
	.av-menu-block .nav-dropdown,
	.av-menu-block .nav-dropdown * {
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.av-menu-block .nav-dropdown .row,
	.av-menu-block .nav-dropdown .flex-row {
		flex-wrap: wrap !important;
	}
	.av-menu-block .nav-dropdown .col,
	.av-menu-block .nav-dropdown [class*="large-"],
	.av-menu-block .nav-dropdown [class*="medium-"] {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	/* Full-width tap area for off-canvas mobile-menu links. */
	.off-canvas-left #main-menu .mobile-menu-menu a {
		display: block;
		width: 100%;
		color: #FFF;
	}

	.off-canvas-left #main-menu .mobile-menu-menu .sub-menu a {
		padding: 10px 0;
		margin: 0!important;
	}

	.off-canvas-left #main-menu .mobile-menu-menu .sub-menu a.av-mm-card {
		padding: 10px!important;
	}


	.has-dropdown .icon-angle-down {
		margin-left: 0.5em;
		opacity: 1;
	}

	.av-mm-card__price span.amount {
		color: var(--title-color)!important;
	}

	.av-mm-card__name {
		display: block;
		width: 100%;
		margin-top: 10px;
	}
}