/*
 * Simple Theme — Chrome Stylesheet (v1.6.0)
 *
 * Authoring rules:
 *   - All colors and typography flow through --simple-chrome-* CSS vars.
 *   - var(--simple-chrome-*, fallback) — fallbacks match the neutral defaults
 *     in theme.json settings.custom. theme.json is the source of truth;
 *     fallbacks are belt-and-suspenders for environments where theme.json
 *     hasn't yet resolved (e.g. early SSR, broken theme.json).
 *   - No hardcoded brand colors. Neutral by default, deliberately formatted.
 *   - No !important on chrome paint rules — must remain cleanly overridable
 *     by Site Editor and Launch's Manage>Theme tab via the global styles post.
 *   - No inline styles in template parts that bypass tokens.
 *
 * v1.6.0 changes from v1.5.0 — mobile responsive (sub-delivery 3):
 *   - Switched core/navigation `overlayMenu` from "never" to "mobile" on both
 *     header parts. Below 768px the inline nav collapses into core's hamburger
 *     overlay (top-down, full-viewport). We get focus-trap, esc-to-close, and
 *     ARIA plumbing free from core — no parallel infrastructure.
 *   - Restyled core's overlay panel to match Simple Theme paint surface:
 *     paper bg, hairline rules between items, Georgia 18px nav typography.
 *   - Hover-bridge from v1.4.0 sub-delivery 1 wrapped in
 *     `@media (hover: hover) and (pointer: fine)` so it doesn't fire on touch.
 *     Touch-side gets simple tap-to-open submenu via core's overlay structure.
 *   - Header brand stack at mobile: tagline hidden (header-expanded only,
 *     where tagline lives), logo + site title remain. Logo slot 28px square
 *     instead of 36px.
 *   - Footer collapse changed from direct 4 → 1 at 768px to three-stage
 *     4 → 2 → 1 (≥768 = 4col, 481–767 = 2col, ≤480 = 1col stacked).
 *   - Existing flex-wrap mobile rules on `.simple-header-*` retained as
 *     fallback for the brief moment before core's overlay JS hydrates.
 *
 * v1.5.0 changes from v1.4.0:
 *   - No CSS changes. Version stamp updated for lockstep with the v1.5.0
 *     ship. Fix is template-part + render_block filter (PHP-side).
 *     See inc/class-simple-theme-chrome-binder.php for the
 *     chrome-field handshake v2 implementation.
 *
 * v1.4.0 changes from v1.3.3:
 *   - Submenu hover-gap bug fix. v1.3.x used `margin-top: 6px` on the
 *     submenu container, which created a transparent hit-corridor that
 *     dropped :hover state and collapsed the menu mid-traverse. Replaced
 *     with a transparent ::before bridge of the same height — visual gap
 *     preserved, hover continuity restored. Also added small vertical
 *     padding on parent (has-child) trigger anchors with negative margin
 *     offset, so a diagonal cursor path off the label stays on a hovered
 *     surface. Baseline alignment unchanged.
 *   - Inter-section margin override. WP-core's
 *     `:where(.is-layout-flow) > * { margin-block-start: 1.2rem }` was
 *     stacking 19.2px between every Launch section on the page, breaking
 *     design consistency for edge-to-edge sections. Zeroed on
 *     `.ssla-section` directly — internal section flow rhythm
 *     (paragraphs, headings inside a section) untouched.
 *
 * v1.3.3 changes from v1.3.2:
 *   - .ssla-chrome-*-slot wrappers introduced in template parts to carry
 *     data-ssla-chrome-field attributes on logo, site-title, tagline, and
 *     footer text fields (per Mia's chrome-field handshake for v3.6.11
 *     inline-edit). Slots must be VISUALLY TRANSPARENT — Launch ships
 *     hover/click affordance via its own .ssla-ov-chrome-hover CSS;
 *     theme-side slots are layout passthrough only.
 *   - Logo slot added to header-simple (was site-title-only); logo block
 *     now appears in compact-template pages too.
 *
 * v1.3.2 changes from v1.3.1:
 *   - Editor-only post title hide rule. Targets the WP 6.5+ wrapper class
 *     (.editor-visual-editor__post-title-wrapper) plus legacy fallbacks.
 *     Editor-only — front-end core/post-title is untouched.
 *   - Chrome-utility custom block styles (login + expandable search).
 *
 * v1.3.1 changes from v1.3.0:
 *   - Sticky now targets header.wp-block-template-part wrapper (not inner group)
 *     — wrapper is what needs to escape document flow; inner group has no room.
 *   - Inter-section gap zeroed (chrome flush against page content).
 *   - Sub-menu padding increased (was smooshed at 6px → now 12px/14px).
 *   - Footer column ratios → 1.4fr 0.8fr 1.6fr 1.2fr (was 1.6fr 1fr 1.6fr 1.2fr).
 *   - Brand column treated as wordmark, not eyebrow-matched heading.
 *   - Header search input styled to match chrome typography.
 *   - Logo swap rule: site-logo present hides wordmark via :has() selector.
 *
 * See README.md for the token contract.
 */

/* ===================================================================
 * STICKY CASCADE FIX
 * position: sticky requires every ancestor to NOT have overflow:hidden|clip.
 * TT5-derivative themes set overflow on .wp-site-blocks and friends, which
 * silently breaks sticky. We override on the documented set of ancestors.
 * If a future TT5 update adds a new wrapper, add it here.
 * =================================================================== */

.wp-site-blocks,
body > .wp-site-blocks > main,
body > .wp-site-blocks > .wp-block-group,
body.wp-singular,
body.home {
	overflow: visible;
}

/* ===================================================================
 * INTER-SECTION GAP — FLUSH CHROME
 * WP-core block-gap defaults add space between top-level template parts.
 * We zero it so chrome sits flush against page content. (Per Glenn,
 * v1.3.1 punch-list item 1.) Page content can still set its own internal
 * spacing; this only zeros the gap BETWEEN top-level sections.
 * =================================================================== */

body > .wp-site-blocks {
	gap: 0;
}

body > .wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ===================================================================
 * STICKY HEADER — APPLIED TO WRAPPER
 *
 * v1.3.0 BUG: sticky was applied to .simple-header-* (inner group). The
 * outer <header class="wp-block-template-part"> wrapper is the same height
 * as the inner group, so sticky had no room to travel — element pinned to
 * top of an 82px box that scrolls away with the page.
 *
 * v1.3.1 FIX: sticky on the wrapper. :has() scopes it to Simple Theme's
 * headers only, so other themes/parts using core/template-part aren't
 * affected. :has() supported in Safari 15.4+, Chrome 105+, Firefox 121+.
 *
 * Background lives on the wrapper too so the sticky zone is visually
 * complete (not transparent over scrolled content).
 * =================================================================== */

header.wp-block-template-part:has(.simple-header-simple),
header.wp-block-template-part:has(.simple-header-expanded) {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--custom--simple-chrome--bg, #FAFAFA);
	box-shadow:
		0 1px 0 var(--wp--custom--simple-chrome--hairline, #E5E5E5),
		0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Editor parity: disable sticky inside Site Editor iframe so the editor
 * canvas behaves like a static document. Otherwise editor scroll feels
 * broken when the header refuses to move. */
.editor-styles-wrapper header.wp-block-template-part:has(.simple-header-simple),
.editor-styles-wrapper header.wp-block-template-part:has(.simple-header-expanded) {
	position: relative;
	box-shadow: 0 1px 0 var(--wp--custom--simple-chrome--hairline, #E5E5E5);
}

/* Editor-only: hide the post title surface from Gutenberg.
 *
 * Glenn's preference: the editor title input gets in the way when the
 * page itself contains a hero/H1 rendered by a section block. Hiding it
 * in the editor surface only — front-end core/post-title remains usable
 * by templates that want it (e.g. single.html, archive.html).
 *
 * Targets all known WP-core selectors. Class names have shifted across
 * versions (5.x → 6.x → 6.5+). Listing both wrapper and legacy classes
 * keeps the rule resilient to version drift without needing a per-version
 * branch.
 *
 * Scoped to .editor-styles-wrapper so it only applies inside Gutenberg
 * iframes (post editor, site editor) and never leaks to front-end render.
 *
 * post_type_support for 'title' is intentionally NOT removed — that
 * would break REST writes and migration imports that set post_title.
 * This is a surface-only hide.
 */
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper,
.editor-styles-wrapper .wp-block-post-title.editor-post-title,
.editor-styles-wrapper .editor-post-title,
.editor-styles-wrapper .editor-post-title__input {
	display: none;
}

/* ===================================================================
 * SHARED CHROME TYPOGRAPHY
 * =================================================================== */

.simple-header-simple,
.simple-header-expanded,
.simple-footer-simple {
	font-family: var(--wp--custom--simple-chrome--font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ===================================================================
 * HEADER — SIMPLE VARIANT
 * Brand left, nav right, single-row layout.
 * =================================================================== */

.simple-header-simple {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px clamp(24px, 5vw, 64px);
	color: var(--wp--custom--simple-chrome--text, #1A1A1A);
}

.simple-header-simple .nav-brand {
	color: var(--wp--custom--simple-chrome--heading, #0F0F0F);
	font-size: 16px;
	font-weight: var(--wp--custom--simple-chrome--heading-weight, 700);
	letter-spacing: var(--wp--custom--simple-chrome--heading-letter-spacing, 0.5px);
	text-decoration: none;
}

.simple-header-simple .nav-links {
	display: flex;
	gap: 32px;
}

.simple-header-simple .nav-links a {
	color: var(--wp--custom--simple-chrome--link-rest, #1A1A1A);
	font-size: 12px;
	font-weight: var(--wp--custom--simple-chrome--link-weight, 500);
	letter-spacing: var(--wp--custom--simple-chrome--link-letter-spacing, 1px);
	text-transform: var(--wp--custom--simple-chrome--link-text-transform, uppercase);
	text-decoration: none;
	transition: color 0.2s;
}

.simple-header-simple .nav-links a:hover {
	color: var(--wp--custom--simple-chrome--link-hover, #000000);
}

/* Submenu chevron — small breathing room between label and arrow. */
.simple-header-simple .nav-links .wp-block-navigation-item__label {
	margin-right: 4px;
}

@media (max-width: 768px) {
	.simple-header-simple {
		padding: 14px 24px;
		flex-wrap: wrap;
		gap: 12px;
	}
	.simple-header-simple .nav-links {
		gap: 16px;
		flex-wrap: wrap;
	}
}

/* ===================================================================
 * HEADER — EXPANDED VARIANT
 * Brand + tagline grouped left, nav right, search trailing.
 * =================================================================== */

.simple-header-expanded {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px clamp(24px, 5vw, 64px);
	color: var(--wp--custom--simple-chrome--text, #1A1A1A);
	gap: 32px;
}

.simple-header-expanded .nav-brand-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.simple-header-expanded .nav-brand {
	color: var(--wp--custom--simple-chrome--heading, #0F0F0F);
	font-size: 18px;
	font-weight: var(--wp--custom--simple-chrome--heading-weight, 700);
	letter-spacing: var(--wp--custom--simple-chrome--heading-letter-spacing, 0.5px);
	text-decoration: none;
}

.simple-header-expanded .nav-tagline {
	color: var(--wp--custom--simple-chrome--muted, #666666);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1px;
}

/* Right-side cluster: nav + search */
.simple-header-expanded .nav-cluster {
	display: flex;
	align-items: center;
	gap: 24px;
}

.simple-header-expanded .nav-links {
	display: flex;
	gap: 32px;
	align-items: center;
}

.simple-header-expanded .nav-links a {
	color: var(--wp--custom--simple-chrome--link-rest, #1A1A1A);
	font-size: 12px;
	font-weight: var(--wp--custom--simple-chrome--link-weight, 500);
	letter-spacing: var(--wp--custom--simple-chrome--link-letter-spacing, 1px);
	text-transform: var(--wp--custom--simple-chrome--link-text-transform, uppercase);
	text-decoration: none;
	transition: color 0.2s;
}

.simple-header-expanded .nav-links a:hover {
	color: var(--wp--custom--simple-chrome--link-hover, #000000);
}

/* Submenu chevron — small breathing room between label and arrow. */
.simple-header-expanded .nav-links .wp-block-navigation-item__label {
	margin-right: 4px;
}

/* Site logo — when present, replaces wordmark. CSS swap via :has().
 * Logic: if site-logo block has rendered an image, hide the wordmark.
 * If no logo set, site-logo block renders nothing (or admin placeholder),
 * and wordmark remains visible. */
.simple-header-expanded .nav-brand-group:has(.wp-block-site-logo img) .nav-brand {
	display: none;
}

.simple-header-expanded .nav-brand-group .wp-block-site-logo img {
	max-height: 40px;
	width: auto;
}

/* ===================================================================
 * CHROME UTILITY BLOCK (login + expandable search)
 *
 * Lives in .nav-cluster, replaces the previous standalone core/search.
 * Two icon buttons sitting side-by-side; clicking the search icon
 * expands an input inline (data-state attribute on .chrome-utility-search
 * drives the visual state). Login icon is always visible, always points
 * at /login (Identity-scripted entry point).
 *
 * State machine:
 *   data-state="collapsed" → only search icon visible, login visible to
 *                             its right, no input
 *   data-state="expanded"  → input visible (animated in), close icon
 *                             replaces search icon, login pushed aside
 *                             via the order:1 trick on the form
 *
 * No !important. Cascade-only. JS toggles data-state, CSS reads it.
 * =================================================================== */
.simple-header-expanded .simple-chrome-utility {
	display: flex;
	align-items: center;
	gap: 8px;
}

.simple-chrome-utility .chrome-utility-search {
	display: flex;
	align-items: center;
	position: relative;
}

.simple-chrome-utility .chrome-utility-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.simple-chrome-utility .chrome-utility-search-toggle:hover {
	color: var(--wp--custom--simple-chrome--link-hover, #000000);
	border-color: var(--wp--custom--simple-chrome--hairline, #E5E5E5);
}

/* Show search icon by default, swap to close on expand. */
.simple-chrome-utility .chrome-utility-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.simple-chrome-utility .chrome-utility-search[data-state="collapsed"] .chrome-utility-icon-close {
	display: none;
}

.simple-chrome-utility .chrome-utility-search[data-state="expanded"] .chrome-utility-icon-search {
	display: none;
}

/* Form is collapsed-by-default — width 0, opacity 0, not interactive.
 * On expand, transitions to natural width with a small delay so the
 * icon-swap reads first. */
.simple-chrome-utility .chrome-utility-search-form {
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 0;
	max-width: 0;
	opacity: 0;
	margin: 0;
	transition: max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}

.simple-chrome-utility .chrome-utility-search[data-state="expanded"] .chrome-utility-search-form {
	width: auto;
	max-width: 200px;
	opacity: 1;
	margin-left: 8px;
}

.simple-chrome-utility .chrome-utility-search-input {
	border: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	border-radius: 4px;
	background: transparent;
	font-family: inherit;
	font-size: 12px;
	padding: 6px 10px;
	width: 100%;
	min-width: 140px;
	color: var(--wp--custom--simple-chrome--text, #1A1A1A);
}

.simple-chrome-utility .chrome-utility-search-input:focus {
	outline: 1px solid var(--wp--custom--simple-chrome--accent, #666666);
	outline-offset: 1px;
	border-color: var(--wp--custom--simple-chrome--accent, #666666);
}

.simple-chrome-utility .chrome-utility-login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	text-decoration: none;
	transition: color 0.2s, background 0.2s, border-color 0.2s;
	border: 1px solid transparent;
}

.simple-chrome-utility .chrome-utility-login:hover,
.simple-chrome-utility .chrome-utility-login:focus {
	color: var(--wp--custom--simple-chrome--link-hover, #000000);
	border-color: var(--wp--custom--simple-chrome--hairline, #E5E5E5);
}

/* Editor preview — static layout, no expand/collapse interaction. Just
 * shows the two icons sitting next to each other. */
.simple-chrome-utility .chrome-utility-editor-preview {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--custom--simple-chrome--muted, #666666);
}

@media (max-width: 768px) {
	.simple-header-expanded {
		padding: 16px 24px;
		flex-wrap: wrap;
		gap: 12px;
	}
	.simple-header-expanded .nav-cluster {
		gap: 12px;
		flex-wrap: wrap;
	}
	.simple-header-expanded .nav-links {
		gap: 16px;
		flex-wrap: wrap;
	}
	.simple-chrome-utility .chrome-utility-search[data-state="expanded"] .chrome-utility-search-form {
		max-width: 140px;
	}
	.simple-chrome-utility .chrome-utility-search-input {
		min-width: 100px;
	}
}

/* ===================================================================
 * CHROME-FIELD SLOTS (v1.3.3)
 *
 * Wrapper groups in header/footer template parts carrying
 * data-ssla-chrome-field attributes (logo, site_title, tagline, and
 * the seven footer text fields). Per Mia's chrome-field handshake
 * for Launch v3.6.11, these wrappers exist solely to host the data
 * attribute on the rendered HTML element — they must NOT introduce
 * visual change.
 *
 * Strategy: width/margin/padding zeroed; layout properties inherited
 * from parent flex context. The wrapper effectively becomes a
 * transparent passthrough.
 *
 * NOT using `display: contents` because:
 *   - Some screen readers drop the wrapper's role/landmark when contents
 *     is set; we don't want to hide the wrapper from a11y trees.
 *   - Launch's overlay binder uses getBoundingClientRect() on the slot
 *     element to position hover affordance and click hit zones. With
 *     `display: contents` the wrapper has no box, so rect is zero.
 *   - Inline-block-style behavior is what we actually want: a real box
 *     around each editable element so Launch can paint affordance on it.
 *
 * Result: visually identical to v1.3.2 (where these blocks rendered
 * unwrapped); structurally Launch sees a real DOM element per field.
 * =================================================================== */
.ssla-chrome-logo-slot,
.ssla-chrome-site-title-slot,
.ssla-chrome-tagline-slot,
.ssla-chrome-footer-brand-heading-slot,
.ssla-chrome-footer-brand-description-slot,
.ssla-chrome-footer-about-heading-slot,
.ssla-chrome-footer-about-description-slot,
.ssla-chrome-footer-connect-heading-slot,
.ssla-chrome-footer-connect-description-slot,
.ssla-chrome-footer-copyright-slot {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

/* In the brand-group's vertical flex, slots stack naturally — preserve
 * the brand-group's parent gap by not adding our own. */
.nav-brand-group > .ssla-chrome-logo-slot,
.nav-brand-group > .ssla-chrome-site-title-slot,
.nav-brand-group > .ssla-chrome-tagline-slot {
	width: auto;
}

/* Inside footer columns, slots become block siblings of one another;
 * the existing footer-column rules handle the spacing between heading/
 * description blocks via line-height + paragraph margins. Slots add
 * nothing on top. */
.footer-column > .ssla-chrome-footer-brand-heading-slot,
.footer-column > .ssla-chrome-footer-brand-description-slot,
.footer-column > .ssla-chrome-footer-about-heading-slot,
.footer-column > .ssla-chrome-footer-about-description-slot,
.footer-column > .ssla-chrome-footer-connect-heading-slot,
.footer-column > .ssla-chrome-footer-connect-description-slot {
	width: auto;
}

.footer-copyright > .ssla-chrome-footer-copyright-slot {
	width: auto;
}

/* ===================================================================
 * NAVIGATION SUBMENUS — DROPDOWN BREATHING ROOM
 *
 * v1.3.0 had submenu items with WP-core default ~6px vertical padding,
 * which read as "smooshed". Bump to 12px vertical / 14px horizontal,
 * with 6px gap from trigger.
 *
 * Targets all chrome-level navigations (header simple + expanded), not
 * footer nav (footer-links uses different layout).
 *
 * v1.4.0: hover-gap bug fix.
 *   v1.3.x used `margin-top: 6px` to create the visual gap between the
 *   trigger and the dropdown card. That margin is a transparent corridor
 *   the cursor must cross — and crossing it drops both `:hover` states
 *   (parent <li> and submenu container), so WP-core's hover-open logic
 *   collapses the submenu before the cursor reaches a child item.
 *
 *   Fix: keep the 6px visual gap, replace the margin with a transparent
 *   `::before` bridge of the same height. The bridge is part of the
 *   submenu container's box, so :hover stays sticky as the cursor
 *   traverses it. Visual paint is unchanged from v1.3.2 — the card edge
 *   still starts 6px below the trigger baseline.
 *
 *   Also added: small vertical padding on the trigger anchor itself
 *   (header-expanded + header-simple). The trigger's previous hover hit
 *   area was the text height alone; a diagonal cursor path could exit
 *   the trigger before reaching the bridge. Padding extends the trigger
 *   hit zone vertically without changing baseline alignment.
 * =================================================================== */

.simple-header-simple .wp-block-navigation__submenu-container,
.simple-header-expanded .wp-block-navigation__submenu-container {
	background: var(--wp--custom--simple-chrome--bg, #FAFAFA);
	border: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	padding: 8px 0;
	min-width: 200px;
	/* v1.4.0: margin-top removed — see ::before bridge below. */
}

/* Hover-bridge — 6px transparent extension above the submenu card so the
 * cursor never traverses an unhovered surface between trigger and items.
 * Width matches the submenu container; height matches the prior 6px gap.
 *
 * v1.6.0: wrapped in `@media (hover: hover) and (pointer: fine)` so the
 * bridge only paints on devices with cursor hover. On touch devices core's
 * mobile overlay (overlayMenu="mobile") replaces the dropdown entirely,
 * so the bridge is moot — and at intermediate widths above the overlay
 * threshold the bridge is genuinely useful. The hit-zone padding below
 * is wrapped in the same guard for the same reason: tap targets don't
 * need a hover-corridor preserve. */
@media (hover: hover) and (pointer: fine) {
	.simple-header-simple .wp-block-navigation__submenu-container::before,
	.simple-header-expanded .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: -6px;
		left: 0;
		right: 0;
		height: 6px;
		background: transparent;
	}

	/* Trigger hit-zone padding — small vertical pad on parent anchors so a
	 * diagonal cursor path off the label still lands on a hovered surface
	 * before reaching the bridge. Negative margin offsets the layout shift
	 * so brand/title baseline stays where it was in v1.3.x. */
	.simple-header-simple .nav-links .wp-block-navigation-item.has-child > a,
	.simple-header-expanded .nav-links .wp-block-navigation-item.has-child > a {
		padding-block: 6px;
		margin-block: -6px;
	}
}

.simple-header-simple .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.simple-header-expanded .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 12px 14px;
	display: block;
}

.simple-header-simple .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
.simple-header-expanded .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: rgba(0, 0, 0, 0.02);
}

/* ===================================================================
 * INTER-SECTION FLOW (v1.4.0)
 *
 * WP-core emits `:root :where(.is-layout-flow) > * { margin-block-start:
 * 1.2rem }` from theme.json defaults — applied to every direct child of
 * any `.is-layout-flow` container. On Simple Theme pages, Launch sections
 * sit at `<main>.is-layout-flow > <div>.entry-content.is-layout-flow >
 * <section>.ssla-section`, which means every section between the first
 * and last picks up an unrequested 19.2px gap above it. That stacks
 * against each section's own internal vertical rhythm and breaks
 * design consistency for full-bleed / edge-to-edge sections.
 *
 * Fix: zero the top margin on `.ssla-section` itself. The rule targets
 * the section element, not its descendants — so internal flow rhythm
 * (paragraphs, headings, lists inside a section) is untouched and still
 * inherits the 1.2rem default. This is a between-section concern only.
 *
 * Specificity: `.ssla-section` (0,1,0) beats `:where(.is-layout-flow) > *`
 * (0,0,1) cleanly. No `!important` required.
 *
 * Note: with this rule, two same-tone sections sit edge-to-edge with no
 * separator. That's intentional — sections own their own vertical edges
 * via internal padding. If a future band wants a hairline between
 * same-tone sections, that's a design decision, not a bug.
 * =================================================================== */

.ssla-section {
	margin-block-start: 0;
}

/* ===================================================================
 * FOOTER — SIMPLE VARIANT (Four Column)
 * Structural shape from ASK reference, neutral colors.
 * Four columns + copyright bar below.
 *
 * v1.3.1 changes:
 *   - Column ratios 1.4fr 0.8fr 1.6fr 1.2fr — narrows EXPLORE (only 2-3
 *     nav items typically), tightens BRAND, leaves ABOUT/CONNECT room.
 *   - Brand column gets WORDMARK sizing (was matched to eyebrow weight in
 *     v1.3.0 — wrong call). Body text below aligns to where eyebrows START
 *     in other columns, not to the wordmark itself.
 * =================================================================== */

.simple-footer-simple {
	background: var(--wp--custom--simple-chrome--bg, #FAFAFA);
	color: var(--wp--custom--simple-chrome--text, #1A1A1A);
	border-top: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	padding: 88px clamp(24px, 5vw, 64px) 0;
}

.simple-footer-simple .footer-columns {
	display: grid;
	grid-template-columns: 1.4fr 0.8fr 1.6fr 1.2fr;
	gap: 64px;
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 64px;
	align-items: start;
}

/* Brand column: wordmark, NOT eyebrow-styled. Sized between body and h2. */
.simple-footer-simple .footer-column-brand .footer-column-heading {
	color: var(--wp--custom--simple-chrome--heading, #0F0F0F);
	font-size: 18px;
	font-weight: var(--wp--custom--simple-chrome--heading-weight, 700);
	letter-spacing: var(--wp--custom--simple-chrome--heading-letter-spacing, 0.5px);
	text-transform: none;
	margin: 0 0 12px;
}

/* Other column eyebrows: small caps, tracked, muted. */
.simple-footer-simple .footer-column-explore .footer-column-heading,
.simple-footer-simple .footer-column-about .footer-column-heading,
.simple-footer-simple .footer-column-connect .footer-column-heading {
	color: var(--wp--custom--simple-chrome--accent, #666666);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 16px;
	/* Pad-top equivalent to brand wordmark's optical baseline so column
	 * tops feel aligned even though brand is larger. */
	padding-top: 4px;
}

.simple-footer-simple .footer-column-text {
	color: var(--wp--custom--simple-chrome--muted, #666666);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

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

.simple-footer-simple .footer-links li {
	margin-bottom: 8px;
}

.simple-footer-simple .footer-links a {
	color: var(--wp--custom--simple-chrome--link-rest, #1A1A1A);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s;
}

.simple-footer-simple .footer-links a:hover {
	color: var(--wp--custom--simple-chrome--link-hover, #000000);
}

.simple-footer-simple .footer-social {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}

.simple-footer-simple .footer-social a {
	color: var(--wp--custom--simple-chrome--muted, #666666);
	transition: color 0.2s;
}

.simple-footer-simple .footer-social a:hover {
	color: var(--wp--custom--simple-chrome--accent, #666666);
}

.simple-footer-simple .footer-copyright {
	border-top: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	padding: 24px 0;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	color: var(--wp--custom--simple-chrome--muted, #666666);
	font-size: 12px;
}

/* v1.6.0: footer collapse changed from direct 4 → 1 at 768px to three-stage
 * 4 → 2 → 1. Tablet width (481–767) gets a 2-col layout that uses the real
 * estate; phone (≤480) stacks fully. The two-column intermediate preserves
 * column reading order via grid auto-flow row.
 *
 * Existing 768px rules (heading top-padding zero, copyright padding) apply
 * at any sub-768 width; only the column count changes between 2 and 1. */
@media (max-width: 768px) {
	.simple-footer-simple {
		padding: 48px 24px 0;
	}
	.simple-footer-simple .footer-columns {
		/* 2-col intermediate at 481–767. Drops to 1-col at ≤480
		 * via the override below. */
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
		padding-bottom: 32px;
	}
	.simple-footer-simple .footer-column-explore .footer-column-heading,
	.simple-footer-simple .footer-column-about .footer-column-heading,
	.simple-footer-simple .footer-column-connect .footer-column-heading {
		padding-top: 0;
	}
	.simple-footer-simple .footer-copyright {
		padding: 16px 0;
	}
}

@media (max-width: 480px) {
	.simple-footer-simple .footer-columns {
		grid-template-columns: 1fr;
	}
}

/* ===================================================================
 * SIDEBAR
 * Used in single template. Minimal, conventional.
 * =================================================================== */

.simple-sidebar {
	color: var(--wp--custom--simple-chrome--text, #1A1A1A);
}

.simple-sidebar .widget-heading {
	color: var(--wp--custom--simple-chrome--heading, #0F0F0F);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
}

.simple-sidebar .widget {
	margin-bottom: 32px;
}

.simple-sidebar a {
	color: var(--wp--custom--simple-chrome--link-rest, #1A1A1A);
	text-decoration: none;
}

.simple-sidebar a:hover {
	color: var(--wp--custom--simple-chrome--link-hover, #000000);
}

/* ===================================================================
 * 404 PAGE
 * ASK-pattern: eyebrow + large headline + body + two CTAs + search section.
 * Generous vertical rhythm, centered alignment, neutral palette.
 * =================================================================== */

.simple-main-404 {
	padding: 80px 24px;
}

.simple-main-404 .not-found-message {
	max-width: 640px;
	margin: 0 auto;
	padding-bottom: 64px;
}

.simple-main-404 .not-found-eyebrow {
	color: var(--wp--custom--simple-chrome--accent, #666666);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.simple-main-404 .not-found-headline {
	color: var(--wp--custom--simple-chrome--heading, #0F0F0F);
	font-size: clamp(36px, 6vw, 56px);
	font-weight: var(--wp--custom--simple-chrome--heading-weight, 700);
	letter-spacing: var(--wp--custom--simple-chrome--heading-letter-spacing, 0.5px);
	line-height: 1.15;
	margin: 0 0 24px;
}

.simple-main-404 .not-found-body {
	color: var(--wp--custom--simple-chrome--text, #1A1A1A);
	font-size: 16px;
	line-height: 1.6;
	max-width: 520px;
	margin: 0 auto 40px;
}

.simple-main-404 .wp-block-buttons {
	gap: 16px;
}

.simple-main-404 .not-found-search {
	max-width: 480px;
	margin: 0 auto;
	padding-top: 48px;
	border-top: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
}

.simple-main-404 .not-found-search-label {
	color: var(--wp--custom--simple-chrome--muted, #666666);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

@media (max-width: 768px) {
	.simple-main-404 {
		padding: 48px 16px;
	}
	.simple-main-404 .not-found-message {
		padding-bottom: 40px;
	}
	.simple-main-404 .not-found-search {
		padding-top: 32px;
	}
}

/* ===================================================================
 * MOBILE RESPONSIVE — HEADER + CORE NAVIGATION OVERLAY (v1.6.0)
 *
 * Below 768px, the inline nav cluster collapses into core/navigation's
 * built-in mobile overlay (overlayMenu="mobile" set in template parts).
 * Core handles hamburger button injection, overlay open/close state,
 * focus trap, esc-to-close, and ARIA. We restyle the overlay panel and
 * the open/close buttons to match Simple Theme's paint surface.
 *
 * Architectural note: switching overlayMenu to "mobile" was the lean
 * over building a custom drawer (ref: wireframe v1, defaults A–D,
 * approved 2026-05-05). Same principle as the v1.5.0 chrome-binder —
 * use the surface that should own it instead of building parallel
 * infrastructure. Tradeoff: overlay is full-viewport top-down rather
 * than the wireframe's slide-in-right. Documented divergence.
 *
 * Core overlay default breakpoint is ~600px. Core doesn't expose the
 * overlay breakpoint as a CSS custom property — the threshold is
 * hardcoded in the block's stylesheet via media queries. To engage the
 * overlay at our chosen 768px instead, we mirror core's open/closed
 * display rules at our breakpoint, scoped to our header containers.
 * Above 768 the existing flex-wrap layout runs unchanged; below 768
 * the inline nav hides and the hamburger button (rendered by core when
 * overlayMenu="mobile") becomes the only visible nav surface.
 *
 * Hover-bridge from v1.4.0 sub-delivery 1 is wrapped in a hover-capable
 * media guard above (search the file for "hover: hover"); below the
 * mobile threshold submenus paint as expanded items inside the overlay,
 * not as flyout cards, so the bridge is correctly inert there.
 * =================================================================== */

/* Hide tagline at mobile — header-expanded only, where tagline lives.
 * Saves vertical real estate; brand identity preserved via logo + title. */
@media (max-width: 768px) {
	.simple-header-expanded .ssla-chrome-tagline-slot {
		display: none;
	}

	/* Logo slot: trim from desktop sizing to a compact mobile footprint.
	 * Tokens deliberately not introduced here — these are layout sizes,
	 * not paint values. v2.0.0 settings unification can promote to tokens
	 * if the surface contract grows. */
	.simple-header-expanded .ssla-chrome-logo-slot,
	.simple-header-simple .ssla-chrome-logo-slot {
		max-width: 28px;
	}
}

/* Force core's mobile overlay to engage at ≤768px instead of core's
 * default ~600px. Core's overlay applies these display rules at its own
 * breakpoint; we re-apply them at ours. This is necessary because core
 * doesn't expose the overlay breakpoint as a CSS custom property — the
 * threshold is hardcoded in the block's stylesheet via media queries.
 *
 * The rules below mirror what core does at its own breakpoint, scoped
 * to our header containers. Above 768px, our flex-wrap layout from
 * earlier sections runs unchanged. Below 768px, the inline nav
 * collapses and the hamburger button (rendered by core when
 * overlayMenu="mobile") becomes the only visible nav surface. */
@media (max-width: 768px) {
	/* Show core's hamburger toggle (rendered when overlayMenu is mobile).
	 * Core hides this above its own breakpoint; we explicitly re-show in
	 * our 600–768 range where core would otherwise have hidden it. */
	.simple-header-simple .wp-block-navigation__responsive-container-open,
	.simple-header-expanded .wp-block-navigation__responsive-container-open {
		display: flex;
	}

	/* Hide the inline nav-links container in the closed state. Core's own
	 * overlay rules handle the open state (full-viewport panel). */
	.simple-header-simple .wp-block-navigation__responsive-container:not(.is-menu-open),
	.simple-header-expanded .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

/* Core overlay panel — restyle to match Simple Theme paint surface.
 * Core renders the panel with class `.wp-block-navigation__responsive-container`
 * and applies `.is-menu-open` while open. Style only the open state; the
 * closed-state rules above handle hide. */
.simple-header-simple .wp-block-navigation__responsive-container.is-menu-open,
.simple-header-expanded .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--custom--simple-chrome--bg, #FAFAFA);
	color: var(--wp--custom--simple-chrome--ink, #1A1A1A);
	padding: 24px;
}

/* Overlay close button — top-right, padded for 44×44 tap target. */
.simple-header-simple .wp-block-navigation__responsive-container-close,
.simple-header-expanded .wp-block-navigation__responsive-container-close {
	color: var(--wp--custom--simple-chrome--ink, #1A1A1A);
	padding: 12px;
	min-width: 44px;
	min-height: 44px;
}

/* Hamburger toggle — match the close button's tap target and ink color.
 * Core's default styling is fine size-wise; we only normalize color and
 * ensure the 44×44 minimum. */
.simple-header-simple .wp-block-navigation__responsive-container-open,
.simple-header-expanded .wp-block-navigation__responsive-container-open {
	color: var(--wp--custom--simple-chrome--ink, #1A1A1A);
	padding: 12px;
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	border: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	border-radius: 3px;
}

/* Overlay nav items — Georgia 18px, hairline rule between items, 44px min
 * height for tap targets. Matches the wireframe's drawer typography. */
.simple-header-simple .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.simple-header-expanded .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	max-width: 480px;
	margin: 24px auto 0;
}

.simple-header-simple .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.simple-header-expanded .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	width: 100%;
}

.simple-header-simple .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.simple-header-expanded .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--custom--simple-chrome--serif, Georgia, serif);
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--custom--simple-chrome--ink, #1A1A1A);
	padding: 14px 4px;
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* Submenus inside overlay — render as indented expanded items, not flyout
 * cards. Core handles the toggle via its built-in submenu controller. */
.simple-header-simple .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.simple-header-expanded .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0 0 0 16px;
	border-left: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5);
	margin: 0 0 0 4px;
	min-width: 0;
}

.simple-header-simple .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.simple-header-expanded .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 14px;
	padding: 12px 4px;
}


 *
 * The .simple-header-* .nav-links a selectors target core/navigation block
 * descendants. WP's default core/navigation styling typically lands at
 * specificity 0,1,1 via global-styles. Our 0,2,1 wins cleanly.
 *
 * If a future Site Editor change to global-styles increases core/navigation's
 * link specificity, the fix is moving the rule structure into theme.json
 * styles.blocks["core/navigation"] rather than adding !important here.
 * =================================================================== */