/*
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.13.0
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. */

/* 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 {
	min-height: 0;
	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;
}

/* 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; }

/* On mobile the nav collapses to a hamburger — let the zones size naturally and
   condense the bar: the 186px desktop height + 155px logo + large CTA eat a phone
   viewport. Shrink them so the hero shows above the fold. */
@media (max-width: 600px) {
	header.wp-block-group > nav.wp-block-navigation,
	header.wp-block-group > .wp-block-buttons { flex: 0 0 auto; }
	header.wp-block-group {
		min-height: 0;
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
		gap: 0.5rem;
	}
	header.wp-block-group .wp-block-site-logo img,
	header.wp-block-group .wp-block-site-logo { width: 104px !important; }
	header.wp-block-group .cc-venue-cta a.wp-block-button__link {
		padding: 11px 16px;
		font-size: 13px;
	}
}

/* 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;
}

/* Match the Squarespace header bar height (measured 186px). */
header.wp-block-group {
	min-height: 186px;
}

/* 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);
}

/* ---- 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;
	scroll-snap-type: x mandatory;
	-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; }
}

/* ---- 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; }
}