/*
Header styles — extracted from header.php's inline styles, values
unchanged. IDs (tmgHeader, tmgHeaderInner, tmgHeaderLogo,
tmgLogoSlant, tmgHeaderCallWrap, tmgHeaderCall) were kept in the
markup as-is, since each page's own <helmet> block still targets
them by ID for the scroll-condense behavior (#tmgHeader.is-cond) and
responsive breakpoints — this file only replaces what used to be
inline style="" attributes.
*/

/**
 * The mobile menu panel below is position:fixed with a transform
 * that moves it off-screen when closed — transforms don't remove an
 * element from the page's own scrollable-width calculation the way
 * display:none would, and position:fixed elements aren't clipped by
 * body's own overflow-x:hidden (fixed positioning is relative to
 * the viewport, not body's box). Without this, the closed panel can
 * still introduce horizontal scroll on the whole page.
 */
html {
	overflow-x: hidden;
}

.tmg-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #111113;
	transition: padding .2s ease;
}

.tmg-header__inner {
	height: 111px;
	width: 100%;
	padding: 0 0 0 max(0px, calc((100% - 1280px) / 2 - 20px));
	display: flex;
	align-items: stretch;
	gap: 0;
	transition: padding .2s ease;
}

.tmg-header__logo-wrap {
	display: flex;
	align-items: center;
	flex: none;
	padding: 10px clamp(28px, 4vw, 54px) 10px clamp(18px, 4vw, 48px);
	position: relative;
}

.tmg-header__logo-link {
	display: flex;
	align-items: center;
}

.tmg-header__logo {
	height: 60px;
	width: auto;
	transition: height .24s cubic-bezier(.2, .7, .3, 1);
	position: relative;
	top: -1px;
	left: 13px;
}

.tmg-header__logo-slant {
	position: absolute;
	top: 50%;
	right: 13px;
	height: 95px;
	transform: translateY(-50%) skewX(-18deg);
	width: 2px;
	background: #e11b22;
	transition: height .24s cubic-bezier(.2, .7, .3, 1);
}

.tmg-header__nav {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #fff;
	padding-left: clamp(14px, 2vw, 30px);
	position: relative;
	left: -26px;
}

.tmg-header__nav-divider {
	width: 1px;
	height: 16px;
	background: #3a3a3c;
}

.tmg-header__nav-link {
	color: #fff;
	white-space: nowrap;
	padding: 8px 11px;
}

.tmg-header__cta-wrap {
	flex: none;
	margin-left: auto;
	margin-right: -9px;
	position: relative;
	left: -9px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	background: #e11b22;
	padding: 12px clamp(26px, 4vw, 56px) 12px 56px;
	clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
}

.tmg-header__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 900;
	font-size: 14.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: font-size .24s cubic-bezier(.2, .7, .3, 1);
}

.tmg-header__cta-arrow {
	font-size: 17px;
}

.tmg-header__phone-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 800;
	font-size: 18.5px;
	letter-spacing: .08em;
}

.tmg-header__phone-icon {
	font-size: 17px;
}

.tmg-header-spacer {
	height: 127px;
}

/**
 * Hover states — real CSS instead of the runtime's style-hover
 * attribute. Needed now that header.php is called via a standard
 * get_header() before <x-dc> opens: style-hover is only processed
 * by the page's JS runtime for elements inside <x-dc>, which the
 * header no longer is.
 */
.tmg-header__nav-link:hover {
	color: #e11b22;
}

.tmg-header__cta-link:hover,
.tmg-header__phone-link:hover {
	text-decoration: underline;
}

/**
 * Mobile menu — hamburger toggle, hidden on desktop, shown at the
 * same breakpoint the desktop nav above already disappears at
 * (max-width:1120px, see common.css). Bars morph into an X via CSS
 * transforms rather than swapping icons, so there's one element to
 * keep in sync with .is-active rather than two icons to toggle
 * between.
 */
.tmg-header__mobile-toggle {
	display: none;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0 4px 0 auto;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* #tmgHeaderInner uses align-items:stretch, and this button has
	   its own explicit height — a fixed-height flex child doesn't
	   stretch to fill the row the way the logo (no explicit height,
	   sized by its own content) does, so without this it sits at the
	   top of the header instead of centered alongside the logo. */
	align-self: center;
}

.tmg-header__mobile-toggle-bar {
	display: block;
	width: 26px;
	height: 3px;
	background: #fff;
	border-radius: 2px;
	transition: transform .25s cubic-bezier(.2, .7, .3, 1), opacity .2s ease;
}

.tmg-header__mobile-toggle.is-active .tmg-header__mobile-toggle-bar:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.tmg-header__mobile-toggle.is-active .tmg-header__mobile-toggle-bar:nth-child(2) {
	opacity: 0;
}

.tmg-header__mobile-toggle.is-active .tmg-header__mobile-toggle-bar:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

.tmg-mobile-menu__backdrop {
	position: fixed;
	inset: 0;
	z-index: 1998;
	background: rgba(17, 17, 19, .6);
	opacity: 0;
	transition: opacity .3s ease;
}

.tmg-mobile-menu__backdrop.is-visible {
	opacity: 1;
}

.tmg-mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1999;
	width: min(360px, 88vw);
	background: #111113;
	box-shadow: -12px 0 40px rgba(0, 0, 0, .35);
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.2, .7, .3, 1);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.tmg-mobile-menu.is-open {
	transform: translateX(0);
}

.tmg-mobile-menu__inner {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding: 20px 28px 32px;
}

.tmg-mobile-menu__close {
	align-self: flex-end;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	margin-bottom: 12px;
}

.tmg-mobile-menu__nav {
	display: flex;
	flex-direction: column;
}

.tmg-mobile-menu__nav-link {
	color: #fff;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: .02em;
	padding: 16px 4px;
	border-bottom: 1px solid #2a2a2c;
}

.tmg-mobile-menu__nav-link:hover {
	color: #e11b22;
}

.tmg-mobile-menu__cta {
	margin-top: auto;
	padding-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tmg-mobile-menu__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #e11b22;
	color: #fff;
	font-weight: 900;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 16px;
	border: 3px solid #fff;
}

.tmg-mobile-menu__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #fff;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: .04em;
}

body.tmg-mobile-menu-open {
	overflow: hidden;
}

@media (max-width: 1120px) {
	.tmg-header__mobile-toggle {
		display: flex;
	}
	/**
	 * Request Service and the phone number are both already
	 * reachable from inside the mobile menu panel itself, so the
	 * header's own copy of them is dropped here rather than kept
	 * and shrunk — one clear place to find them, not two competing
	 * for the same limited header width. The logo's diagonal
	 * separator line is dropped too: it existed to divide the logo
	 * from the nav sitting right next to it, but the nav is gone
	 * from the header at this width (it's inside the hamburger
	 * menu now), so there's nothing left for it to separate.
	 */
	#tmgHeaderCallWrap {
		display: none;
	}
	#tmgLogoSlant {
		display: none;
	}
}

/**
 * At the narrowest phone widths, the CTA block's own text ("Request
 * Service" + the phone number) competes with the hamburger button
 * for limited space and can crowd or clip. The "Request Service"
 * link is dropped here specifically because it's not lost — it's
 * still available as a full-width button inside the mobile menu
 * panel — while the phone number stays directly visible in the
 * header, since tapping straight through to a call is the more
 * time-sensitive action on a small screen.
 */
@media (max-width: 480px) {
	.tmg-header__mobile-toggle {
		margin-right: 0;
		width: 40px;
	}
	.tmg-header__logo-wrap {
		padding-left: 10px;
		padding-right: 10px;
	}
	#tmgHeaderLogo {
		height: 50px !important;
		top: 0 !important;
		left: 4px !important;
	}
}

/**
 * common.css loads after header.css in the real enqueue order (see
 * functions.php), so its own max-width:700px !important rule for
 * #tmgHeaderLogo would otherwise win over the max-width:480px block
 * above, regardless of which media query is narrower — cascade
 * order only cares about source order and selector specificity, not
 * which breakpoint is more specific. Repeating the id selector with
 * an extra "body" ancestor here raises specificity just enough to
 * beat that unrelated rule, without needing to duplicate this whole
 * block into common.css and fragment the header's responsive rules
 * across two files.
 */
@media (max-width: 480px) {
	body #tmgHeaderLogo {
		height: 50px !important;
		top: 0 !important;
		left: 4px !important;
	}
}

/**
 * Skip-link — visually hidden by default (via .screen-reader-text,
 * common.css), but standard practice is for it to become visible
 * the moment it receives keyboard focus, so a keyboard or
 * screen-reader user tabbing onto the page actually sees it appear
 * and knows the option exists, rather than it staying invisible the
 * whole time. Positioned fixed so it doesn't push the header itself
 * down and shift layout when it appears.
 */
.tmg-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	z-index: 100000;
	background: #e11b22;
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 12px 20px;
	border: 3px solid #fff;
	text-decoration: none;
}