/* ============================================================
   Desktop dropdown panels
   ============================================================ */

.bhfb .main-navigation .sub-menu.botiga-dropdown-ul {
	background: var(--bt-color-content-cards-bg, #191613);
	border: 1px solid rgba(243, 238, 229, 0.12);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
	padding: 8px;
	width: max-content;
	min-width: 260px;
	max-width: 360px;
}

/* 10px visual gap below the top bar
   (nav wraps the list in div.menu-main-container, so target ul.menu) */
.bhfb .main-navigation ul.menu > li > .sub-menu.botiga-dropdown-ul {
	margin-top: 10px;
}

/* invisible hover bridge across the top gap */
.bhfb .main-navigation ul.menu > li > .sub-menu.botiga-dropdown-ul::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.bhfb .main-navigation .sub-menu.botiga-dropdown-ul li a.botiga-dropdown-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 10px;
	white-space: normal;
}

/* two columns when a submenu has 6+ items (multicol keeps the theme's
   show/hide mechanics intact, unlike display:grid) */
.bhfb .main-navigation .sub-menu.botiga-dropdown-ul:has(> li:nth-child(6)) {
	columns: 2;
	column-gap: 6px;
	width: 520px;
	max-width: none;
}

.bhfb .main-navigation .sub-menu.botiga-dropdown-ul li {
	break-inside: avoid;
}

/* ============================================================
   Desktop flyout (level 2): gap + aim-controlled visibility.
   JS drives .midnite-aim-open using triangle intent detection;
   :focus-within keeps keyboard navigation working.
   ============================================================ */

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
	.bhfb .main-navigation .sub-menu li.menu-item-has-children:not(.midnite-aim-open):not(:focus-within) > .sub-menu.botiga-dropdown-ul {
		left: -999em !important;
		opacity: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
	}

	.bhfb .main-navigation .sub-menu li.midnite-aim-open > .sub-menu.botiga-dropdown-ul,
	.bhfb .main-navigation .sub-menu li.menu-item-has-children:focus-within > .sub-menu.botiga-dropdown-ul {
		display: block;
		left: calc(100% + 10px) !important;
		top: 0 !important;
		margin-top: 0;
		opacity: 1 !important;
		height: auto !important;
		overflow: visible !important;
		transform: none !important;
	}

	/* theme flips the flyout near the viewport edge */
	.bhfb .main-navigation .sub-menu li.midnite-aim-open > .sub-menu.botiga-dropdown-ul.sub-menu-reverse,
	.bhfb .main-navigation .sub-menu li.menu-item-has-children:focus-within > .sub-menu.botiga-dropdown-ul.sub-menu-reverse {
		left: auto !important;
		right: calc(100% + 10px) !important;
	}

	/* invisible hover bridge across the horizontal gap */
	.bhfb .main-navigation .sub-menu .sub-menu.botiga-dropdown-ul::before {
		content: "";
		position: absolute;
		left: -12px;
		right: auto;
		top: 0;
		bottom: 0;
		width: 12px;
		height: auto;
	}

	.bhfb .main-navigation .sub-menu .sub-menu.botiga-dropdown-ul.sub-menu-reverse::before {
		left: auto;
		right: -12px;
	}
}

/* ============================================================
   Category thumbnails (shared between desktop and mobile)
   ============================================================ */

.midnite-nav__thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, rgba(122, 31, 43, 0.35), rgba(25, 22, 19, 0.92) 70%);
}

.midnite-nav__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 220ms ease;
}

a:hover .midnite-nav__thumb img {
	transform: scale(1.08);
}

.midnite-nav__initial {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 17px;
	line-height: 1;
	color: var(--bt-color-link-default, #C2A15A);
}

.midnite-nav__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* any anchor carrying a thumb becomes a flex row */
a:has(.midnite-nav__thumb) {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ============================================================
   "View all" row
   ============================================================ */

.midnite-nav-viewall {
	column-span: all;
}

.bhfb .main-navigation .sub-menu.botiga-dropdown-ul .midnite-nav-viewall a {
	margin-top: 6px;
	border-top: 1px solid rgba(243, 238, 229, 0.12);
	padding: 11px 10px 7px;
	color: var(--bt-color-link-default, #C2A15A);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.midnite-nav-viewall a::after {
	content: " \2192";
}

/* ============================================================
   Top-level gold underline
   ============================================================ */

.bhfb .main-navigation ul.menu > li > a.botiga-dropdown-link {
	position: relative;
}

.bhfb .main-navigation ul.menu > li > a.botiga-dropdown-link::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 2px;
	height: 1px;
	background: var(--bt-color-link-default, #C2A15A);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms ease;
}

.bhfb .main-navigation ul.menu > li:hover > a.botiga-dropdown-link::after,
.bhfb .main-navigation ul.menu > li.current-menu-item > a.botiga-dropdown-link::after {
	transform: scaleX(1);
}

/* ============================================================
   Mobile off-canvas menu: accordion style
   (no cards — indent + guide line express hierarchy)
   ============================================================ */

.botiga-offcanvas-menu .main-navigation .sub-menu.botiga-dropdown-ul {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 2px 0 6px 14px;
	margin: 0 0 0 6px;
	border-left: 1px solid rgba(243, 238, 229, 0.14);
	width: auto;
	min-width: 0;
	max-width: none;
	columns: auto;
	column-gap: normal;
}

.botiga-offcanvas-menu .main-navigation .sub-menu.botiga-dropdown-ul li a.botiga-dropdown-link {
	padding: 9px 6px;
}

/* Botiga's off-canvas layout is: block li + inline-block link at
   width calc(100% - 26px) + inline chevron in the remaining 26px.
   The link must stay INLINE-level or the chevron wraps to the next
   line — so thumb-carrying links become inline-flex here, and the
   chevron is vertically centered against the taller (thumbed) rows. */
.botiga-offcanvas-menu .main-navigation a:has(.midnite-nav__thumb) {
	display: inline-flex;
	vertical-align: middle;
}

.botiga-offcanvas-menu .main-navigation .dropdown-symbol {
	vertical-align: middle;
}

/* chevron rotates when its group is expanded */
.botiga-offcanvas-menu .dropdown-symbol svg {
	transition: transform 220ms ease;
}

.botiga-offcanvas-menu li:has(> .sub-menu.toggled) > .dropdown-symbol svg {
	transform: rotate(180deg);
}

/* soft accordion entrance (theme toggles display, height can't animate) */
.botiga-offcanvas-menu .sub-menu.botiga-dropdown-ul.toggled {
	animation: midnite-nav-accordion 240ms ease;
}

@keyframes midnite-nav-accordion {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* view-all inside the accordion: lighter separator */
.botiga-offcanvas-menu .main-navigation .sub-menu.botiga-dropdown-ul .midnite-nav-viewall a {
	margin-top: 4px;
	padding: 10px 6px 6px;
}

/* ============================================================
   Misc
   ============================================================ */

@media (max-width: 991px) {
	.midnite-nav__thumb {
		width: 32px;
		height: 32px;
		border-radius: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.midnite-nav__thumb img,
	.bhfb .main-navigation > ul > li > a.botiga-dropdown-link::after,
	.botiga-offcanvas-menu .dropdown-symbol svg {
		transition: none;
	}

	.botiga-offcanvas-menu .sub-menu.botiga-dropdown-ul.toggled {
		animation: none;
	}
}