/*
 * cards.css: the shared pieces (Ticket #267). One card family, the section backgrounds for long
 * pages, and the scroll fade-in. Loaded on the site and in the editor (functions.php).
 */

/* Card family: the colour the row gives it (white unless a section style says otherwise), a soft shadow,
   a small radius. The older card looks share it. */
.leimer-card,
.leimer-about-card,
.leimer-prep-card,
.leimer-glance,
.leimer-service-card,
.fluentform.leimer-estimate-form {
	background-color: var(--leimer-card, #fff);
	color: var(--leimer-card-text, inherit);
	border-radius: 8px;
	box-shadow:
		0 1px 2px rgba(31, 31, 28, 0.06),
		0 8px 24px -10px rgba(31, 31, 28, 0.16);
}

.leimer-card {
	padding: var(--wp--preset--spacing--40);
}

.leimer-card-link {
	margin-block-end: 0;
	font-weight: 600;
}

/* Section styles, picked from a Group's Styles. Each paints its row and sets the card colour for the
   cards inside it, so a card never matches its row: white or dark cream on medium cream, medium or dark
   cream on paper, white on dark cream and sage, white (with dark text) on deep green. Deep green is for
   the estimate band, the footer, the licence row and one standout row a page. Sage is a rare callout,
   at most one row a page. */
.is-style-section-paper {
	--leimer-card: var(--wp--preset--color--tint);
	background-color: var(--wp--preset--color--paper);
}
.is-style-section-tint {
	--leimer-card: #fff;
	background-color: var(--wp--preset--color--tint);
}
.is-style-section-dark-cream {
	--leimer-card: #fff;
	background-color: var(--wp--preset--color--tint-dark);
}
.is-style-section-sage {
	--leimer-card: #fff;
	background-color: var(--wp--preset--color--sage);
}
.is-style-section-deep {
	--leimer-card: #fff;
	--leimer-card-text: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--accent-deep);
	color: #fff;
}
.is-style-section-deep :where(h1, h2, h3, h4, p, li, a) {
	color: inherit;
}
.is-style-section-deep a {
	color: #fff;
	text-decoration: underline;
}
/* Cards inside the deep green row go back to dark text, links included. */
.is-style-section-deep :is(.leimer-card, .leimer-about-card, .leimer-prep-card, .leimer-glance, .leimer-service-card, .leimer-ba-teaser__item) :where(h1, h2, h3, h4, p, li) {
	color: var(--wp--preset--color--ink);
}
.is-style-section-deep :is(.leimer-card, .leimer-about-card, .leimer-prep-card, .leimer-glance, .leimer-service-card, .leimer-ba-teaser__item) a {
	color: var(--wp--preset--color--accent);
}

/* A Before & After teaser row with nothing in it (fewer than three entries, a Work type with none) is
   not drawn, so no empty cream band is left behind. */
.leimer-ba-row:not(:has(.leimer-ba-teaser)) {
	display: none;
}

/* Fade-in: content is visible unless the script has run (it adds leimer-reveal-ready) and the item
   has not come into view yet. Reduced motion shows everything at once. */
.leimer-reveal {
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.leimer-reveal-ready .leimer-reveal:not(.is-visible) {
	opacity: 0;
	transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
	.leimer-reveal,
	.leimer-reveal-ready .leimer-reveal:not(.is-visible) {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* A card that sits dark cream on a paper row (Ticket #333: Contact's Where we work), so it never looks
   like the white form card beside it. */
.leimer-card--dark-cream {
	--leimer-card: var(--wp--preset--color--tint-dark);
}