/*
 * GrowGrowLocal WP scaffold — custom utilities (the escape hatch).
 *
 * Enqueued as `abs-main`, after style.css and before Font Awesome. A site's
 * design pass lands in a separate design.css that loads after this one; keep
 * this file to things every site needs regardless of its design.
 *
 * Keep this file minimal. No design system here. Anything in this file must
 * be either (a) something Bootstrap 5 genuinely doesn't ship as a utility, or
 * (b) so deeply project-specific that it doesn't belong in Bootstrap.
 * EVERY RULE MUST BE PRECEDED BY A COMMENT JUSTIFYING THE BOOTSTRAP GAP.
 * If a Bootstrap utility covers the need, use the Bootstrap utility instead.
 * Consume Bootstrap variables (var(--bs-*)) — never hardcoded colors.
 *
 * Mirrors starter/assets/css/main.css — the conversion build overwrites this
 * copy with the demo's. Keep the two in lockstep so a site built without a
 * demo stage gets the same baseline.
 */

/*
 * --- Navbar logo needs a fixed pixel height ---
 * Bootstrap only ships percentage-based h-* utilities; a brand image needs a
 * fixed height so the navbar doesn't jump between pages.
 */
.abs-logo {
	height: 40px;
	width: auto;
}

/*
 * --- Inside-page hero (template-parts/page-hero.php) ---
 * Bootstrap has no photo-backdrop section with a fixed height. Every page but
 * the homepage opens with this one partial, and its height and layout live
 * HERE, not in a site's design.css, so they cannot drift from page to page.
 * design.css may restyle type, eyebrow, scrim tint and the __inner panel.
 */
.abs-page-hero {
	display: flex;
	align-items: center;
	min-height: clamp(16rem, 42vh, 24rem);
	padding-block: clamp(3rem, 8vw, 5rem);
	isolation: isolate;
	text-align: center;
}

.abs-page-hero--plain {
	background-color: var(--bs-tertiary-bg);
	border-bottom: 1px solid var(--bs-border-color);
}

/* White text over any photo: a .65 black scrim keeps even a white photo
   area at ~6:1 against white. */
.abs-page-hero--photo {
	color: var(--bs-white);
}

.abs-page-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.abs-page-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(var(--bs-black-rgb), .65);
}

.abs-page-hero__inner {
	max-width: 48rem;
	margin-inline: auto;
}

.abs-page-hero--photo .abs-page-hero__title {
	color: inherit;
}

.abs-page-hero__title {
	font-size: clamp(2rem, 3vw + 1.25rem, 3.25rem);
	margin-bottom: .75rem;
}

.abs-page-hero__eyebrow {
	letter-spacing: .12em;
}

.abs-page-hero__lede {
	margin-bottom: 0;
}