/*
 * Chennai Home Guide — site chrome layout (header/footer).
 *
 * Content-area layout (widths, wide/full alignment) comes from
 * theme.json's layout settings. This covers what theme.json can't
 * express. See CLAUDE.md, "CSS Architecture."
 *
 * Header and footer template parts sit outside <main>'s constrained
 * layout, so they don't automatically match its width — constrained
 * here to the same --wp--style--global--content-size WP exposes from
 * theme.json, so header/footer content lines up with the page below.
 */

/* Sitewide header width, matching the Project detail page's own wider
 * content convention (previously a body.single-chg_project-only override
 * in patterns/single-project.css; every other template used the narrower
 * 60rem default below, which read as visibly cramped by comparison — one
 * global width now, no page-specific override). Footer intentionally
 * kept on its own, unrelated width below. */
.chg-site-header__inner {
	max-width: 82rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--sm);
}

.chg-site-footer__inner,
.chg-site-footer__bottom {
	max-width: var(--wp--style--global--content-size, 60rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--sm);
}

/* Page gutter for <main>. theme.json enables
 * useRootPaddingAwareAlignments but sets no root padding, so on narrow
 * screens constrained templates ran edge to edge (0px at 390px/768px).
 * Setting WordPress's own root-padding variables here — rather than a
 * plain padding rule — keeps core's behaviour intact: `.has-global-padding`
 * applies them, nested padded groups reset to 0, and any `.alignfull`
 * child still breaks out to the viewport edge. Same 1rem token as the
 * header and footer.
 *
 * Excluded because they already pad themselves (adding this would double
 * the gutter): the front page (`body.home`, front-page.css) and the
 * Project detail page (`.chg-project-single`, single-project.css). The
 * Palm Court and VR Livin microsites don't load theme CSS at all. */
body:not(.home) main.chg-main:not(.chg-project-single) {
	--wp--style--root--padding-left: var(--wp--preset--spacing--sm);
	--wp--style--root--padding-right: var(--wp--preset--spacing--sm);
}

/* ---------- Header ---------- */

.chg-site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--wp--preset--color--background);
}

.chg-site-header__inner {
	position: relative;
	padding-block: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow--sm);
	align-items: center;
}

@media (max-width: 767.98px) {
	.chg-site-header__inner {
		padding-block: 0.75rem;
	}
}

.chg-wordmark {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* Source PNGs (assets/images/main-logo.png, chg-logo-compact-trimmed.png)
 * have no alpha channel — safe only because the header's own background
 * is the same pure white as the logo canvas (theme.json's "background"
 * color). If that ever changes, this logo needs revisiting, not just a
 * CSS tweak.
 *
 * Sized in px, not rem: these are fixed-aspect-ratio raster assets, not
 * type. Below 480px the <picture> in parts/header.html swaps to
 * chg-logo-compact-trimmed.png (the icon mark alone, ~1:1 ratio) rather
 * than shrinking the full wordmark further — at a legible full-wordmark
 * size the "HOME GUIDE"/tagline microtext baked into the PNG becomes
 * unreadable on real phone screens (confirmed by rendering and
 * inspecting actual pixel crops, not assumed), so a compact mark reads
 * better small than a tiny multi-line lockup does. From 480px up, the
 * full main-logo.png (1250:308 ratio) renders at a ~215px-wide,
 * ~85px-navbar-tall size, chosen by rendering and measuring against the
 * 200–240px/80–90px targets. */
.chg-wordmark__logo {
	display: block;
	width: auto;
	height: 38px;
}

@media (min-width: 480px) {
	.chg-wordmark__logo {
		height: 53px;
	}
}

.chg-site-header__actions {
	align-items: center;
	gap: 0.25rem;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--foreground);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-tint);
}

.chg-header-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--foreground);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.chg-header-search:hover {
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-tint);
}

/*
 * Header Search — a compact disclosure panel (assets/js/header-search.js
 * toggles the `hidden` attribute only; no `display` is set on the bare
 * .chg-header-search-panel class, deliberately, to avoid the CSS-
 * specificity trap already documented elsewhere in this theme
 * (patterns/single-project.css's .chg-media-hero__item comment,
 * patterns/project-document-gate.css's .chg-gate-modal comment): a class
 * selector setting `display` has equal specificity to the browser's own
 * `[hidden] { display: none }` rule, so author CSS loaded after the UA
 * stylesheet would win regardless of the `hidden` attribute. Styling
 * only the `:not([hidden])` state below sidesteps the trap entirely
 * rather than requiring an explicit override rule.
 */
/*
 * Positioned relative to .chg-site-header__inner (the full-width header
 * row, see above), not the narrow .chg-header-search-wrap — anchoring
 * to the wrap alone would place `right: 0` only a little more than the
 * icon button's own width from the header's right edge, letting a
 * 20rem-wide panel overflow past the viewport's LEFT edge on narrow
 * phones (confirmed by rendering: the panel's left portion was cut off
 * at 390px). Anchoring to the full header row instead gives the panel
 * the header's whole content width to open into.
 */
.chg-header-search-panel:not([hidden]) {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 50;
	width: min(20rem, calc(100vw - 2 * var(--wp--preset--spacing--sm)));
	padding: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--background);
	box-shadow: var(--wp--custom--shadow--hover);
}

.chg-header-search-panel__form.wp-block-search {
	margin: 0;
}

/*
 * Header nav CTAs (Sign Up / Login, Contact Us, List Your Property) —
 * rendered as ordinary `wp:navigation-link` items with a `className`
 * (see parts/header.html) rather than separate elements outside the
 * `core/navigation` block, specifically so all three automatically
 * appear in WordPress core's own mobile overlay (its Interactivity-API-
 * driven `wp-block-navigation__responsive-container`, confirmed live —
 * core already provides focus management, ARIA state, and Escape/
 * focus-out handling for that overlay; duplicating that behavior by
 * hand for 3 separate CTAs was the thing worth avoiding). `className`
 * lands on the core-rendered `<li class="wp-block-navigation-item ...">`
 * wrapper, not the inner `<a>` — hence targeting the descendant
 * `.wp-block-navigation-item__content` below for the actual button
 * chrome.
 */
.chg-nav-cta .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--radius--sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chg-nav-cta--primary .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-weight: 700;
}

.chg-nav-cta--primary .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--background);
}

.chg-nav-cta--secondary .wp-block-navigation-item__content {
	padding: calc(0.4rem - 1px) calc(0.85rem - 1px);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 55%, transparent);
	color: var(--wp--preset--color--foreground);
	font-weight: 500;
}

.chg-nav-cta--secondary .wp-block-navigation-item__content:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--border) 85%, var(--wp--preset--color--accent));
	color: var(--wp--preset--color--accent-dark);
}

.chg-nav-cta--tertiary .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.chg-nav-cta--tertiary .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-dark);
}

/*
 * Inside WordPress core's own mobile overlay, every nav item already
 * gets a larger, roomier row (see the existing
 * ".wp-block-navigation__responsive-container.is-menu-open
 * .wp-block-navigation-item__content" rule below) -- this only adds the
 * one thing that rule doesn't: keeping List Your Property visually the
 * most prominent entry in the stack, matching its desktop weight.
 */
.wp-block-navigation__responsive-container.is-menu-open .chg-nav-cta--primary .wp-block-navigation-item__content {
	margin-top: var(--wp--preset--spacing--xs);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

/*
 * Widen WordPress core's own hardcoded mobile-nav-overlay breakpoint
 * (600px -- see wp-includes/blocks/navigation/style.min.css, confirmed
 * by direct inspection) up to 1024px. At 600px, this header now has to
 * fit 4 nav links + 3 styled CTA buttons in one row -- comfortably wide
 * desktop viewports only, not tablets. `!important` is used
 * deliberately here, not as a shortcut: core's own breakpoint rules
 * already resolve their own specificity internally (some of core's own
 * rules above repeat a single class 2-3 times purely to out-specificity
 * an earlier rule), so matching/exceeding that chain without
 * `!important` would mean silently depending on core's exact current
 * specificity values, liable to break on a future WordPress update in
 * a way that would be hard to notice. Overriding a framework's own
 * hardcoded responsive breakpoint is the documented, unavoidable case
 * CLAUDE.md's "avoid !important" guidance itself anticipates.
 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/*
 * Mobile/tablet header control order + alignment fix (<1024px, the
 * same range Slice 2 already uses for the nav collapse -- see the
 * breakpoint override above). Desired order is Logo / Search /
 * Hamburger, but DOM order in parts/header.html is
 * [nav block (renders as just the hamburger toggle below 1024px)]
 * then [search wrap] -- unchanged deliberately, so desktop's own
 * inline nav-links-then-search order is completely unaffected (no
 * `order` override exists outside this same media query). `order`
 * is pure visual reflow, no markup change needed.
 *
 * `.wp-block-navigation` also gets an explicit flex/center treatment
 * here, scoped to the same range: the outer <nav> element (not just
 * its inner toggle button) is the actual flex child of
 * .chg-site-header__actions, and its own box wasn't guaranteed to
 * center a single child the same way the plain .chg-header-search-wrap
 * <div> does -- this removes that inconsistency without touching
 * anything at 1024px and up, where the full nav-links row (not just
 * the toggle) renders instead.
 */
@media (max-width: 1023.98px) {
	.chg-site-header__actions > .wp-block-navigation {
		display: flex;
		align-items: center;
		margin: 0;
		order: 2;
	}

	.chg-site-header__actions > .chg-header-search-wrap {
		order: 1;
	}
}

/* Mobile nav overlay — WordPress core's navigation block markup,
 * restyled to match this site rather than the default dark overlay.
 * Selectors are core's own class names (unversioned, but stable across
 * recent WP releases); nothing here depends on our own markup. */

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--wp--preset--color--foreground);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	padding: 0.875rem 1rem;
}

/* ---------- Section rhythm ----------
 * General enough (padding rhythm + an alternating surface background)
 * that it moved here once a second page — the single Project page,
 * alongside the homepage — needed it. See CLAUDE.md, "CSS Architecture."
 */

.chg-section {
	padding-block: var(--wp--preset--spacing--xl);
}

.chg-section--alt {
	background-color: var(--wp--preset--color--surface);
}

@media (min-width: 860px) {
	.chg-section {
		padding-block: var(--wp--preset--spacing--2xl);
	}
}

/* ---------- Stat grid ----------
 * Structural/typographic only — no color here. A stat grid's color
 * treatment is context-dependent (the homepage's dark full-bleed band
 * vs. the Builder hero's plain white background), so each page's own
 * pattern file sets .chg-stat__number/.chg-stat__label color, scoped
 * to its own wrapper class. Moved here once a second page (Builder,
 * Slice 4) needed the same grid, matching Section rhythm above.
 */

.chg-stat-grid {
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
}

.chg-stat {
	flex: 1 1 40%;
	text-align: center;
}

.chg-stat__number {
	margin: 0;
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/*
 * A stat that honestly resolves to "Not available" (e.g. a Locality
 * with no priced Projects yet) shouldn't render at the same oversized
 * weight as a real number — same reduced-emphasis treatment already
 * used for .chg-price-callout__value's unavailable state.
 */
.chg-stat__number .chg-unavailable {
	font-size: var(--wp--preset--font-size--large);
}

.chg-stat__label {
	margin: 0.125rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media (min-width: 640px) {
	.chg-stat {
		flex: 1 1 0;
	}
}

/*
 * Inline variant: a compact, left-aligned stat row sitting under a
 * page heading (the Builder hero), not a full-width band.
 */
.chg-stat-grid--inline {
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
}

.chg-stat-grid--inline .chg-stat {
	flex: 0 0 auto;
	text-align: left;
}

/*
 * Compact variant: sized for a stat row inside a card in a grid (the
 * Builder archive, Slice 7), not a page hero — the hero's clamp() is
 * sized for one prominent row under an H1, too large next to two other
 * small cards in the same row.
 */
.chg-stat-grid--compact .chg-stat__number {
	font-size: var(--wp--preset--font-size--large);
}

.chg-stat-grid--compact {
	gap: var(--wp--preset--spacing--md);
}

/* ---------- Footer ---------- */

.chg-site-footer__inner {
	padding-block: var(--wp--preset--spacing--lg);
	border-top: 1px solid var(--wp--preset--color--border);
	gap: var(--wp--preset--spacing--lg);
}

@media (max-width: 767.98px) {
	.chg-site-footer__inner {
		padding-block: var(--wp--preset--spacing--md);
	}
}

.chg-footer-col {
	flex: 1 1 45%;
	min-width: 9rem;
}

.chg-footer-col--brand {
	flex-basis: 100%;
}

@media (min-width: 640px) {
	.chg-footer-col--brand {
		flex: 0 1 16rem;
	}

	.chg-footer-col:not(.chg-footer-col--brand) {
		flex: 0 1 auto;
	}
}

.chg-footer-brand {
	margin: 0 0 0.375rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
}

.chg-footer-tagline {
	margin: 0;
	max-width: 20rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-footer-col__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.chg-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chg-footer-list li {
	margin: 0 0 0.5rem;
}

.chg-footer-list a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.chg-footer-list a:hover {
	color: var(--wp--preset--color--accent);
}

.chg-footer-note {
	margin: 0;
	max-width: 16rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
}

.chg-site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--sm);
}

.chg-site-footer__text {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.chg-footer-logo {
	display: inline-block;
	margin-bottom: 0.75rem;
}

.chg-footer-logo img {
	display: block;
	height: 2.25rem;
	width: auto;
}

.chg-footer-description {
	margin: 0;
	max-width: 22rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.chg-site-footer__tagline {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.chg-site-footer__tagline:hover {
	text-decoration: underline;
}

.chg-footer-back-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1;
}

.chg-footer-back-to-top:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}