/**
 * Canvas Header Navigation: Menu Skin Variants
 *
 * Styles the dropdown/mega-menu skin variants (blur, colors, dark, flat,
 * full-width, rounded, shadow).
 *
 * Each skin's design-token block is declared on `#header`: the element the
 * theme declares the `--cnvs-primary-menu-*` family on, and the element whose
 * DERIVED tokens (`--cnvs-primary-menu-active-color`,
 * `--cnvs-header-misc-icons-color`) resolve their `var()` substitutions
 * against. A custom property resolves where it is declared, so an override on
 * a descendant cannot feed a derivation that already happened on the ancestor.
 * The same block is restated on the nav so a second Header Navigation block
 * with its own skin still wins inside itself, and so the Flat skin outranks the
 * `.dark` utility it carries.
 *
 * Structural rules keep the theme's own `.is-expanded-menu` guard: below the
 * menu breakpoint the bar collapses to the mobile accordion, which the skins do
 * not dress.
 *
 * @package Canvas_Core
 * @since   1.0.0
 */

/* ── Blur skin ────────────────────────────────────────────────────────── */
#header:where(.menu-skin-dropdowns-blur),
.primary-menu.menu-skin-dropdowns-blur {
	--cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
	--cnvs-primary-menu-submenu-hover-bg: rgba(255, 255, 255, .15);
	--cnvs-primary-menu-submenu-bg: rgba(228, 220, 220, 0.15);
	--cnvs-primary-menu-submenu-hover-color: var(--cnvs-contrast-900);
	--cnvs-primary-menu-submenu-border: 1px solid rgba(var(--cnvs-contrast-rgb), .15);
	--cnvs-primary-menu-submenu-blur: 16px;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .sub-menu-container,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .mega-menu-content {
	border-top: var(--cnvs-primary-menu-submenu-border);
	transition: margin 0.25s ease !important;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .sub-menu-container .sub-menu-container,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .mega-menu-content .sub-menu-container {
	background-color: transparent;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .sub-menu-container::before,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .mega-menu-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	-webkit-backdrop-filter: blur(var(--cnvs-primary-menu-submenu-blur));
	backdrop-filter: blur(var(--cnvs-primary-menu-submenu-blur));
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .sub-menu-container .menu-item > .menu-link,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .sub-menu-container .menu-item:hover > .menu-link {
	font-weight: 400;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .sub-menu-container .sub-menu-container,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-blur) .sub-menu-container .mega-menu-content {
	top: -1px !important;
}

/* ── Colors skin ──────────────────────────────────────────────────────── */
.is-expanded-menu #header:where(.menu-skin-dropdowns-colors),
.is-expanded-menu .primary-menu.menu-skin-dropdowns-colors {
	--cnvs-primary-menu-submenu-bg: #1F7551;
	--cnvs-primary-menu-submenu-color: #FFF;
	--cnvs-primary-menu-submenu-hover-bg: var(--cnvs-primary-menu-submenu-color);
	--cnvs-primary-menu-submenu-hover-color: var(--cnvs-primary-menu-submenu-bg);
	--cnvs-primary-menu-submenu-border: transparent;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .sub-menu-container,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .mega-menu-content {
	border-top: var(--cnvs-primary-menu-submenu-border);
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .sub-menu-container:not(.mega-menu-column) {
	padding: 0.75rem;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .mega-menu-content .sub-menu-container {
	padding: 0;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .sub-menu-container .sub-menu-container {
	top: 0 !important;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .mega-menu-content.mega-menu-style-2 .menu-item.mega-menu-title:hover > .menu-link,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .mega-menu-content.mega-menu-style-2 .menu-item.mega-menu-title.current > .menu-link {
	color: #EEE !important;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .sub-menu-container .menu-item > .menu-link,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .sub-menu-container .menu-item:hover > .menu-link {
	font-weight: 500;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-colors) .mega-menu-content.mega-menu-style-2 .menu-item:not(.mega-menu-title):hover > .menu-link {
	--cnvs-primary-menu-submenu-bg: #1F7551;
	--cnvs-primary-menu-submenu-color: #FFF;
	--cnvs-primary-menu-submenu-hover-bg: var(--cnvs-primary-menu-submenu-color) !important;
	--cnvs-primary-menu-submenu-hover-color: var(--cnvs-primary-menu-submenu-bg) !important;
	padding-left: 0.75rem;
	padding-right: 0.25rem;
}

/* ── Dark skin ────────────────────────────────────────────────────────── */
#header:where(.menu-skin-dropdowns-dark),
.primary-menu.menu-skin-dropdowns-dark {
	--cnvs-primary-menu-submenu-color: var(--cnvs-contrast-200);
	--cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
	--cnvs-primary-menu-submenu-hover-bg: var(--cnvs-contrast-900);
	--cnvs-primary-menu-submenu-hover-color: var(--cnvs-contrast-0);
	--cnvs-primary-menu-submenu-border: 1px solid var(--cnvs-body-bg);
	--cnvs-primary-menu-submenu-border-radius: 10px;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-dark) .sub-menu-container,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-dark) .mega-menu-content {
	border-top: var(--cnvs-primary-menu-submenu-border);
	border-radius: var(--cnvs-primary-menu-submenu-border-radius);
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-dark) .menu-item:first-child .menu-link {
	border-top-left-radius: var(--cnvs-primary-menu-submenu-border-radius);
	border-top-right-radius: var(--cnvs-primary-menu-submenu-border-radius);
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-dark) .menu-item:last-child .menu-link {
	border-bottom-left-radius: var(--cnvs-primary-menu-submenu-border-radius);
	border-bottom-right-radius: var(--cnvs-primary-menu-submenu-border-radius);
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-dark) .mega-menu-content .sub-menu-container + .sub-menu-container {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-dark) .sub-menu-container .menu-item > .menu-link,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-dark) .sub-menu-container .menu-item:hover > .menu-link {
	font-weight: 400;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-dark) .sub-menu-container .menu-item:not(:first-child) {
	border-top: 1px solid rgba(var(--cnvs-contrast-rgb), .07);
}

/* ── Flat skin (combine with the nav's .dark utility class) ─────────────── */
#header:where(.menu-skin-dropdowns-flat),
.primary-menu.menu-skin-dropdowns-flat {
	--cnvs-primary-menu-submenu-bg: var(--cnvs-invert-contrast-1000);
	--cnvs-primary-menu-submenu-color: var(--cnvs-invert-contrast-200);
	--cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
	--cnvs-primary-menu-submenu-hover-bg: transparent;
	--cnvs-primary-menu-submenu-hover-color: var(--cnvs-invert-contrast-0);
	--cnvs-primary-menu-submenu-border: 1px solid var(--cnvs-body-bg);
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-flat) .sub-menu-container,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-flat) .mega-menu-content {
	border-top: var(--cnvs-primary-menu-submenu-border);
	padding: 15px;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-flat) .mega-menu-content .sub-menu-container {
	padding: 0;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-flat) .sub-menu-container .menu-item > .menu-link,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-flat) .sub-menu-container .menu-item:hover > .menu-link {
	font-weight: 400;
}

/* ── Full-Width skin ──────────────────────────────────────────────────── */
.is-expanded-menu #header:where(.menu-skin-dropdowns-fullwidth),
.is-expanded-menu .primary-menu.menu-skin-dropdowns-fullwidth {
	--cnvs-primary-menu-submenu-bg: var(--cnvs-contrast-900);
	--cnvs-primary-menu-submenu-color: var(--cnvs-contrast-100);
	--cnvs-primary-menu-submenu-border: 1px solid var(--cnvs-contrast-900);
	--cnvs-primary-menu-submenu-hover-font-weight: 400;
	--cnvs-primary-menu-submenu-top-border: var(--cnvs-primary-menu-submenu-border);
	--cnvs-primary-menu-submenu-font-size: .8rem;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-fullwidth) .sub-menu-container.mega-menu-dropdown {
	border-radius: 5px;
	--cnvs-primary-menu-submenu-bg: var(--cnvs-contrast-1000);
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-fullwidth) .mega-menu-content .mega-menu-content .col {
	padding: 1rem 1.75rem;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-fullwidth) .sub-menu-container.menu-size-lg .menu-item:not(.mega-menu-title) > .menu-link {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	--cnvs-primary-menu-submenu-font-size: 1.5rem;
	--cnvs-primary-menu-icon-size: 1.25rem;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-fullwidth) .sub-menu-container.mega-menu-dropdown .menu-item:not(.mega-menu-title) > .menu-link {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	--cnvs-primary-menu-submenu-font-size: .925rem;
}

/* ── Rounded skin ─────────────────────────────────────────────────────── */
#header:where(.menu-skin-dropdowns-rounded),
.primary-menu.menu-skin-dropdowns-rounded {
	--cnvs-header-border-color: transparent;
	--cnvs-primary-menu-submenu-border: 1px solid var(--cnvs-contrast-200);
	--cnvs-primary-menu-submenu-hover-bg: transparent;
	--cnvs-primary-menu-submenu-padding-y: 10px;
	--cnvs-primary-menu-submenu-font-size: .925rem;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-rounded) .sub-menu-container,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-rounded) .mega-menu-content {
	border-top: var(--cnvs-primary-menu-submenu-border);
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, .04);
	border-radius: 10px;
	padding: 10px;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-rounded) .mega-menu-column .sub-menu-container {
	padding: 0;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-rounded) .sub-menu-container .menu-item > .menu-link,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-rounded) .sub-menu-container .menu-item:hover > .menu-link {
	font-weight: 400;
	border-radius: 4px;
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-rounded) .mega-menu-content .sub-menu-container + .sub-menu-container {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* ── Shadow skin ──────────────────────────────────────────────────────── */
.is-expanded-menu #header:where(.menu-skin-dropdowns-shadow),
.is-expanded-menu .primary-menu.menu-skin-dropdowns-shadow {
	--cnvs-primary-menu-color: var(--cnvs-contrast-900);
	--cnvs-primary-menu-hover-color: var(--cnvs-contrast-800);
	--cnvs-primary-menu-submenu-bg: var(--cnvs-contrast-0);
	--cnvs-primary-menu-submenu-color: var(--cnvs-contrast-900);
	--cnvs-primary-menu-submenu-border: 1px solid var(--cnvs-contrast-1000) !important;
	--cnvs-primary-menu-submenu-top-border: 1px solid var(--cnvs-contrast-1000) !important;
	--cnvs-primary-menu-submenu-hover-color: var(--cnvs-contrast-1000);
	--cnvs-primary-menu-submenu-boxshadow-offset: 5px;
	--cnvs-primary-menu-submenu-boxshadow-offset-color: var(--cnvs-contrast-900);
}

.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-shadow) .sub-menu-container .sub-menu-container,
.is-expanded-menu :where(.primary-menu.menu-skin-dropdowns-shadow) .sub-menu-container .mega-menu-content {
	border-top: var(--cnvs-primary-menu-submenu-border);
	box-shadow: var(--cnvs-primary-menu-submenu-boxshadow-offset) var(--cnvs-primary-menu-submenu-boxshadow-offset) var(--cnvs-primary-menu-submenu-boxshadow-offset-color);
	top: -1px !important;
}

/* ── Stretch to fill the bar ──────────────────────────────────────────────
 * Top-level items share the bar's width equally instead of taking their
 * natural widths, and the caret shrinks to match the larger labels.
 */
.is-expanded-menu .primary-menu.menu-stretch,
.is-expanded-menu .primary-menu.menu-stretch .menu-container > .menu-item {
	flex: 1 1 auto;
}

.is-expanded-menu .primary-menu.menu-stretch.with-arrows .menu-link .sub-menu-indicator {
	font-size: 80%;
}