/*
 * Visual flourishes layered on top of the base pattern — homepage, plus the
 * portfolio-page hero (shares the same scroll parallax; its link stayed the
 * gradient section's default white — rose read too dark there) and the
 * services page (its pricing cards share the hover lift). Card hover lift,
 * pink underlined links in the "three problems" cards, the "here's how this
 * works" blobs that only appear on hover, and a FAQ hover state. Scroll-
 * linked parallax (assets/js/homepage-interactions.js) is separate — this
 * file only carries its one CSS dependency (the static blob-reveal opacity
 * toggle), everything else here is plain CSS hover.
 */

/* Card hover lift — "three problems" and testimonial cards (homepage), plus
   the pricing cards on the services page. Not the float card variant (the
   homepage health-check callout), which wasn't part of this ask. */
.jjd-card--tint,
.jjd-card--testimonial,
.jjd-card--price {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jjd-card--tint:hover,
.jjd-card--testimonial:hover,
.jjd-card--price:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
}

/* Inline links in the "three problems" cards — on a blue-tinted background,
   a same-color link was too easy to miss. Rose + a real underline (not the
   emphasis squiggle) makes them read as clickable at a glance. */
.jjd-card--tint p a {
	color: var(--wp--preset--color--accent-rose);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.jjd-card--tint p a:hover,
.jjd-card--tint p a:focus-visible {
	color: var(--wp--preset--color--accent-rose-hover);
}

/* "Here's how this works" — the section's gradient blobs stay invisible
   until the visitor's mouse is over the row (assets/js/homepage-interactions.js
   toggles .is-hovering), instead of sitting there permanently like every
   other section's blobs. */
.jjd-blobs-on-hover .jjd-blob--tint {
	opacity: 0;
	transition: opacity 0.5s ease;
}
.jjd-blobs-on-hover.is-hovering .jjd-blob--tint {
	opacity: 0.9;
}

/* FAQ row hover — a soft tint and heading color shift so each question reads
   as interactive before it's even clicked. */
.jjd-faq__q {
	transition: background-color 0.15s ease;
	margin: 0 -16px;
	padding: 20px 16px;
	border-radius: 8px;
}
.jjd-faq__q:hover {
	background-color: var(--wp--preset--color--section-subtle);
}
.jjd-faq__q:hover h3 {
	color: var(--wp--preset--color--accent-blue);
}
.jjd-faq__q h3 {
	transition: color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.jjd-card--tint,
	.jjd-card--testimonial,
	.jjd-card--price,
	.jjd-blobs-on-hover .jjd-blob--tint,
	.jjd-faq__q,
	.jjd-faq__q h3 {
		transition: none;
	}
}