/* Accounting Cafe site CSS. Scoped to ac- classes; state rules sit under .ac-js. */

/* ---------- Carousels ---------- */

.ac-js .ac-carousel__progress-fill {
	transition: width 0.3s ease;
}

.ac-carousel-btn svg {
	display: block;
}

/* Figma shows both arrows at full strength at the start, so a disabled arrow isn't dimmed (the progress bar shows the end). */
.ac-js .ac-carousel-btn:disabled,
.ac-js .ac-carousel-btn[aria-disabled="true"] {
	cursor: default;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ac-js .ac-carousel__progress-fill {
		transition: none;
	}
}

/* ---------- Header: Services dropdown ---------- */

.ac-has-subnav {
	position: relative;
}

.ac-subnav {
	position: absolute;
	top: 100%;
	left: -16px;
	z-index: 50;
	min-width: 280px;
	margin: 0;
	padding: 20px 8px 8px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

/* The padding-top bridges the gap so the pointer can travel from the link to the panel. */
.ac-subnav::before {
	content: "";
	position: absolute;
	inset: 12px 0 0;
	z-index: -1;
	background: var(--c-white);
	border-radius: var(--radius-card);
	box-shadow: 0 12px 32px rgba(59, 81, 110, 0.16);
}

.ac-has-subnav.is-open > .ac-subnav {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.ac-subnav li {
	margin: 0;
	padding: 0;
}

.ac-subnav a {
	display: block;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	color: var(--c-navy);
	font-family: var(--f-primary);
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.ac-subnav a:hover,
.ac-subnav a:focus-visible {
	background: var(--c-blue-pale);
	color: var(--c-slate);
	outline: none;
}

/* The phone menu is its own accordion; the dropdown is for the desktop row. */
@media (max-width: 767px) {
	.ac-subnav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-subnav {
		transition: none;
	}
}

/* ---------- Decor swooshes (Figma "bg · *__decor" exports) ----------
   Each host gets one ::before behind its content. Size and offset are the Figma values as a
   share of the host box, so the swoosh scales with the card. Opacity is baked into the SVGs.
   The --img-decor-* variables hold the image URLs; functions.php sets them with a ?v=filemtime
   query so a CDN never serves an old copy of a changed file. */

.ac-decor--intro,
.ac-panel--dark,
.ac-card--testimonial {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.ac-decor--intro::before,
.ac-panel--dark::before,
.ac-card--testimonial::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	/* the hosts are flex containers: without these the box stretches to the host height */
	align-self: flex-start;
	height: auto;
	background: var(--decor) no-repeat center / 100% 100%;
	aspect-ratio: var(--decor-ar);
	left: var(--decor-x);
	top: var(--decor-y);
	width: var(--decor-w);
	transform: var(--decor-t, none);
}

/* Intro card: 1358 x 477 in Figma; swoosh 625.65 x 1069.99 at (374.5, -268) */
.ac-decor--intro {
	--decor: var(--img-decor-intro);
	--decor-ar: 625.65 / 1069.99;
	--decor-x: 27.58%;
	--decor-y: -56.2%;
	--decor-w: 46.07%;
}

/* Why Us panel: 1867 x 1084; the swoosh is turned 90 degrees and spans 1376 x 2152 from (187, -544) */
.ac-panel--dark {
	--decor: var(--img-decor-panel);
	--decor-ar: 2151.67 / 1376.24;
	--decor-x: 46.9%;
	--decor-y: 49.1%;
	--decor-w: 115.25%;
	--decor-t: translate(-50%, -50%) rotate(90deg);
}

/* Testimonial cards: dark 552 x 582, swoosh 622.95 x 1237.6 at (62, -345); light 896 x 582,
   swoosh 798.73 x 1366 at (228, -347) */
.ac-card--testimonial.ac-card--dark {
	--decor: var(--img-decor-card-dark);
	--decor-ar: 622.947 / 1237.61;
	--decor-x: 11.2%;
	--decor-y: -59.3%;
	--decor-w: 112.9%;
}

.ac-card--testimonial:not(.ac-card--dark) {
	--decor: var(--img-decor-card-light);
	--decor-ar: 798.73 / 1365.99;
	--decor-x: 25.4%;
	--decor-y: -59.6%;
	--decor-w: 89.1%;
}

/* Mobile frame (383:1111) places the swooshes differently: intro 490 x 820 at (-59, -88) in the 370 x 582 card;
   Why Us 2400 x 1535 (unrotated) centred at 54.6% / 59.7% of the panel; light testimonial 502 x 859 at (-6, -135) in
   370 x 612. */
@media (max-width: 767px) {
	.elementor .ac-decor--intro {
		--decor-ar: 490.42 / 820;
		--decor-x: -15.9%;
		--decor-y: -15.1%;
		--decor-w: 132.5%;
	}

	.elementor .ac-panel--dark {
		--decor-x: 54.6%;
		--decor-y: 59.7%;
		--decor-w: 597%;
		--decor-t: translate(-50%, -50%) rotate(90deg);
	}

	.elementor .ac-card--testimonial:not(.ac-card--dark) {
		--decor-x: -1.7%;
		--decor-y: -22.06%;
		--decor-w: 135.7%;
	}
}

/* CTA + footer swoosh: one shape behind the CTA section and the footer, anchored to the footer.
   Figma 1920 wrap: swoosh turned -90 degrees, 1125 x 1739 at (-311, 183), page ends 1083px below its
   top; decor-footer.svg is already cropped there (viewBox starts at x 655.82), so it can't add scroll height. Sizes are vw
   (design px / 1920 * 100); the footer top sits 367px below the swoosh top. */
.elementor-location-footer {
	position: relative;
}

.elementor-location-footer::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background: var(--img-decor-footer) no-repeat center / 100% 100%;
	width: 56.4vw;
	height: 58.6vw;
	left: -15.1vw;
	top: -20.2vw;
	transform: rotate(-90deg);
}

/* Footer legal row: the coffee bean before "No Beans Left Uncounted" (class on the tagline in the footer template). */
.elementor .ac-footer-tagline::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background: var(--img-tagline-bean) no-repeat center / contain;
}