/* =============================================================
 * WonderLab Site — site chrome (header / menu / footer)
 *
 * Replaces the equivalent rules from the WP Customizer Additional
 * CSS + Divi Theme Builder header layout (post 88). One canonical
 * source; v1.1.0 migration.
 *
 * Customisable values (menu link / cart padding) are injected
 * inline via wp_head from includes/chrome/header.php; this file
 * is for the static parts that don't change per-site.
 * ============================================================= */


/* -------------------------------------------------------------
 * Header → search bar input
 *
 * Divi's `et_pb_menu__search-input` is the field that drops down
 * when the customer clicks the search icon. Brand styling: rounded
 * pill, soft translucent white, dark text.
 * ------------------------------------------------------------- */
.et_pb_menu__search-input {
	color: #333 !important;
	background-color: rgba( 255, 255, 255, 0.7 ) !important;
	border-radius: 6px !important;
	padding: 10px 10px !important;
}


/* -------------------------------------------------------------
 * Header → cart + search icon hover
 *
 * Burgundy on hover so the icon glyph flips from inherited menu
 * colour to brand burgundy. Transition mimics Divi's other
 * interactive elements.
 * ------------------------------------------------------------- */
.et_pb_menu__icon.et_pb_menu__cart-button::after,
.et_pb_menu__icon.et_pb_menu__search-button::after {
	transition-duration: 200ms;
}
.et_pb_menu__icon.et_pb_menu__cart-button:hover::after,
.et_pb_menu__icon.et_pb_menu__search-button:hover::after {
	color: rgb( 133, 22, 37 );
}


/* -------------------------------------------------------------
 * Header → dropdown sub-menu sizing
 *
 * 300px-wide dropdown panel with comfortable item spacing.
 * 3rd-level sub-menus slide out to the right.
 * ------------------------------------------------------------- */
.et_pb_menu .nav li ul {
	width: 300px;
}
.et_pb_menu .et-menu-nav > ul ul {
	padding: 10px 0;
}
.et_pb_menu .nav li li {
	padding: 0 10px;
	line-height: 1.6em;
	font-size: 12px !important;
}
.et_pb_menu .et-menu li li a {
	width: 280px;
}
.et_pb_menu .et_pb_menu__menu > nav > ul > li > ul a {
	font-size: 14px;
}
.et_pb_menu .nav li li ul {
	top: 0px;
	left: 300px;
}


/* -------------------------------------------------------------
 * Header → divider between word-based menu items and icon
 * cluster (search / account / wishlist / cart).
 *
 * Desktop only — below 981px the menu collapses into a hamburger
 * and the icons sit elsewhere, so the divider would land on the
 * wrong row. Border uses rgba so the line reads as a separator
 * without competing visually with the menu text colour.
 * ------------------------------------------------------------- */
@media (min-width: 981px) {
	.et_pb_menu__menu {
		margin-right: 15px !important;
		padding-right: 15px !important;
		border-right: 1px solid rgba( 0, 0, 0, 0.15 ) !important;
	}
}