/* South Fraser Hall Blocks — styles that theme.json can't express. */

:root {
	--sfh-radius: 8px;
	--sfh-radius-lg: 12px;
}

html { scroll-behavior: smooth; }

/* Header, main and footer sit flush against each other (no root block gap). */
.wp-site-blocks > * { margin-block-start: 0; }

/* Footer stays at the bottom of the window on short pages. */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }

/* Anchored sections land below the sticky header. */
section[id] { scroll-margin-top: 4.5rem; }

/* ---- Header ---------------------------------------------------------- */
.sfh-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(13, 13, 13, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--night-line);
}
.admin-bar .sfh-site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .sfh-site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	.admin-bar .sfh-site-header { top: 0; } /* admin bar scrolls away at this width */
}

.sfh-header .wp-block-site-title { margin: 0; }
.sfh-header .wp-block-site-title a { color: var(--wp--preset--color--gold); }

/* Core styles nav links with a doubled class and color: inherit, so colour comes from the container. */
.sfh-nav { color: #888; }
.sfh-nav .wp-block-navigation-item__content.wp-block-navigation-item__content { transition: color 0.2s, background-color 0.2s; }
.sfh-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.sfh-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--gold); }
.sfh-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--gold); }

/* "Book Now" — give any menu item the CSS class nav-cta (Advanced panel) to make it a button. */
.sfh-nav .nav-cta > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	background: var(--wp--preset--color--gold);
	color: #111;
	padding: 0.5rem 1.25rem;
	border-radius: var(--sfh-radius);
	font-weight: 600;
	margin-block: -0.5rem; /* like the classic inline link: padding doesn't add to the bar's height */
}
.sfh-nav .nav-cta > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { background: var(--wp--preset--color--gold-light); color: #111; }
.sfh-nav .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content { font-size: 1.1rem; }
.sfh-nav .is-menu-open .nav-cta { margin-top: 0.5rem; }
.sfh-nav .is-menu-open .nav-cta > .wp-block-navigation-item__content.wp-block-navigation-item__content { margin-block: 0; }

/* ---- Section labels / shared text ----------------------------------- */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.5rem;
}
.is-style-eyebrow + .wp-block-heading { margin-block-start: 0; }

.is-style-dots { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.is-style-dots li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
.is-style-dots li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	flex-shrink: 0;
}

/* Card — rate cards, feature cards. */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--sfh-radius-lg);
	padding: 2rem;
	transition: border-color 0.2s, transform 0.2s;
}
.wp-block-group.is-style-card:hover { border-color: var(--wp--preset--color--gold-dark); transform: translateY(-3px); }
.is-style-card h3 { margin-bottom: 0.5rem; font-size: 1.05rem; }
.is-style-card > * + * { margin-block-start: 0.5rem; }

/* Note box — rates small print. */
.wp-block-group.is-style-note {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--sfh-radius);
	padding: 1.5rem 2rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	line-height: 1.7;
}
.is-style-note strong { color: var(--wp--preset--color--ink); }

/* Thin rule above a group (gallery Boardroom, accessory rates). */
.sfh-ruled { border-top: 1px solid var(--wp--preset--color--line); padding-top: 2.5rem; }

/* ---- Hero ------------------------------------------------------------ */
.sfh-hero { text-align: center; color: var(--wp--preset--color--mist); }
/* Fill the window below the 61px header, as the classic hero filled it behind the fixed nav. */
.wp-block-cover.sfh-hero { min-height: calc(100vh - 61px) !important; }
.sfh-hero .wp-block-cover__inner-container > * + * { margin-block-start: 0; }
.sfh-hero-venue {
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--wp--preset--color--gold);
	margin-bottom: 1rem;
}
.sfh-badge {
	display: table; /* shrink-wraps the pill while staying centred */
	margin: 0 auto 1.5rem !important;
	border: 1px solid var(--wp--preset--color--gold-dark);
	color: var(--wp--preset--color--gold);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.35rem 1rem;
	border-radius: 999px;
}
.sfh-hero h1 { line-height: 1.1; margin-bottom: 1rem; }
.sfh-hero-lead { max-width: 520px; margin: 0 auto 2.5rem !important; font-size: 1.1rem; color: rgba(232, 232, 232, 0.85); }
.sfh-hero .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--mist);
	border: 1px solid rgba(232, 232, 232, 0.35);
	background: transparent;
	padding: calc(0.75rem - 1px) calc(2rem - 1px);
}
.sfh-hero .is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
.wp-block-button__link { transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { transform: translateY(-1px); }

.sfh-stats { gap: 3rem; margin-top: 4rem !important; }
.sfh-stat { text-align: center; }
.sfh-stat > * { margin: 0; }
.sfh-stat-num { font-size: 2rem; font-weight: 700; color: var(--wp--preset--color--gold); line-height: 1.3; }
.sfh-stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(232, 232, 232, 0.72); }

/* ---- Gallery --------------------------------------------------------- */
.sfh-gallery-group h3 { font-size: 1.15rem; letter-spacing: 0.03em; }
.sfh-gallery-group h3 + p { font-size: 0.95rem; max-width: 540px; margin-bottom: 1.5rem; }
.wp-block-gallery.sfh-gallery { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 1rem; }
.wp-block-gallery.sfh-gallery > .wp-block-image { width: auto !important; margin: 0 !important; border-radius: var(--sfh-radius); overflow: hidden; background: var(--wp--preset--color--surface-alt); }
.wp-block-gallery.sfh-gallery > .wp-block-image:first-child { grid-row: span 2; }
.wp-block-gallery.sfh-gallery > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.wp-block-gallery.sfh-gallery > .wp-block-image:hover img { transform: scale(1.05); }
.wp-block-gallery.sfh-gallery > .wp-block-image { position: relative; cursor: pointer; }
.wp-block-gallery.sfh-gallery > .wp-block-image:nth-child(n+6) { display: none; } /* shown via "+N more" → lightbox */
.wp-block-gallery.sfh-gallery > .wp-block-image:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
.sfh-gallery-more {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	pointer-events: none;
	transition: background 0.2s;
}
.wp-block-image:hover > .sfh-gallery-more { background: rgba(0, 0, 0, 0.4); }

/* Lightbox (assets/js/gallery.js) */
.sfh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.93);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sfh-lightbox[hidden] { display: none; }
.sfh-lightbox-img-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sfh-lightbox-img-wrap img {
	max-width: 90vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
}
.sfh-lightbox-counter {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	pointer-events: none;
}
.sfh-lightbox button {
	position: fixed;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	color: #fff;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}
.sfh-lightbox button[hidden] { display: none; }
.sfh-lightbox button:hover,
.sfh-lightbox button:focus-visible { background: rgba(201, 168, 76, 0.25); border-color: var(--wp--preset--color--gold-dark); }
.sfh-lightbox-close { top: 1.25rem; right: 1.5rem; width: 48px; height: 48px; font-size: 1.8rem; }
.sfh-lightbox-prev,
.sfh-lightbox-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 2.2rem; }
.sfh-lightbox-prev { left: 1.5rem; }
.sfh-lightbox-next { right: 1.5rem; }
@media (max-width: 768px) {
	.sfh-lightbox-prev { left: 0.5rem; }
	.sfh-lightbox-next { right: 0.5rem; }
	.sfh-lightbox-prev, .sfh-lightbox-next { width: 44px; height: 44px; font-size: 1.8rem; }
}
@media (max-width: 768px) {
	.wp-block-gallery.sfh-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
	.wp-block-gallery.sfh-gallery > .wp-block-image:first-child { grid-row: span 1; }
}

/* ---- Booking / contact rows ------------------------------------------ */
.sfh-contacts { gap: 1rem; }
.sfh-contact { gap: 1rem; font-size: 0.95rem; width: 100%; max-width: 480px; } /* capped per row so the list stays on the content column */
.sfh-contact-icon {
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	border-radius: var(--sfh-radius);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1rem;
	margin: 0;
}
.sfh-contact-text > * { margin: 0; }
.sfh-contact-label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.2rem !important;
}

/* ---- Inner page banner ----------------------------------------------- */
.sfh-page-hero { border-bottom: 1px solid var(--wp--preset--color--line); text-align: center; }
.sfh-page-hero h1 { margin: 0.5rem 0 1rem; }
.sfh-page-subtitle { font-size: 1.05rem; max-width: 540px; margin-left: auto !important; margin-right: auto !important; }

/* ---- Rates ----------------------------------------------------------- */
/* Mirrors the classic theme's rate card: name, description, price (centred in the spare height), footer. */
.sfh-rate-card { text-align: center; gap: 0 !important; }
.sfh-rate-card > * { width: 100%; margin: 0 !important; }
.wp-block-group.sfh-rate-card > * + * { margin-block-start: 0 !important; }
.sfh-rate-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.4rem !important; }
.sfh-rate-card h3 + p { font-size: 0.875rem !important; }
.sfh-rate-price { margin-block: auto !important; padding: 1.55rem 0; color: var(--wp--preset--color--muted); font-size: 0.875rem; text-wrap: balance; }
.sfh-rate-price strong { font-size: 2rem; font-weight: 700; color: var(--wp--preset--color--gold); margin-right: 0.25rem; }
.sfh-rate-foot { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1rem; font-size: 0.8rem; color: var(--wp--preset--color--muted); }
.wp-block-group.is-style-note > * { margin: 0; }
.wp-block-group.is-style-note > * + * { margin-block-start: 0.5rem; }
.sfh-measure { max-width: 580px; margin-left: auto !important; margin-right: auto !important; font-size: 0.95rem; line-height: 1.7; }
.sfh-accessories h2 { margin-bottom: 0; }
.sfh-accessories h2 + p { margin-top: 0.75rem !important; }
.sfh-accessories .wp-block-buttons { margin-top: 1.75rem; }

/* ---- FAQ (core Details block) ---------------------------------------- */
.wp-block-details.sfh-faq { padding: 0; }
.wp-block-details.sfh-faq + .wp-block-details.sfh-faq { margin-block-start: 0; }
.sfh-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 0;
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.2s;
}
.sfh-faq summary::-webkit-details-marker { display: none; }
.sfh-faq summary::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--gold);
	flex-shrink: 0;
}
.sfh-faq[open] summary::after { content: "−"; }
.sfh-faq summary:hover,
.sfh-faq[open] summary { color: var(--wp--preset--color--gold); }
.sfh-faq > p { margin-top: 0; padding-bottom: 1.25rem; line-height: 1.7; }

/* ---- History timeline ------------------------------------------------ */
.sfh-timeline-item {
	position: relative;
	padding: 0 0 2.5rem 2rem;
	border-left: 2px solid var(--wp--preset--color--line);
}
.sfh-timeline-item::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 0.35rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}
.sfh-timeline-item > * { margin-top: 0; }
.sfh-timeline-item p:not(.is-style-eyebrow) { line-height: 1.7; }

/* ---- Footer ---------------------------------------------------------- */
.sfh-site-footer { border-top: 1px solid var(--wp--preset--color--night-line); }
.sfh-footer, .sfh-footer a, .sfh-footer-nav { color: #888; }
.sfh-footer .wp-block-site-title a { color: var(--wp--preset--color--gold); }
.sfh-footer-tagline { margin-bottom: 1.5rem !important; }
nav.sfh-footer-nav { margin-bottom: 2rem !important; }
.sfh-footer-nav .wp-block-navigation-item__content { font-size: 0.85rem; }
.sfh-footer-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gold); }

/* ---- Small screens --------------------------------------------------- */
@media (max-width: 781px) {
	.sfh-hero-venue { font-size: 1.8rem; }
	.sfh-stats { gap: 2rem; }
}