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

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