/**
 * Spruce Account Menu — desktop chip and injected hamburger items.
 *
 * The desktop module (.spruce-account-menu) is a compact row of links. Items
 * injected into Divi's Menu module (.spruce-account-menu-item--injected) are
 * hidden in the desktop <ul> that et_duplicate_menu() clones from, then shown
 * inside the hamburger so they pick up that menu's typography and colours.
 */

.spruce-account-menu {
	display: block;
}

/*
 * If a wrapper still renders with no links (or a header column is left with
 * only this module and no items), collapse it so it does not hold a gap.
 */
.spruce-account-menu:not(:has(.spruce-account-menu__item)),
.spruce_divi_account_menu:not(:has(.spruce-account-menu__item)) {
	display: none;
}

.et_pb_column:has(> .spruce_divi_account_menu:only-child):not(:has(.spruce-account-menu__item)) {
	display: none;
}

/*
 * The Divi module, its <nav>, and (when it is the column's only child)
 * the column itself are block boxes as wide as the row. In a Theme
 * Builder header that column is often 24/24 on phone, so the empty left
 * side sits over an absolutely positioned logo and eats its clicks.
 * Pass those through; only the chip list is live.
 */
.et_pb_column:has(> .spruce_divi_account_menu:only-child),
.spruce_divi_account_menu,
.spruce-account-menu {
	pointer-events: none;
}

.spruce-account-menu__list,
.spruce-account-menu ul {
	pointer-events: auto;
}

/*
 * Keep the Theme Builder header above page content. Divi columns use
 * z-index:2; if a header section is pulled below that, body copy scrolls
 * over the bar (LOB). After scroll Divi sets the bar to position:fixed,
 * so it must keep a z-index above those columns. #et-boc is a column flex,
 * so z-index on the header item is enough; position:relative covers
 * layouts that are not flex.
 *
 * Divine Wines splits logo and Menu into two sections. Divi gives the
 * Menu section z-index:999, which covers an overflowing logo and eats
 * its clicks. Pin a logo-only section just above a menu-only section,
 * both still above page columns. A single section that holds both (LOB)
 * must keep Divi's own header z-index — both :has() rules would match
 * and the menu one would win at a value below the page.
 */
header.et-l--header {
	position: relative;
	z-index: 99999;
}

.et-l--header .et_pb_section:has(.et_pb_image):not(:has(.et_pb_menu)) {
	z-index: 1001 !important;
}

.et-l--header .et_pb_section:has(.et_pb_menu):not(:has(.et_pb_image)) {
	z-index: 1000 !important;
}

.et-l--header .et_pb_row--with-menu,
.et-l--header .et_pb_column--with-menu,
.et-l--header .et_pb_menu {
	pointer-events: none;
}

.et-l--header .et_pb_menu__menu,
.et-l--header .et_pb_menu__menu nav,
.et-l--header .et-menu,
.et-l--header .et_mobile_nav_menu,
.et-l--header .mobile_nav,
.et-l--header .et_mobile_menu {
	pointer-events: auto;
}

.spruce-account-menu ul,
.spruce-account-menu__list {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1.25em;
	margin: 0;
	padding: 0;
	/* Divi's module Text options restyle nested ul/ol as content lists
	   (disc + left padding). Beat that so these links stay chips, not bullets. */
	list-style: none !important;
	list-style-type: none !important;
}

.spruce-account-menu li,
.spruce-account-menu__item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none !important;
	list-style-type: none !important;
}

.spruce-account-menu li::marker,
.spruce-account-menu__item::marker {
	content: none;
	display: none;
}

.spruce-account-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
}

.spruce-account-menu__icon,
.spruce-account-menu-item .spruce-account-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	line-height: 0;
}

.spruce-account-menu__svg,
.spruce-account-menu-item .spruce-account-menu__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.spruce-account-menu__label {
	line-height: inherit;
}

/*
 * Injected items live in the desktop menu only so Divi can clone them. They
 * must not be visible there — the desktop module is the visible surface.
 */
.et-menu > .spruce-account-menu-item--injected,
#top-menu > .spruce-account-menu-item--injected,
#et-secondary-nav > .spruce-account-menu-item--injected,
.nav > .spruce-account-menu-item--injected {
	display: none !important;
}

/*
 * The clone. Match Divi's stacked hamburger items; flex the <a> so the icon
 * sits beside the label the same way it does on desktop.
 */
.et_mobile_menu .spruce-account-menu-item--injected,
#mobile_menu .spruce-account-menu-item--injected,
.et_mobile_nav_menu .spruce-account-menu-item--injected {
	display: list-item !important;
}

.et_mobile_menu .spruce-account-menu-item--injected > a,
#mobile_menu .spruce-account-menu-item--injected > a,
.et_mobile_nav_menu .spruce-account-menu-item--injected > a {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

/* Builder canvas: both login states are shown so each can be styled. */
.spruce-account-menu--preview .spruce-account-menu__preview-label,
.spruce-account-menu--preview .spruce-account-menu__preview-note {
	margin: 0 0 0.35em;
	padding: 0;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.55;
}

.spruce-account-menu--preview .spruce-account-menu__preview-note {
	margin-top: 0.75em;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.7;
}

.spruce-account-menu--preview .spruce-account-menu__preview-group + .spruce-account-menu__preview-group {
	margin-top: 0.85em;
}