/* =========================================================================
   MB Car Lift — Theme Stylesheet
   Mirrors the original header-footer.html 1:1, with a few scoped resets
   so the design stays intact inside Elementor without margin/padding
   conflicts.
   ========================================================================= */

/* --------------------- Base resets (scoped to theme chrome) -------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	color: #0a0a0a;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Keep theme chrome (header / footer) link behavior consistent without
   overriding user links in Elementor content areas. */
.site-header a,
.site-footer a,
.mobile-menu a { color: inherit; text-decoration: none; }

.site-header img,
.site-footer img { max-width: 100%; display: block; }

.site-header ul,
.site-footer ul,
.mobile-menu ul { margin: 0; padding: 0; list-style: none; }

.site-header button,
.mobile-menu button { font: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link:focus {
	background: #fff;
	color: #0a0a0a;
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 8px;
	padding: 12px 18px;
	top: 8px;
	width: auto;
	z-index: 100000;
	border-radius: 6px;
	box-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

:root {
	--c: #e0030a;
	--c-dark: #b8020a;
	--d: #0a0a0a;
	--w: #fff;
	--container: 1280px;
	--r: 9999px;
	--h: 64px;
}

/* --------------------- Sticky Header ------------------------------------ */
.nav-wrap { position: sticky; top: 0; z-index: 50; }

.site-header {
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.site-header__inner { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }

.nav {
	height: var(--h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}
.nav__logo { display: inline-flex; align-items: center; gap: .6rem; }
.nav__logo-img { height: 40px; width: auto; }
.nav__logo-text { display: none; flex-direction: column; line-height: 1.1; }
.nav__logo-title { font: 700 .95rem "Space Grotesk", sans-serif; }
.nav__logo-sub { font-size: 10px; color: rgba(0, 0, 0, .6); }

.nav__center { display: none; flex: 1; justify-content: center; }
.nav__pill {
	display: inline-flex;
	gap: .2rem;
	border-radius: var(--r);
	padding: 6px;
	background: rgba(0, 0, 0, .04);
	border: 1px solid rgba(0, 0, 0, .1);
}
.nav__link {
	padding: .45rem .9rem;
	border-radius: var(--r);
	font-size: 13px;
	transition: background-color .2s ease, color .2s ease;
	white-space: nowrap;
}
.nav__link--active { background: var(--d); color: var(--w) !important; font-weight: 600; }
.nav__link:hover { background: rgba(0, 0, 0, .08);  }
.nav__link--active:hover { background: #1f1f1f; color:white !important; }

.nav__right { display: inline-flex; align-items: center; gap: .5rem; }

.icon-btn {
	width: 40px;
	height: 40px;
	border-radius: var(--r);
	border: 1px solid rgba(0, 0, 0, .12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: all .2s ease;
	flex-shrink: 0;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--phone { display: none; }
.icon-btn:hover {
	background: #fff1f1;
	border-color: rgba(224, 3, 10, .35);
	color: #900108;
	transform: translateY(-1px);
}

.book-cta {
	height: 40px;
	border-radius: var(--r);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: #fff !important;
	background: var(--c);
	font-size: 13px;
	font-weight: 600;
	padding: 0 8px 0 14px;
	transition: all .2s ease;
	white-space: nowrap;
}
.book-cta__circle {
	width: 28px;
	height: 28px;
	border-radius: var(--r);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .18);
}
.book-cta__circle svg { width: 14px; height: 14px; }
.book-cta:hover { background: var(--c-dark); transform: translateY(-1px); color: #fff !important; }
.book-cta:hover .book-cta__circle { background: rgba(0, 0, 0, .3); }
.book-cta--desktop { display: none; }
.book-cta--mobile { display: inline-flex; }

.icon-btn--menu .icon-close { display: none; }
.icon-btn--menu[aria-expanded="true"] .icon-menu { display: none; }
.icon-btn--menu[aria-expanded="true"] .icon-close { display: block; }

/* --------------------- Mobile menu panel -------------------------------- */
.mobile-menu {
	position: fixed;
	top: 72px;
	right: 1rem;
	width: 78%;
	max-width: 300px;
	background: #0a0a0a;
	border-radius: 14px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(.95);
	pointer-events: none;
	transition: .16s ease;
	z-index: 60;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}
.mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.mobile-menu__eyebrow {
	padding: 12px 16px 8px;
	font-size: 10px;
	color: rgba(255, 255, 255, .45);
	letter-spacing: .2em;
	text-transform: uppercase;
}
.mobile-menu__list {
	padding: 0 8px 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mobile-menu__item {
	color: rgba(255, 255, 255, .9);
	border-radius: 10px;
	padding: 10px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color .2s ease, color .2s ease;
}
.mobile-menu__item-arrow { width: 14px; height: 14px; opacity: .85; }
.mobile-menu__item--active { background: var(--c); color: #fff; }
.mobile-menu__item:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.mobile-menu__footer { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.mobile-menu__call {
	color: rgba(255, 255, 255, .9);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color .2s ease;
}
.mobile-menu__call svg { width: 14px; height: 14px; }
.mobile-menu__call:hover { color: #fff; }

/* --------------------- Fallback page body ------------------------------- */
.site-content { min-height: 40vh; }
.page-gap { min-height: 44vh; display: grid; place-items: center; color: #8d8d8d; font-size: .95rem; }

/* Default content wrapper used for non-Elementor pages. Elementor pages
   using "Elementor Canvas / Full Width" are unaffected. */
.mbcl-default-content {
	max-width: var(--container);
	margin: 0 auto;
	padding: 3rem 1rem;
}
@media (min-width: 768px) {
	.mbcl-default-content { padding: 4rem 1.5rem; }
}

/* --------------------- Footer ------------------------------------------- */
.site-footer {
	background: #0a0a0a;
	color: rgba(255, 255, 255, .82);
	padding: 4rem 0 2.5rem;
}
.site-footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }

.site-footer__logo { display: inline-flex; align-items: center; gap: .6rem; }
.site-footer__logo-img { height: 42px; width: auto; }
.site-footer__logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.site-footer__logo-title { color: #fff; font: 700 .95rem "Space Grotesk", sans-serif; }
.site-footer__logo-sub { font-size: 10px; color: rgba(255, 255, 255, .58); }

.site-footer__blurb {
	margin-top: 1rem;
	max-width: 24rem;
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .66);
}

.site-footer__socials { margin-top: 1rem; display: flex; gap: .55rem; }
.social {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .85);
	transition: all .2s ease;
}
.social:hover { background: var(--c); color: #fff; transform: translateY(-1px); }

.site-footer__h { margin: 0; color: #fff; font: 600 1rem "Space Grotesk", sans-serif; }
.site-footer__list {
	margin-top: .85rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	font-size: 14px;
}
.site-footer__list a {
	color: rgba(255, 255, 255, .85);
	transition: color .2s ease;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}
.site-footer__list a::before {
	content: "›";
	font-size: 19px;
	line-height: 1;
	color: rgba(255, 255, 255, .62);
	font-weight: 700;
	transform: translateY(-1px);
	transition: transform .2s ease, color .2s ease;
}
.site-footer__list a:hover { color: #f43a40; }
.site-footer__list a:hover::before { color: #f43a40; transform: translate(2px, -1px); }

.site-footer__address {
	margin: .85rem 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
}
.site-footer__contact {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	font-size: 14px;
}
.site-footer__contact-row {
	color: rgba(255, 255, 255, .85);
	transition: color .2s ease;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.site-footer__contact-row svg { width: 15px; height: 15px; color: #f43a40; flex-shrink: 0; }
.site-footer__contact-row:hover { color: #f43a40; }

.site-footer__bottom {
	margin-top: 2.6rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 1rem;
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__credit {
	color: #f43a40 !important;
	font-weight: 600;
	transition: color .2s ease;
	text-decoration: none !important;
	background: none !important;
}
.site-footer__credit:hover { color: #ff6b70 !important; }
.site-footer__credit::before,
.site-footer__credit::after { content: none !important; }

/* --------------------- Responsive breakpoints --------------------------- */
@media (min-width: 640px) {
	.site-header__inner,
	.site-footer__inner { padding: 0 1.5rem; }
	.nav__logo-text { display: flex; }
	.book-cta--desktop { display: inline-flex; }
	.book-cta--mobile { display: none; }
}
@media (min-width: 768px) {
	.icon-btn--phone { display: inline-flex; }
	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
@media (min-width: 1024px) {
	.site-header__inner,
	.site-footer__inner { padding: 0 2rem; }
	.nav__center { display: flex; }
	.icon-btn--menu { display: none; }
	.site-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.site-footer__col--brand { grid-column: span 4; }
	.site-footer__col--links { grid-column: span 2; }
	.site-footer__col--services { grid-column: span 3; }
	.site-footer__col--address { grid-column: span 3; }
}

/* =========================================================================
   Basic WordPress post / comment defaults — only applied on non-Elementor
   pages to prevent visual conflicts inside the builder.
   ========================================================================= */
.mbcl-default-content h1,
.mbcl-default-content h2,
.mbcl-default-content h3,
.mbcl-default-content h4 { font-family: "Space Grotesk", Inter, sans-serif; color: #0a0a0a; }
.mbcl-default-content p  { line-height: 1.7; color: #1f1f1f; }
.mbcl-default-content a  { color: var(--c); }
.mbcl-default-content a:hover { color: var(--c-dark); }

.mbcl-default-content .wp-block-image img,
.mbcl-default-content img { border-radius: 12px; max-width: 100%; height: auto; }

/* =========================================================================
   Elementor safety resets — prevent accidental style bleed into Elementor
   widgets without touching the theme's own header / footer.
   ========================================================================= */
.elementor *,
.elementor *::before,
.elementor *::after { box-sizing: border-box; }
/* Let Elementor handle its own spacing — never add global padding to
   .site-main, .entry-content or the page wrapper in this theme. */