/*
Theme Name: CC Venue Base
Description: Shared block theme for all Culinary Canvas managed venue sites. This is the parent theme — each venue gets a thin child theme (cc-venue-<slug>) carrying only its brand profile via theme.json. Layout, templates, and tracking live here, once. Part of the Venue Platform.
Version: 0.30.7
Author: Culinary Canvas
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: cc-venue-base
*/

/* Block theme — styling is driven by theme.json. This file carries only rules
   that cannot be expressed in theme.json. */

/* Drop the default block-gap between the page content and the footer template
   part — otherwise the white page background shows as a thin bar above the
   footer (visible whenever the last section is dark, e.g. Noble's Visit Us).
   The live sites meet the footer flush. */
footer.wp-block-template-part {
	margin-top: 0;
}

/* Sticky header — pinned to the top of the viewport on scroll, like the
   Squarespace site. Opaque background + a hairline shadow so page content
   (especially the full-bleed hero) doesn't show through as it scrolls under. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--background);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* ---- Header mode: TRANSPARENT_OVERLAY (per-venue, e.g. Noble) ----
   Driven by the registry `headerStyle` field via a body class. The header floats
   transparently over the first full-bleed hero and scrolls away (absolute, not
   sticky); nav is sentence-case + lighter, matching that venue's brand. The
   body-class prefix raises specificity so these override the solid-bar defaults
   below. SOLID_BAR (default, e.g. Barnett) keeps every default rule untouched. */
body.cc-header--overlay header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: transparent;
	box-shadow: none;
}
body.cc-header--overlay header.wp-block-group {
	/* height comes from --cc-header-h (base rule); do NOT zero it or overlay
	   venues collapse — the recurring bug this refactor removes. */
	background-color: transparent;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
/* Sentence-case, lighter nav (live Noble: halyard-display 300, not uppercase). */
body.cc-header--overlay header.wp-block-group .wp-block-navigation a,
body.cc-header--overlay header.wp-block-group .wp-block-navigation .wp-block-navigation-item__content {
	text-transform: none;
	font-weight: 300;
	letter-spacing: 0.3px;
}
/* Hero sits at the very top; the absolute header overlays it. Pull the first
   full-bleed cover up under the header (front-page has no page title above it). */
body.cc-header--overlay .wp-block-cover:first-child,
body.cc-header--overlay main > .wp-block-cover:first-of-type {
	margin-top: 0;
}
/* Overlay LIGHT-nav variant (dark hero, e.g. Smith): nav + CTA render light so
   they read over a dark hero photo. */
body.cc-header--overlay-light header.wp-block-group .wp-block-navigation a,
body.cc-header--overlay-light header.wp-block-group .wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.92);
}
body.cc-header--overlay-light header.wp-block-group .cc-venue-cta a.wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.92);
	color: rgba(255, 255, 255, 0.92);
}
body.cc-header--overlay-light header.wp-block-group .cc-venue-cta a.wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--foreground);
}
/* SOLID_DARK variant (opaque dark bar over the hero, e.g. Moto): foreground-color
   bar + light nav. Inherits the absolute positioning of cc-header--overlay. */
body.cc-header--solid-dark header.wp-block-template-part,
body.cc-header--solid-dark header.wp-block-group {
	background-color: var(--wp--preset--color--foreground);
}
body.cc-header--solid-dark header.wp-block-group .wp-block-navigation a,
body.cc-header--solid-dark header.wp-block-group .wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.92);
}
body.cc-header--solid-dark header.wp-block-group .cc-venue-cta a.wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.92);
	color: rgba(255, 255, 255, 0.92);
}
body.cc-header--solid-dark header.wp-block-group .cc-venue-cta a.wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--foreground);
}

/* ---- Header mode: Noble solid cream band (matches live thenoblestl.com) ----
   Live Noble is NOT a transparent overlay: it is a SOLID cream (accent) header
   band ~146px tall that scrolls away with the page, with the hero IMAGE pushed
   DOWN below it (the image's top edge sits exactly at the header's bottom — the
   photo never bleeds up behind the nav). Noble therefore uses headerStyle=
   SOLID_BAR (body class cc-header--solid). These rules tune the solid defaults
   to Noble's measured live values: cream band instead of the white `background`
   default, and the live 146px height. The bar STAYS PINNED on scroll (the theme
   default sticky behavior, like Barnett/Smith/Moto) — we keep the default
   position:sticky + top:0 + hairline shadow rather than the live site's
   scroll-away header, since a persistent header is better UX. Keyed to the
   child-theme body class so only Noble's cream/height tuning is applied. */
body.wp-child-theme-cc-venue-noble header.wp-block-template-part {
	background-color: var(--wp--preset--color--accent);
}
body.wp-child-theme-cc-venue-noble header.wp-block-group {
	--cc-header-h: 146px;
	background-color: var(--wp--preset--color--accent);
}
/* Barnett: taller band to match live barnettonwashington.com (186px). */
body.wp-child-theme-cc-venue-barnett header.wp-block-group {
	--cc-header-h: 186px;
}
/* Close the wp-site-blocks block-gap between the in-flow header and the content
   so the hero butts flush against the cream band (live thenoblestl.com has no
   gap). The overlay mode hid this by pulling the absolute header off-flow. */
body.wp-child-theme-cc-venue-noble main.wp-block-group {
	margin-top: 0;
}
/* CTA — Noble uses the brand GREEN (secondary), not the default gold (primary):
   a filled green pill with cream text, matching live thenoblestl.com's INQUIRE
   (bg #3b514d, text #fbf8ec, 25px radius, bold, sentence case). Hover inverts to
   an outlined green pill. */
body.wp-child-theme-cc-venue-noble header.wp-block-group .cc-venue-cta a.wp-block-button__link {
	background-color: var(--wp--preset--color--secondary);
	border: 2px solid var(--wp--preset--color--secondary);
	border-radius: 25px;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
body.wp-child-theme-cc-venue-noble header.wp-block-group .cc-venue-cta a.wp-block-button__link:hover,
body.wp-child-theme-cc-venue-noble header.wp-block-group .cc-venue-cta a.wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--secondary);
}

/* Smith uses the default --cc-header-h (150px), matching live ~150px — no
   per-venue override needed now that overlay no longer collapses. */

/* Smith: monochrome ghost CTAs. Smith is an all-B&W dark site (and live
   smithandcompanystl.com uses white outline buttons), so the default bronze
   pill is off-brand. Make every in-page button a white outline that fills on
   hover, matching the header INQUIRE. Keyed to the child class. */
body.wp-child-theme-cc-venue-smith .wp-block-button__link {
	background-color: transparent;
	border: 2px solid rgba(255, 255, 255, 0.9);
	color: #ffffff;
	border-radius: 8px;
}
body.wp-child-theme-cc-venue-smith .wp-block-button__link:hover,
body.wp-child-theme-cc-venue-smith .wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--background);
}

/* Hero headline case — keyed to header mode (the venues align): the overlay
   venues (Smith = overlay-light) and Noble (solid band) render the hero headline
   UPPERCASE to match their live sites; Moto (solid-dark) keeps title-case. A
   future venue needing different behavior would get a dedicated control. */
body.cc-header--overlay .wp-block-cover h1.wp-block-heading,
body.cc-header--overlay-light .wp-block-cover h1.wp-block-heading,
body.wp-child-theme-cc-venue-noble .wp-block-cover h1.wp-block-heading {
	text-transform: uppercase;
}

/* ---- Noble hero: centered headline over a soft "smoke" backing ----
   Live thenoblestl.com reads the headline over a dark photo + a faint dim. On our
   brighter hero photo we reproduce that by (a) constraining the headline to a
   centered column (live wraps to a narrow block, not edge-to-edge) and (b)
   floating a soft radial "smoke" of the foreground color behind it — darker at
   center, fading to transparent before the edges, so there is no hard box. */
body.wp-child-theme-cc-venue-noble .wp-block-cover__inner-container {
	max-width: 720px;
	margin-inline: auto;
	padding: 2.75rem 2rem;
	background: radial-gradient(
		ellipse at center,
		rgba(23, 32, 30, 0.62) 0%,
		rgba(23, 32, 30, 0.38) 42%,
		rgba(23, 32, 30, 0) 72%
	);
}
body.wp-child-theme-cc-venue-noble .wp-block-cover h1.wp-block-heading {
	max-width: 600px;
	margin-inline: auto;
}

/* Header: truly center the logo in the 3-zone layout. flex `space-between`
   distributes free space evenly but does NOT center the middle item when the
   side zones differ in width (left nav wider than the right CTA). Make the nav
   and CTA zones grow equally and keep the logo auto-width, which centers it. */
header.wp-block-group > nav.wp-block-navigation { flex: 1 1 0; }
header.wp-block-group > .wp-block-site-logo { flex: 0 0 auto; }
header.wp-block-group > .wp-block-buttons { flex: 1 1 0; display: flex; justify-content: flex-end; }

/* ---- Mobile header (≤600px, hamburger active) ----
   Match the live venues' mobile pattern: every header mode collapses to a SOLID
   in-flow bar with the logo on the LEFT, the hamburger on the RIGHT, and the CTA
   hidden (it lives in the menu + on the pages). Overlay venues drop their
   desktop transparent/absolute treatment here so the hero sits below the bar. */
@media (max-width: 600px) {
	/* Solid in-flow bar for the overlay modes (Noble/Smith): light background. */
	body.cc-header--overlay header.wp-block-template-part {
		position: sticky;
		background-color: var(--wp--preset--color--background);
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	}
	body.cc-header--overlay header.wp-block-group {
		background-color: var(--wp--preset--color--background);
	}
	/* Moto (solid-dark) keeps a dark bar on mobile. */
	body.cc-header--solid-dark header.wp-block-template-part,
	body.cc-header--solid-dark header.wp-block-group {
		background-color: var(--wp--preset--color--foreground);
	}

	/* Layout: condense, logo left, hamburger right, CTA hidden. */
	header.wp-block-group {
		min-height: 0;
		padding: 0.55rem 1.25rem !important;
		gap: 0.5rem;
		flex-wrap: nowrap;
	}
	header.wp-block-group > .wp-block-site-logo { order: 1; flex: 0 0 auto; }
	header.wp-block-group > .wp-block-buttons.cc-venue-cta { display: none; }
	header.wp-block-group > nav.wp-block-navigation { order: 3; flex: 0 0 auto; }
	header.wp-block-group .wp-block-site-logo img,
	header.wp-block-group .wp-block-site-logo { width: 104px !important; }

	/* Hamburger color must suit the now-solid bar: dark on the light bars
	   (incl. Smith, whose desktop nav is light but whose mobile bar is light),
	   light on Moto's dark bar. */
	body.cc-header--overlay .wp-block-navigation__responsive-container-open,
	body.cc-header--overlay-light .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--foreground);
	}
	body.cc-header--solid-dark .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--background);
	}
}

/* Nav labels — exact values measured from the live Squarespace header:
   16px Montserrat, weight 400, foreground color, no letter-spacing. Uppercase
   transform reproduces the Squarespace caps look while keeping labels editable. */
header.wp-block-group .wp-block-navigation a,
header.wp-block-group .wp-block-navigation .wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: normal;
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--foreground);
}

/* Nav interactions: bold on hover; underline the current page. */
header.wp-block-group .wp-block-navigation a:hover {
	font-weight: 700;
}
header.wp-block-group .wp-block-navigation .current-menu-item > a,
header.wp-block-group .wp-block-navigation a[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Header band height — ONE consistent setting for every venue/mode via the
   `--cc-header-h` custom property (default 150px). All header modes (solid AND
   overlay) read it, so overlay venues never collapse. A venue tunes its band to
   its live site by overriding --cc-header-h on its child body class (see Noble /
   Barnett below) — never by re-adding a min-height per venue. */
header.wp-block-group {
	min-height: var(--cc-header-h, 150px);
}

/* CTA button — exact Squarespace values, plus a hover that INVERTS the colors:
   transparent outline -> filled brand brown with background-color text. */
header.wp-block-group .cc-venue-cta a.wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: normal;
	padding: 24px 35px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
header.wp-block-group .cc-venue-cta a.wp-block-button__link:hover,
header.wp-block-group .cc-venue-cta a.wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* ---- Mobile menu overlay (the opened hamburger) ----
   Match the live Squarespace mobile menu: full-screen cream (background-color)
   panel with large UPPERCASE links, instead of the block default white + small.
   Applies to all venues (their backgrounds are all light). */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	/* !important: the open mobile menu is uppercase even on venues whose desktop
	   overlay nav is sentence-case (matches live Noble) — that header-nav rule has
	   higher specificity, so override it. Only affects the open menu (.is-menu-open). */
	text-transform: uppercase !important;
	font-size: 1.6rem;
	letter-spacing: 0.4px;
	color: var(--wp--preset--color--foreground);
}
/* Vertically center the open menu's items in the viewport (matches live). The
   content column fills the viewport and centers; the nav list itself also stretches
   (flex-grow), so center within it too — otherwise items sit at the list's top.
   The close button is absolutely positioned (top/right), so centering doesn't move
   it; horizontal (left) alignment is preserved. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	min-height: 100vh;
	padding-top: 4.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}
/* Close control: a pinned (fixed) "Close ✕" in the top-right so it stays visible
   even if the expanded menu scrolls. Inset from the frame edge; small-caps label
   before the X icon makes the action obvious. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 1.25rem;
	right: 1.5rem;
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 1rem;
	font-variant: small-caps;
	letter-spacing: 1px;
	z-index: 10;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
	content: "Close";
}
/* Dropdown marker: draw a single CSS caret after the toggle label. It points down
   (collapsed) and flips up when expanded (aria-expanded). The toggle is a real
   button in both desktop + the mobile overlay (openSubmenusOnClick), so the marker
   shows in both. The navigation block also has showSubmenuIcon:true, which renders
   WP's own native chevron (.wp-block-navigation__submenu-icon) — that would double
   up with this caret, so suppress the native one and keep this (animated) caret as
   the single marker everywhere. */
.wp-block-navigation .wp-block-navigation__submenu-icon {
	display: none !important;
}
.wp-block-navigation-submenu__toggle::after {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-left: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.12em) rotate(45deg);
	transition: transform 0.2s ease;
}
.wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
	transform: translateY(0.05em) rotate(-135deg);
}
/* The submenu toggle is a <button>, which doesn't inherit the open menu's 1.6rem
   item size — it rendered noticeably smaller than the sibling links. Match it. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	font-size: 1.6rem !important;
}
/* "Inquire" CTA on mobile: the header pill is hidden ≤600px, so surface Inquire as
   the last item INSIDE the open overlay menu (matches live, where the CTA collapses
   into the menu). The nav item carries class cc-nav-inquire: hidden in the desktop
   horizontal nav (the green pill lives there), shown only in the open overlay. */
.wp-block-navigation .cc-nav-inquire {
	display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .cc-nav-inquire {
	display: flex !important;
	justify-content: center;
	margin-top: 0.75rem;
}
/* Inquire reads as the venue CTA pill in the mobile menu (not a plain link) — a
   filled, rounded button. Default uses the venue primary; Noble overrides to its
   brand green (secondary) + cream text to match its header pill. */
.wp-block-navigation__responsive-container.is-menu-open .cc-nav-inquire a {
	display: inline-block;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	border-radius: 25px;
	padding: 0.7em 2.4em !important;
	font-size: 1.05rem;
	line-height: 1.1;
	white-space: nowrap;
	letter-spacing: 0.5px;
}
body.wp-child-theme-cc-venue-noble .wp-block-navigation__responsive-container.is-menu-open .cc-nav-inquire a {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--accent);
}
/* Collapse submenus in the open overlay: WP otherwise renders overlay submenu
   children statically expanded (display:flex, aria-expanded=false). Hide them so
   a parent like "Pricing" is a single tappable item; the nav Interactivity API
   flips the toggle's aria-expanded on tap, which reveals the children (matches
   live). Scoped to .is-menu-open so the desktop hover dropdown is unaffected. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
	display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex !important;
}
/* Center the submenu parent's contents. The submenu <li> is a flex column with
   align-items:flex-start, so when expanded (full width) the toggle button (e.g.
   "Pricing") left-aligns while the rest of the menu stays centered. Center it. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	align-items: center !important;
	text-align: center;
}
/* Submenu children render a step smaller than the top-level items (1.6rem) so the
   open submenu reads clearly as a sub-level. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 1.2rem;
}
/* The hamburger open/close icons inherit the venue's foreground tone. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--foreground);
}

/* ---- Award badges row (cc/venue-badges block) ----
   A centered, wrapping row of earned award badges (The Knot, Zola, …), rendered
   from the venue's `awardBadges` registry field via the shared badge catalog.
   Equal height, even gap; wraps on small screens. */
.cc-venue-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	margin: 0 auto;
}
.cc-venue-badges .cc-badge {
	margin: 0;
}
.cc-venue-badges .cc-badge-img {
	height: 120px;
	width: auto;
	display: block;
}
@media (max-width: 600px) {
	.cc-venue-badges { gap: 1.5rem; }
	.cc-venue-badges .cc-badge-img { height: 92px; }
}

/* ---- Footer: 4-column layout matching the Squarespace footer ---- */
.cc-footer { text-align: center; }
.cc-footer-inquiry { font-size: 16px; font-style: italic; margin: 0 0 3rem; }
.cc-footer-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	align-items: start;
}
.cc-footer-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.8rem;
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--foreground);
}
.cc-footer-col p { font-size: 16px; line-height: 1.7; margin: 0.35rem 0; }
.cc-footer-col a { color: inherit; }
.cc-footer-brand .cc-footer-logo,
.cc-footer-brand img { max-width: 220px; height: auto; margin: 0 auto; display: block; }
.cc-managed-logo { display: block; margin-top: 0.75rem; }
.cc-managed-logo img { max-width: 190px; height: auto; margin: 0 auto; display: block; }
.cc-socials { display: flex; gap: 0.85rem; justify-content: center; margin-top: 0.5rem; }
.cc-socials a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	transition: opacity 0.2s ease;
}
.cc-socials a:hover { opacity: 0.8; }
.cc-socials svg { width: 22px; height: 22px; }
.cc-footer-legal { margin-top: 3rem; font-size: 14px; opacity: 0.8; }
.cc-footer-legal a { color: inherit; }
@media (max-width: 781px) {
	.cc-footer-cols { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---- Footer mode: DARK (per-venue, e.g. Noble) ----
   Driven by the registry `footerStyle` field via a body class. Dark footer
   (foreground color) with near-white text, inverted social circles, and logos
   forced light so they read. CREAM_LIGHT (default, e.g. Barnett) is untouched. */
body.cc-footer--dark footer.wp-block-group {
	background-color: var(--wp--preset--color--foreground) !important;
	color: var(--wp--preset--color--background) !important;
}
body.cc-footer--dark .cc-footer-heading,
body.cc-footer--dark .cc-footer-col a,
body.cc-footer--dark .cc-footer-inquiry a,
body.cc-footer--dark .cc-footer-legal,
body.cc-footer--dark .cc-footer-legal a {
	color: var(--wp--preset--color--background);
}
/* Inverted social circles: light circle, dark glyph. */
body.cc-footer--dark .cc-socials a {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}
/* Force the "Venue Managed by" CC mark (no light variant) to render light. The
   per-venue footer logo should be set to a white asset via footerLogoUrl. */
body.cc-footer--dark .cc-managed-logo img {
	filter: brightness(0) invert(1);
}

/* ---- Full-bleed horizontal image reel/carousel (Squarespace "gallery reel") ----
   A scroll-snap strip of fixed-height images; swipe/scroll horizontally. Add the
   class cc-reel to a full-width group of image blocks. */
.cc-reel {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	/* proximity (not mandatory): keeps the snap feel on swipe but does NOT fight
	   the smooth programmatic scroll the arrow buttons trigger (mandatory snaps
	   the animation back to the origin point). */
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.cc-reel::-webkit-scrollbar { display: none; }
.cc-reel > figure,
.cc-reel > .wp-block-image {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: center;
}
.cc-reel img {
	height: 60vh;
	width: auto;
	max-width: none;
	display: block;
	object-fit: cover;
}
@media (max-width: 781px) {
	.cc-reel img { height: 46vh; }
}

/* Carousel arrows (added by assets/cc-reel.js, which wraps .cc-reel in
   .cc-reel-wrap). Squarespace-style prev/next: semi-transparent round buttons
   with a chevron, vertically centered, left/right. Shown only when the reel
   overflows (cc-reel-has-overflow toggled by the script). */
.cc-reel-wrap { position: relative; }
.cc-reel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.82);
	color: #1a1a1a;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.cc-reel-wrap.cc-reel-has-overflow .cc-reel-arrow { display: flex; }
.cc-reel-arrow:hover,
.cc-reel-arrow:focus-visible { background-color: #fff; }
.cc-reel-arrow svg { width: 22px; height: 22px; display: block; }
.cc-reel-prev { left: 1rem; }
.cc-reel-next { right: 1rem; }
@media (max-width: 600px) {
	.cc-reel-arrow { width: 40px; height: 40px; }
	.cc-reel-prev { left: 0.5rem; }
	.cc-reel-next { right: 0.5rem; }
}

/* ---- Mobile responsiveness pass (technique borrowed from the WordPress
   Twenty Twenty-Five / Anders Norén FSE themes: fluid display type + grids that
   reflow by available width). Seeded page content uses fixed inline px font
   sizes (e.g. 64px "VISIT US", 48px page titles) and fixed 3-col grids, which
   overflow / stay cramped on phones — these rules scale them down on small
   screens. !important is required only because the sizes are inline styles. ---- */

/* Display headings in page content: clamp big inline px headings to a fluid
   size on phones so they never overflow. (h3 amenity labels @22px are fine.) */
@media (max-width: 781px) {
	main h1.wp-block-heading,
	main h2.wp-block-heading {
		font-size: clamp(1.85rem, 7.5vw, 2.75rem) !important;
		line-height: 1.15 !important;
		overflow-wrap: break-word;
	}
}

/* Large intro/body paragraphs (seeded at 18–22px) tighten on small phones. */
@media (max-width: 600px) {
	main p[style*="font-size:22px"],
	main p[style*="font-size:20px"],
	main p[style*="font-size:19px"],
	main p[style*="font-size:18px"] {
		font-size: 1.05rem !important;
		line-height: 1.55 !important;
	}
}

/* Fixed grids (AMENITIES, Gallery — seeded as layout grid columnCount:3) reflow
   to 2 columns on tablet and 1 on phone instead of staying 3-up and squished. */
@media (max-width: 781px) {
	.wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 540px) {
	.wp-block-group.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Trim the tall hero/section vertical padding on phones so content isn't pushed
   far down, and keep full-bleed sections from forcing horizontal scroll. */
@media (max-width: 600px) {
	.wp-block-cover { min-height: 56vh !important; }
	.cc-footer-heading { font-size: 2.1rem; }
}

/* ---- cc/venue-map: styled location map (Visit Us block) ----
   Fill the FULL height of the left column so the map spans the whole side,
   matching the taller "Visit Us" text column. The columns row is
   vertically-centered, so the map column would otherwise shrink to the map's
   intrinsic height — stretch that column and let the map grow to fill it.
   min-height keeps a sensible size when the columns stack on mobile (no
   sibling column to match). Both the interactive canvas and the no-key
   fallback iframe fill the container. */
.wp-block-column:has(> .cc-venue-map) {
	align-self: stretch;
}
.cc-venue-map {
	width: 100%;
	height: 100%;
	min-height: 340px;
	overflow: hidden;
}
.cc-venue-map__canvas,
.cc-venue-map__embed {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 340px;
	border: 0;
}

/* Visit Us full-bleed split (matches live thenoblestl.com): padded text half on
   the left, map half edge-to-edge on the right. Applied to the columns block via
   the cc-visit-row class on a full-width (unconstrained, zero-padding) section —
   remove the gap so the halves meet, stretch them to equal height, and pad the
   text column (the one WITHOUT the map) rather than the section, so the map
   bleeds to the top/bottom/outer edge. */
.cc-visit-row {
	gap: 0 !important;
	align-items: stretch !important;
	margin-top: 0;
	margin-bottom: 0;
}
.cc-visit-row > .wp-block-column {
	margin: 0;
}
.cc-visit-row > .wp-block-column:not(:has(.cc-venue-map)) {
	padding: 4.5rem 2rem;
}
.cc-visit-row .cc-venue-map {
	min-height: 480px;
}
@media (max-width: 781px) {
	.cc-visit-row .cc-venue-map { min-height: 320px; }
}

/* ── cc/venue-inquiry-form — shared inquiry form block ──────────────────────
   Structural layout only; fonts/colors/borders inherit from the theme. One
   ruleset for both modes (twostep brochure + full long-form). */
.cc-inquiry-form {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}
.cc-inquiry-form *,
.cc-inquiry-form *::before,
.cc-inquiry-form *::after { box-sizing: border-box; }
.cc-inquiry-form input,
.cc-inquiry-form select,
.cc-inquiry-form textarea,
.cc-inquiry-form button,
.cc-inquiry-form label { font: inherit; }
.cc-inquiry-form input:focus,
.cc-inquiry-form select:focus,
.cc-inquiry-form textarea:focus { outline: none; }
.cc-inquiry-form input[type="text"],
.cc-inquiry-form input[type="email"],
.cc-inquiry-form input[type="tel"],
.cc-inquiry-form input[type="date"],
.cc-inquiry-form input[type="time"],
.cc-inquiry-form input[type="number"],
.cc-inquiry-form select,
.cc-inquiry-form textarea { display: block; width: 100%; }
.cc-inquiry-form textarea { resize: vertical; min-height: 100px; }
.cc-inquiry-form label { display: block; margin-bottom: 0.35em; }
.cc-inquiry-form .cif-field,
.cc-inquiry-form .cif-row { margin-bottom: 1em; }
.cc-inquiry-form .cif-row { display: grid; gap: 16px; }
.cc-inquiry-form .cif-row.two-col { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
	.cc-inquiry-form .cif-row.two-col { grid-template-columns: 1fr; }
}
.cc-inquiry-form .cif-checkbox,
.cc-inquiry-form .cif-radio {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 0.5em;
}
.cc-inquiry-form .cif-checkbox input,
.cc-inquiry-form .cif-radio input { margin-top: 3px; flex-shrink: 0; width: auto; }
.cc-inquiry-form .cif-checkbox label,
.cc-inquiry-form .cif-radio label { margin-bottom: 0; }
.cc-inquiry-form .cif-disclosure {
	font-size: 0.85em;
	margin: 0.4em 0 0;
	opacity: 0.8;
}
.cc-inquiry-form .cif-referral-other { display: none; margin-top: 0.5em; }
.cc-inquiry-form .cif-status { display: none; margin-top: 1em; }
.cc-inquiry-form .cif-status.cif-error { display: block; }
/* Two-part flow: Part 2 hidden until Part 1 submits. */
.cc-inquiry-form .cif-part-2 { display: none; }
.cc-inquiry-form.cif-show-part-2 .cif-part-1 { display: none; }
.cc-inquiry-form.cif-show-part-2 .cif-part-2 { display: block; }
.cc-inquiry-form .cif-part-1-success {
	padding: 1em;
	margin-bottom: 1.5em;
	border: 1px solid currentColor;
	text-align: center;
	font-style: italic;
}
.cc-inquiry-form .cif-part-2-header { margin: 0 0 0.25em; }
.cc-inquiry-form .cif-part-2-subhead { margin: 0 0 1.5em; }
/* Final success state: hide the form, show only the status message. */
.cc-inquiry-form.cif-submitted .cif-part-1,
.cc-inquiry-form.cif-submitted .cif-part-2,
.cc-inquiry-form.cif-submitted .cif-field,
.cc-inquiry-form.cif-submitted .cif-row,
.cc-inquiry-form.cif-submitted .cif-checkbox { display: none; }
.cc-inquiry-form.cif-submitted .cif-status.cif-success {
	display: block;
	text-align: center;
	padding: 2em 1em;
	font-size: 1.25em;
	line-height: 1.5;
	margin-top: 0;
}
.cc-inquiry-form .cif-eventtype-other { display: none; margin-top: 0.5em; }

/* ── v2 full-funnel structural rules (inquirySchema=v2) ──
   Conditional groups are hidden by default and revealed by cc-inquiry-form.js
   (.is-on) from the active category / date choice. Hidden inputs are skipped
   by the JS validator + payload, so they never submit. */
.cc-inquiry-form .cif-cond { display: none; }
.cc-inquiry-form .cif-cond.is-on { display: block; }
.cc-inquiry-form .cif-date-set,
.cc-inquiry-form .cif-date-flex { display: none; }
.cc-inquiry-form .cif-date-set.is-on,
.cc-inquiry-form .cif-date-flex.is-on { display: block; }
.cc-inquiry-form .cif-leadsource-other { display: none; margin-top: 0.5em; }
.cc-inquiry-form .cif-consent { margin: 1.25em 0; }
.cc-inquiry-form .cif-group-label { margin: 0 0 0.35em; }
.cc-inquiry-form.cif-submitted .cif-cond,
.cc-inquiry-form.cif-submitted .cif-consent,
.cc-inquiry-form.cif-submitted .cif-group-label,
.cc-inquiry-form.cif-submitted .cif-part-2-only { display: none; }

/* ── cc/legal-doc — canonical privacy/terms rendered on each venue's branded page ──
   Structure + readable prose only; fonts/colors inherit from the venue theme. */
.cc-legal { max-width: 760px; margin-left: auto; margin-right: auto; padding: 48px 24px 72px; line-height: 1.65; }
.cc-legal__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; opacity: 0.7; margin: 0 0 8px; }
.cc-legal__title { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin: 0 0 12px; }
.cc-legal__meta { opacity: 0.75; margin: 0 0 32px; font-size: 15px; }
.cc-legal h2 { font-size: 22px; margin: 36px 0 10px; }
.cc-legal h3 { font-size: 17px; margin: 24px 0 6px; }
.cc-legal p { margin: 0 0 14px; }
.cc-legal ul { margin: 0 0 14px; padding-left: 22px; }
.cc-legal li { margin: 0 0 6px; }
.cc-legal a { text-decoration: underline; }

/* ── Consent preferences modal ("Your Privacy Choices") ─────────────────── */
#cc-consent-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); padding: 1.5rem; }
#cc-consent-modal .cc-consent-box { position: relative; max-width: 460px; width: 100%; background: var(--wp--preset--color--background, #fff); color: var(--wp--preset--color--foreground, #1a1a1a); padding: 2rem 1.75rem; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.3); font-size: 15px; line-height: 1.6; }
#cc-consent-modal h2 { margin: 0 0 .75rem; font-size: 1.4rem; }
#cc-consent-modal p { margin: 0 0 1rem; }
#cc-consent-modal .cc-consent-current { font-size: 13px; opacity: .8; }
#cc-consent-modal .cc-consent-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
#cc-consent-modal button.cc-consent-allow, #cc-consent-modal button.cc-consent-deny { flex: 1 1 auto; padding: .7rem 1rem; border-radius: 25px; border: 2px solid var(--wp--preset--color--foreground, #1a1a1a); cursor: pointer; font: inherit; font-size: 14px; }
#cc-consent-modal button.cc-consent-allow { background: var(--wp--preset--color--foreground, #1a1a1a); color: var(--wp--preset--color--background, #fff); }
#cc-consent-modal button.cc-consent-deny { background: transparent; color: var(--wp--preset--color--foreground, #1a1a1a); }
#cc-consent-modal .cc-consent-close { position: absolute; top: .5rem; right: .75rem; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: inherit; }
.cc-privacy-choices { cursor: pointer; }