/* nav.css — task_0016 v2 (semantic rebuild)
 * Sitewide nav. No Bootstrap classes consumed. JS-driven drawer state via .site-nav.is-drawer-open class.
 * Tokens-only. CallTrak DNI-compatible (preserves $phone literal).
 */

/* ── Reset main_1.css body padding for fixed nav (already 75px there) — keep, our nav fits in 64px ── */

/* ── Container + base nav ────────────────────────────────────── */
.site-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1050;
	background: rgba(35, 31, 32, .92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	transition: background .25s ease, box-shadow .25s ease;
	font-family: "open sans", Helvetica, Arial, sans-serif;
}

.admin-bar .site-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-nav { top: 46px; } }

/* Brand-strip gradient at bottom edge */
.site-nav::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: linear-gradient(90deg,
		var(--c-orange-brand) 0%,
		var(--c-orange-brand) 50%,
		var(--c-green-brand) 100%);
	opacity: .9;
	pointer-events: none;
}

.site-nav.is-scrolled {
	background: rgba(35, 31, 32, .98);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

/* ── Skip-to-content (a11y) ─────────────────────────────────── */
.site-nav__skip {
	position: absolute;
	left: 1rem;
	top: -3rem;
	background: var(--c-white);
	color: var(--c-dark);
	padding: .5rem 1rem;
	border-radius: 4px;
	font-weight: 600;
	z-index: 1060;
	text-decoration: none;
	transition: top .15s ease;
}
.site-nav__skip:focus {
	top: .5rem;
	outline: 2px solid var(--c-orange-brand);
	outline-offset: 2px;
}

/* ── Inner row layout ───────────────────────────────────────── */
.site-nav__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 1rem;
	max-width: 1440px;
	margin: 0 auto;
	min-height: 64px;
	position: relative;
}

@media (min-width: 1200px) {
	.site-nav__inner {
		gap: 1.5rem;
		padding: 0 2rem;
		min-height: 72px;
	}
}

/* ── Brand ──────────────────────────────────────────────────── */
.site-nav__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
	transition: opacity .15s ease;
}

.site-nav__brand img {
	display: block;
	width: auto;
	max-width: 180px;
	height: 40px;
	max-height: 40px;
}

@media (min-width: 768px) {
	.site-nav__brand img {
		max-width: 200px;
		height: 44px;
		max-height: 44px;
	}
}

@media (min-width: 1200px) {
	.site-nav__brand img {
		max-width: 220px;
		height: 48px;
		max-height: 48px;
	}
}

.site-nav__brand:hover { opacity: .85; }
.site-nav__brand:focus-visible {
	outline: 2px solid var(--c-orange-brand);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ── Phone-mini: icon-pill on desktop, full number on mobile ── */
.site-nav__phone-mini {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease, color .15s ease;
	flex-shrink: 0;
}

@media (min-width: 1200px) {
	.site-nav__phone-mini {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--c-white);
		color: var(--c-orange-brand);
	}
	.site-nav__phone-mini-label { display: none; }
}

@media (max-width: 1199.98px) {
	.site-nav__phone-mini,
	.site-nav__phone-mini:hover,
	.site-nav__phone-mini:focus,
	.site-nav__phone-mini:focus-visible,
	.site-nav__phone-mini:active {
		padding: .75rem 1.25rem;
		min-height: 44px;
		border-radius: 8px;
		background: #fff !important;
		color: var(--c-dark) !important;
		font-weight: 600;
		font-size: 1rem;
		letter-spacing: .04em;
		transform: none;
	}
	.site-nav__phone-mini-icon,
	.site-nav__phone-mini svg { display: none !important; }
}

.site-nav__phone-mini:hover,
.site-nav__phone-mini:focus-visible {
	background: var(--c-orange-brand);
	color: var(--c-dark);
	transform: scale(1.03);
	outline: none;
}

.site-nav__phone-mini:focus-visible {
	box-shadow: 0 0 0 3px rgba(244, 111, 12, .35);
}

/* Phone-mini visible at all viewports — secondary contact path,
 * complements the primary "Book Online" CTA */

/* ── Hamburger ──────────────────────────────────────────────── */
.site-nav__hamburger {
	margin-left: auto;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 11px 10px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .25);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	flex-shrink: 0;
	user-select: none;
}

.site-nav__hamburger:hover { background: rgba(255, 255, 255, .08); }
.site-nav__hamburger:focus-visible {
	outline: 2px solid var(--c-orange-brand);
	outline-offset: 2px;
}

.site-nav__hamburger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .3s ease, opacity .3s ease;
	transform-origin: center;
}

.site-nav.is-drawer-open .site-nav__hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.site-nav.is-drawer-open .site-nav__hamburger-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.site-nav.is-drawer-open .site-nav__hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1200px) {
	.site-nav__hamburger { display: none; }
	.site-nav__close { display: none; }
}

/* ── Drawer (mobile) / Inline menu (desktop) ──────────────── */

/* Mobile-first: drawer */
@media (max-width: 1199.98px) {
	.site-nav__hamburger {
		position: relative;
		z-index: 1042;
	}

	.site-nav.is-drawer-open .site-nav__hamburger {
		display: none;
	}

	.site-nav__close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 1;
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: rgba(255, 255, 255, .08);
		border: 1px solid rgba(255, 255, 255, .25);
		border-radius: 8px;
		color: #fff;
		cursor: pointer;
		transition: background .15s ease, border-color .15s ease, transform .15s ease;
	}

	.site-nav__close:hover {
		background: rgba(255, 255, 255, .15);
		border-color: rgba(255, 255, 255, .4);
	}

	.site-nav__close:focus-visible {
		outline: 2px solid var(--c-orange-brand);
		outline-offset: 2px;
		background: rgba(255, 255, 255, .15);
	}

	.site-nav__close:active {
		transform: scale(.96);
	}

	.site-nav__drawer,
	.site-nav__drawer * {
		box-sizing: border-box; /* prevents the 1.75rem L/R drawer padding +
		                          full-width CTA buttons from extending past
		                          88vw and causing horizontal scroll on small
		                          phones */
	}
	.site-nav__drawer {
		position: fixed;
		top: 0; right: 0;
		width: 88%;
		max-width: 380px;
		height: 100vh;
		height: 100dvh;
		/* Solid dark base with a subtle orange wash on top, so the bottom of
		 * the drawer stays opaque (orange-tint at 18% alpha was letting the
		 * page below show through and crushing contrast on the lower items). */
		background: var(--c-dark);
		padding: 6rem 1.75rem 2.5rem;
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		transform: translateX(110%);
		transition: transform .35s cubic-bezier(.2, .8, .2, 1);
		z-index: 1041;
		box-shadow: -8px 0 32px rgba(0, 0, 0, .5);
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.site-nav.is-drawer-open .site-nav__drawer {
		transform: translateX(0);
	}

	/* Backdrop */
	.site-nav__backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .55);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		z-index: 1040;
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}

	.site-nav.is-drawer-open .site-nav__backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Lock body scroll when drawer open */
	body:has(.site-nav.is-drawer-open) {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__close { transition: none; }
	.site-nav__close:active { transform: none; }
}

/* Desktop inline menu */
@media (min-width: 1200px) {
	.site-nav__drawer {
		display: flex;
		align-items: center;
		gap: 0;
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	.site-nav__backdrop { display: none; }
}

/* ── Menu list ──────────────────────────────────────────────── */
.site-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

@media (max-width: 1199.98px) {
	.site-nav__menu {
		flex-direction: column;
		gap: 0;
		flex: 1 1 auto;
		min-height: 0;
	}
}

@media (min-width: 1200px) {
	.site-nav__menu {
		flex-direction: row;
		gap: 0;
		align-items: center;
		margin-right: 1rem;
		flex-wrap: nowrap;
	}
}

@media (min-width: 1440px) {
	.site-nav__menu > li > a {
		padding: 1.25rem .9rem;
		font-size: .9375rem;
	}
}

/* ── Menu items ─────────────────────────────────────────────── */
.site-nav__menu .menu-item,
.site-nav__menu li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1199.98px) {
	.site-nav__menu .menu-item,
	.site-nav__menu > li {
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		width: 100%;
	}
}

.site-nav__menu a {
	display: flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	font-size: .9375rem;
	transition: color .15s ease, background .15s ease;
	position: relative;
	white-space: nowrap;
}

@media (max-width: 1199.98px) {
	.site-nav__menu > li > a {
		min-height: 0;
		padding: .35rem 0;
		font-size: .875rem;
		line-height: 1.3;
	}
	.site-nav__menu .menu-item,
	.site-nav__menu > li {
		padding: 0;
	}
}

@media (min-width: 1200px) {
	.site-nav__menu > li > a {
		padding: 1.25rem .7rem;
		font-size: .875rem;
	}

	/* Animated underline */
	.site-nav__menu > li > a::after {
		content: "";
		position: absolute;
		left: .7rem; right: .7rem;
		bottom: .85rem;
		height: 2px;
		background: var(--c-orange-brand);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .25s cubic-bezier(.2, .8, .2, 1);
	}

	.site-nav__menu > li:hover > a::after,
	.site-nav__menu > li:focus-within > a::after,
	.site-nav__menu > li.current-menu-item > a::after,
	.site-nav__menu > li.current-menu-parent > a::after,
	.site-nav__menu > li.current-menu-ancestor > a::after,
	.site-nav__menu > li.current_page_item > a::after,
	.site-nav__menu > li.current_page_parent > a::after,
	.site-nav__menu > li.current_page_ancestor > a::after {
		transform: scaleX(1);
	}
}

.site-nav__menu a:hover,
.site-nav__menu a:focus-visible,
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-menu-parent > a,
.site-nav__menu .current_page_item > a,
.site-nav__menu .current_page_parent > a {
	color: var(--c-orange-brand);
}

.site-nav__menu a:focus-visible {
	outline: 2px solid var(--c-orange-brand);
	outline-offset: -2px;
	border-radius: 2px;
}

/* Mobile current-page tick */
@media (max-width: 1199.98px) {
	.site-nav__menu > li.current-menu-item > a::before,
	.site-nav__menu > li.current-menu-parent > a::before,
	.site-nav__menu > li.current-menu-ancestor > a::before,
	.site-nav__menu > li.current_page_item > a::before {
		content: "";
		position: absolute;
		left: -1.75rem;
		top: 50%;
		transform: translateY(-50%);
		width: 4px;
		height: 28px;
		background: var(--c-orange-brand);
		border-radius: 0 4px 4px 0;
	}
}

/* ── Submenus ───────────────────────────────────────────────── */
.site-nav__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1199.98px) {
	/* Collapse sub-menus by default — JS adds .is-submenu-open on parent <li>
	 * tap to reveal. Without this every dropdown ("ABOUT US", "Services",
	 * "Language") expanded inline and pushed the CTAs below the fold. */
	.site-nav__menu .sub-menu {
		padding: 0 0 0 1rem;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}
	.site-nav__menu .menu-item-has-children.is-submenu-open > .sub-menu {
		max-height: 800px;
	}
	.site-nav__menu .menu-item-has-children > a {
		position: relative;
		padding-right: 2rem;
	}
	.site-nav__menu .menu-item-has-children > a::after {
		content: "";
		position: absolute;
		right: .25rem;
		top: 50%;
		width: 10px;
		height: 10px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-75%) rotate(45deg);
		transition: transform .2s ease;
	}
	.site-nav__menu .menu-item-has-children.is-submenu-open > a::after {
		transform: translateY(-25%) rotate(-135deg);
	}
	.site-nav__menu .sub-menu a {
		min-height: 0;
		padding: .3rem 0;
		font-size: .8125rem;
		font-weight: 500;
		line-height: 1.3;
		color: rgba(255, 255, 255, .75);
		text-transform: none;
		letter-spacing: 0;
	}
	.site-nav__menu .sub-menu a:hover {
		color: var(--c-orange-brand);
	}
	/* CTA row to the top of the drawer so Commercial / Book Online aren't
	 * buried below the full menu list. All three CTAs share row width. */
	.site-nav__cta-row {
		order: -1;
		display: flex;
		flex-direction: column;
		gap: .5rem;
		width: 100%;
	}
	.site-nav__cta-row > .site-nav__phone-mini,
	.site-nav__cta-row > .site-nav__cta {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

@media (min-width: 1200px) {
	.site-nav__menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: rgba(35, 31, 32, .98);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border: 1px solid rgba(255, 255, 255, .08);
		border-radius: 8px;
		padding: .5rem 0;
		box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
		z-index: 1051;
	}

	.site-nav__menu > li:hover > .sub-menu,
	.site-nav__menu > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.site-nav__menu .sub-menu a {
		padding: .55rem 1.1rem;
		font-size: .8125rem;
		font-weight: 500;
		text-transform: none;
		letter-spacing: 0;
		color: rgba(255, 255, 255, .9);
		display: block;
	}

	.site-nav__menu .sub-menu a:hover,
	.site-nav__menu .sub-menu a:focus-visible {
		background: rgba(244, 111, 12, .15);
		color: var(--c-orange-brand);
	}
}

/* Hide caret/dropdown toggles output by walker (Bootstrap walker would inject) */
.site-nav__menu .dropdown-toggle::after,
.site-nav__menu .caret { display: none !important; }

/* ── Phone + Book Online row ───────────────────────────────── */
.site-nav__cta-row {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
}

/* ── Primary CTA (Book Online) ──────────────────────────────── */
.site-nav__cta {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.25rem;
	background: var(--c-orange-brand);
	color: var(--c-white);
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(244, 111, 12, .4);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease;
	line-height: 1;
}

.site-nav__cta-icon {
	flex-shrink: 0;
}

.site-nav__cta-label {
	white-space: nowrap;
}

.site-nav__cta:hover,
.site-nav__cta:focus-visible {
	background: var(--c-dark);
	color: var(--c-orange-brand);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
	outline: none;
}
.site-nav__cta:focus-visible {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 3px rgba(244, 111, 12, .55);
}

/* ── Outlined CTA variant (Commercial Quote) ─────────────── */
.site-nav__cta--commercial {
	background: transparent;
	color: var(--c-orange-brand);
	border: 2px solid var(--c-orange-brand);
	box-shadow: none;
	padding: calc(.75rem - 2px) calc(1.25rem - 2px);
}

.site-nav__cta--commercial:hover,
.site-nav__cta--commercial:focus-visible {
	background: var(--c-orange-brand);
	color: var(--c-white);
	border-color: var(--c-orange-brand);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(244, 111, 12, .4);
	outline: none;
}

.site-nav__cta--commercial:focus-visible {
	box-shadow: 0 6px 18px rgba(244, 111, 12, .4),
	            0 0 0 3px rgba(244, 111, 12, .55);
}

@media (max-width: 1199.98px) {
	.site-nav__cta--commercial {
		padding: calc(1rem - 2px) calc(1.5rem - 2px);
	}
}

@media (max-width: 1199.98px) {
	.site-nav__cta-row {
		margin-top: auto;
		padding: 0 1rem 1rem;
		justify-content: center;
		flex: 0 0 auto;
	}
	.site-nav__cta {
		padding: 1rem 1.5rem;
		font-size: 1rem;
	}
	.site-nav__cta-icon {
		width: 22px;
		height: 22px;
	}
}

@media (min-width: 1200px) {
	.site-nav__cta {
		flex-shrink: 0;
	}
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.site-nav,
	.site-nav__brand,
	.site-nav__brand img,
	.site-nav__phone-mini,
	.site-nav__hamburger,
	.site-nav__hamburger-bar,
	.site-nav__menu a,
	.site-nav__menu > li > a::after,
	.site-nav__menu .sub-menu,
	.site-nav__cta,
	.site-nav__drawer,
	.site-nav__backdrop {
		transition: none !important;
		animation: none !important;
	}
}