/*
 * Layout for the CTAs added into Hello Elementor's own dynamic
 * header/footer template-parts, plus the mobile sticky action bar.
 * Scoped additions only - Hello's own header/nav/dropdown CSS
 * (assets/css/header-footer.css in the parent theme) is left untouched,
 * including the `.site-navigation-toggle-holder + .site-navigation-dropdown`
 * adjacent-sibling relationship its mobile-menu JS depends on.
 */

.site-header {
	background-color: var(--ca-color-surface);
	border-bottom: 1px solid var(--ca-color-border);
	padding-block: var(--ca-space-xs) !important;
}

.site-header .header-inner {
	max-width: var(--ca-container-max);
	margin-inline: auto;
	padding-inline: var(--ca-gutter);
	align-items: center;
	gap: var(--ca-space-sm);
}

.carassist247-brand {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.carassist247-brand img {
	display: block;
	width: auto;
	height: 32px;
}

@media (min-width: 768px) {
	.carassist247-brand img {
		height: 40px;
	}
}

/* Small laptops (full menu shown, but less room): the wide OnSpot Battery
   logo plus the menu and both buttons need ~1060px, so tighten slightly to
   keep everything on one row instead of wrapping the buttons underneath. */
@media (min-width: 993px) and (max-width: 1199px) {
	.carassist247-brand img {
		height: 32px;
	}
	.site-header .header-inner {
		column-gap: 12px;
	}
	.site-header .site-navigation ul.menu li a {
		padding-inline: 8px;
	}
}

.carassist247-footer-logo {
	display: inline-block;
	margin-bottom: var(--ca-space-sm);
	line-height: 0;
}

.carassist247-footer-logo img {
	display: block;
	width: auto;
	height: 36px;
}

.site-header .site-navigation ul.menu li a {
	font-family: var(--ca-font-family);
	color: var(--ca-color-text);
	font-weight: 500;
	transition: color var(--ca-transition-fast);
}

.site-header .site-navigation ul.menu li a:hover {
	color: var(--ca-color-primary);
}

/* Header CTAs: appended as the last child of .header-inner so the
   toggle-holder + dropdown adjacency Hello's JS relies on is untouched. */
.carassist247-header-actions {
	display: none;
	align-items: center;
	gap: var(--ca-space-xs);
	margin-inline-start: auto;
}

@media (min-width: 768px) {
	.carassist247-header-actions {
		display: flex;
	}
}

/* ---------- Mobile sticky action bar ---------- */
/* Shown on small/medium screens only - desktop already has header CTAs
   and a visible phone number, so a persistent bottom bar isn't needed. */

.carassist247-mobile-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9998; /* stays below Hello's mobile nav dropdown (z-index 10000) */
	display: flex;
	background-color: var(--ca-color-surface);
	border-top: 1px solid var(--ca-color-border);
	box-shadow: var(--ca-shadow-lg);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.carassist247-mobile-bar__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2em;
	padding: 0.6em 0.4em;
	font-family: var(--ca-font-family);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ca-color-text);
	border-inline-end: 1px solid var(--ca-color-border);
	transition: transform var(--ca-transition-fast), background-color var(--ca-transition-fast);
}

.carassist247-mobile-bar__item:last-child { border-inline-end: none; }

.carassist247-mobile-bar__item[aria-disabled="true"] {
	color: var(--ca-color-text-muted);
	opacity: 0.55;
	cursor: not-allowed;
}

/* Press feedback for Call/Request/WhatsApp - not a hover state, since
   this bar only ever appears on touch-sized viewports. */
.carassist247-mobile-bar__item:not([aria-disabled="true"]):active {
	transform: scale(0.96);
	background-color: var(--ca-color-surface-alt);
}

.carassist247-mobile-bar__item--primary:not([aria-disabled="true"]):active {
	background-color: var(--ca-color-accent-hover);
}

.carassist247-mobile-bar__item--primary {
	background-color: var(--ca-color-accent);
	color: var(--ca-color-text-on-dark);
}

.carassist247-mobile-bar__item--whatsapp { color: var(--ca-color-whatsapp); }

.carassist247-mobile-bar__item .carassist247-icon { width: 18px; height: 18px; }
.carassist247-footer-social .carassist247-icon { width: 16px; height: 16px; }

@media (min-width: 1024px) {
	.carassist247-mobile-bar { display: none; }
}

body.carassist247-has-mobile-bar {
	padding-bottom: 64px;
}

@media (min-width: 1024px) {
	body.carassist247-has-mobile-bar {
		padding-bottom: 0;
	}
}

/* ---------- Footer (4-column structure) ---------- */

.site-footer {
	background-color: var(--ca-color-surface-alt);
	border-top: 1px solid var(--ca-color-border);
}

.site-footer .footer-inner {
	/* Overrides Hello's own flex/space-between default for .footer-inner
	   (fine when the footer only held branding+nav+copyright side by
	   side; our own grid below now owns the whole layout). */
	display: block;
	max-width: var(--ca-container-max);
	margin-inline: auto;
	padding-inline: var(--ca-gutter);
	padding-block: var(--ca-space-lg);
}

.carassist247-footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ca-space-lg);
}

@media (min-width: 768px) {
	.carassist247-footer-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ca-space-lg) var(--ca-space-md);
	}
}

@media (min-width: 1024px) {
	.carassist247-footer-columns {
		grid-template-columns: 1.3fr 1fr 1fr 1fr;
		gap: var(--ca-space-md);
	}
}

.carassist247-footer-col h3 {
	font-family: var(--ca-font-family);
	font-size: var(--ca-font-size-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ca-color-primary);
	margin: 0 0 var(--ca-space-sm);
}

.carassist247-footer-col p {
	margin: 0 0 var(--ca-space-sm);
	color: var(--ca-color-text-muted);
	font-size: var(--ca-font-size-small);
	line-height: 1.6;
}

.carassist247-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.carassist247-footer-col a:not(.carassist247-btn) {
	font-family: var(--ca-font-family);
	display: inline-block;
	padding-block: 2px;
	color: var(--ca-color-text);
	text-decoration: none;
	font-size: var(--ca-font-size-small);
}

.carassist247-footer-col a:not(.carassist247-btn):hover { color: var(--ca-color-primary); }

.carassist247-footer-col .carassist247-footer-whatsapp-link { color: var(--ca-color-whatsapp); }

.carassist247-footer-cta {
	margin-block: var(--ca-space-xs) var(--ca-space-sm);
}

.carassist247-footer-social {
	display: flex;
	gap: var(--ca-space-xs);
	margin-block-start: var(--ca-space-sm);
}

.carassist247-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--ca-radius-pill);
	background-color: var(--ca-color-surface);
	border: 1px solid var(--ca-color-border);
	color: var(--ca-color-primary);
}

.carassist247-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-space-sm);
	padding-block-start: var(--ca-space-md);
	margin-block-start: var(--ca-space-lg);
	border-block-start: 1px solid var(--ca-color-border);
	color: var(--ca-color-text-muted);
	font-size: var(--ca-font-size-caption);
}

.carassist247-footer-bottom p { margin: 0; }

.carassist247-footer-bottom-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-xs) var(--ca-space-sm);
}

.carassist247-footer-bottom-legal a {
	font-family: var(--ca-font-family);
	display: inline-block;
	padding-block: 2px;
	color: var(--ca-color-text-muted);
	text-decoration: none;
}

.carassist247-footer-bottom-legal a:hover { color: var(--ca-color-primary); }

@media (max-width: 767px) {
	.carassist247-footer-bottom {
		flex-direction: column;
		text-align: center;
	}

	.carassist247-footer-bottom-legal {
		justify-content: center;
	}
}

/* ==========================================================================
   UI test fixes (2026-10-16)
   ========================================================================== */

/* 5. Show which page you're on */
.site-header .site-navigation ul.menu li.current-menu-item > a,
.site-header .site-navigation ul.menu li.current_page_item > a,
.site-header .site-navigation ul.menu li.current-menu-ancestor > a,
.site-header .site-navigation ul.menu li.current-page-ancestor > a {
	color: var(--ca-color-primary);
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--ca-color-accent);
}

/* 10. Mobile menu: readable items, current page marked, page dimmed behind */
.site-navigation-dropdown ul.menu li a {
	color: var(--ca-color-text);
	font-family: var(--ca-font-family);
	font-weight: 500;
}
.site-navigation-dropdown ul.menu li.current-menu-item > a,
.site-navigation-dropdown ul.menu li.current_page_item > a,
.site-navigation-dropdown ul.menu li.current-page-ancestor > a {
	background: var(--ca-color-surface-alt);
	color: var(--ca-color-primary);
	font-weight: 700;
	box-shadow: inset 4px 0 0 var(--ca-color-accent), inset 0 -1px 0 rgba(0, 0, 0, 0.102);
}
/* Request Service button as the mobile menu's last item. Selectors match
   Hello's own `.site-navigation-dropdown ul.menu li a` so it doesn't win. */
.site-navigation-dropdown ul.menu li.carassist247-mobile-menu-cta {
	padding: var(--ca-space-sm) 20px;
	background: var(--ca-color-surface);
}
.site-navigation-dropdown ul.menu li.carassist247-mobile-menu-cta a.carassist247-btn,
.site-navigation-dropdown ul.menu li.carassist247-mobile-menu-cta a.carassist247-btn:hover {
	display: flex;
	padding: 0 var(--ca-space-md);
	box-shadow: none;
	color: var(--ca-color-text-on-dark);
	font-weight: var(--ca-font-weight-button);
}
.site-navigation-dropdown ul.menu li.carassist247-mobile-menu-cta a.carassist247-btn {
	background-color: var(--ca-color-accent);
}
.site-navigation-dropdown ul.menu li.carassist247-mobile-menu-cta a.carassist247-btn:hover {
	background-color: var(--ca-color-accent-hover);
}

/* Separate the open menu from the page beneath it */
.site-navigation-toggle-holder.elementor-active + .site-navigation-dropdown {
	box-shadow: 0 18px 30px rgba(16, 24, 40, 0.28);
}

/* 11. Footer side padding matches page content on phones */
@media (max-width: 767px) {
	.site-footer .footer-inner {
		padding-left: 26px;
		padding-right: 26px;
	}
}

/* 11. Header logo lines up with page content on phones */
@media (max-width: 767px) {
	.site-header .header-inner {
		padding-left: 26px;
		padding-right: 26px;
	}
}

/* Tablet: menu button sits at the far right, after the header buttons
   (visual order only - DOM order Hello's JS relies on is unchanged) */
@media (min-width: 768px) {
	.site-header .header-inner .carassist247-header-actions {
		order: 2;
	}
	.site-header .header-inner .site-navigation-toggle-holder {
		order: 3;
		margin-inline-start: var(--ca-space-xs);
	}
}

/* Hello Elementor gap: at exactly 992px its rules hide BOTH the desktop
   menu (max-width:992px) and the menu button (min-width:992px). Show the
   menu button at that one width so there is always a way to navigate. */
@media (min-width: 992px) and (max-width: 992px) {
	.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder {
		display: flex !important;
	}
}