/*
 * D&F mobile header — phones and tablets. Markup: inc/mobile-header.php.
 *
 * Breakpoint 1041.98px, not Elementor's 1024: the desktop JetMenu (menu widget 548ab37) switches to its own
 * hamburger when jQuery's $(window).width() — the window minus its scrollbar — drops below 1025px. With a
 * visible scrollbar (15px on macOS with a mouse, 17px on Windows) that happens at a window width of 1039–1041px,
 * so this header takes over through 1041px and the old hamburger header never shows.
 * Everything outside the media queries only keeps the new header hidden, so desktop (1042px and up) is unchanged.
 */

.dfmh,
.dfmh-spacer {
	display: none;
}

@media (max-width: 1041.98px) {

	/* The Elementor header (template 11097) stays for desktop only. */
	.jupiterx-site > header.jupiterx-header {
		display: none !important;
	}

	.dfmh {
		--dfmh-top: 0px;
		--dfmh-h: 64px;
		--dfmh-beige: #f1e6b2;
		--dfmh-cream: #fff5c7;
		--dfmh-navy: #272a5f;
		--dfmh-menu-bg: #28285e;
		--dfmh-blue: #03549e;
		--dfmh-blue-dark: #043d72;
		--dfmh-green: #78be20;
		--dfmh-rule: #ddcba4;
		display: block;
		font-family: "Roboto", sans-serif;
	}

	.dfmh-spacer {
		display: block;
		height: 64px;
	}

	.dfmh *,
	.dfmh *::before,
	.dfmh *::after {
		box-sizing: border-box;
	}

	.dfmh button {
		appearance: none;
		margin: 0;
		border: 0;
		font: inherit;
		line-height: 1.2;
		text-transform: none;
		letter-spacing: normal;
		box-shadow: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.dfmh a {
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.dfmh :focus-visible {
		outline: 3px solid var(--dfmh-blue);
		outline-offset: 2px;
	}

	.dfmh__icon {
		display: block;
		flex: none;
	}

	/* Bar */
	.dfmh__bar {
		position: fixed;
		top: var(--dfmh-top);
		left: 0;
		right: 0;
		z-index: 1000;
		height: var(--dfmh-h);
		padding: 0 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		background: var(--dfmh-beige);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
	}

	.dfmh__logo {
		display: flex;
		align-items: center;
		height: 56px;
		flex: none;
	}

	.dfmh__logo-img {
		display: block;
		height: 56px !important;
		width: auto !important;
		max-width: none;
	}

	.dfmh__actions {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.dfmh .dfmh__btn {
		height: 44px;
		min-width: 44px;
		padding: 0 12px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 700;
	}

	.dfmh .dfmh__btn .dfmh__icon {
		width: 18px;
		height: 18px;
	}

	.dfmh .dfmh__btn--call {
		background: var(--dfmh-blue);
		color: #fff;
	}

	.dfmh .dfmh__btn--call .dfmh__icon {
		color: var(--dfmh-cream);
	}

	.dfmh .dfmh__btn--call[aria-expanded="true"],
	.dfmh .dfmh__btn--call:hover {
		background: var(--dfmh-blue-dark);
	}

	.dfmh .dfmh__btn--schedule {
		background: var(--dfmh-green);
		color: var(--dfmh-navy);
	}

	.dfmh .dfmh__btn--menu {
		width: 44px;
		padding: 0;
		background: var(--dfmh-navy);
		color: var(--dfmh-cream);
	}

	.dfmh .dfmh__btn--menu .dfmh__icon {
		width: 22px;
		height: 22px;
	}

	.dfmh__btn--menu .dfmh__icon--close,
	.dfmh__btn--menu[aria-expanded="true"] .dfmh__icon--menu {
		display: none;
	}

	.dfmh__btn--menu[aria-expanded="true"] .dfmh__icon--close {
		display: block;
	}

	/* Panels (below the bar) */
	.dfmh__scrim {
		position: fixed;
		left: 0;
		right: 0;
		top: calc(var(--dfmh-top) + var(--dfmh-h));
		bottom: 0;
		z-index: 998;
		background: rgba(20, 22, 50, 0.55);
	}

	.dfmh__panel {
		position: fixed;
		left: 0;
		right: 0;
		top: calc(var(--dfmh-top) + var(--dfmh-h));
		z-index: 999;
	}

	.dfmh [hidden] {
		display: none !important;
	}

	/* Call picker */
	.dfmh__call {
		background: #fff;
		padding: 8px 0 12px;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
	}

	.dfmh .dfmh__call-title {
		margin: 0;
		padding: 10px 20px 6px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #5a5d80;
	}

	.dfmh .dfmh__call-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 64px;
		padding: 8px 20px;
		color: var(--dfmh-navy);
		border-bottom: 1px solid #e6dcb0;
	}

	.dfmh .dfmh__call-row:last-child {
		border-bottom: 0;
	}

	.dfmh__call-text {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.dfmh__call-label {
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.5px;
		text-transform: uppercase;
	}

	.dfmh__call-num {
		font-size: 22px;
		font-weight: 700;
		color: var(--dfmh-blue);
	}

	.dfmh__call-icon {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--dfmh-blue);
		color: var(--dfmh-cream);
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
	}

	.dfmh__call-icon .dfmh__icon {
		width: 20px;
		height: 20px;
	}

	/* Menu */
	.dfmh__menu {
		bottom: 0;
		background: var(--dfmh-menu-bg);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		display: flex;
		flex-direction: column;
	}

	.dfmh .dfmh__list,
	.dfmh .dfmh__sub {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.dfmh .dfmh__list > li,
	.dfmh .dfmh__sub > li {
		margin: 0;
		padding: 0;
		background: none;
	}

	.dfmh .dfmh__link {
		width: 100%;
		min-height: 52px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: transparent;
		border-bottom: 1px solid var(--dfmh-rule);
		border-radius: 0;
		color: #fff;
		font-family: "Roboto", sans-serif;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 1px;
		text-transform: uppercase;
		text-align: left;
	}

	.dfmh .dfmh__toggle .dfmh__icon {
		width: 18px;
		height: 18px;
		color: var(--dfmh-beige);
		transition: transform 0.15s ease;
	}

	.dfmh .dfmh__toggle[aria-expanded="true"] .dfmh__icon {
		transform: rotate(90deg);
	}

	.dfmh .dfmh__sub {
		background: #1f1f4d;
		border-bottom: 1px solid var(--dfmh-rule);
		padding: 6px 0;
	}

	.dfmh .dfmh__sublink {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 20px 0 32px;
		color: #fff;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.3;
	}

	.dfmh .dfmh__sublink--group {
		padding-left: 20px;
		color: var(--dfmh-cream);
		font-weight: 700;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		font-size: 13px;
	}

	.dfmh .dfmh__link:hover,
	.dfmh .dfmh__sublink:hover {
		color: var(--dfmh-beige);
	}

	.dfmh__menu-cta {
		margin-top: auto;
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.dfmh__menu-phones {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.dfmh .dfmh__menu-phone {
		min-height: 56px;
		border-radius: 8px;
		background: var(--dfmh-blue);
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.dfmh__menu-phone-label {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: var(--dfmh-cream);
	}

	.dfmh__menu-phone-num {
		font-size: 16px;
		font-weight: 700;
	}

	.dfmh .dfmh__menu-schedule {
		min-height: 52px;
		border-radius: 8px;
		background: var(--dfmh-green);
		color: var(--dfmh-navy);
		font-size: 16px;
		font-weight: 700;
	}

	html.dfmh-lock,
	html.dfmh-lock body {
		overflow: hidden;
	}
}

/* Tablets: the call picker is a card under the Call button instead of a full-width sheet. */
@media (min-width: 768px) and (max-width: 1041.98px) {
	.dfmh__bar {
		padding: 0 24px;
	}

	.dfmh__call {
		left: auto;
		right: 24px;
		width: 380px;
		border-radius: 0 0 10px 10px;
	}
}