/*
Theme Name: Bella Vista
Theme URI: https://bellavistalg.org
Description: Child theme for the Bella Vista HOA site in Los Gatos, California.
Author: Bella Vista HOA
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: bellavista
*/


/* Leo and Leona -- the two cats of Los Gatos, flanking the site title the way
   Robert Paine's 1922 statues flank the gates of "The Cats" estate.
   Leo (drowsy) sits on the left, Leona (alert) on the right; each faces inward. */
.bv-cat-wrap {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--wp--preset--color--contrast);
}

.bv-cat {
	display: block;
	width: auto;
	height: 42px;
}

/* Leona is drawn facing right like Leo, then mirrored so the pair face inward. */
.bv-cat--leona {
	transform: scaleX(-1);
}

@media (max-width: 781px) {
	.bv-cat {
		height: 30px;
	}
}

@media (max-width: 480px) {
	/* Too little room beside the title and the menu toggle; keep Leo only. */
	.bv-cat--leona {
		display: none;
	}
}

/* The hero fills the viewport but always leaves the site header legible. */
.bv-hero {
	position: relative;
}

.bv-hero h1 {
	text-wrap: balance;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.bv-hero .bv-hero__place {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* A hairline rule under the place name, sized to the text rather than the column. */
.bv-hero .bv-hero__rule {
	width: 4rem;
	height: 1px;
	margin: 0 auto;
	border: 0;
	background: currentColor;
	opacity: 0.55;
}

.bv-welcome {
	text-wrap: pretty;
}

/* Placeholder cards for sections that have no content yet. */
.bv-soon {
	border: 1px solid var(--wp--preset--color--tertiary);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
}

.bv-soon__label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.6;
}

@media (max-width: 781px) {
	.bv-hero h1 {
		font-size: clamp(2.5rem, 13vw, 4rem);
	}
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}