/*
Theme Name: Silver Springs Lodge
Template: sebo
Description: Silver Springs Lodge brand layer over the shared Sebo parent theme. Holds only what is specific to this lodge: theme.json palette and fonts, logos, header navigation, and lodge patterns. Everything else lives in the parent so a framework fix reaches every lodge in one deploy.
Author: Sebo Marketing
Author URI: https://sebomarketing.com
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: sebo-silver-springs-lodge
*/

/* =========================================================================
   Lodge components, shared with Six Lakes (the sl- class prefix is kept so page patterns stay interchangeable). Colors, fonts and spacing come from theme.json
   tokens; nothing here names a raw color.
   ========================================================================= */

/* The parent rings focus in `accent` on dark grounds. Here accent IS the dark
   ground (deep lake green), so the ring would vanish. Use base instead. */
.sb-on-dark :where(a, button, input, select, textarea):focus-visible,
.sl-on-accent :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------- section */
.sl-section {
	padding-block: var(--wp--preset--spacing--60);
}
.sl-section--tight {
	padding-block: var(--wp--preset--spacing--50);
}
.sl-section > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
.sl-section h2 {
	margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
}
.sl-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

/* ------------------------------------------------------------------ hero */
.sl-hero.wp-block-cover {
	min-height: 88vh;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	align-items: flex-end;
}
.sl-hero--short.wp-block-cover {
	min-height: 64vh;
}
/* A bottom-weighted scrim: the copy and tiles sit low, the sky stays bright. */
.sl-hero.wp-block-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent) 45%,
		color-mix(in srgb, var(--wp--preset--color--ink) 82%, transparent) 100%
	);
}
.sl-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	color: var(--wp--preset--color--base);
}
.sl-hero h1 {
	max-width: 18ch;
	margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.05;
}
.sl-hero .sl-hero__sub {
	max-width: 36rem;
	font-size: var(--wp--preset--font-size--large);
}
.sl-eyebrow-light {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

/* Stat tiles: the numbers guests look for first. */
.sl-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	gap: var(--wp--preset--spacing--10);
	max-width: 52rem;
	margin-block: var(--wp--preset--spacing--30);
}
.sl-stats > * {
	margin: 0;
}
.sl-stat {
	padding: 0.9rem 0.75rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent);
	color: var(--wp--preset--color--ink);
	text-align: center;
}
.sl-stat > * {
	margin: 0;
}
.sl-stat__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
}
.sl-stat__label {
	margin-block-start: 0.35rem !important;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------- buttons */
.sl-hero .wp-block-button__link,
.sl-btn-light .wp-block-button__link {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sl-hero .wp-block-button__link:hover,
.sl-btn-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--action);
}

/* ------------------------------------------------------------- reviews */
.sl-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--20);
}
.sl-reviews > * {
	margin: 0;
}
.sl-review {
	padding: var(--wp--preset--spacing--30);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}
.sl-review > * + * {
	margin-block-start: var(--wp--preset--spacing--10);
}
.sl-review__quote {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	line-height: 1.45;
}

/* --------------------------------------------------------------- cards */
.sl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.sl-cards > * {
	margin: 0;
}
.sl-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}
.sl-card > * {
	margin: 0;
}
.sl-card .wp-block-image,
.sl-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
}
.sl-card__body {
	flex: 1;
	padding: var(--wp--preset--spacing--30);
}
.sl-card__body > * + * {
	margin-block-start: var(--wp--preset--spacing--10);
}
.sl-card__body h3 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}
.sl-card__link a {
	font-weight: 700;
	text-decoration: none;
}
.sl-card__link a::after {
	content: " \2192";
}

/* Number before an eyebrow, as in "01 · The newest lodge". */
.sl-num {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- split image + text */
.sl-split .wp-block-image img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 16px;
}

/* ---------------------------------------- numbered list with hairlines */
/* No numbering on any list (Josh, Oct 8, 2026): items are set off by rules. */
ol.sl-list {
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
}
ol.sl-list > li {
	display: block;
	padding-block: 0.9rem;
	border-top: var(--wp--custom--rule--hairline);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}
ol.sl-list > li:last-child {
	border-bottom: var(--wp--custom--rule--hairline);
}
.has-accent-background-color ol.sl-list > li {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
}

/* ------------------------------------------------------------- gallery */
.sl-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--10);
}
.sl-gallery > * {
	margin: 0;
}
.sl-gallery .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
}
.sl-gallery .wp-element-caption {
	margin-block-start: 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------- sleeping arrangements */
.sl-rooms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--20);
}
.sl-rooms > * {
	margin: 0;
}
.sl-room {
	padding: var(--wp--preset--spacing--30);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	border: var(--wp--custom--rule--hairline);
}
.sl-room > * {
	margin: 0;
}
.sl-room > * + * {
	margin-block-start: 0.4rem;
}
.sl-room h3 {
	font-size: var(--wp--preset--font-size--large);
}

/* ----------------------------------------------------------- amenity chips */
ul.sl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
}
ul.sl-chips > li {
	margin: 0;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--rule--hairline);
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------- callout */
.sl-note {
	padding: var(--wp--preset--spacing--30);
	border-inline-start: 4px solid var(--wp--preset--color--action);
	border-radius: 0 12px 12px 0;
	background: var(--wp--preset--color--tint);
}
.sl-note > * {
	margin: 0;
}
.sl-note > * + * {
	margin-block-start: 0.5rem;
}

/* -------------------------------------------- Lodgix booking calendar */
.sl-lodgix {
	display: flex;
	justify-content: center;
}
.sl-lodgix iframe {
	width: 100%;
	max-width: 568px; /* Lodgix's 556px cap plus the 12px its layout overruns */
	height: 650px;
	overflow: hidden;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
}

/* ------------------------------------------------- floating call card */
.sl-call-card {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	max-width: 19rem;
	padding: 0.85rem 1.15rem 0.85rem 1.1rem;
	border-radius: 16px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
	text-decoration: none;
	transition: transform var(--wp--custom--transition--base);
}
.sl-call-card:hover {
	transform: translateY(-2px);
	color: var(--wp--preset--color--base);
}
.sl-call-card:focus-visible {
	outline-color: var(--wp--preset--color--action);
}
.sl-call-card__icon {
	display: block;
	flex: 0 0 2rem;
	height: 2rem;
	color: var(--wp--preset--color--gold);
}
.sl-call-card__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.sl-call-card__text {
	display: grid;
	line-height: 1.2;
}
.sl-call-card__eyebrow {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.8;
}
.sl-call-card__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
}
.sl-call-card__number {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
}
/* On phones it becomes a full-width bar; the number is the whole point. */
@media (max-width: 600px) {
	.sl-call-card {
		right: 0.75rem;
		bottom: 0.75rem;
		left: 0.75rem;
		max-width: none;
	}
	.sl-call-card__eyebrow {
		display: none;
	}
	body {
		padding-bottom: 5.5rem;
	}
}

/* ---------------------------------------------- header reservations pill */
.sl-header-cta .wp-block-button__link {
	padding: 0.6rem 1.15rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Six links plus the Reservations pill do not fit a tablet-width bar, and
   core only collapses the menu below 600px. Collapse it below 1100px. */
@media (min-width: 600px) and (max-width: 1099px) {
	.sb-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.sb-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
.sl-header-cta .wp-block-button__link {
	white-space: nowrap;
}

/* Tablet and down: the card shrinks to the icon and number so it never sits
   over a paragraph; the full label returns on wide screens. */
@media (max-width: 1099px) {
	.sl-call-card {
		padding: 0.55rem 1rem 0.55rem 0.9rem;
	}
	.sl-call-card__eyebrow,
	.sl-call-card__label {
		display: none;
	}
	.sl-call-card__number {
		font-size: var(--wp--preset--font-size--medium);
	}
}
@media (max-width: 600px) {
	.sl-call-card {
		justify-content: center;
	}
	.sl-call-card__number::before {
		content: "Call ";
		font-weight: 400;
	}
}

/* ------------------------------------------------------ Transparent header
   On pages that open with the photo hero, the header floats over the photo
   until the visitor scrolls; header.js then adds .is-compact and the normal
   white bar returns. The sticky wrapper is given zero height so the hero
   starts at the top of the page, under the header. */
.sl-has-hero .wp-site-blocks > .wp-block-template-part:has(.sb-header) {
	height: 0;
}
.sl-has-hero .sb-header:not(.is-compact) {
	border-bottom-color: transparent;
}
.sl-has-hero .sb-header::before {
	transition: opacity var(--wp--custom--transition--base);
}
.sl-has-hero .sb-header:not(.is-compact)::before {
	opacity: 0;
}
/* A soft top shade keeps the white links readable over a bright sky. */
.sl-has-hero .sb-header:not(.is-compact)::after {
	content: "";
	position: absolute;
	inset: 0 0 -2.5rem;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent) 0%,
		transparent 100%
	);
}
/* Over a hero photo the white wordmark shows; once the bar turns solid on
   scroll, the color one returns. Only one is ever displayed, so screen
   readers meet a single home link. */
.sl-logo {
	margin: 0;
	line-height: 0;
}
.sl-logo img {
	display: block;
	height: auto;
}
.sl-logo-white,
.sl-has-hero .sb-header:not(.is-compact) .sl-logo-color {
	display: none;
}
.sl-has-hero .sb-header:not(.is-compact) .sl-logo-white {
	display: block;
}
/* Top-level links and the menu button only: the dropdown and the open mobile
   overlay keep their light grounds and dark text. */
.sl-has-hero .sb-header:not(.is-compact) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.sl-has-hero .sb-header:not(.is-compact) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon,
.sl-has-hero .sb-header:not(.is-compact) .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base);
}
.sl-has-hero .sb-header:not(.is-compact) :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}
/* The hero's own top padding must clear the floating header. */
.sl-has-hero .sl-hero.wp-block-cover {
	padding-top: calc(var(--wp--preset--spacing--60) + 5rem);
}

/* =========================================================================
   Photo-led components (v2), after the client's mockup: photography goes
   edge to edge and carries the copy, instead of sitting in framed boxes.
   ========================================================================= */

/* Dark grounds: the parent's .sb-on-dark only re-colors links and focus
   rings, so text on the deep-green bands inherited ink and disappeared. */
.sl-on-accent,
.sl-on-accent :where(h1, h2, h3, h4, h5, h6, p, li),
.sl-band,
.sl-band :where(h1, h2, h3, h4, h5, h6, p, li) {
	color: var(--wp--preset--color--base);
}
.sl-on-accent .sb-eyebrow,
.sl-band .sb-eyebrow,
.sl-pcard .sb-eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}
.sl-on-accent a:not(.wp-block-button__link),
.sl-band a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------ photo cards (bento) */
.sl-pcard.wp-block-cover {
	min-height: 26rem;
	padding: var(--wp--preset--spacing--30);
	align-items: flex-end;
	justify-content: flex-start;
	overflow: hidden;
	border-radius: 0;
	color: var(--wp--preset--color--base);
}
.sl-pcard.wp-block-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		transparent 35%,
		color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent) 100%
	);
}
.sl-pcard .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}
.sl-pcard:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}
.sl-pcard .wp-block-cover__inner-container {
	position: static;
	z-index: 2;
	width: 100%;
	max-width: 30rem;
	margin: 0;
}
.sl-pcard .wp-block-cover__inner-container > * {
	position: relative;
	z-index: 2;
	margin: 0;
}
.sl-pcard .wp-block-cover__inner-container > * + * {
	margin-block-start: 0.6rem;
}
.sl-pcard h3 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	color: var(--wp--preset--color--base);
}
.sl-pcard p {
	color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
}
.sl-pcard .sl-card__link a {
	display: inline-block;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid currentColor;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
/* The whole card is the link target. */
.sl-pcard .sl-card__link a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
.sl-pcard .sl-card__link a:focus-visible {
	outline: none;
}
.sl-pcard:has(.sl-card__link a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: 3px;
}

.sl-bento {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr;
	grid-auto-rows: minmax(24rem, auto);
	gap: 1.1rem;
}
.sl-bento > * {
	margin: 0 !important;
}
.sl-bento > :nth-child(1) {
	grid-column: 1;
	grid-row: 1 / span 2;
}
.sl-bento > :nth-child(2) {
	grid-column: 2 / span 2;
	grid-row: 1;
}
@media (max-width: 900px) {
	.sl-bento {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: minmax(22rem, auto);
	}
	.sl-bento > :nth-child(1),
	.sl-bento > :nth-child(2) {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}
@media (max-width: 600px) {
	.sl-bento {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------- full-bleed feature split */
.sl-fsplit {
	padding: 0 !important;
}
.sl-fsplit > .wp-block-columns {
	gap: 0;
	margin: 0;
	align-items: stretch !important;
}
.sl-fsplit__text {
	align-self: center;
	padding: var(--wp--preset--spacing--60) clamp(1.5rem, 6vw, 6.5rem);
}
.sl-fsplit__text > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
.sl-fsplit__text h2 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.02;
}
.sl-fsplit__media {
	position: relative;
	align-self: stretch !important;
	min-height: 34rem;
}
.sl-fsplit__media > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.sl-fsplit__media > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
/* The copper caption box that overlaps the photo. */
.sl-badge {
	position: absolute;
	right: clamp(1rem, 5vw, 4.5rem);
	bottom: 0;
	z-index: 2;
	max-width: 24rem;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
}
.sl-badge > * {
	margin: 0;
	color: var(--wp--preset--color--base);
}
.sl-badge > * + * {
	margin-block-start: 0.5rem;
}
.sl-badge__line {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}
.sl-badge .sb-eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}
@media (max-width: 781px) {
	.sl-fsplit__media {
		min-height: 22rem;
	}
	.sl-fsplit > .wp-block-columns > .sl-fsplit__media {
		order: -1;
	}
}

/* --------------------------------------------------- full-bleed photo band */
.sl-band.wp-block-cover {
	min-height: 36rem;
	padding-block: var(--wp--preset--spacing--60);
}
.sl-band.wp-block-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--wp--preset--color--ink) 86%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--ink) 62%, transparent) 55%,
		color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) 100%
	);
}
.sl-band--center.wp-block-cover::before {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 58%, transparent);
}
.sl-band .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}
.sl-band .wp-block-cover__inner-container > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
.sl-band--center .wp-block-cover__inner-container {
	max-width: 46rem;
	text-align: center;
}
.sl-band--center .wp-block-buttons {
	justify-content: center;
}
.sl-band h2 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.04;
}
.sl-band ol.sl-list > li {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent);
}

/* ------------------------------------------------------ photo mosaic */
.sl-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 15rem;
	grid-auto-flow: dense;
	gap: 0.6rem;
}
.sl-mosaic > * {
	margin: 0 !important;
}
.sl-mosaic .wp-block-image,
.sl-mosaic .wp-block-image img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
}
.sl-mosaic > :nth-child(6n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}
.sl-mosaic > :nth-child(6n + 4) {
	grid-column: span 2;
}
.sl-mosaic .wp-element-caption {
	display: none;
}
@media (max-width: 781px) {
	.sl-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 11rem;
	}
}

.sl-review__stars {
	color: var(--wp--preset--color--action);
	letter-spacing: 0.15em;
}
.sl-review .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Outline buttons on photo bands and dark grounds: light, not copper. */
.sl-band .wp-block-button.is-style-outline > .wp-block-button__link,
.sl-on-accent .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--base);
	background: transparent;
	color: var(--wp--preset--color--base);
}
.sl-band .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.sl-on-accent .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}
/* Bright skies at the top of a card need a deeper scrim behind the copy. */
.sl-pcard.wp-block-cover::before {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent) 45%,
		color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent) 100%
	);
}
.sl-pcard .wp-block-cover__inner-container {
	text-shadow: 0 1px 12px color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
}

/* Compact (scrolled) header keeps the full sign, smaller (as on River Home,
   Josh, Oct 23, 2026: the main logo in the sticky header; the mark is the
   favicon only). 140 x 84px: "Silver Springs" stays readable. */
@media (min-width: 782px) {
	.sb-header.is-compact .sl-logo img {
		width: 140px !important;
		height: 84px;
	}
}

/* The call card sits a third of the way down the screen on wider screens,
   where it is in the eye line rather than tucked in the corner. */
@media (min-width: 601px) {
	.sl-call-card {
		top: 33vh;
		bottom: auto;
		right: 0;
		border-radius: 16px 0 0 16px;
	}
}

/* ---------------------------------------------------------- booking pages */
.sl-book-phone {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.sl-book-phone > * {
	margin: 0;
	color: var(--wp--preset--color--base);
}
.sl-book-phone > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
.sl-book-phone .sb-eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}
.sl-book-phone__number a,
.sl-hero .sl-hero__phone a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.6rem, 5vw, 4.25rem);
	line-height: 1;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
.sl-hero .sl-hero__phone {
	margin-block: var(--wp--preset--spacing--20) 0;
}
.sl-hero .sl-hero__phone a:hover,
.sl-hero .sl-hero__phone a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.sl-hero--call .wp-block-button:first-child .wp-block-button__link {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
}
.sl-hero--call .wp-block-button:first-child .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--action);
}
.sl-hero .sl-hero__phone-note {
	margin-block: 0.25rem 0;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.9;
}
.sl-book-phone .wp-block-button__link {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	padding: 1rem 1.75rem;
}
.sl-book-phone .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--action);
}
.sl-book-grid > .wp-block-columns {
	align-items: flex-start !important;
	gap: var(--wp--preset--spacing--40);
}
.sl-book-grid .sl-stats {
	margin-block: var(--wp--preset--spacing--20) 0;
}
.sl-book-grid .sl-stat {
	background: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
	color: var(--wp--preset--color--base);
}
.sl-book-grid .sl-stat__label {
	color: color-mix(in srgb, var(--wp--preset--color--base) 75%, transparent);
}

/* Booking pages: a short banner, so the phone panel and calendar show
   without scrolling on a laptop screen. */
.sl-hero--compact.wp-block-cover,
.sl-has-hero .sl-hero--compact.wp-block-cover {
	min-height: 0;
	padding-top: calc(var(--wp--preset--spacing--40) + 5rem);
	padding-bottom: var(--wp--preset--spacing--40);
}
.sl-hero--compact h1 {
	font-size: var(--wp--preset--font-size--xxx-large);
	max-width: none;
}
.sl-section.sl-book-grid {
	padding-block-start: var(--wp--preset--spacing--40);
}
/* Both booking columns start at the top; centered, the phone panel sat
   ~300px lower than the calendar beside it. */
.sl-book-grid .wp-block-columns {
	align-items: flex-start !important;
}
.sl-book-grid .wp-block-column {
	align-self: flex-start !important;
}
.sl-hero--compact.wp-block-cover,
.sl-has-hero .sl-hero--compact.wp-block-cover {
	padding-top: calc(var(--wp--preset--spacing--30) + 4.5rem);
	padding-bottom: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------ mega-nav
   The Lodge opens a full-width panel: a column per building, each with a
   photo, its name, and Overview / Floor plan & rooms / Rates & availability.
   Built from core navigation blocks (nested submenus), so it stays editable
   and the mobile overlay simply lists everything.
   WordPress also puts a submenu's custom class on its <ul>, so every
   selector here names the <li>. */
@media (min-width: 1100px) {
	/* Position the panel against the header bar, not "The Lodge" item. */
	.sb-header .wp-block-navigation,
	.sb-header .wp-block-navigation__responsive-container,
	.sb-header .wp-block-navigation__responsive-container-content,
	.sb-header .wp-block-navigation__responsive-dialog,
	.sb-header .wp-block-navigation li.sl-mega {
		/* Core sets these relative with a :not(.is-menu-open) chain that
		   outranks a plain selector; this only applies at desktop widths. */
		position: static !important;
	}
	.sb-header li.sl-mega > .wp-block-navigation__submenu-container {
		left: 0 !important;
		right: 0;
		top: 100%;
		width: auto !important;
		min-width: 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--30);
		border: 0;
		border-radius: 0 0 16px 16px;
		background: var(--wp--preset--color--base);
		box-shadow: var(--wp--preset--shadow--soft);
	}
	/* Columns are always expanded inside the panel. They inherit the panel's
	   visibility, so they disappear with it rather than lingering on screen. */
	.sb-header li.sl-mega li.sl-mega__col {
		display: block;
		position: static;
	}
	.sb-header li.sl-mega li.sl-mega__col > .wp-block-navigation__submenu-container {
		position: static;
		visibility: inherit;
		opacity: inherit;
		width: auto;
		height: auto;
		min-width: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	.sb-header li.sl-mega li.sl-mega__col > .wp-block-navigation__submenu-icon {
		display: none;
	}
	.sb-header li.sl-mega li.sl-mega__col::before {
		content: "";
		display: block;
		aspect-ratio: 56 / 34;
		margin-bottom: 0.85rem;
		border-radius: 10px;
		background: var(--wp--preset--color--surface) center / cover no-repeat;
	}
	.sb-header li.sl-mega li.sl-mega-main::before { background-image: url("assets/img/nav-main-lodge.jpg"); }
	.sb-header li.sl-mega li.sl-mega-retreat::before { background-image: url("assets/img/nav-retreat.jpg"); }
	.sb-header li.sl-mega li.sl-mega-amenities::before { background-image: url("assets/img/nav-amenities.jpg"); }
	.sb-header li.sl-mega li.sl-mega__col > .wp-block-navigation-item__content {
		padding: 0 0 0.5rem;
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--large);
		line-height: 1.2;
		color: var(--wp--preset--color--ink);
	}
	.sb-header li.sl-mega li.sl-mega__col > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.3rem 0;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--muted);
	}
	.sb-header li.sl-mega li.sl-mega__col > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--action);
	}
}

/* ---------------------------------------------------- floor plan & rooms */
.sl-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--20);
}
.sl-plans > * {
	margin: 0 !important;
}
.sl-plans .wp-block-image img {
	width: 100%;
	border: var(--wp--custom--rule--hairline);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
}
.sl-plans .wp-element-caption {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.sl-jump {
	margin-block-start: var(--wp--preset--spacing--30) !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: 2;
}
.sl-room-row.wp-block-columns {
	align-items: flex-start !important;
}
.sl-room-row .wp-block-column {
	align-self: flex-start !important;
}
.sl-room-photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}
.sl-room-photos > * {
	margin: 0 !important;
}
.sl-room-photos > :only-child,
.sl-room-photos > :nth-child(3):last-child {
	grid-column: 1 / -1;
}
.sl-room-photos .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}
@media (min-width: 1100px) {
	.sb-header li.sl-mega li.sl-mega__col > .wp-block-navigation-item__content {
		padding-inline: 0 !important;
		margin: 0;
	}
}

/* Hover bridge: core closes a submenu on pointerleave, and the panel starts
   at the bottom of the header bar, below "The Lodge" link. This invisible
   strip belongs to the panel (so to the <li>) and spans that gap. */
@media (min-width: 1100px) {
	.sb-header .wp-block-navigation li.sl-mega > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 2.5rem;
	}
}

.sl-footer-logo {
	margin: 0;
	line-height: 0;
}
.sl-footer-logo img {
	max-width: 100%;
	height: auto;
}

/* Booking pages already lead with the "Book by phone" panel, and at a third
   of the way down the floating card sat over the calendar's month arrow.
   Phones keep the bottom call bar. */
@media (min-width: 601px) {
	body:has(.sl-book-phone) .sl-call-card {
		display: none;
	}
}

/* Booking pages show exactly four stats: a 2x2 block reads as a set. */
.sl-book-grid .sl-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Gallery captions: a short label over the foot of each photo, on a soft
   scrim so it reads on any image. Only galleries built with captions. */
.sl-mosaic.sl-captioned .wp-block-image {
	position: relative;
	overflow: hidden;
}
.sl-mosaic.sl-captioned .wp-element-caption {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 2.25rem 0.85rem 0.7rem;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent));
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	pointer-events: none;
}
.sl-mosaic.sl-captioned img {
	cursor: zoom-in;
}

/* Mosaic rhythm, per set of six on a 4-column grid: one 2x2 feature, two
   singles, then three wide tiles. 4 + 1 + 1 + 2 + 2 + 2 = 12 cells, exactly
   three rows, so sets of six never leave holes. */
.sl-mosaic > :nth-child(6n + 4),
.sl-mosaic > :nth-child(6n + 5),
.sl-mosaic > :nth-child(6n + 6) {
	grid-column: span 2;
	grid-row: auto;
}
/* Three photos (the lodge pages): one even row. */
.sl-mosaic:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 17rem;
}
.sl-mosaic:has(> :nth-child(3):last-child) > * {
	grid-column: auto;
	grid-row: auto;
}
@media (max-width: 781px) {
	.sl-mosaic > :nth-child(6n + 4),
	.sl-mosaic > :nth-child(6n + 5),
	.sl-mosaic > :nth-child(6n + 6) {
		grid-column: span 2;
	}
	.sl-mosaic:has(> :nth-child(3):last-child) {
		grid-template-columns: 1fr;
		grid-auto-rows: 14rem;
	}
}

/* The parent caps paragraphs at 68ch for line length. In a centered band
   that left-anchored box pushed short lines (the eyebrow) off center, so
   centered paragraphs center their box too. */
.sl-band--center .wp-block-cover__inner-container > p,
:where(.entry-content) p.has-text-align-center {
	margin-inline: auto;
}

/* ------------------------------------------------------------- blog index */
.sl-blog-subhead {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xx-large);
}
.sl-blog-latest {
	margin-block-end: var(--wp--preset--spacing--50);
}
.paged .sl-blog-latest,
.paged .sl-blog-more {
	display: none;
}
/* Photo cards: image fills the card, date and title over a scrim. */
.sl-latest-grid,
.sl-related-grid {
	display: grid;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sl-latest-grid {
	grid-template-columns: 1.15fr 1fr 1fr;
	grid-auto-rows: minmax(15rem, auto);
}
.sl-latest-grid > :nth-child(1) {
	grid-column: 1;
	grid-row: 1 / span 2;
}
.sl-latest-grid > :nth-child(2) {
	grid-column: 2 / span 2;
}
.sl-related-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 17rem;
}
.sl-latest-grid > li,
.sl-related-grid > li {
	margin: 0;
}
.sl-latest-card {
	position: relative;
	height: 100%;
	min-height: 15rem;
	overflow: hidden;
	border-radius: 0;
	background: var(--wp--preset--color--accent);
}
.sl-latest-card > * {
	margin: 0 !important;
}
.sl-latest-card .wp-block-post-featured-image,
.sl-latest-card .wp-block-post-featured-image a,
.sl-latest-card .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.sl-latest-card .wp-block-post-featured-image img {
	transition: transform 0.6s ease;
}
.sl-latest-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}
.sl-latest-card__body {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	padding: 3.5rem var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent));
	color: var(--wp--preset--color--base);
}
.sl-latest-card__body > * {
	margin: 0;
}
.sl-latest-card__date {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
}
.sl-latest-card__body .wp-block-post-title {
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}
.sl-latest-grid > :nth-child(1) .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
}
.sl-latest-card__body .wp-block-post-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
/* The whole card is the link. */
.sl-latest-card__body .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: -100vh 0 0;
}
.sl-latest-card:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: 3px;
}
@media (max-width: 900px) {
	.sl-latest-grid {
		grid-template-columns: 1fr 1fr;
	}
	.sl-latest-grid > :nth-child(1),
	.sl-latest-grid > :nth-child(2) {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 20rem;
	}
	.sl-related-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 15rem;
	}
}
@media (max-width: 600px) {
	.sl-latest-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------ blog posts */
.sl-hero-post.wp-block-cover {
	min-height: 62vh;
	background-color: var(--wp--preset--color--accent);
}
.sl-hero-post h1 {
	max-width: 22ch;
	font-size: var(--wp--preset--font-size--xxx-large);
}
.sl-hero-post .sl-eyebrow-light a {
	color: inherit;
	text-decoration: none;
}
/* Post text and photos use the full wide container, like the rest of the site. */
.single-post .entry-content > .wp-block-post-content {
	max-width: var(--wp--style--global--wide-size) !important;
}
.single-post .entry-content > .wp-block-post-content > * {
	max-width: none;
	margin-inline: 0 !important;
}
.single-post .entry-content > .wp-block-post-content > p {
	font-size: 1.125rem;
	line-height: 1.75;
}
.single-post .entry-content > .wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xx-large);
}
/* Photos break out a little wider than the text, for rhythm. */
.single-post .entry-content > .wp-block-post-content > .wp-block-image,
.single-post .entry-content > .wp-block-post-content > .wp-block-gallery {
	margin-block: var(--wp--preset--spacing--40) !important;
}
.single-post .entry-content .wp-block-image img {
	width: 100%;
	height: auto;
}
.single-post .entry-content .wp-block-gallery {
	gap: 0.75rem;
}
.single-post .entry-content .wp-block-gallery .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.sl-post-cta {
	padding-block: var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--50);
}
.sl-post-cta > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}
.sl-post-related {
	padding-block: var(--wp--preset--spacing--50);
}

/* Square corners on every blog photo, like the rest of the site. */
.sb-post-card .wp-block-post-featured-image img,
.single-post .entry-content img {
	border-radius: 0;
}
.sl-post-back {
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.sl-post-back a,
.sl-archive-back a {
	color: inherit;
	text-decoration: none;
}
.sl-post-back a:hover,
.sl-archive-back a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------ home hero fade */
/* Three photos cross-fade, about 7s each. CSS only, no controls. */
.sl-hero--fade .sl-hero__slide {
	opacity: 0;
	animation: 21s ease-in-out infinite;
}
.sl-hero--fade .sl-hero__slide--2 {
	animation-name: sl-fade-2;
}
.sl-hero--fade .sl-hero__slide--3 {
	animation-name: sl-fade-3;
}
@keyframes sl-fade-2 {
	0%, 28% { opacity: 0; }
	33%, 66% { opacity: 1; }
	70%, 100% { opacity: 0; }
}
@keyframes sl-fade-3 {
	0%, 61% { opacity: 0; }
	66%, 95% { opacity: 1; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-hero--fade .sl-hero__slide {
		animation: none;
	}
}

/* ------------------------------------------------- reviews: one row */
.sl-reviews {
	/* Contains the cards' visually hidden star text, which is absolutely
	   positioned; without this it escapes the row and widens the page. */
	position: relative;
	display: flex;
	gap: var(--wp--preset--spacing--20);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block: 0.5rem 1rem;
}
.sl-reviews::-webkit-scrollbar {
	display: none;
}
.sl-reviews > .sl-review {
	flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--20)) / 3);
	scroll-snap-align: start;
}
@media (max-width: 900px) {
	.sl-reviews > .sl-review {
		flex-basis: calc((100% - var(--wp--preset--spacing--20)) / 2);
	}
}
@media (max-width: 600px) {
	.sl-reviews > .sl-review {
		flex-basis: 88%;
	}
}
.sl-reviews__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-block-start: var(--wp--preset--spacing--10);
}
.sl-reviews__btn {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--tint);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.sl-reviews__btn:hover {
	border-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--action);
}
.sl-reviews__btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

/* Lake list: no numbers; the lake's name on its own line above its description. */
ol.sl-lakes > li {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}
ol.sl-lakes > li > strong {
	display: block;
	margin-block-end: 0.2rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.2;
}

/* Numbered lists in posts and pages show bullets instead of numbers. */
:where(.entry-content) ol:not(.sl-list) {
	list-style-type: disc;
}

/* Split with several photos: a 2x2 grid of tiles filling the photo half. */
.sl-fsplit__media > .sl-fsplit__tiles {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
	margin: 0;
}
.sl-fsplit__tiles > .wp-block-image {
	margin: 0;
	min-height: 0;
	overflow: hidden;
}
.sl-fsplit__tiles > .wp-block-image {
	position: relative;
}
/* Drawn at its real cropped size (full height, natural width, centered) rather
   than squeezed into the cell with object-fit, so the browser's automatic
   image sizing sees the true width and downloads a sharp enough file. */
.sl-fsplit__tiles > .wp-block-image img {
	position: absolute;
	top: 0;
	left: 50%;
	width: auto;
	min-width: 100%;
	max-width: none;
	height: 100%;
	transform: translateX(-50%);
	border-radius: 0;
}

/* Booking panels show stats two across; an odd last tile spans the row. */
.sl-book-grid .sl-stats > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Network credit (parent inc/network-credit.php): white over the hero photo,
   like the logo above it. */
.sl-has-hero .sb-header:not(.is-compact) .sb-network-credit {
	color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
}
.sl-has-hero .sb-header:not(.is-compact) .sb-network-credit:hover {
	color: var(--wp--preset--color--base);
}
.sl-has-hero .sb-header:not(.is-compact) .sb-network-credit__mark {
	display: none;
}
.sl-has-hero .sb-header:not(.is-compact) .sb-network-credit__mark--light {
	display: block;
}

/* Footer legal line: wrap between phrases, never inside one. */
.sl-nowrap {
	white-space: nowrap;
}

/* Cliff Lake hero (Josh's drawing, Oct 15): the lodge's tiles and the camper
   cabins' tiles side by side, each under its own label, with the season rule
   in a copper tag beneath. */
.sl-statsets {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--30);
}
.sl-statsets > * {
	margin: 0;
}
.sl-statset__label {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
}
.sl-statset .sl-stats {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}
.sl-statset .sl-stat {
	min-width: 7.5rem;
}
/* A word, not a number: smaller so it sits level with the numbers. */
.sl-stat__num--text {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.33;
}
.sl-season-tag {
	flex-basis: 100%;
	max-width: 46rem;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: 8px;
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.45;
}
@media (max-width: 600px) {
	.sl-statset,
	.sl-statset .sl-stats {
		width: 100%;
	}
	.sl-statset .sl-stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sl-statset .sl-stat {
		min-width: 0;
	}
}

/* Five sleeping-arrangement blocks (Eagle Cabin): three on top, two below,
   so the last row doesn't leave a lone block. */
@media (min-width: 782px) {
	.sl-rooms:has(> :nth-child(5):last-child) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.sl-rooms:has(> :nth-child(5):last-child) > * {
		grid-column: span 2;
	}
	.sl-rooms:has(> :nth-child(5):last-child) > :nth-child(n + 4) {
		grid-column: span 3;
	}
}

/* Document pages (privacy, terms, accessibility): no banner above, so the
   heading starts close under the header, and paragraphs run the full width
   of the column like the lists beside them. */
.sl-section.sl-section--doc {
	padding-top: var(--wp--preset--spacing--40);
}
.sl-prose p {
	max-width: none;
}
/* Section headings sit closer to their own text than to the section above. */
.sl-prose h2 {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--10);
}
.sl-prose h2 + * {
	margin-block-start: 0;
}

/* The sign logo is narrower than the "A Utah Family Lodges property" line
   under it, so center it over the line: the brand block is exactly as wide
   as the credit, and the logo sits in the middle. */
.sb-brand:has(.sb-network-credit) {
	display: grid;
	justify-items: center;
	width: max-content;
}

/* Kitchen inventory: grouped columns of plain bullets (Amenities page). */
.ss-kitchen {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}
.ss-kitchen > .ss-kitchen__col,
.ss-kitchen__col > * {
	margin-block: 0;
}
.ss-kitchen__col h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--action);
	padding-block-end: var(--wp--preset--spacing--10);
	margin-block-end: var(--wp--preset--spacing--20);
	border-block-end: var(--wp--custom--rule--hairline);
}
.ss-kitchen__col ul {
	padding-inline-start: 1.1em;
	list-style: disc;
}
.ss-kitchen__col li {
	margin-block: 0.35em;
}
@media (max-width: 1000px) {
	.ss-kitchen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.ss-kitchen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ss-kitchen__note {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* Compact banners (reservations, floor plans): the header is
   taller than Six Lakes' (the oval logo plus the Utah Family Lodges line),
   so the inherited top padding put the title under the header. Clear it,
   with breathing room like the other banners. */
.sl-hero--compact.wp-block-cover,
.sl-has-hero .sl-hero--compact.wp-block-cover {
	padding-top: calc(var(--wp--preset--spacing--50) + 8rem);
}
@media (max-width: 781px) {
	.sl-hero--compact.wp-block-cover,
	.sl-has-hero .sl-hero--compact.wp-block-cover {
		padding-top: calc(var(--wp--preset--spacing--40) + 7rem);
	}
}

/* Reservations: the sister-property note sits under the phone panel, in the
   space beside the (taller) booking calendar. */
.ss-sister {
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--rule--hairline);
}
.ss-sister > * {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.sl-section.sl-book-grid:has(.ss-sister) {
	padding-block-end: var(--wp--preset--spacing--40);
}

/* The Lodge dropdown: the hover bridge must span exactly the gap between the
   link and the panel. Too short and the menu closes on the way down; too tall
   and it sits over the link and blocks clicking it. The gap depends on the
   header: 76.6px in the regular one (the 133px sign over the credit line),
   32px in the sticky one (measured at 1440px, Oct 28, 2026). Re-measure if
   the logo or header size changes. */
@media (min-width: 1100px) {
	.sb-header .wp-block-navigation li.sl-mega > .wp-block-navigation__submenu-container::before {
		height: 4.8rem;
	}
	.sb-header.is-compact .wp-block-navigation li.sl-mega > .wp-block-navigation__submenu-container::before {
		height: 2rem;
	}
}


/* Regular header: the full sign at 220 x 133, where "LODGE" is about 8px
   tall and stays readable (sites/silver-springs-lodge/logo/README.md). The
   sign carries its own walnut panel, so the same file works over the hero
   photo and on the solid bar. Phones keep the 160px set in the header part,
   the narrowest the README allows. */
@media (min-width: 782px) {
	.sb-header:not(.is-compact) .sl-logo img {
		width: 220px !important;
		height: 133px;
	}
}

/* Mega-nav photos link to their page: the photo is drawn on the column's
   heading link rather than on the <li>, so it is part of the click target.
   The booking button spans the two building columns, level with the extra
   Amenities links, which run down beside it. */
@media (min-width: 1100px) {
	.sb-header li.sl-mega li.sl-mega__col::before {
		content: none;
	}
	/* Core and the parent make nav links flex rows, which would put the
	   photo beside the label; these need !important to win. */
	.sb-header li.sl-mega li.sl-mega__col > .wp-block-navigation-item__content {
		display: block !important;
	}
	.sb-header li.sl-mega li.sl-mega__col > .wp-block-navigation-item__content::before {
		content: "";
		display: block;
		aspect-ratio: 56 / 34;
		margin-bottom: 0.85rem;
		border-radius: 10px;
		background: var(--wp--preset--color--surface) center / cover no-repeat;
		transition: opacity var(--wp--custom--transition--base);
	}
	.sb-header li.sl-mega li.sl-mega__col > .wp-block-navigation-item__content:hover::before {
		opacity: 0.88;
	}
	.sb-header li.sl-mega li.sl-mega-main > .wp-block-navigation-item__content::before { background-image: url("assets/img/nav-main-lodge.jpg"); }
	.sb-header li.sl-mega li.sl-mega-retreat > .wp-block-navigation-item__content::before { background-image: url("assets/img/nav-retreat.jpg"); }
	.sb-header li.sl-mega li.sl-mega-amenities > .wp-block-navigation-item__content::before { background-image: url("assets/img/nav-amenities.jpg"); }

	.sb-header li.sl-mega > .wp-block-navigation__submenu-container {
		align-content: start;
		row-gap: var(--wp--preset--spacing--10);
	}
	.sb-header li.sl-mega li.sl-mega-main { grid-area: 1 / 1; }
	.sb-header li.sl-mega li.sl-mega-retreat { grid-area: 1 / 2; }
	.sb-header li.sl-mega li.sl-mega-amenities { grid-area: 1 / 3 / span 2; }
	.sb-header li.sl-mega li.sl-mega__cta {
		grid-area: 2 / 1 / auto / span 2;
		align-self: start;
	}
	.sb-header li.sl-mega li.sl-mega__cta > .wp-block-navigation-item__content {
		display: block !important;
		padding: 0.9rem 1.9rem !important;
		border-radius: 999px;
		background: var(--wp--preset--color--action);
		color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 700;
		letter-spacing: 0.1em;
		text-align: center;
		text-transform: uppercase;
	}
	.sb-header li.sl-mega li.sl-mega__cta > .wp-block-navigation-item__content:hover,
	.sb-header li.sl-mega li.sl-mega__cta > .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--base);
	}
}

/* Kitchen cabinet photos: every photo at its own shape, nothing cropped, in
   columns (portrait and landscape shots mixed). Captions sit under the photo. */
.ss-shelf {
	column-count: 3;
	column-gap: 0.6rem;
}
.ss-shelf > * {
	break-inside: avoid;
	margin: 0 0 0.6rem !important;
}
.ss-shelf .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	cursor: zoom-in;
}
.ss-shelf .wp-element-caption {
	margin: 0.35rem 0 0.4rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
}
@media (max-width: 781px) {
	.ss-shelf {
		column-count: 2;
	}
}

/* Footer links in the logo's gold, which passes AA (8.1:1) on the deep
   walnut footer (see sites/silver-springs-lodge/SITE-BRIEF.md); it is too light
   for text on white, so it is used nowhere else as text. Hover goes to white,
   as in the parent. */
.sb-footer a {
	color: var(--wp--preset--color--gold);
}
.sb-footer a:hover {
	color: var(--wp--preset--color--base);
}
/* The gold rule above the legal line echoes the sign's lettering. */
.sb-footer .sb-footer__legal {
	border-top-color: color-mix(in srgb, var(--wp--preset--color--gold) 45%, transparent);
}

/* Hero legibility. The lodge photos are pale, sunlit logs, and on wide
   screens the headline sits over them, not over sky: white measured 2.62:1
   against the brightest 5% of the home hero behind the h1 (Oct 28, 2026).
   A left-weighted shade, under the parent's bottom scrim, darkens only the
   side the copy is on; the right of the photo stays bright. */
@media (min-width: 782px) {
	.sl-hero.wp-block-cover::before {
		background:
			linear-gradient(
				90deg,
				color-mix(in srgb, var(--wp--preset--color--ink) 62%, transparent) 0%,
				color-mix(in srgb, var(--wp--preset--color--ink) 42%, transparent) 38%,
				transparent 68%
			),
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) 0%,
				color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent) 45%,
				color-mix(in srgb, var(--wp--preset--color--ink) 82%, transparent) 100%
			);
	}
}
/* Phones: the copy spans the photo, so the shade is top-down, a little
   deeper than the parent's through the middle where the headline sits
   (2.68:1 before, at 390px). */
@media (max-width: 781px) {
	.sl-hero.wp-block-cover::before {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--ink) 52%, transparent) 40%,
			color-mix(in srgb, var(--wp--preset--color--ink) 85%, transparent) 100%
		);
	}
}

/* ------------------------------------------- Events and Reservation Info
   Josh, Nov 9, 2026: an Events dropdown on every lodge, and Kitchen
   inventory / Rates / Policies under a bold "Reservation Info" heading in
   The Lodge menu instead of their own "Plan Your Stay" column. */
.sb-header li.sl-mega li.sl-mega__label > .wp-block-navigation-item__content {
	font-weight: 700;
}
@media (min-width: 1100px) {
	.sb-header li.sl-mega li.sl-mega__col li.sl-mega__label > .wp-block-navigation-item__content {
		margin-block-start: 0.5rem;
		padding-block-start: 0.7rem;
		border-block-start: var(--wp--custom--rule--hairline);
		color: var(--wp--preset--color--ink);
		font-weight: 700;
	}
	/* Two photo columns: a narrower panel, right-aligned under the menu. The
	   second column runs down beside the booking button, as Amenities did. */
	.sb-header li.sl-mega-two > .wp-block-navigation__submenu-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		left: auto !important;
		width: min(100%, 50rem) !important;
	}
	.sb-header li.sl-mega-two li.sl-mega-retreat { grid-area: 1 / 2 / span 2; }
	.sb-header li.sl-mega-two li.sl-mega__cta { grid-area: 2 / 1; }
}

/* Events page: the jump links under the hero, and sections reached from the
   dropdown (/events/#weddings) clear the sticky header. */
.sl-section.sl-events-nav {
	padding-block: var(--wp--preset--spacing--20);
}
.sl-events-nav .sl-jump {
	margin-block-start: 0 !important;
	text-align: center;
}
section.sl-fsplit[id],
section.sl-section[id] {
	scroll-margin-top: 6rem;
}
@media (min-width: 1100px) {
	/* "Teams & Tournaments" (River Home) stays on one line. */
	.sb-header li.sl-nav-events > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

/* ------------------------------------------ copper caption box: fixes */
/* Moved into the copy column (as on Cliff Lake Lodge), the box has no photo
   to sit on, so it becomes a callout in the flow under the copy instead of
   being pinned to some distant ancestor. */
.sl-badge:not(.sl-fsplit__media > .sl-badge) {
	position: relative;
	right: auto;
	bottom: auto;
	margin-block-start: var(--wp--preset--spacing--40);
}
/* Phones: a smaller box that hangs off the photo's bottom edge, so it no
   longer covers nearly half the picture. */
@media (max-width: 781px) {
	.sl-fsplit__media > .sl-badge {
		right: 1rem;
		max-width: min(17rem, calc(100% - 2rem));
		padding: var(--wp--preset--spacing--20);
		transform: translateY(40%);
	}
	.sl-fsplit__media > .sl-badge .sl-badge__line {
		font-size: var(--wp--preset--font-size--large);
	}
}