/**
 * CoreLaunch Shell — shared layout for sidebar-style FSE templates.
 *
 * Canonical source of truth for the two-pane (sidebar + main content)
 * shell layout. Consumed by both `corelaunch-account` (MemberCore) and
 * `corelaunch-coaching` (MemberCore CoachKit) — and by any future addon
 * that opts in by emitting the `meco-cl-shell` class convention.
 *
 * Convention (BEM-style):
 *   .meco-cl-shell                  — root container
 *   .meco-cl-shell--vertical        — sidebar left, main right
 *   .meco-cl-shell--horizontal      — nav row on top, main below
 *   .meco-cl-shell__menu            — sidebar pane (consumes color vars)
 *   .meco-cl-shell__content         — main content pane
 *   .meco-cl-shell-page             — outer <main> wrapper used by the template
 *   body.meco-cl-shell-mobile-nav-open  — body state during mobile drawer open
 *   .meco-cl-shell-mobile-overlay   — dim layer behind the drawer
 *   .meco-cl-shell-mobile-quicklinks — profile-menu links cloned into the drawer
 *   .meco-cl-shell-mobile-menu-close-icon — hamburger → X icon swap
 *
 * CSS custom properties (set on .meco-cl-shell__menu):
 *   --meco-cl-shell-menu-bg
 *   --meco-cl-shell-button-bg
 *   --meco-cl-shell-button-hover-bg
 *   --meco-cl-shell-button-text
 *   --meco-cl-shell-button-hover-text
 *
 * Addons should keep emitting their addon-specific custom properties
 * (e.g. --meco-account-menu-bg, --meco-cl-coaching-menu-bg) on the same
 * element so site customisers can target a specific addon's shell when
 * needed. shell.css does not depend on those — they exist purely as
 * extension points.
 *
 * Mobile breakpoint: 839px collapses to drawer; 840px+ shows desktop.
 */

/* ============================================================
   Baseline normalize — `corelaunch/theme.css` (which carried
   normalize.css's `body { margin: 0 }`) is dequeued on FSE
   shells by MecoCoreLaunchAssetsHelper::should_dequeue_mc_pro_theme_for_fse_shell.
   Re-assert the body margin reset so block themes' default
   body spacing doesn't leak around the shell.
   ============================================================ */
body {
	margin: 0;
}

/* WP core emits `<a class="skip-link screen-reader-text">Skip to content</a>`
   via `wp_body_open()`. The CSS that visually hides it lives in WP's block
   library / theme stylesheet, both of which get stripped by
   MecoCoreLaunchCtrl::remove_styles() on classic CoreLaunch bundles
   (checkout/account/login). Re-assert the visually-hidden pattern here so the
   link is keyboard-reachable but not visible on FSE CoreLaunch pages. */
.skip-link.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ============================================================
   CoreLaunch header — the template part declares a flex layout
   via block attributes (`"layout":{"type":"flex",...}`), which
   relies on WP's auto-generated `is-layout-flex` class. Some
   block themes override or strip that under FSE; theme.css used
   to provide a `.site-header { display: flex; ... }` fallback
   that worked when the block theme wrapped the template part in
   `<header class="site-header">`. Restore the flex fallback on
   the canonical `.corelaunch-headerContainer` class so the site
   title and profile menu sit side-by-side regardless of the
   active block theme.
   ============================================================ */
.corelaunch-headerContainer {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	/* Block themes (e.g. Twenty Twenty-Five) inject `padding` and
	   `block-gap` on `.wp-block-group` and wrap template parts in
	   `<header>` with theme.json `spacing.blockGap`, which can push the
	   header well past the inline `min-height: 72px` declared by the
	   template part. Clamp the header to its design height. */
	min-height: var(--meco-cl-shell-header-h, 72px);
	max-height: var(--meco-cl-shell-header-h, 72px);
	padding: 0.5rem 1rem;
	box-sizing: border-box;
}

/* Strip block-theme padding from the <header> wrapper WP places around the
   template part — it can add 1–2rem of vertical space above/below the bar. */
.wp-block-template-part > .corelaunch-headerContainer,
header.wp-block-template-part {
	margin: 0;
	padding: 0;
}

.corelaunch-headerContainer > .wp-block-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

/* Brand fill for the header bar. Consumes the --wp--preset--color--corelaunch-*
   vars emitted inline by MecoCoreLaunchCtrl::enqueue_fse_corelaunch_styles().
   `:where()` keeps zero specificity so a block theme can still override the bar. */
:where(.corelaunch-headerContainer) {
	background-color: var(--wp--preset--color--corelaunch-primary);
	color: var(--wp--preset--color--corelaunch-primary-text);
}

/* Block themes often set site-title link colors; force CoreLaunch contrast inside the bar. */
.corelaunch-headerContainer .wp-block-site-title,
.corelaunch-headerContainer .wp-block-site-title a,
.corelaunch-headerContainer .wp-block-site-title a:link,
.corelaunch-headerContainer .wp-block-site-title a:visited {
	color: var(--wp--preset--color--corelaunch-primary-text);
}

.corelaunch-headerContainer .wp-block-site-title a:hover,
.corelaunch-headerContainer .wp-block-site-title a:focus {
	color: var(--wp--preset--color--corelaunch-primary-text);
	opacity: 0.85;
}

/* ============================================================
   Page wrapper — strip group block spacing so the shell sits
   flush against the corelaunch-header.
   ============================================================ */
.meco-cl-shell-page.wp-block-group {
	padding: 0 !important;
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* ============================================================
   Shell grid
   ============================================================ */

/* Vertical: sidebar left, content right. */
.meco-cl-shell.meco-cl-shell--vertical {
	display: grid;
	grid-template-columns: 250px 1fr;
	min-height: calc(100vh - var(--meco-cl-shell-header-h));
	margin-block-start: 0;
	margin-top: 0;
	padding-top: 0;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

/* Horizontal: nav row on top, content full-width below. */
.meco-cl-shell.meco-cl-shell--horizontal {
	display: grid;
	grid-template-columns: 1fr;
	min-height: calc(100vh - var(--meco-cl-shell-header-h));
	/* Keep the nav row from stretching to fill min-height after viewport toggles (e.g. devtools mobile). */
	align-content: start;
	margin-block-start: 0;
	margin-top: 0;
	padding-top: 0;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

/* Direct grid children stretch to fill their cell so the menu's
   background reaches the full grid height in vertical mode. */
.meco-cl-shell > * {
	min-width: 0;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.meco-cl-shell.meco-cl-shell--vertical > *:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / -1;
}

.meco-cl-shell.meco-cl-shell--vertical > *:nth-child(2) {
	grid-column: 2 / 3;
	grid-row: 1 / -1;
}

/*
 * Single-child vertical shell: the first pane (e.g. account nav) may render
 * nothing (logged-out guest). Without this, the lone content block stays
 * :nth-child(1) and is forced into the 250px sidebar column — crushing login
 * forms inside the unauthorized state. Span the full grid when there is only
 * one element child (text/comment nodes do not affect :only-child).
 */
.meco-cl-shell.meco-cl-shell--vertical > *:only-child {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

/* Horizontal: both panes span full width, size to content. */
.meco-cl-shell.meco-cl-shell--horizontal > *:nth-child(1),
.meco-cl-shell.meco-cl-shell--horizontal > *:nth-child(2) {
	grid-column: 1 / -1;
	grid-row: auto;
	min-height: 0;
	height: auto;
	align-self: start;
	display: block;
}

/* ============================================================
   Color variable defaults + menu pane background
   ============================================================ */

/* Defaults live on the shell root (not the menu) so they inherit through
   any wrapper an addon places between the shell and the actual nav. This
   matters because some addons (e.g. CoachKit) emit per-block color overrides
   as inline `style=""` on a transparent wrapper (`display: contents`) rather
   than directly on the nav element. If the defaults were declared on
   `.meco-cl-shell__menu` itself, the nav's same-element declaration would
   beat the wrapper's inherited value and per-block overrides would be lost. */
.meco-cl-shell {
	/* CoreLaunch header height — the corelaunch-header template-part declares
	   `min-height: 72px`. Used to size the grid (subtract from 100vh) and to
	   pad the mobile drawer below the fixed header. Override per-site if the
	   header is customised to a different height. */
	--meco-cl-shell-header-h: 72px;

	--meco-cl-shell-menu-bg: #06429e;
	--meco-cl-shell-button-bg: rgba(0, 0, 0, 0.5);
	--meco-cl-shell-button-hover-bg: transparent;
	--meco-cl-shell-button-text: #b7bcc0;
	--meco-cl-shell-button-hover-text: #fff;
}

.meco-cl-shell .meco-cl-shell__menu {
	background: var(--meco-cl-shell-menu-bg);
}

/* Vertical: stretch full sidebar height. */
.meco-cl-shell--vertical .meco-cl-shell__menu {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}

/* Horizontal: pill-shaped row aligned with content. */
.meco-cl-shell--horizontal .meco-cl-shell__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 16px 2em 0;
	border-radius: 6px;
	gap: 2px;
	align-self: start;
	height: auto;
	min-height: 0;
	max-height: none;
}

/* ============================================================
   Content pane
   ============================================================ */
.meco-cl-shell .meco-cl-shell__content {
	flex: 1 1 auto;
	min-height: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 2em;
}

/* ============================================================
   Mobile drawer (≤ 839px)
   ============================================================ */
@media screen and (max-width: 839px) {
	/* Collapse grid to single column. */
	.meco-cl-shell.meco-cl-shell--vertical,
	.meco-cl-shell.meco-cl-shell--horizontal {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		min-height: auto;
	}

	/* Items stack normally; drawer is position:fixed and out of flow.
	   Use `:nth-child(n)` so the selector matches the specificity of the
	   desktop `--vertical > *:nth-child(1|2)` placement rules and source
	   order wins (mobile MQ comes later). Without this the desktop rules
	   keep placing the content into an auto-created column 2 on mobile,
	   which leaves the (empty) 1fr column 1 occupying most of the width.

	   Critical: do NOT override `display` here. Some addons place a
	   transparent wrapper between the shell and the nav (Account uses
	   `.meco-account-container`, Coaching uses `.meco-cl-coaching__menu`)
	   declared as `display: contents` so it doesn't take grid space. If
	   we forced `display: block` on grid children at this specificity,
	   the wrapper would become a real box AND inherit the menu's mobile
	   `position: fixed; transform: translateX(100%)` — creating a
	   containing block that anchors the inner fixed-positioned nav to
	   the wrapper's offscreen position. The drawer would never slide in. */
	.meco-cl-shell.meco-cl-shell--vertical > *:nth-child(n),
	.meco-cl-shell.meco-cl-shell--horizontal > *:nth-child(n) {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 0;
		height: auto;
	}

	.meco-cl-shell .meco-cl-shell__content {
		padding: 1em;
	}

	/* Body scroll lock + raise header above overlay. */
	body.meco-cl-shell-mobile-nav-open {
		overflow: hidden;
	}

	body.meco-cl-shell-mobile-nav-open .corelaunch-headerContainer,
	body.meco-cl-shell-mobile-nav-open #masthead.site-header {
		position: relative;
		z-index: 100000;
	}

	/* Hamburger → X swap on the profile-menu mobile button. */
	.meco-cl-shell-mobile-menu-close-icon {
		display: none;
		width: 1.5rem;
		height: 1.5rem;
		flex-shrink: 0;
		color: currentColor;
	}

	body.meco-cl-shell-mobile-nav-open .profile-menu__button.--is-mobile .profile-menu__hamburger,
	body.meco-cl-shell-mobile-nav-open .wp-block-membercore-pro-profile-menu__button.--is-mobile .wp-block-membercore-pro-profile-menu__hamburger {
		display: none !important;
	}

	body.meco-cl-shell-mobile-nav-open .profile-menu__button.--is-mobile .meco-cl-shell-mobile-menu-close-icon,
	body.meco-cl-shell-mobile-nav-open .wp-block-membercore-pro-profile-menu__button.--is-mobile .meco-cl-shell-mobile-menu-close-icon {
		display: block;
	}

	/* Dim overlay behind the drawer. */
	.meco-cl-shell-mobile-overlay {
		position: fixed;
		inset: 0;
		z-index: 99998;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.meco-cl-shell-mobile-overlay.is-visible {
		opacity: 1;
		visibility: visible;
	}

	/* Off-canvas slide-in panel. */
	.meco-cl-shell .meco-cl-shell__menu {
		position: fixed;
		top: 0;
		bottom: 0;
		inset-inline-end: 0;
		width: min(20rem, 88vw);
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		margin: 0 !important;
		border-radius: 0 !important;
		/* Sit flush below the site header (which stays on top of the drawer at
		   higher z-index while open). Without this offset the first menu item
		   is hidden behind the corelaunch-header bar. */
		padding-top: var(--meco-cl-shell-header-h);
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		overflow-y: auto;
		z-index: 99999;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
		transform: translateX(100%);
		transition: transform 0.25s ease, visibility 0.25s ease;
		visibility: hidden;
		pointer-events: none;
	}

	.rtl .meco-cl-shell .meco-cl-shell__menu {
		transform: translateX(-100%);
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
	}

	.meco-cl-shell .meco-cl-shell__menu.open {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}

	.rtl .meco-cl-shell .meco-cl-shell__menu.open {
		transform: translateX(0);
	}

	/* Quicklinks (profile-menu links cloned into the drawer by addon JS).
	   Selector is `.meco-cl-shell …` (specificity 0,2,0) instead of the bare
	   class so block themes' `margin-block-start: 1em` on nav children doesn't
	   override the top reset. */
	.meco-cl-shell .meco-cl-shell-mobile-quicklinks {
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		padding: 0 0 0.75rem 0;
		margin: 0 0 0.5rem;
		/* Defensive: explicit logical-property reset for themes that target
		   `margin-block-start` rather than `margin-top`. */
		margin-block-start: 0;
		margin-top: 0;
	}

	.meco-cl-shell-mobile-quicklinks a {
		display: block;
		padding: 12px 16px;
		color: var(--meco-cl-shell-button-text, #b7bcc0);
		text-decoration: none;
		font-size: 1rem;
	}

	.meco-cl-shell-mobile-quicklinks a:hover,
	.meco-cl-shell-mobile-quicklinks a:focus {
		color: var(--meco-cl-shell-button-hover-text, #fff);
		background: var(--meco-cl-shell-button-hover-bg, transparent);
	}

	/* Block editor preview: keep an inline preview (off-canvas drawer
	   is not practical inside the editor canvas). */
	.block-editor-block-list__layout .meco-cl-shell .meco-cl-shell__menu,
	.editor-styles-wrapper .meco-cl-shell .meco-cl-shell__menu {
		position: relative !important;
		inset: auto !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		padding-top: 0 !important;
		transform: none !important;
		transition: none !important;
		box-shadow: none !important;
		visibility: visible !important;
		pointer-events: auto !important;
		overflow: visible !important;
		display: flex !important;
		flex-wrap: wrap !important;
		margin: 12px 1em 0 !important;
		border-radius: 6px !important;
		z-index: auto !important;
		flex-direction: row !important;
	}

	.block-editor-block-list__layout .meco-cl-shell-mobile-overlay,
	.editor-styles-wrapper .meco-cl-shell-mobile-overlay,
	.block-editor-block-list__layout .meco-cl-shell-mobile-quicklinks,
	.editor-styles-wrapper .meco-cl-shell-mobile-quicklinks {
		display: none !important;
	}
}

/* ============================================================
   Editor canvas (≥ 840px) — ensure InnerBlocks span the full grid
   so the menu block isn't confined to the first 250px column.
   ============================================================ */

/* Editor inner-blocks wrapper.
 *
 * Two front-end rules have to be neutralised here:
 *
 *   1. `.meco-cl-shell > * { display: flex; flex-direction: column; }`
 *      turns `.block-editor-inner-blocks` into a column flex container with
 *      a single child (`.block-list__layout`). The child collapses to its
 *      grid's `min-content` (~250px) instead of filling.
 *
 *   2. `.meco-cl-shell--{layout} > *:nth-child(1) { grid-column: 1 / 2 }`
 *      pins the first direct child into the 250px sidebar column. On the
 *      front end the first child is the nav — correct. In the editor it
 *      pins inner-blocks (the *only* child) into the same column.
 *
 * Selector specificity is matched to (1) by including the variant class so
 * source order wins. `display: block` neutralises the flex container;
 * `grid-column: 1 / -1` overrides the nth-child placement. */
.meco-cl-shell.meco-cl-shell--vertical > .block-editor-inner-blocks,
.meco-cl-shell.meco-cl-shell--horizontal > .block-editor-inner-blocks {
	grid-column: 1 / -1;
	display: block;
}

.meco-cl-shell.meco-cl-shell--vertical > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: 250px 1fr;
	min-height: calc(100vh - var(--meco-cl-shell-header-h));
	width: 100%;
}

.meco-cl-shell.meco-cl-shell--horizontal > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
}

/*
 * Editor canvas (vertical) — paint the menu's background directly on the
 * grid item so it fills the full sidebar column even when the SSR'd nav
 * is shorter than the content column.
 *
 * Cascading `height: 100%` through every wrapper between the grid item
 * and `#meco-account-nav` (block-list__block → useBlockProps wrapper →
 * `.components-disabled` → ref div → `.block-editor-server-side-renderer`
 * → `.meco-account-container`) is brittle — any wrapper without explicit
 * height breaks the chain. Painting the bg on `.meco-cl-account-menu`
 * (the same element that carries `.wp-block-membercore-corelaunch-account-menu`,
 * i.e. the grid item itself) sidesteps the cascade entirely.
 *
 * `--meco-cl-shell-menu-bg` defaults to the canonical shell blue. User
 * colour overrides are applied to `#meco-account-nav` via the editor JS,
 * so the inner nav still shows the customised colour; this rule only
 * fills the empty space below it with the default. Acceptable for an
 * editor-only preview affordance.
 */
.meco-cl-shell.meco-cl-shell--vertical .meco-cl-account-menu {
	background: var(--meco-cl-shell-menu-bg, #06429e);
	align-self: stretch;
}