/* Site header: Elementor template 66 (post-66.css), rendered at 1440, 1024, and 390 px. */

/* The header overlays the page hero, like the old margin-bottom: -130px. */
.site-header-part { position: relative; z-index: 20; height: 0; }
.site-header { padding: 20px 25px 0; background: transparent; }
.site-header__bar { min-height: 110px; gap: 20px; }

.site-header__logo { display: block; flex: 0 0 auto; line-height: 0; }
.site-header__logo img { width: 205px; height: auto; }

/* Menu bar (desktop, 1025 px and wider): flex cells. The logo, the contact button, and the phone keep
   their size, and the menu takes the space between them with its links spread evenly. A fixed
   4-column grid made the links run into the logo and the contact button below about 1400 px. */
.site-header { --jspa-nav-pad: clamp(10px, 1.6vw, 30px); }
.site-header .site-header__bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: clamp(16px, 1.6vw, 32px); }
.site-header .site-nav { flex: 1 1 auto; min-width: 0; color: var(--wp--preset--color--white); }
.site-header .site-nav .wp-block-navigation__container { width: 100%; flex-wrap: nowrap; justify-content: space-evenly; }
.site-nav .wp-block-navigation__container { gap: 0; }
.site-header .site-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
	color: var(--wp--preset--color--white);
	padding: 0 var(--jspa-nav-pad);
}
.site-header .site-nav .wp-block-navigation__container > li > .wp-block-navigation-item__content { white-space: nowrap; }
.site-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-nav .wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation-item__content:focus { color: var(--jspa-link-on-dark); text-decoration: underline; text-underline-offset: 4px; }
.site-nav .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--white); margin-left: calc(6px - var(--jspa-nav-pad)); width: 14px; height: 14px; }
.site-header .site-nav .mobile-only { display: none !important; }

/* Dropdown panels: red, Montserrat 600 13 px, 46 px rows, light hover, and a lightly blurred drop
   shadow that reads over the hero photo (Steve, 2026-10-20). */
.site-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--red) !important;
	border: 0 !important;
	min-width: 240px !important;
	padding: 0;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 13px;
	line-height: 20px;
	padding: 13px 20px !important;
	color: var(--wp--preset--color--white);
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--ink);
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { margin-left: -36px; }

/* Contact button: Open Sans 600 18 px, 18 x 26 px padding, transparent with red text on hover. */
.site-header__contact { flex: 0 0 auto; }
.site-header__contact .wp-block-button__link {
	font-family: var(--wp--preset--font-family--button);
	font-size: 18px;
	font-weight: 600;
	padding: 18px 26px;
	border: 1px solid var(--wp--preset--color--red);
}
.site-header__contact .wp-block-button__link:hover,
.site-header__contact .wp-block-button__link:focus { background: var(--wp--preset--color--white); color: var(--wp--preset--color--red); border-color: var(--wp--preset--color--white); }

/* Phone: icon, "CALL US TODAY!" (Bellefair 16 px), number (Montserrat 700 30 px). */
.site-header__phone { flex: 0 0 auto; gap: 30px; }
.site-header__phone-icon { line-height: 0; }
.site-header__phone-text { gap: 5px; }
.site-header__phone-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 16px;
	line-height: 16px;
	color: var(--wp--preset--color--white);
}
.site-header__phone-number .wp-block-button__link {
	padding: 0;
	background: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 30px;
	font-weight: 700;
	line-height: 30px;
	color: var(--wp--preset--color--white);
	white-space: nowrap;
}
.site-header__phone-number .wp-block-button__link:is(:hover, :focus-visible) { color: var(--jspa-link-on-dark); text-decoration: underline; text-underline-offset: 4px; }

/* From 1025 to 1279 px the cells shrink: a smaller logo, menu text, and phone number, and no phone icon. */
@media (min-width: 1025px) and (max-width: 1279.98px) {
	.site-header__logo img { width: 170px; }
	.site-header .site-nav .wp-block-navigation-item__content { font-size: 16px; }
	.site-header__contact .wp-block-button__link { font-size: 16px; padding: 14px 18px; }
	.site-header .site-header__phone-icon { display: none; }
	.site-header__phone-number .wp-block-button__link { font-size: 24px; line-height: 24px; }
}

/* Below 1025 px the menu collapses into a toggle (the old tablet layout) and the phone hides. */
@media (max-width: 1024.98px) {
	.site-header .site-header__phone { display: none !important; }
	.site-header .site-header__bar { display: grid; min-height: 75px; grid-template-columns: 1fr auto auto; gap: 30px; }
	.site-header .site-nav { width: auto; margin-left: 0; justify-self: end; }
	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	/* The toggle: a solid red square with white bars, like the site's buttons. Thin red bars alone
	   were hard to see on the dark hero photo (Steve, 2026-10-22). */
	.site-nav .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		justify-content: center;
		align-items: center;
		border-radius: 0;
		background: var(--wp--preset--color--red);
		color: var(--wp--preset--color--white);
	}
	.site-header .site-nav .mobile-only { display: block !important; }
}
@media (max-width: 767.98px) {
	.site-header { padding-top: 10px; }
	.site-header__logo img { width: 140px; }
	.site-header .site-header__contact { display: none !important; }
	.site-header .site-header__bar { grid-template-columns: 1fr auto; }
}

/* The open menu below 1025 px: a red panel under the header. Up to 500 px it is full width. From
   501 px it is a 400 px panel on the right, under the toggle (Steve, 2026-10-22). Its items share
   one left edge, and each submenu level is indented 20 px more.
   It starts below the toggle and the logo: 100 px from 768 px, where the header is 20 px of
   padding plus the 79 px logo, and 75 px on phones. When logged in, it also clears the admin bar
   (WordPress sets --wp-admin--admin-bar--height: 32 px, or 46 px up to 782 px). */
.site-header { --jspa-menu-top: 100px; }
@media (max-width: 767.98px) {
	.site-header { --jspa-menu-top: 75px; }
}
@media (max-width: 1024.98px) {
	.site-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: calc(var(--jspa-menu-top) + var(--wp-admin--admin-bar--height, 0px)) 0 auto auto;
		width: 400px;
		padding: 0;
		background: var(--wp--preset--color--red) !important;
		max-height: calc(100vh - var(--jspa-menu-top) - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
	}
	.site-nav .is-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: 22px; right: 25px; color: var(--wp--preset--color--white); }
	.site-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding: 0 !important; align-items: stretch !important; }
	.site-nav .is-menu-open .wp-block-navigation__container,
	.site-nav .is-menu-open .wp-block-navigation__submenu-container { gap: 0 !important; width: 100%; align-items: stretch !important; }
	.site-nav .is-menu-open .wp-block-navigation__container { --jspa-indent: 25px; }
	.site-nav .is-menu-open .wp-block-navigation__submenu-container { --jspa-indent: 45px; }
	.site-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { --jspa-indent: 65px; }
	.site-nav .is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch !important; justify-content: flex-start !important; }
	.site-nav .is-menu-open .wp-block-navigation-item__content {
		display: block;
		box-sizing: border-box;
		width: 100%;
		padding: 12px 25px 12px var(--jspa-indent) !important;
		font-size: 14px;
		line-height: 21px;
		text-align: left;
		color: var(--wp--preset--color--white);
	}
	.site-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--light);
		color: var(--wp--preset--color--ink);
	}
	.site-nav .is-menu-open .wp-block-navigation__submenu-container { box-shadow: none; padding: 0 !important; }

	/* Submenus stay collapsed behind their caret, as on the old mobile menu (theme.js manages jspa-sub-open). */
	.site-nav .is-menu-open li.has-child { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; }
	/* The caret follows the text at every level: core grows the links inside submenus. */
	.site-nav .is-menu-open li.has-child > .wp-block-navigation-item__content { flex-grow: 0 !important; width: auto !important; padding-right: 4px !important; }
	.site-nav .is-menu-open .wp-block-navigation-submenu__toggle {
		display: inline-flex !important;
		align-items: center;
		color: var(--wp--preset--color--white);
		padding: 0 8px;
		width: auto !important;
		height: 21px;
		background: none;
		border: 0;
		position: relative !important;
		z-index: 2;
		order: 2;
		margin: 0 !important;
	}
	.site-nav .is-menu-open li.has-child > .wp-block-navigation-item__content { order: 1; position: relative; z-index: 1; }
	.site-nav .is-menu-open li.has-child > .wp-block-navigation__submenu-container { order: 3; }
	.site-nav .is-menu-open .wp-block-navigation-submenu__toggle svg { display: block !important; width: 12px; height: 12px; stroke: currentColor; transform: rotate(0); }
	.site-nav .is-menu-open li.has-child.jspa-sub-open > .wp-block-navigation-submenu__toggle svg { transform: rotate(180deg); }
	.site-nav .is-menu-open li.has-child > .wp-block-navigation__submenu-container { display: none !important; flex-basis: 100%; box-shadow: none; }
	.site-nav .is-menu-open li.has-child.jspa-sub-open > .wp-block-navigation__submenu-container { display: flex !important; flex-direction: column; }
	.site-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 13px; }
}
@media (max-width: 500px) {
	.site-nav .wp-block-navigation__responsive-container.is-menu-open { left: 0; width: auto; box-shadow: none; }
}