/* ==========================================================================
   Sunset Hill — theme styles
   Palette, type and layout come from theme.json. This file carries the
   components that blocks alone can't express: the hero panel, the page
   banner, the emergency notice, and the ruled column rows.
   ========================================================================== */

/* ---------- masthead ---------- */
.sh-masthead {
	position: relative;
	z-index: 10;
	background: var(--wp--preset--color--park-deep);
	margin-bottom: 0;
}
/* WordPress puts a default gap between top-level sections, which showed as a
   cream stripe between the green masthead and the hero. Sections here carry
   their own padding, so the gap is not needed. */
.wp-site-blocks > * + * { margin-block-start: 0; }
/* Same for the full-bleed sections stacked inside <main> — hero, dark bands
   and content blocks each carry their own padding, so any gap between them
   shows as a stripe of page background. */
.wp-site-blocks main > * + * { margin-block-start: 0; }
.sh-masthead + *,
.sh-hero,
.sh-banner,
.sh-band { margin-top: 0; margin-bottom: 0; }
/* Hero and banner heights are set in vh, which rarely resolves to a whole
   pixel. The browser rounds the section and its background differently, and
   the page background shows through as a hairline. Pull the next section up
   by a pixel to cover the seam. */
.wp-site-blocks main > .sh-hero + *,
.wp-site-blocks main > .sh-banner + * { margin-block-start: -1px; position: relative; z-index: 1; }
/* Interior pages and the front page both open on a dark banner, so the
   masthead is always white-on-dark. If a future template starts with a light
   section, give its wrapper .sh-masthead--dark and set these to ink. */
.sh-wordmark a,
.sh-wordmark {
	text-decoration: none;
	color: #fff;
}
.sh-wordmark .sh-name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}
.sh-wordmark .sh-sub,
.sh-wordmark .sh-est {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sage-light);
}
.sh-wordmark .sh-sub { margin-top: 5px; }
.sh-wordmark .sh-est { margin-top: 2px; opacity: 0.72; }

/* The navigation block inherits body text colour by default, which is ink on
   a dark green band — unreadable. State it explicitly and loudly. */
.sh-masthead .wp-block-navigation,
.sh-masthead .wp-block-navigation a,
.sh-masthead .wp-block-navigation a:visited,
.sh-masthead .wp-block-navigation .wp-block-navigation-item__content,
.sh-masthead .wp-block-page-list a {
	color: rgba(255, 255, 255, 0.94) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s, border-color 0.25s;
}
.sh-masthead .wp-block-navigation a {
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
}
.sh-masthead .wp-block-navigation a:hover,
.sh-masthead .wp-block-navigation .current-menu-item a {
	color: #fff !important;
	border-bottom-color: var(--wp--preset--color--sage);
}
/* Mobile overlay. The white !important above follows the links into this
   panel, so the panel must be dark or the menu renders white-on-white. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--park-deep) !important;
	padding: 60px 28px 40px;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list a {
	color: #fff !important;
	font-size: 15px;
	letter-spacing: 0.12em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: #fff !important;
	fill: currentColor;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { fill: currentColor; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 22px;
}

/* ---------- hero ---------- */
.sh-hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--wp--preset--color--park-deep);
}
.sh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right,
			rgba(43, 66, 49, 1) 0%,
			rgba(43, 66, 49, 1) 31%,
			rgba(43, 66, 49, 0.90) 44%,
			rgba(43, 66, 49, 0.55) 57%,
			rgba(0, 0, 0, 0.22) 70%,
			rgba(0, 0, 0, 0) 86%),
		url("../images/hero-spring-v2.jpg");
	background-size: cover;
	background-position: 50% 50%;
	filter: saturate(1.16) contrast(1.09);
}
.sh-hero > * { position: relative; z-index: 2; }
.sh-hero .sh-hero-content {
	max-width: 560px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	padding: 90px 0 90px;
}
.sh-hero .sh-hero-content > * { margin-left: 0; margin-right: auto; }
.sh-hero h1 {
	color: #fff !important;
	font-size: clamp(40px, 4.9vw, 58px);
	line-height: 1.08;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
}
.sh-hero h1 em {
	font-style: italic;
	color: #E4C9A8;
}
.sh-hero p {
	color: rgba(255, 255, 255, 0.88);
	max-width: 440px;
	line-height: 1.8;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

/* ---------- page banner ---------- */
.sh-banner {
	position: relative;
	min-height: 56vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: var(--wp--preset--color--park-deep);
}
.sh-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right,
			rgba(43, 66, 49, 0.97) 0%,
			rgba(43, 66, 49, 0.86) 45%,
			rgba(43, 66, 49, 0.42) 100%),
		url("../images/hero-spring-v2.jpg");
	background-size: cover;
	background-position: 50% 52%;
	filter: saturate(1.16) contrast(1.09);
}
.sh-banner--map::before {
	background-image:
		linear-gradient(to right,
			rgba(43, 66, 49, 0.95) 0%,
			rgba(43, 66, 49, 0.88) 40%,
			rgba(43, 66, 49, 0.80) 100%),
		url("../images/sunset-hill-map.jpg");
	background-position: 50% 12%;
	filter: none;
}
.sh-banner > * { position: relative; z-index: 2; }
.sh-banner .sh-banner-content {
	max-width: 820px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	padding: 96px 0 58px;
}
.sh-banner .sh-banner-content > * {
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}
.sh-banner h1 {
	color: #fff !important;
	font-size: clamp(38px, 5vw, 62px);
	line-height: 1.08;
}
.sh-banner h1 em { font-style: italic; color: #E4C9A8; }
.sh-banner p { color: rgba(255, 255, 255, 0.80); max-width: 600px; }

/* ---------- eyebrow ---------- */
.sh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 0;
}
.sh-eyebrow::before {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}
.sh-hero .sh-eyebrow,
.sh-banner .sh-eyebrow { color: var(--wp--preset--color--sage-light); }

/* ---------- dark band ---------- */
.sh-band {
	background: var(--wp--preset--color--park-deep);
	color: #fff;
}
.sh-band :where(h1, h2, h3, h4) { color: #fff !important; }
.sh-band p { color: rgba(255, 255, 255, 0.66); }
.sh-band .sh-eyebrow { color: var(--wp--preset--color--sage-light); }
.sh-band .wp-block-button__link {
	background: var(--wp--preset--color--limestone);
	color: var(--wp--preset--color--park-deep);
}

/* ---------- emergency panel ----------
   Deliberately high specificity: this text must never inherit body-copy
   colours. It has been unreadable once already. */
.wp-block-group.is-style-emergency {
	background: #8E4530;
	padding: 40px 36px;
	text-align: center;
}
.wp-block-group.is-style-emergency :where(p, span, strong, h1, h2, h3, h4) {
	color: #fff !important;
}
.wp-block-group.is-style-emergency .sh-call {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(30px, 4.4vw, 44px);
	line-height: 1.15;
	margin-bottom: 24px;
}
.wp-block-group.is-style-emergency .sh-then {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(21px, 2.6vw, 27px);
	line-height: 1.3;
	margin-bottom: 8px;
}
.wp-block-group.is-style-emergency .sh-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(32px, 4.8vw, 48px);
	line-height: 1.15;
	margin-bottom: 24px;
}
.wp-block-group.is-style-emergency .sh-number a {
	color: #fff !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
.wp-block-group.is-style-emergency .sh-site { font-size: 17px; }
.wp-block-group.is-style-emergency .sh-site a {
	color: #FFE2D6 !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 226, 214, 0.4);
}

/* ---------- callout ---------- */
.wp-block-group.is-style-callout {
	background: var(--wp--preset--color--limestone-deep);
	border-left: 3px solid var(--wp--preset--color--roof);
	padding: 28px 32px;
}
.wp-block-group.is-style-callout p:last-child { margin-bottom: 0; }

/* ---------- ruled columns ---------- */
.wp-block-columns.is-style-ruled { gap: 0; }
.wp-block-columns.is-style-ruled > .wp-block-column {
	padding: 6px 40px 0;
	border-left: 1px solid var(--wp--preset--color--rule);
}
.wp-block-columns.is-style-ruled > .wp-block-column:first-child {
	padding-left: 0;
	border-left: 0;
}
.wp-block-columns.is-style-ruled > .wp-block-column:last-child { padding-right: 0; }
.wp-block-columns.is-style-ruled h3 { margin-bottom: 10px; }
.wp-block-columns.is-style-ruled h3::before {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: var(--wp--preset--color--roof);
	margin-bottom: 20px;
}

/* ---------- footer ---------- */
.sh-footer {
	background: var(--wp--preset--color--limestone-deep);
	border-top: 1px solid var(--wp--preset--color--rule);
}
.sh-footer .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mid);
	text-decoration: none;
}
.sh-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--park-deep); }
.sh-footer .sh-copyright {
	text-align: center;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mid);
	margin: 0;
}
/* Appears automatically in the footer of password-protected pages, and can
   also be placed inline with [sh_members_notice]. */
.sh-members-notice {
	font-size: 13.5px;
	line-height: 1.65;
	font-style: italic;
	color: var(--wp--preset--color--ink-mid);
	max-width: 74ch;
	margin: 0 auto 20px;
	text-align: center;
}
.wp-block-post-content .sh-members-notice {
	text-align: left;
	border-left: 2px solid var(--wp--preset--color--rule);
	padding-left: 18px;
	margin: 0 0 28px;
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
	.sh-hero::before { background-position: 60% 50%; }
	.sh-hero .sh-hero-content { padding: 64px 0 72px; }
	.sh-banner { min-height: 44vh; }
	.sh-banner .sh-banner-content { padding: 64px 0 44px; }
	.wp-block-group.is-style-emergency { padding: 26px 22px; }
}

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

/* Columns stack at 781px in WordPress core; the dividers must switch at the
   same width or the two disagree on narrow laptops and tablets. */
@media (max-width: 781px) {
	.wp-block-columns.is-style-ruled > .wp-block-column {
		padding: 30px 0;
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--rule);
	}
	.wp-block-columns.is-style-ruled > .wp-block-column:first-child {
		border-top: 0;
		padding-top: 0;
	}
}