/**
 * Site chrome: header branding, navigation, and the theme toggle.
 * Section-level content styling lives with its own block/pattern.
 */

/*
 * Core's global styles give every direct child of .wp-site-blocks
 * (header/main/footer) a `margin-block: 24px 0` via a zero-specificity
 * `:where()` rule (only :first-child's margin-start is zeroed), so
 * <main> always carries a 24px gap above it — visible as a strip of
 * background between the sticky header and the top of the page
 * (hero image, etc.) on every template. All section-to-section spacing
 * on this site is already handled explicitly via each section's own
 * padding, so this default is just unwanted here — zero it out.
 */
.wp-site-blocks > * {
	margin-block: 0;
}

/*
 * Sticky positioning has to live on the OUTER wrapper WordPress generates
 * for `<!-- wp:template-part {"tagName":"header"} -->` (a plain
 * `<header class="wp-block-template-part">` with no extra height of its
 * own), not on `.chennai-world-site-header` itself. A sticky element is
 * bounded by its containing block (its parent): since that wrapper is
 * exactly as tall as this element, there's no "room" for it to stay
 * put — once the wrapper's own box scrolls past the top of the
 * viewport, the "stuck" child scrolls away with it. Confirmed live: with
 * position:sticky only on .chennai-world-site-header, its rect.top
 * tracked window.scrollY exactly (i.e. behaved as static) past ~85px of
 * scroll; moving position/top/z-index to the wrapper fixes it.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * The frosted-glass background lives on a ::before layer behind the
 * header's content, not on .chennai-world-site-header directly:
 * backdrop-filter (like transform/filter/perspective) makes its element
 * a new containing block for any position:fixed descendant. The mobile
 * nav's full-screen overlay is exactly that — a position:fixed;inset:0
 * descendant of this header — so with backdrop-filter on the header
 * itself, the "full-screen" overlay was actually being sized against
 * the header's own ~85px-tall box instead of the viewport. Confirmed
 * live: removing backdrop-filter from the header let the overlay cover
 * the full 375×700 viewport again.
 */
.chennai-world-site-header {
	position: relative;
	align-items: center;
	padding: 1rem 4rem;
}

.chennai-world-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* color-mix (not a hardcoded rgba) so this stays correct against
	   background-secondary's light-theme override in theme-toggle.css. */
	background-color: color-mix(in srgb, var(--wp--preset--color--background-secondary) 82%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/*
 * Renders WordPress's own Site Logo block (core/site-logo) — the actual
 * image comes from wp-admin's logo picker (Appearance → Editor → Site
 * Logo), not hardcoded here — see CODING_STYLE_GUIDE.md's "Full Site
 * Editing / block themes" section for why. Until a logo is set in
 * wp-admin, this renders nothing; that's expected, not a bug.
 *
 * The real Chennai.World logo already contains the wordmark ("CHENNAI
 * WORLD" lettering baked into the image itself), so no separate text
 * sits next to it — unlike an icon-only mark, this is the whole brand
 * unit on its own.
 *
 * Contrast: the logo's navy icon and dark warm-gray wordmark read fine
 * on the light theme's cream background, but not on the dark theme's
 * near-black one (only the gold "W" has real contrast there) — so a
 * soft off-white backing card is applied by default (dark is the base
 * theme) and removed again in light theme, where the page background
 * already provides enough contrast on its own.
 */
.chennai-world-logo {
	display: flex;
	align-items: center;
	padding: 0.4rem 0.75rem;
	border-radius: 0.5rem;
	background-color: #f7f5f0;
}

.chennai-world-logo img {
	display: block;
	width: auto;
	height: 2rem;
}

html[data-theme="light"] .chennai-world-logo {
	padding: 0;
	background-color: transparent;
}

.chennai-world-nav {
	flex-grow: 1;
	justify-content: center;
}

.chennai-world-header-actions {
	align-items: center;
	gap: 1rem;
}

.chennai-world-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--text-secondary);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--text-secondary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.chennai-world-theme-toggle-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-gold);
}

.chennai-world-site-footer {
	/* 80px/64px/40px per the design; doesn't map onto the existing
	   spacing scale (32/48/80px), so hardcoded rather than forced onto
	   a nearby preset step. */
	padding: 5rem 4rem 2.5rem;
	background-color: var(--wp--preset--color--background-secondary);
}

.chennai-world-footer-columns {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--50);
}

.chennai-world-footer-brand {
	max-width: 24rem;
}

.chennai-world-footer-tagline {
	margin-top: 1rem;
	color: var(--wp--preset--color--text-secondary);
	font-style: italic;
}

.chennai-world-footer-heading {
	margin-bottom: 1rem;
	color: var(--wp--preset--color--accent-gold);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.chennai-world-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.chennai-world-footer-list a,
.chennai-world-footer-list .chennai-world-cta-button--text {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}

.chennai-world-footer-list a:hover,
.chennai-world-footer-list .chennai-world-cta-button--text:hover {
	color: var(--wp--preset--color--text-primary);
}

.chennai-world-nav .wp-block-navigation-item a {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

.chennai-world-nav .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--text-primary);
}

.chennai-world-footer-bottom {
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.chennai-world-footer-bottom p {
	margin: 0;
}

/* Below this, the nav collapses to core Navigation's built-in hamburger;
   shrink everything else so the row never overflows the viewport. */
@media (max-width: 600px) {

	.chennai-world-site-header {
		padding: 0.75rem 1rem;
		gap: 0.5rem;
	}

	.chennai-world-logo img {
		height: 1.5rem;
	}
}

/*
 * Whenever the nav is in hamburger mode (native core behaviour below
 * 600px, and our own extended range up to 1024px from SITE-005 above),
 * the theme toggle + "Book a service" button move out of the
 * always-visible header row and into the hamburger's own full-screen
 * overlay instead — matching where a visitor is already looking once
 * they've opened the menu, rather than duplicating them in a cramped
 * header row. There's no way to physically nest .chennai-world-header-
 * actions inside the Navigation block's rendered content (WordPress
 * discards a ref'd Navigation block's literal inner blocks — confirmed
 * live, the referenced menu fully replaces them), so this uses :has()
 * on the shared .chennai-world-site-header ancestor to detect the
 * overlay's open state and reposition the *same* actions element into
 * it instead, fixed to the bottom of the screen, above the overlay's
 * own z-index:100000 (core's value — see wp-includes/blocks/navigation/
 * style.css).
 */
@media (max-width: 1023.98px) {

	.chennai-world-nav {
		flex-grow: 0;
		margin-left: auto;
		justify-content: flex-end;
	}

	/*
	 * !important on both rules below: WordPress's own generated layout
	 * CSS for this Group block (a per-block `.wp-container-core-group-
	 * is-layout-*` class targeting the same element) has equal
	 * selector specificity and loads after our stylesheet, so a plain
	 * `display` declaration here loses the cascade tie and gets
	 * silently overridden back to `display:flex` — confirmed live.
	 */
	.chennai-world-header-actions {
		display: none !important;
	}

	.chennai-world-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .chennai-world-header-actions {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 100001;
		padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
		background-color: var(--wp--preset--color--background-secondary);
		border-top: 1px solid var(--wp--preset--color--surface);
	}

	.chennai-world-site-header:has(.is-menu-open) .chennai-world-header-actions .chennai-world-theme-toggle {
		justify-content: center;
	}

	.chennai-world-site-header:has(.is-menu-open) .chennai-world-header-actions .chennai-world-cta-button {
		text-align: center;
	}
}

/*
 * Core Navigation's own CSS hides its hamburger toggle above 600px
 * unconditionally (a hardcoded breakpoint, not based on whether the
 * nav items actually fit — see wp-includes/blocks/navigation/style.css),
 * while our full row of 5 links + logo + actions doesn't actually have
 * room until ~1024px. Between those two widths it neither collapses nor
 * fits, so it wraps onto a second row. Re-extend the "show the toggle,
 * hide the inline row" behaviour up to 1024px for this nav specifically.
 * The extra class in each selector (on top of core's own) keeps this
 * more specific than core's rules regardless of stylesheet order.
 */
@media (min-width: 600px) and (max-width: 1023.98px) {

	.chennai-world-nav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.chennai-world-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}