/* ==========================================================================
   Acton Autowerks — service pages

   Companion stylesheet for the six Elementor service pages.

   Colour, type, spacing, backgrounds and grid columns are all set through
   Elementor controls on the widgets themselves, so they stay editable in the
   panel. This file only carries what those controls cannot express: the
   chamfered button silhouette, the card and ledger decoration, the accordion
   treatment, and a handful of absolute placements.

   Selectors are written to survive Elementor's optimised markup experiment,
   which drops `.elementor-widget-container`, by reaching for the inner
   element directly rather than through a fixed wrapper chain.
   ========================================================================== */

.aaw-section,
.aaw-hero,
.aaw-trustband,
.aaw-phototrust {
	--aaw-primary: #0b5c7f;
	--aaw-black: #000000;
	--aaw-white: #ffffff;
	--aaw-on-dark: #dedede;
	--aaw-body: #555555;
	--aaw-tint: #deedf4;
	--aaw-chamfer: polygon(20% 0%, 100% 0, 100% 20%, 100% 82%, 92% 100%, 20% 100%, 0 100%, 0 0);
}

body.aaw-service .page-header,
body.aaw-service .entry-title {
	display: none;
}

.aaw-hero .elementor-invisible,
.aaw-card .elementor-invisible,
.aaw-card.elementor-invisible {
	visibility: visible !important;
	animation: none !important;
}
.aaw-section .elementor-heading-title,
.aaw-hero .elementor-heading-title,
.aaw-trustband .elementor-heading-title,
.aaw-phototrust .elementor-heading-title {
	margin: 0;
}

.aaw-section .elementor-widget-text-editor p:last-child,
.aaw-hero .elementor-widget-text-editor p:last-child,
.aaw-trustband .elementor-widget-text-editor p:last-child,
.aaw-phototrust .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* A right-direction entrance animation sits translated outside the container
   until it fires, which would otherwise widen the page. */
.aaw-section,
.aaw-trustband,
.aaw-phototrust {
	overflow-x: clip;
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* The hero photograph is graded dark on the left for the title, so the veil
   is angled rather than flat: heavy where the type sits, light where the work
   in the photograph should still read. Elementor 4 paints the overlay on the
   container's ::before, not on a child .elementor-background-overlay. */
.aaw-hero::before,
.aaw-hero > .elementor-background-overlay {
	background-image: linear-gradient(
			100deg,
			rgba(0, 0, 0, 0.82) 0%,
			rgba(0, 0, 0, 0.7) 34%,
			rgba(0, 0, 0, 0.36) 62%,
			rgba(0, 0, 0, 0.28) 100%
		),
		url("https://www.actonautowerks.com/wp-content/uploads/2025/07/main-banner-bg-overlay-img.png");
	background-position: center center, bottom right;
	background-repeat: no-repeat, no-repeat;
	background-color: transparent;
	opacity: 1;
}

@media (max-width: 767px) {
	.aaw-hero::before,
	.aaw-hero > .elementor-background-overlay {
		background-image: linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.78) 0%,
				rgba(0, 0, 0, 0.62) 100%
			),
			url("https://www.actonautowerks.com/wp-content/uploads/2025/07/main-banner-bg-overlay-img.png");
	}
}

/* Breadcrumbs -------------------------------------------------------------- */

.aaw-crumbs .elementor-icon-list-items {
	gap: 10px 0;
}

.aaw-crumbs .elementor-icon-list-item {
	align-items: center;
}

.aaw-crumbs .elementor-icon-list-item:not(:first-child) {
	margin-left: 10px;
}

.aaw-crumbs .elementor-icon-list-item:first-child .elementor-icon-list-icon {
	display: none;
}

.aaw-crumbs a:hover .elementor-icon-list-text {
	color: var(--aaw-white);
}

/* The last crumb is the current page and carries the weight, as on the live
   internal pages. */
.aaw-crumbs .elementor-icon-list-item:last-child .elementor-icon-list-text {
	color: var(--aaw-white);
	font-weight: 700;
}

@media (max-width: 767px) {
	.aaw-crumbs {
		display: none;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.aaw-btn .elementor-button {
	clip-path: var(--aaw-chamfer);
	transition: background-color 0.3s, color 0.3s;
}

.aaw-btn .elementor-button-content-wrapper {
	gap: 9px;
}

/* The call button is a link in the mockup, not a filled control: no padding,
   no background, the icon inheriting the label's colour. */
.aaw-callbtn .elementor-button {
	background: none;
	border: 0;
	transition: color 0.3s;
}

.aaw-callbtn .elementor-button-content-wrapper {
	gap: 9px;
	align-items: center;
}

.aaw-callbtn .elementor-button-icon {
	font-size: 18px;
	line-height: 1;
}

.aaw-actions > .elementor-widget {
	width: auto;
	max-width: none;
}

.aaw-or p {
	margin: 0;
}

/* ==========================================================================
   Section furniture
   ========================================================================== */

.aaw-lede .elementor-widget-container,
.aaw-lede p {
	max-width: 62ch;
}

/* Centred section headings hold a measure rather than running the full 1350. */
.aaw-head .elementor-heading-title {
	max-width: 1000px;
	margin-inline: auto;
}

/* A thin accent rule, used where the mockup opens a section with one. */
.aaw-rule .elementor-divider {
	padding-block: 0;
}

.aaw-rule .elementor-divider-separator {
	border-top-width: 3px;
	border-top-color: var(--aaw-primary);
}

/* Split figures ------------------------------------------------------------ */

.aaw-split-figure img {
	width: 100%;
	height: auto;
}

/* A cut-out sits straight on the section pattern: no frame, no crop. The
   transparency is the shape. */
.aaw-split-figure--cutout img {
	width: auto;
	max-width: 100%;
	max-height: 460px;
	margin-inline: auto;
}

/* A cut-out carrying its own light, so it needs no card or pedestal behind
   it. The glow is drawn under the image rather than baked into the file. */
.aaw-figure-glow {
	position: relative;
}

.aaw-figure-glow::before {
	content: "";
	position: absolute;
	inset: 8% 6%;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(11, 92, 127, 0.42) 0%,
		rgba(11, 92, 127, 0.16) 45%,
		rgba(11, 92, 127, 0) 72%
	);
	filter: blur(6px);
	pointer-events: none;
}

.aaw-figure-glow img {
	position: relative;
	z-index: 1;
	margin-inline: auto;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.aaw-card {
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s, box-shadow 0.3s;
}

.aaw-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1);
}

/* On the light bands the numeral overhangs the card's top edge and reads
   against the section behind it, exactly as on the live site. */
.aaw-card-num .elementor-heading-title {
	margin-top: -55px;
}

/* On a black band an overhanging numeral would float loose, so there it sits
   inside the card instead. */
.aaw-dark .aaw-card-num .elementor-heading-title {
	margin-top: 0;
}

@media (max-width: 1366px) {
	.aaw-card-num .elementor-heading-title {
		margin-top: -45px;
	}
}

@media (max-width: 767px) {
	.aaw-card-num .elementor-heading-title {
		margin-top: -38px;
	}
}

.aaw-card-box .elementor-icon-box-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.aaw-card-box .elementor-icon {
	border-radius: 10px;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* The framed icon fills on hover, the inversion the live cards use. */
.aaw-card:hover .aaw-card-box .elementor-icon {
	background-color: var(--aaw-primary);
	border-color: var(--aaw-primary);
	color: var(--aaw-white);
}

/* An approved label with no description still renders an empty paragraph. */
.aaw-card-box .elementor-icon-box-description:empty {
	display: none;
	margin: 0;
}

.aaw-card-box .elementor-icon-box-title {
	margin: 0;
}

/* Decorative wheel in the left gutter of a dark services band. Clipped by the
   section rather than allowed to widen the page, and dropped below 1200px
   where the grid fills the container and leaves no gutter to hold it. */
.aaw-section-wheel {
	position: absolute;
	top: 100px;
	left: max(24px, calc(50% - 875px));
	z-index: 0;
	width: clamp(280px, 26vw, 478px);
	pointer-events: none;
	user-select: none;
}

.aaw-section-wheel img {
	width: 100%;
	height: auto;
}

@media (max-width: 1199px) {
	.aaw-section-wheel {
		display: none;
	}
}

/* ==========================================================================
   Trust
   ========================================================================== */

/* A ring, not a disc: the photograph shows through it. */
.aaw-trustbadge {
	flex: none;
	align-self: center;
	aspect-ratio: 1;
}

.aaw-phototrust .aaw-trustbadge {
	align-self: flex-start;
}

.aaw-trustbadge-num .elementor-heading-title,
.aaw-trustbadge-label .elementor-heading-title {
	margin: 0;
}

.aaw-trustbadge-label .elementor-heading-title {
	max-width: 150px;
	margin-inline: auto;
}

/* Deepen the veil at the edges so the subject stays the brightest thing in
   frame while the centred copy still reads. */
.aaw-trustband::before,
.aaw-trustband > .elementor-background-overlay {
	background-image: radial-gradient(
		118% 88% at 50% 50%,
		rgba(0, 0, 0, 0.32) 0%,
		rgba(0, 0, 0, 0.55) 62%,
		rgba(0, 0, 0, 0.74) 100%
	);
	background-color: transparent;
}

.aaw-phototrust::before,
.aaw-phototrust > .elementor-background-overlay {
	background-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0.66) 48%,
		rgba(0, 0, 0, 0.34) 100%
	);
	background-color: transparent;
}

@media (max-width: 767px) {
	.aaw-phototrust::before,
	.aaw-phototrust > .elementor-background-overlay {
		background-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.8) 0%,
			rgba(0, 0, 0, 0.72) 100%
		);
	}
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.aaw-faq .e-n-accordion {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.aaw-faq .e-n-accordion-item {
	border-radius: 10px;
	background: var(--aaw-white);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.aaw-faq .e-n-accordion-item-title {
	gap: 24px;
	padding: 28px 32px;
	color: var(--aaw-black);
	cursor: pointer;
}

.aaw-faq .e-n-accordion-item-title-text {
	margin: 0;
}

/* Disclosure control: a chevron in a circle that fills as the item opens. */
.aaw-faq .e-n-accordion-item-title-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--aaw-tint);
	color: var(--aaw-primary);
	font-size: 13px;
	transition: background-color 0.3s, color 0.3s;
}

.aaw-faq .e-n-accordion-item[open] > .e-n-accordion-item-title {
	color: var(--aaw-primary);
}

.aaw-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
	background: var(--aaw-primary);
	color: var(--aaw-white);
}

.aaw-faq-answer-text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.aaw-faq .e-n-accordion-item-title {
		padding: 22px 24px;
	}

	.aaw-faq-answer {
		--padding-right: 24px;
		--padding-bottom: 24px;
		--padding-left: 24px;
	}
}

/* The split variant holds its heading column to the top of the questions. */
.aaw-faq-section--split .aaw-faq-head {
	align-self: flex-start;
}

/* ==========================================================================
   Ledger — numbered or iconographic service rows
   ========================================================================== */

.aaw-ledger-row {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	transition: transform 0.3s;
}

.aaw-ledger-row:hover {
	transform: translateX(6px);
}

.aaw-dark .aaw-ledger-row,
.aaw-ledger-section .aaw-ledger-row {
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.aaw-ledger-num .elementor-heading-title,
.aaw-ledger-label .elementor-heading-title {
	margin: 0;
}

/* The printed numerals are decorative — the sequence is already carried by
   the order of the rows. */
.aaw-ledger-num .elementor-heading-title {
	font-variant-numeric: tabular-nums;
}

/* The teal maintenance ledger: rows of icons and labels on the primary band. */
.aaw-ledger-section .aaw-ledger .elementor-icon-list-item {
	padding-block: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.aaw-ledger-section .aaw-ledger .elementor-icon-list-item:last-child {
	border-bottom: 0;
}

/* Two metrics either side of a connecting line. */
.aaw-metrics {
	position: relative;
}

.aaw-metric .elementor-heading-title {
	margin: 0;
}

@media (min-width: 768px) {
	.aaw-metrics::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: min(28%, 240px);
		height: 2px;
		transform: translate(-50%, -50%);
		background: linear-gradient(
			90deg,
			rgba(11, 92, 127, 0) 0%,
			rgba(11, 92, 127, 0.6) 50%,
			rgba(11, 92, 127, 0) 100%
		);
	}
}

/* ==========================================================================
   European Car Repair — brand chapters
   ========================================================================== */

.aaw-euro-chapter {
	border-radius: 16px;
}

.aaw-euro-chapter--graphite {
	background: #1c2226;
}

/* The plate is hung across the chapter's own top edge, and is decorative: the
   heading already announces the marque. */
.aaw-euro-plate img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.aaw-euro-tagline .elementor-heading-title {
	margin: 0;
	color: var(--aaw-primary);
}

.aaw-euro-leadin p {
	margin-bottom: 0;
	font-weight: 600;
}

.aaw-euro-item {
	position: relative;
	padding-left: 22px;
}

.aaw-euro-item::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aaw-primary);
}

.aaw-euro-item .elementor-heading-title {
	margin: 0;
}

.aaw-euro-closing p:last-child {
	margin-bottom: 0;
}

/* A photographic break carries no copy, so it needs an explicit height. */
.aaw-euro-break {
	min-height: 360px;
}

@media (max-width: 767px) {
	.aaw-euro-break {
		min-height: 220px;
	}
}

/* ==========================================================================
   Auto Body — panel-seam geometry
   ========================================================================== */

/* Every division on this page reads as a body panel seam. */
.aaw-body-seam .elementor-divider-separator {
	border-top-color: rgba(11, 92, 127, 0.35);
}

.aaw-body-route + .aaw-body-route {
	margin-top: 20px;
}

.aaw-body-panel img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.aaw-body-trust .elementor-heading-title {
	margin: 0;
}

/* ==========================================================================
   Motion
   ========================================================================== */

/* Elementor's entrance animations are applied through the panel, so honouring
   a reduced-motion preference is left to this one rule rather than to each
   widget's settings. */
@media (prefers-reduced-motion: reduce) {
	.aaw-section .elementor-invisible,
	.aaw-hero .elementor-invisible,
	.aaw-trustband .elementor-invisible,
	.aaw-phototrust .elementor-invisible {
		visibility: visible !important;
		opacity: 1 !important;
		animation: none !important;
	}

	.aaw-card,
	.aaw-ledger-row {
		transition: none;
	}
}

/* ==========================================================================
   Page-specific hero crops
   ========================================================================== */

.aaw-hero--electrical {
	background-position: 62% center;
}

.aaw-hero--transmission {
	background-position: center 62%;
}

/* The auto-body title sits on a bright reflector; deepen only that band. */
.aaw-hero--autobody::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 22%,
		rgba(0, 0, 0, 0.52) 42%,
		rgba(0, 0, 0, 0.52) 74%,
		rgba(0, 0, 0, 0) 92%
	);
}

.aaw-hero--autobody > .e-con-inner,
.aaw-hero--autobody > .elementor-container {
	position: relative;
	z-index: 2;
}

/* Maintenance trust: copy sits on the dark left half of the photograph. */
.aaw-trustband--maintenance::before,
.aaw-trustband--maintenance > .elementor-background-overlay {
	background-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.62) 0%,
		rgba(0, 0, 0, 0.5) 38%,
		rgba(0, 0, 0, 0.18) 66%,
		rgba(0, 0, 0, 0.1) 100%
	);
	background-color: transparent;
}

.aaw-trustband--maintenance .aaw-trustbadge {
	align-self: flex-start;
}

.aaw-trustband--maintenance .aaw-trustband-heading .elementor-heading-title,
.aaw-trustband--maintenance .aaw-trustband-copy {
	max-width: 680px;
}

@media (max-width: 1024px) {
	.aaw-trustband--maintenance::before,
	.aaw-trustband--maintenance > .elementor-background-overlay {
		background-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.5) 0%,
			rgba(0, 0, 0, 0.66) 55%,
			rgba(0, 0, 0, 0.78) 100%
		);
	}

	.aaw-trustband--maintenance .aaw-trustband-heading .elementor-heading-title,
	.aaw-trustband--maintenance .aaw-trustband-copy {
		max-width: 100%;
	}
}

/* ==========================================================================
   Maintenance ledger — two-up icon list on the teal band
   ========================================================================== */

.aaw-ledger-section .aaw-ledger .elementor-icon-list-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
}

.aaw-ledger-section .aaw-ledger .elementor-icon-list-icon {
	width: 44px;
	height: 44px;
	margin-right: 16px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	display: grid;
	place-items: center;
}

.aaw-ledger-section .aaw-ledger .elementor-icon-list-item:hover .elementor-icon-list-icon {
	background: var(--aaw-tint);
	color: var(--aaw-primary);
}

@media (max-width: 1024px) {
	.aaw-ledger-section .aaw-split-figure {
		order: 2;
	}
}

@media (max-width: 767px) {
	.aaw-ledger-section .aaw-ledger .elementor-icon-list-items {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   European hub — sticky brand index
   ========================================================================== */

/* Native position:sticky is constrained by this parent. Overflow clip on
   .aaw-section would make the index stick inside a short box, then leave
   the document when that box scrolls away. */
.aaw-euro-hub.aaw-section,
.aaw-euro-hub .e-con-inner {
	overflow: visible;
}

.aaw-euro-index {
	position: sticky;
	top: 150px;
	align-self: flex-start;
	z-index: 2;
}

.aaw-euro-chapter {
	scroll-margin-top: 160px;
}

.aaw-brandnav .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aaw-brandnav .elementor-icon-list-item {
	margin: 0;
}

.aaw-brandnav .elementor-icon-list-item .elementor-icon-list-icon {
	display: none;
}

.aaw-brandnav .elementor-icon-list-text {
	display: block;
	padding: 12px 16px;
	border-left: 2px solid rgba(11, 92, 127, 0.18);
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.aaw-brandnav a:hover .elementor-icon-list-text {
	color: var(--aaw-primary);
	background: rgba(222, 237, 244, 0.5);
}

.aaw-brandnav a[aria-current="true"] .elementor-icon-list-text {
	border-left-color: var(--aaw-primary);
	color: var(--aaw-primary);
	background: var(--aaw-tint);
}

@media (max-width: 1024px) {
	.aaw-euro-index {
		position: static;
		width: 100%;
	}

	.aaw-brandnav .elementor-icon-list-items {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		padding-bottom: 8px;
	}

	.aaw-brandnav .elementor-icon-list-text {
		white-space: nowrap;
		border-left: 0;
		border-bottom: 2px solid rgba(11, 92, 127, 0.18);
	}

	.aaw-brandnav a[aria-current="true"] .elementor-icon-list-text {
		border-left: 0;
		border-bottom-color: var(--aaw-primary);
	}
}

/* Graphite chapters are dark panels, not a pale tint. */
.aaw-euro-chapter--graphite {
	background: #1c2226;
}

/* Plate is a banner, short of the column width. */
.aaw-euro-plate {
	max-width: 660px;
}

.aaw-euro-plate img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}