/* =============================================================================
   TLP Mobile Menu

   Divi's Theme Builder header puts the menu module in a 5%-wide column, and
   .et_mobile_menu is `position:absolute; left:0; width:100%` against it — so the
   dropdown rendered ~35px wide and clipped every label. Everything here is
   inside a max-width:980px query (Divi's own mobile breakpoint) and scoped to
   the header, so the desktop header and the rest of the site are untouched.
   ========================================================================== */

@media (max-width: 980px) {

	/* ---------------------------------------------------------------------
	   1. The burger
	   ------------------------------------------------------------------ */

	/* Divi colours the burger from a module-scoped rule
	   (.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar::before), so this
	   needs four classes to outrank it rather than an !important. */
	.et-l--header .et_pb_menu .mobile_nav .mobile_menu_bar:before,
	.et-l--header .et_pb_menu .mobile_nav .mobile_menu_bar:after {
		color: #000;
	}

	.et-l--header .et_mobile_nav_menu {
		margin: 0;
	}

	.et-l--header .mobile_nav .mobile_menu_bar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.et-l--header .mobile_menu_bar:before {
		position: static;
		font-size: 32px;
		line-height: 1;
		transition: opacity .2s ease;
	}

	/* Burger becomes a close mark while the panel is open. */
	.et-l--header .mobile_nav.opened .mobile_menu_bar:before {
		content: "\4d";
	}

	/* ---------------------------------------------------------------------
	   2. Let the panel out of the narrow column

	   Neutralising the positioned ancestors between the panel and the row
	   hands the containing block to .et_pb_row — the full-width, already
	   relative element — so the panel can finally fill the screen.
	   ------------------------------------------------------------------ */

	.et-l--header .et_pb_column,
	.et-l--header .et_pb_menu,
	.et-l--header .et_pb_menu .et_pb_menu_inner_container {
		position: static;
	}

	/* Divi's search overlay is the only other absolutely positioned child of
	   that container, so keep it anchored where it was. */
	.et-l--header .et_pb_menu .et_pb_menu__search-container {
		position: absolute;
	}

	/* ---------------------------------------------------------------------
	   3. Full-screen panel

	   --tlp-mob-top is the header's bottom edge, set by mobile-menu.js. The
	   fallback keeps the panel usable if the script never runs.
	   ------------------------------------------------------------------ */

	.et-l--header .et_pb_menu .et_mobile_menu {
		position: fixed;
		top: var(--tlp-mob-top, 90px);
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 8px 0 40px;
		background: #fff;
		border-top: 0.5px solid #c7c7c7;
		box-shadow: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		z-index: 9999;
	}

	.et-l--header .et_pb_menu .et_mobile_menu,
	.et-l--header .et_pb_menu .et_mobile_menu ul {
		list-style: none !important;
	}

	/* Hold the page still behind the panel. */
	html.tlp-mob-menu-open,
	html.tlp-mob-menu-open body {
		overflow: hidden;
	}

	/* ---------------------------------------------------------------------
	   4. Rows
	   ------------------------------------------------------------------ */

	.et-l--header .et_pb_menu .et_mobile_menu > li {
		position: relative;
		padding: 0;
		margin: 0;
	}

	.et-l--header .et_pb_menu .et_mobile_menu > li + li {
		border-top: 0.5px solid #c7c7c7;
	}

	.et-l--header .et_pb_menu .et_mobile_menu > li > a {
		display: block;
		padding: 18px 60px 18px 24px;
		font-family: 'Inter', Helvetica, Arial, sans-serif;
		font-size: 16px;
		line-height: 22px;
		font-weight: 500;
		letter-spacing: .02em;
		color: #000;
		background: none;
		border: 0;
		-webkit-tap-highlight-color: transparent;
	}

	/* The whole row is a target, so give it a press state rather than the
	   hover state a phone never shows. */
	.et-l--header .et_pb_menu .et_mobile_menu > li > a:active {
		background: #f5f6f8;
		opacity: 1;
	}

	.et-l--header .et_pb_menu .et_mobile_menu > li.tlp-mm-item--mobile-open > a {
		color: #f7183a;
	}

	/* Divi's own sub-menus, for items without a mega menu panel. */
	.et-l--header .et_pb_menu .et_mobile_menu li li {
		padding-left: 0;
	}

	.et-l--header .et_pb_menu .et_mobile_menu li li > a {
		padding: 13px 24px 13px 40px;
		font-size: 15px;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		color: #1a1a1a;
		border: 0;
	}
}