/* Bella Vista — bellavistalg.org
   Palette and type carried over from the previous WordPress theme so the
   rendering is unchanged. System fonts only: no webfonts, no external requests. */

:root {
	--base:      #faf8f4;
	--contrast:  #2b2621;
	--primary:   #a95b39;
	--tertiary:  #e2dbd0;
	/* Sampled from the "BELLA VISTA" wordmark in the logo, so the two are
	   literally the same blue rather than approximately. */
	--blue:      #105080;
	--blue-dark: #0b3a5d;
	--wa:        #25d366;
	--wa-dark:   #1da851;

	--font-display: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;
	--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--content: 680px;
	--wide: 1100px;
	--gutter: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--base);
	color: var(--contrast);
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	/* Keeps the footer on the floor when a page is shorter than the window --
	   one short announcement should not leave it floating mid-screen. svh so a
	   phone measures against the viewport with its chrome showing. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

/* 1 0 auto, not 1: the content grows into the spare room but never gets
   squeezed below its natural height on a long page. */
main { flex: 1 0 auto; }

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
}

a { color: var(--primary); }
a:hover { color: var(--contrast); }

img { max-width: 100%; height: auto; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--contrast);
	color: var(--base);
	padding: 0.75rem 1rem;
	z-index: 10;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */

.site-header {
	background: var(--base);
	padding: 0 var(--gutter);
}

/* Full width on purpose: the menu sits flush to the page gutter at every size,
   rather than stopping at a content-width edge and stranding itself inside the
   window on large screens. The three columns keep the chat button centred on
   the viewport. */
.site-header__bar {
	width: 100%;
	padding: 1.25rem 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}

.site-header__left   { justify-self: start; min-width: 0; }

/* The logo fills the left column, which was empty. Its height is capped at the
   menu button's, so the bar keeps exactly the height it had before -- the logo
   is the widest thing in the header, never the tallest. object-fit means that
   when the column does run out of room on a narrow phone, the image scales down
   inside its box instead of squashing. */
.site-header__logo { display: flex; min-width: 0; }
.site-header__logo img {
	display: block;
	height: 5rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}
.site-header__center { justify-self: center; }
.site-header__right  { justify-self: end; min-width: 0; }

/* A label, not a headline. The calendar below says what the page is far better
   than a display heading repeating it, so this reads as a quiet page marker --
   still the <h1> for screen readers and search, just not shouting. Living in the
   header rather than the page body keeps it tight under the logo. */
/* One centred line carrying both the breadcrumb and the page label, so getting
   back costs no extra row and no back button parked in a corner. */
.site-header__trail {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0 var(--gutter) 1rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.site-header__trail a {
	color: var(--contrast);
	opacity: 0.55;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.site-header__trail a:hover { opacity: 1; }
.site-header__trail a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.site-header__sep { opacity: 0.35; }

.site-header__label {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--contrast);
	opacity: 0.68;
}

/* No rule under the header: the calendar carries its own frame, and two borders
   a few pixels apart read as a mistake. Kept as a hook in case a future page
   with loose prose needs the header edge defined. */
.site-header--labelled { }

/* ---------- Menu ---------- */

/* A <details> disclosure, so the menu works with no JavaScript. */
.menu { position: relative; }

.menu__button {
	list-style: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-right: -0.55rem;
	border-radius: 6px;
	color: var(--contrast);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.menu__button::-webkit-details-marker { display: none; }
.menu__button::marker { content: ""; }
.menu__button:hover,
.menu[open] .menu__button { background: var(--tertiary); }
.menu__button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.menu__icon { width: 1.5rem; height: 1.5rem; }

.menu__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	min-width: 11rem;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	background: var(--base);
	border: 1px solid var(--tertiary);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(43, 38, 33, 0.14);
	z-index: 20;
}

.menu__panel a {
	padding: 0.55rem 0.75rem;
	border-radius: 4px;
	color: var(--contrast);
	text-decoration: none;
	white-space: nowrap;
}
.menu__panel a:hover { background: var(--tertiary); }
.menu__panel a[aria-current="page"] { font-weight: 600; }

/* WhatsApp brand green, so the link is recognisable at a glance. */
.chat {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--wa);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}
.chat:hover, .chat:focus-visible { background: var(--wa-dark); color: #fff; }
.chat__icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	/* Sized so the welcome copy and the top edge of the cards clear the fold on a
	   laptop -- a cut-off row is what tells people there is more below, and at the
	   old 86vh the hero ended within 12px of the fold and looked like the whole
	   page. Capped in rem as well, or a tall monitor just gets a bigger splash.
	   svh second so phones measure against the viewport with browser chrome
	   showing; the vh line stays as the fallback. */
	min-height: clamp(28rem, 68vh, 42rem);
	min-height: clamp(28rem, 68svh, 42rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3rem var(--gutter) 2.5rem;
	overflow: hidden;
	isolation: isolate;
}

.hero picture { display: contents; }

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

/* Darkens towards the head now that the copy sits at the top -- that is also
   where the photo is brightest, being open sky. The slight lift at the foot is
   a vignette, not legibility. */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(0,0,0,0.34) 0%,
		rgba(0,0,0,0.14) 28%,
		rgba(0,0,0,0.10) 60%,
		rgba(0,0,0,0.22) 100%);
}

.hero__inner {
	text-align: center;
	color: #fff;
	width: 100%;
	max-width: var(--wide);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(1.75rem, 4vw, 3rem);
}

.hero__welcome {
	margin: 0;
	font-size: clamp(1.15rem, 2.5vw, 1.75rem);
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 1px 16px rgba(0,0,0,0.55);
}

/* ---------- Cards ---------- */

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	text-align: left;
}

/* Sitting on the photograph, so the panels are glass rather than paper: a dark
   wash plus a blur keeps the copy legible over whichever part of the image
   happens to fall behind them, and the hairline lifts the edge off the picture.
   backdrop-filter is a progressive nicety -- without it the wash alone still
   carries the contrast. */
.card {
	/* Paper, not shade. Every dark variant read as a hole punched into a bright
	   sunny photograph -- that is what "negative" was describing, and thinning the
	   tint could never fix it because the polarity was wrong. A light panel in the
	   site's own paper colour sits *on* the image instead, and dark text on it
	   needs no shadow at all, which is most of what made the cards feel heavy. */
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 6px;
	background: rgba(250, 248, 244, 0.62);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	padding: 1.5rem 1.35rem;
	color: var(--contrast);
	display: block;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.card:hover,
.card:focus-visible {
	background: rgba(250, 248, 244, 0.86);
	border-color: rgba(255, 255, 255, 0.85);
	transform: translateY(-2px);
}
.card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.card__title { margin: 0 0 0.5rem; font-size: 1.25rem; color: var(--contrast); }
.card__body  { margin: 0; font-size: 0.9rem; color: var(--contrast); opacity: 0.82; }

/* ---------- Interior pages ---------- */

.page {
	max-width: var(--content);
	margin: 0 auto;
	padding: 1.25rem var(--gutter) 3.5rem;
}

/* The calendar needs the room; prose does not. */
.page--wide { max-width: var(--wide); }

.page__note { margin: 1rem 0 0; opacity: 0.7; text-align: center; }

/* ---------- News ---------- */

.news {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* Count of announcements from the past week, on the home page pod. */
.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.35rem;
	margin-left: 0.4rem;
	border-radius: 999px;
	background: #c0392b;
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: 0.18em;
}

/* A hairline between entries rather than around each one: announcements are a
   sequence, not a set of cards, and boxing them makes three notices look like a
   dashboard. */
.news__item + .news__item {
	border-top: 1px solid var(--tertiary);
	padding-top: 2.5rem;
}

.news__date {
	margin: 0 0 0.4rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.6;
}

.news__title { margin: 0 0 0.75rem; font-size: 1.5rem; }
.news__title a { color: inherit; text-decoration: none; }
.news__title a:hover { color: var(--primary); }
.news__excerpt { margin: 0; line-height: 1.7; text-wrap: pretty; }
.news__attach { font-size: 0.85rem; opacity: 0.6; margin-left: 0.35rem; }

.news__more  { margin: 1rem 0 0; }

/* ---------- Documents ---------- */

/* There is no summary here and there never will be -- the file name is the only
   thing telling a resident what a document is. So the name gets the weight of a
   heading and reads unmistakably as a link, and everything mechanical (format,
   size, date) drops to a quiet second line. */
.docs { list-style: none; margin: 0; padding: 0; }

.docs__item + .docs__item { border-top: 1px solid var(--tertiary); }

.docs__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 0.75rem;
	color: var(--contrast);
	text-decoration: none;
	border-radius: 5px;
	transition: background-color 0.15s ease;
}
.docs__link:hover { background: var(--tertiary); color: var(--contrast); }
.docs__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.docs__icon { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; color: var(--blue); opacity: 0.8; }

.docs__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }

.docs__name {
	font-family: var(--font-display);
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--blue);
	text-decoration: underline;
	text-decoration-color: rgba(16, 80, 128, 0.3);
	text-underline-offset: 3px;
}
.docs__link:hover .docs__name { text-decoration-color: currentColor; }

.docs__meta { font-size: 0.82rem; opacity: 0.6; }

/* Points off-site; these open in Drive. */
.docs__go { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; opacity: 0.35; }
.docs__link:hover .docs__go { opacity: 0.6; }

/* ---------- A single announcement ---------- */

.post__title { margin: 0.35rem 0 1.5rem; font-size: clamp(1.8rem, 4vw, 2.4rem); text-wrap: balance; }

/* Everything below comes from a Google Doc, stripped back to bare tags by the
   sync, so it is styled here rather than carrying Google's formatting in. */
.post__body { line-height: 1.75; text-wrap: pretty; }
.post__body > *:first-child { margin-top: 0; }
.post__body p { margin: 0 0 1.15rem; }
.post__body h2 { margin: 2rem 0 0.75rem; font-size: 1.45rem; }
.post__body h3 { margin: 1.75rem 0 0.6rem; font-size: 1.2rem; }
.post__body ul, .post__body ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.post__body li { margin: 0 0 0.4rem; }
.post__body img { max-width: 100%; height: auto; border-radius: 4px; margin: 1.5rem 0; }
.post__body blockquote {
	margin: 1.5rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--tertiary);
	opacity: 0.85;
}
.post__body table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
.post__body th, .post__body td { border: 1px solid var(--tertiary); padding: 0.5rem 0.7rem; text-align: left; }

.post__archived {
	margin: 0 0 1.5rem;
	padding: 0.7rem 1rem;
	border-radius: 5px;
	background: var(--tertiary);
	font-size: 0.9rem;
}

.post__back { margin: 2.5rem 0 0; }
.post__download { margin: 2rem 0 0; }
.post__size { opacity: 0.75; font-weight: 400; }

/* ---------- Calendar ---------- */

/* The frame carries the site's own border and paper rather than Google's, so an
   embedded widget does not announce itself as one. */
.calendar {
	margin-top: 0;
	border: 1px solid var(--tertiary);
	border-radius: 6px;
	overflow: hidden;
	background: var(--base);
}

.calendar__frame {
	display: block;
	width: 100%;
	height: clamp(34rem, 72vh, 44rem);
	border: 0;
}

.calendar__actions {
	margin: 1.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

.calendar__hint { font-size: 0.9rem; opacity: 0.7; }

.button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: var(--blue);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.button:hover, .button:focus-visible { background: var(--blue-dark); color: #fff; }
.button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Contact ---------- */

.contact {
	background: var(--tertiary);
	padding: 2.25rem var(--gutter) 2.5rem;
	text-align: center;
}

.contact__title { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.1rem); }
.contact p { margin: 0.75rem 0 0; }

/* Keeps the address and its copy button on one line together, so the button
   never wraps onto a line by itself. */
.emailish { white-space: nowrap; }

/* Deliberately not a mailto: link. On a machine with no mail client configured
   -- which is most people using webmail -- clicking one either does nothing or
   opens an app they never use. The address is plain selectable text and the
   button puts it on the clipboard. */
.email { font-weight: 500; }

.copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	margin-left: 0.35rem;
	padding: 0;
	vertical-align: -0.45rem;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--primary);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.copy:hover { background: rgba(43, 38, 33, 0.08); }
.copy:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.copy__icon { width: 1.15rem; height: 1.15rem; }
/* The UA `[hidden]` rule does not reliably reach SVG elements, and both icons
   would otherwise show at once. */
.copy__icon[hidden] { display: none; }
.copy__icon--done { color: #1da851; }

.copy__status {
	margin: 0.5rem 0 0;
	min-height: 1.2em;
	font-size: 0.85rem;
	opacity: 0.75;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--contrast);
	color: var(--base);
	padding: 2.5rem var(--gutter);
	text-align: center;
	font-size: 0.9rem;
}
.site-footer p { margin: 0 0 0.5rem; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--base); }

/* ---------- Responsive ---------- */

@media (max-width: 781px) {
	.cards { grid-template-columns: 1fr; }
	.hero { min-height: auto; }
	.site-header__logo img { height: 3.5rem; }
}

/* Keep the chat label at every width -- just tighten it so it still fits
   beside the menu button on the narrowest phones. */
@media (max-width: 430px) {
	:root { --gutter: 1rem; }
	.chat { padding: 0.45rem 0.75rem; font-size: 0.8rem; gap: 0.4rem; }
	.chat__icon { width: 1.05em; height: 1.05em; }
	.menu__button { width: 2.3rem; height: 2.3rem; margin-right: -0.4rem; }
	.site-header__logo img { height: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}