/*
 * The site header on tablets and phones, drawn the way Divi drew it.
 *
 * Measured on the live Divi site: one 80px bar with its content at 80% of the
 * screen, the logo on the left (at most 43px tall and half the bar's width),
 * a 20x14 #2ea3f2 hamburger on the right, and no button. The menu opens under
 * the bar at the same 80% width - white, a 3px #2ea3f2 top rule, a soft shadow,
 * 14px/600 #666 items with every submenu already expanded, parents on a faint
 * grey band, and "Book an appointment" as the last item.
 *
 * Out of the box the Header Footer Builder header stacked logo, hamburger and
 * button on three rows (170px), opened a full width list over the button, and
 * hid each submenu behind an arrow.
 *
 * Header template 26260:
 *   1b3d7b9 outer container
 *     6a34506 logo image
 *     5ea9a38 inner container
 *       193e2e4 nav menu
 *       44f3d36 "Book an appointment" button
 *
 * The switch happens at 1024px, not Divi's 980px: that is where the Header
 * Footer Builder's own script turns the menu into a dropdown, and fighting it
 * over those 44px would leave its click handlers and this layout disagreeing.
 * (Live Divi shows its desktop menu between 981 and 1024px, where it overlaps
 * the logo; the compact bar is the deliberate choice there.)
 */

/* The menu item lives in the dropdown; on desktop the header already draws it
   as a real button. */
@media only screen and (min-width: 1025px) {
	#masthead .hfe-nav-menu li.ba-button {
		display: none;
	}

	/* One row, always: the menu may not wrap, and no item may break in half. */
	#masthead .elementor-element-193e2e4 ul.hfe-nav-menu {
		flex-wrap: nowrap;
	}

	#masthead .elementor-element-193e2e4 a.hfe-menu-item {
		white-space: nowrap;
	}
}

/* Small laptops: logo, menu and button have to share a narrower bar, so the
   menu tightens up rather than dropping "Contact Us" onto a second line.
   (Live wraps here - its menu is two rows below about 1300px.) */
@media only screen and (min-width: 1025px) and (max-width: 1400px) {
	#masthead .elementor-element-6a34506 img {
		width: 160px !important;
	}

	#masthead .elementor-element-193e2e4 a.hfe-menu-item {
		font-size: 14px !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	#masthead .elementor-element-5ea9a38 {
		--gap: 12px;
		--column-gap: 12px;
	}
}

@media only screen and (max-width: 1024px) {

	/* ---- the bar ---------------------------------------------------------- */

	#masthead .elementor-element-1b3d7b9 {
		--padding-top: 0px;
		--padding-right: 0px;
		--padding-bottom: 0px;
		--padding-left: 0px;
		--border-bottom-width: 0px;
		border-bottom-width: 0;
		box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
	}

	/* Divi's .container: 80% wide, and the dropdown is anchored to it */
	#masthead .elementor-element-1b3d7b9 > .e-con-inner {
		position: relative;
		width: 80%;
		min-height: 80px;
		flex-wrap: nowrap;
		gap: 0;
	}

	/* Divi's logo sits 4px in from the container edge (the gap an inline-block
	   helper span leaves in front of it) */
	#masthead .elementor-element-6a34506 {
		margin-left: 4px;
	}

	/* 54% of the 80px bar, and never wider than half of the 80% container */
	#masthead .elementor-element-6a34506 img {
		width: auto;
		height: auto;
		max-height: 43px;
		max-width: 40vw;
		vertical-align: middle;
	}

	#masthead .elementor-element-5ea9a38 {
		--width: auto;
		--position: static;
		flex: 0 0 auto;
		margin-left: auto;
	}

	/* let the dropdown position against the bar, not the widget */
	#masthead .elementor-element-193e2e4,
	#masthead .elementor-element-193e2e4 > .elementor-widget-container,
	#masthead .elementor-element-193e2e4 .hfe-nav-menu {
		position: static;
	}

	#masthead .elementor-element-44f3d36 {
		display: none;
	}

	/* ---- the hamburger ---------------------------------------------------- */

	#masthead .elementor-element-193e2e4 .hfe-nav-menu__toggle {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		width: 32px;
		height: 80px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	/* Divi's ETmodules glyph, as three 2px bars 4px apart. It stays a
	   hamburger while the menu is open, as Divi's did. */
	#masthead .elementor-element-193e2e4 .hfe-nav-menu-icon {
		display: block;
		width: 20px;
		height: 14px;
		margin: 32px 6px 0 0;
		padding: 0;
		background:
			linear-gradient(#2ea3f2, #2ea3f2) 0 0 / 100% 2px no-repeat,
			linear-gradient(#2ea3f2, #2ea3f2) 0 6px / 100% 2px no-repeat,
			linear-gradient(#2ea3f2, #2ea3f2) 0 12px / 100% 2px no-repeat;
	}

	#masthead .elementor-element-193e2e4 .hfe-nav-menu-icon > * {
		display: none;
	}

	/* ---- the dropdown ----------------------------------------------------- */

	/* The plugin writes an inline width and left offset sized to the whole
	   header; Divi's menu is exactly as wide as the 80% container. */
	#masthead .elementor-element-193e2e4 nav.hfe-nav-menu__layout-horizontal {
		position: absolute;
		top: 100%;
		left: 0 !important;
		right: auto;
		width: 100% !important;
		z-index: 9999;
		box-sizing: border-box;
		padding: 5%;
		background: #fff;
		border-top: 3px solid #2ea3f2;
		box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
	}

	#masthead .elementor-element-193e2e4 nav ul.hfe-nav-menu {
		display: block;
		position: static;
		margin: 0;
		padding: 0;
		background: none;
	}

	#masthead .elementor-element-193e2e4 nav li.menu-item {
		display: block;
		width: 100%;
		margin: 0;
		border: 0;
		background: none;
	}

	#masthead .elementor-element-193e2e4 nav .hfe-has-submenu-container {
		display: block;
		background: none;
	}

	#masthead .elementor-element-193e2e4 nav a.hfe-menu-item,
	#masthead .elementor-element-193e2e4 nav a.hfe-sub-menu-item {
		display: block;
		padding: 10px 5%;
		border-bottom: 1px solid rgba(0, 0, 0, .03);
		background-color: transparent;
		color: #666;
		font-size: 14px;
		font-weight: 600;
		line-height: 23px;
		transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
	}

	#masthead .elementor-element-193e2e4 nav li.menu-item-has-children > .hfe-has-submenu-container > a {
		font-weight: 700;
		background-color: rgba(0, 0, 0, .03);
	}

	#masthead .elementor-element-193e2e4 nav li li.menu-item-has-children > .hfe-has-submenu-container > a {
		background-color: transparent;
	}

	#masthead .elementor-element-193e2e4 nav a.hfe-menu-item:hover,
	#masthead .elementor-element-193e2e4 nav a.hfe-sub-menu-item:hover {
		background-color: rgba(0, 0, 0, .03);
		color: #666;
		opacity: .7;
	}

	/* Submenus collapse behind a + / - control. Divi showed them all open; this
	   is a requested change, so a long menu fits on one screen. The control is
	   drawn from the plugin's arrow span - its icon font is hidden and a "+"
	   put in its place, which turns into a minus while that submenu is open. */
	#masthead .elementor-element-193e2e4 nav a.hfe-menu-item,
	#masthead .elementor-element-193e2e4 nav a.hfe-sub-menu-item {
		position: relative;
		padding-right: 44px;
	}

	#masthead .elementor-element-193e2e4 nav .hfe-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		color: #666;
	}

	#masthead .elementor-element-193e2e4 nav .hfe-menu-toggle i,
	#masthead .elementor-element-193e2e4 nav .hfe-menu-toggle svg {
		display: none;
	}

	#masthead .elementor-element-193e2e4 nav .hfe-menu-toggle:before {
		content: "+";
		font-family: inherit;
		font-size: 22px;
		font-weight: 400;
		line-height: 1;
	}

	#masthead .elementor-element-193e2e4 nav .hfe-has-submenu-container.sub-menu-active .hfe-menu-toggle:before {
		content: "\2212";   /* minus */
	}

	/* The plugin collapses a submenu with inline visibility/opacity/height, so
	   those are left alone here - only Divi's indent and plain background. */
	#masthead .elementor-element-193e2e4 nav ul.sub-menu {
		position: static !important;
		width: auto !important;
		left: auto !important;
		top: auto !important;
		margin: 0;
		padding: 0 0 0 10px;
		border: 0;
		box-shadow: none;
		background: none;
		transform: none;
		overflow: hidden;
	}

	#masthead .elementor-element-193e2e4 nav ul.sub-menu > li.menu-item {
		padding-left: 5%;
	}
}