/**
 * The header menu.
 *
 * One menu, two shapes: a mega menu panel from 1025px up, where Kadence Pro
 * turns the second level into columns, and the drawer below that, where the
 * same levels stack. Everything here is the look; the structure is the menu the
 * shop maintains in Appearance → Menus.
 *
 * The acorns come first, because both shapes use them.
 */

/**
 * The acorn beside a link. Which one is set per item in the CSS classes field
 * of the menu screen; an item without one of these classes simply has none, so
 * a link added later never shows a colour nobody chose.
 */
.menu li[class*="belota-"] > a::before,
.menu li[class*="belota-"] > .drawer-nav-drop-wrap > a::before {
	content: "";
	flex: 0 0 auto;
	width: var(--miudinho-menu-icon-size, 26px);
	height: var(--miudinho-menu-icon-size, 26px);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.menu li.belota-am > a::before {
	background-image: url("../img/icono-bellota-am.svg");
}

.menu li.belota-ve > a::before {
	background-image: url("../img/icono-bellota-ve.svg");
}

.menu li.belota-ro > a::before {
	background-image: url("../img/icono-bellota-ro.svg");
}

.menu li.belota-na > a::before {
	background-image: url("../img/icono-bellota-na.svg");
}

.menu li.belota-az > a::before {
	background-image: url("../img/icono-bellota-az.svg");
}

@media (min-width: 1025px) {

	/*
	 * The panel is measured against the header row — the strip from the logo to
	 * the cart — because Kadence measures it against the menu list, which is
	 * only as wide as the links themselves.
	 */
	.site-main-header-inner-wrap {
		position: relative;
	}

	.header-navigation .header-menu-container ul.menu {
		position: static;
	}

	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu {
		/*
		 * It ends where the white pill of the menu ends, before the buttons, and
		 * opens leftwards from there. The offset is the width of what sits to
		 * the right of the menu — the Contact button, the account circle and the
		 * cart, with the theme's 10px between items — which is the same at every
		 * window size because none of them stretches; change it here if the
		 * header ever gains or loses a button.
		 *
		 * The width gives way before the row does, so the panel never runs past
		 * the left edge of the page on a narrow screen.
		 */
		right: var(--miudinho-mega-buttons, 325px);
		left: auto;
		width: var(--miudinho-mega-width, 1100px);
		max-width: calc(100% - var(--miudinho-mega-buttons, 325px));
		gap: 0;
		padding: var(--miudinho-mega-padding, 36px 40px);
		background: var(--miudinho-mega-bg, #fffff5);
		border-radius: var(--miudinho-mega-radius, 24px);
		box-shadow: 0 18px 40px rgb(0 0 0 / 10%);
	}

	/*
	 * The panel hangs from the bottom of the header row, which leaves open air
	 * between it and the link: the menu sits in a pill that is shorter than the
	 * row. Crossing that air would drop the hover and close the panel, so while
	 * it is open an invisible band bridges it, no wider than the link itself so
	 * nothing else in the header becomes unclickable.
	 */
	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > a {
		position: relative;
	}

	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled:hover > a::after {
		content: "";
		position: absolute;
		top: 100%;
		right: -24px;
		left: -24px;
		height: var(--miudinho-mega-bridge, 48px);
	}

	/* The columns, separated by a rule rather than by space alone. */
	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li {
		padding: 0 var(--miudinho-mega-column-gap, 28px);
	}

	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li:first-child {
		padding-left: 0;
	}

	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li:last-child {
		padding-right: 0;
	}

	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li + li {
		border-left: 1px solid var(--miudinho-hairline, #e7e8dc);
	}

	/* The column heading. It is a menu item, so the link styling has to go. */
	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu > li > a {
		padding: 0 0 22px;
		font-family: var(--global-body-font-family, inherit);
		font-size: var(--miudinho-mega-heading-size, 14px);
		font-weight: 500;
		line-height: 1.2;
		color: var(--miudinho-mega-heading-color, #8ca14a);
		text-transform: uppercase;
		letter-spacing: 0.12em;
		background: none;
		border: 0;
		cursor: default;
	}

	/* The links under it. */
	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu ul li > a {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 10px 0;
		font-family: var(--global-body-font-family, inherit);
		font-size: var(--miudinho-mega-item-size, 18px);
		line-height: 1.3;
		color: var(--miudinho-green, #5d6802);
		background: none;
		border: 0;
	}

	/*
	 * The arrow at the end of the row. A mask rather than an image, so it takes
	 * the colour of the text it belongs to.
	 */
	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu ul li > a::after {
		content: "";
		flex: 0 0 auto;
		width: 28px;
		height: 14px;
		margin-left: auto;
		background-color: currentColor;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M0 7h26M20 1l6 6-6 6'/%3E%3C/svg%3E");
		mask-size: contain;
		mask-position: center;
		mask-repeat: no-repeat;
		transition: transform 0.15s ease;
	}

	.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu ul li > a:hover::after {
		transform: translateX(4px);
	}
}

/**
 * The account button, to the left of the cart.
 *
 * It is Kadence Pro's Account item, desktop and mobile, and it takes the shape
 * of the cart beside it: the same circle, the same size, the same colours. The
 * cart is a button and gets its round shape from the theme's button radius;
 * this one is a link, so the circle is drawn here. The sizes copy the cart's
 * customizer settings (padding and icon size), so change both together.
 */
#main-header .site-header-item .header-account-control-wrap .header-account-button,
#mobile-header .site-header-item .header-account-control-wrap .header-account-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--miudinho-account-padding, 15px);
	font-size: 1rem;
	line-height: 1;
	color: var(--miudinho-account-color, var(--global-palette9, #fffff5));
	background: var(--miudinho-account-bg, #ed7f2f);
	border-radius: 50%;
	/* The shadow is the header's, from design.json (Design_Styles). */
	transition: background-color var(--miudinho-sticky-transition, 350ms) ease, box-shadow var(--miudinho-sticky-transition, 350ms) ease;
}

#main-header .site-header-item .header-account-control-wrap .header-account-button:hover,
#mobile-header .site-header-item .header-account-control-wrap .header-account-button:hover {
	color: var(--miudinho-account-color, var(--global-palette9, #fffff5));
	background: var(--miudinho-account-bg-hover, #d7722a);
}

#main-header .site-header-item .header-account-control-wrap .header-account-button > .kadence-svg-iconset {
	font-size: 1.2em;
}

#mobile-header .site-header-item .header-account-control-wrap .header-account-button {
	padding: var(--miudinho-account-padding-mobile, 10px);
}

#mobile-header .site-header-item .header-account-control-wrap .header-account-button > .kadence-svg-iconset {
	font-size: 1.13em;
}

/**
 * The drawer, below 1025px.
 *
 * The four pieces inside it — logo, cart, menu and button — are items the shop
 * arranges in the customizer. This lays them out: logo and cart share the top
 * line with the close button, and the menu and the button below read as one
 * card.
 */

@media (max-width: 1024px) {

	/*
	 * The burger is the shop's green, because every page but the home one has a
	 * pale header. The home page opens on the dark hero, where it has to be
	 * light instead.
	 */
	body.home .mobile-toggle-open-container .menu-toggle-open,
	body.home .mobile-toggle-open-container .menu-toggle-open:hover {
		color: var(--miudinho-trigger-home, #fffff5);
		transition: color var(--miudinho-sticky-transition, 350ms) ease;
	}

	/*
	 * Only while the header sits over the hero, though. Once the page scrolls
	 * and the header follows, it turns pale, and a light burger on it all but
	 * disappears.
	 */
	body.home #mobile-header .kadence-sticky-header.item-is-fixed:not(.item-at-start) .mobile-toggle-open-container .menu-toggle-open,
	body.home #mobile-header .kadence-sticky-header.item-is-fixed:not(.item-at-start) .mobile-toggle-open-container .menu-toggle-open:hover {
		color: var(--miudinho-green, #5d6802);
	}

	/* The close button leaves the flow so the logo can share its line. */
	#mobile-drawer .drawer-header {
		position: absolute;
		top: var(--miudinho-drawer-pad, 20px);
		right: var(--miudinho-drawer-pad, 20px);
		z-index: 3;
		min-height: 0;
		padding: 0;
	}

	#mobile-drawer .drawer-content {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: flex-start;
		padding-top: var(--miudinho-drawer-pad, 20px);
	}

	/*
	 * Logo and cart on the first line, the rest a line each. Which item is
	 * which is read from what it holds, not from its position, because the shop
	 * can reorder them in the customizer.
	 */
	#mobile-drawer .drawer-content > .site-header-item {
		flex: 0 0 100%;
	}

	#mobile-drawer .drawer-content > .site-header-item:has(.site-branding) {
		flex: 0 0 auto;
	}

	/*
	 * The header is transparent over the dark hero, so the logo it carries is
	 * the light one. The drawer is cream, so inside it the two swap.
	 */
	#mobile-drawer .site-branding .kadence-transparent-logo {
		opacity: 0;
	}

	#mobile-drawer .site-branding .kadence-sticky-logo {
		opacity: 1;
	}

	#mobile-drawer .drawer-content > .site-header-item:has(.header-mobile-cart-wrap) {
		flex: 0 0 auto;
		/* Pushed right, and clear of the close button. */
		margin-left: auto;
		margin-right: 46px;
	}

	/* The menu and the button, one card. */
	#mobile-drawer .drawer-content > .site-header-item-mobile-navigation {
		margin-top: 22px;
		/* The button carries on where the menu stops: one card, no seam. */
		margin-bottom: 0;
		background: var(--miudinho-drawer-card-bg, #fffff5);
		border-radius: var(--miudinho-drawer-card-radius, 16px) var(--miudinho-drawer-card-radius, 16px) 0 0;
	}

	#mobile-drawer .drawer-content > .site-header-item:has(.mobile-header-button-wrap) {
		padding: 18px var(--miudinho-drawer-row-pad, 20px) 22px;
		background: var(--miudinho-drawer-card-bg, #fffff5);
		border-radius: 0 0 var(--miudinho-drawer-card-radius, 16px) var(--miudinho-drawer-card-radius, 16px);
	}

	#mobile-drawer .mobile-header-button-wrap,
	#mobile-drawer .mobile-header-button-inner-wrap,
	#mobile-drawer a.mobile-header-button {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* A row of the menu. */
	#mobile-drawer .mobile-navigation ul.menu > li > a,
	#mobile-drawer .mobile-navigation ul.menu > li > .drawer-nav-drop-wrap > a {
		padding: 18px var(--miudinho-drawer-row-pad, 20px);
		font-family: var(--global-body-font-family, inherit);
		font-size: var(--miudinho-drawer-item-size, 17px);
		color: var(--miudinho-green, #5d6802);
	}

	#mobile-drawer .mobile-navigation ul.menu > li + li {
		border-top: 1px solid var(--miudinho-hairline, #e7e8dc);
	}

	/* The chevron that opens a group, at the end of its row. */
	#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > .drawer-sub-toggle {
		padding-right: var(--miudinho-drawer-row-pad, 20px);
		color: var(--miudinho-green, #5d6802);
	}

	/*
	 * Inside an open group the headings are headings, not another thing to
	 * open: the links under them are always on show, and the toggle the theme
	 * gives them goes away with the border that framed it.
	 */
	#mobile-drawer .mobile-navigation ul.sub-menu ul.sub-menu {
		display: block;
	}

	#mobile-drawer .mobile-navigation ul.sub-menu .drawer-sub-toggle {
		display: none;
	}

	#mobile-drawer .drawer-menu-container > ul.menu > li > ul.sub-menu > li > a,
	#mobile-drawer .drawer-menu-container > ul.menu > li > ul.sub-menu > li > .drawer-nav-drop-wrap > a {
		padding: 14px var(--miudinho-drawer-row-pad, 20px) 6px;
		font-family: var(--global-body-font-family, inherit);
		font-size: var(--miudinho-drawer-heading-size, 13px);
		font-weight: 500;
		color: var(--miudinho-mega-heading-color, #8ca14a);
		text-transform: uppercase;
		letter-spacing: 0.12em;
	}

	/*
	 * The theme steps every nested list in from its parent. The group headings
	 * read as part of the card, not as something filed under the row above, so
	 * that step goes: they line up with the rows of the menu, and the links keep
	 * the indent of their own list.
	 */
	#mobile-drawer .drawer-menu-container > ul.menu > li > ul.sub-menu {
		padding-left: 0;
	}

	/* One group from the next. */
	#mobile-drawer .drawer-menu-container > ul.menu > li > ul.sub-menu > li + li {
		margin-top: 10px;
		border-top: 1px solid var(--miudinho-hairline, #e7e8dc);
	}

	/* The links themselves: acorn, label, arrow. */
	#mobile-drawer .drawer-menu-container > ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 9px var(--miudinho-drawer-row-pad, 20px);
		font-family: var(--global-body-font-family, inherit);
		font-size: var(--miudinho-drawer-item-size, 17px);
		line-height: 1.3;
		color: var(--miudinho-green, #5d6802);
	}

	#mobile-drawer .drawer-menu-container > ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a::after {
		content: "";
		flex: 0 0 auto;
		width: 24px;
		height: 12px;
		margin-left: auto;
		background-color: currentColor;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M0 7h26M20 1l6 6-6 6'/%3E%3C/svg%3E");
		mask-size: contain;
		mask-position: center;
		mask-repeat: no-repeat;
	}

	/* The last group closes the menu, so it needs room before the button. */
	#mobile-drawer .drawer-menu-container > ul.menu > li > ul.sub-menu > li:last-child > ul.sub-menu {
		padding-bottom: 8px;
	}
}