/**
 * CoreLaunch Account — Account-specific overrides.
 *
 * Layout / drawer / grid live in shell.css (`mc-corelaunch-shell` handle),
 * which is registered as a dependency of this stylesheet. Everything below
 * is Account-markup-specific (`.meco-nav-item`, `.meco-account-container`,
 * `.meco-account-mobile-*`, `.meco-profile-wrapper__footer`) and cannot be
 * shared with other CoreLaunch shell consumers.
 */

/* Account's nav.php wraps the <nav> + <div id="meco-account-content"> in a
   <div class="meco-account-container">. `display: contents` makes that wrapper
   transparent to layout so the menu/content become direct grid children of
   the shell. */
.meco-cl-account .meco-account-container {
	display: contents;
}

/* Override account.css's classic `#meco-account-nav { background: #06429e }`
   (specificity 1,0,0, ID-based — wins against shell.css's class-only
   `.meco-cl-shell .meco-cl-shell__menu { background: var(...) }`). Pull the
   dynamic primary color via the canonical shell variable so the FSE Account
   sidebar / mobile drawer follows `design_primary_color` again. */
.meco-cl-account #meco-account-nav {
	background: var(--meco-cl-shell-menu-bg);
}

/* The content div carries `meco-account-container` class for legacy link
   styling, which would inherit `display: contents` from the rule above and
   zero out shell.css's `padding: 2em` on `.meco-cl-shell__content`. Pin
   `display` back to flex (matches shell.css's content rule) so padding —
   and the visual gap between sidebar and content — is preserved.

   Padding is also re-asserted here because account.css ships
   `@media (min-width: 840px) { #meco-account-content { padding: 2em 2em 2em 0 } }`
   (zero left padding — classic mode relies on `.meco-account-container`'s
   grid gap for the gutter). In FSE mode the container is `display: contents`
   so no grid gap exists; pad the content pane directly. */
.meco-cl-account #meco-account-content {
	display: flex;
	flex-direction: column;
	padding: 1.25em 1.5em 1.5em;
	/* Classic account inherited ~16px body from mc-pro-theme; block themes often scale this region down. */
	font-size: 1rem;
	line-height: 1.5;
}

/*
 * Main pane typography (scoped to #meco-account-content so #meco-account-nav
 * keeps its 18px sidebar rules above). Classic CoreLaunch loaded normalize’s
 * ~2em h1 via mc-pro-theme; FSE shells dequeue that stack, so headings often
 * shrink to theme.json presets inside layout blocks.
 */
.meco-cl-account #meco-account-content h1.meco_page_header {
	font-size: 2.7rem;
	line-height: 1.25;
	margin: 32px 0 0.5rem;
}

.meco-cl-account #meco-account-content #meco-profile-details .meco-profile-details__content {
	font-size: 1.4rem;
	line-height: 1.45;
}

.meco-cl-account #meco-account-content #meco-profile-details dd {
	margin: 0 0 0.45rem;
}

.meco-cl-account #meco-account-content .meco-account-message {
	margin-bottom: 0.875rem;
}

.meco-cl-account #meco-account-content .meco-account-message p {
	margin-top: 0.35em;
	margin-bottom: 0.35em;
}

.meco-cl-account #meco-account-content .meco-account-message p:first-child {
	margin-top: 0;
}

.meco-cl-account #meco-account-content .meco-account-message p:last-child {
	margin-bottom: 0;
}

.meco-cl-account #meco-account-content .meco-profile-wrapper {
	grid-gap: 18px;
}

.meco-cl-account #meco-account-content .meco-profile-wrapper > div {
	padding: 0.875rem 1rem;
}

/* Mobile (≤839px, matches shell breakpoint): stack title, notices, and profile
 * card with clear vertical rhythm — desktop margins stay tighter above. */
@media screen and (max-width: 839px) {
	.meco-cl-account #meco-account-content {
		gap: 1.25rem;
	}

	.meco-cl-account #meco-account-content > h1.meco_page_header {
		margin: 1rem 0 0;
	}

	.meco-cl-account #meco-account-content > .meco-account-message {
		margin-bottom: 0;
	}
}

/* ---- Per-item nav styling (Account markup uses `.meco-nav-item` with CSS
   pseudo-element icons; CoachKit uses different markup). ---- */

.meco-cl-account--horizontal #meco-account-nav .meco-nav-item {
	display: inline-block;
}

.meco-cl-account--horizontal #meco-account-nav .meco-nav-item a {
	justify-content: center;
	padding: 8px 14px;
}

.meco-cl-account--horizontal #meco-account-nav .meco-nav-item a::before {
	font-size: 0.85rem;
	margin-right: 6px;
}

/* Override link colors and font size with Account-specific CSS variables.
   shell.css consumes `--meco-cl-shell-*`; these `--meco-account-*` parallels
   are emitted by render_corelaunch_account_menu_block() so site CSS can
   target Account specifically. */
.meco-cl-account #meco-account-nav .meco-nav-item a {
	color: var(--meco-account-button-text, var(--meco-cl-shell-button-text));
	font-size: 18px;
}

.meco-cl-account #meco-account-nav .meco-nav-item a:hover {
	color: var(--meco-account-button-hover-text, var(--meco-cl-shell-button-hover-text));
	background: var(--meco-account-button-hover-bg, var(--meco-cl-shell-button-hover-bg));
}

.meco-cl-account #meco-account-nav .meco-nav-item.--active a,
.meco-cl-account #meco-account-nav .meco-nav-item.meco-active-nav-tab a {
	background: var(--meco-account-button-bg, var(--meco-cl-shell-button-bg));
	color: #fff;
}

/* Defensive: hide the JS-injected mobile quicklinks on desktop in case a
   resize occurs while the drawer is open before the JS close handler fires. */
@media screen and (min-width: 840px) {
	.meco-cl-account #meco-account-nav .meco-account-mobile-quicklinks {
		display: none !important;
	}
}

/* ---- Mobile (≤ 839px): per-item drawer padding (markup-specific). ---- */
@media screen and (max-width: 839px) {
	/* account.css toggles `#meco-account-nav` with `display: none/block` (ID
	   specificity), which beats shell.css's class-based transform rule and
	   swaps the drawer in/out instantly — no slide-in. Force `display: flex`
	   in FSE mode so shell.css's transform/transition drives the animation. */
	.meco-cl-account #meco-account-nav,
	.meco-cl-account #meco-account-nav.open {
		display: flex;
	}

	/* The cloned profile-menu links land inside `.meco-account-container`
	   (which is `display: contents` but still a real DOM ancestor in FSE mode),
	   so account.css's `.meco-account-container a:visited { color: #06429e }`
	   wins over shell.css's quicklinks color. The "Account" link points at the
	   current page, gets the visited treatment, and renders dark blue. Restore
	   the shell-button text color for the cloned anchors. */
	.meco-cl-account .meco-cl-shell-mobile-quicklinks a,
	.meco-cl-account .meco-cl-shell-mobile-quicklinks a:visited {
		color: var(--meco-cl-shell-button-text);
	}

	.meco-cl-account #meco-account-nav .meco-nav-item {
		display: block;
		width: 100%;
	}

	.meco-cl-account #meco-account-nav .meco-nav-item a {
		justify-content: flex-start;
		padding: 12px 16px;
		font-size: 1rem;
	}

	.meco-cl-account #meco-account-nav .meco-nav-item a::before {
		font-size: 1.1rem;
		margin-right: 10px;
	}

	/* Block editor canvas: shell.css forces the drawer's <nav> back into an
	   inline preview, but the per-item rules need Account-specific targeting. */
	.block-editor-block-list__layout .meco-cl-account #meco-account-nav .meco-nav-item,
	.editor-styles-wrapper .meco-cl-account #meco-account-nav .meco-nav-item {
		display: inline-block !important;
		width: auto !important;
	}

	.block-editor-block-list__layout .meco-cl-account #meco-account-nav .meco-nav-item a,
	.editor-styles-wrapper .meco-cl-account #meco-account-nav .meco-nav-item a {
		padding: 8px 10px !important;
		font-size: 12px !important;
	}

	.block-editor-block-list__layout .meco-cl-account #meco-account-nav .meco-nav-item a::before,
	.editor-styles-wrapper .meco-cl-account #meco-account-nav .meco-nav-item a::before {
		font-size: 0.8rem !important;
		margin-right: 4px !important;
	}
}

/* ---- Profile wrapper footer (Account-specific markup rendered by the
   account form, may sit outside .meco-account-container in the block layout
   so the list reset rules need to live here). ---- */
.meco-cl-account .meco-profile-wrapper__footer {
	list-style: none;
	margin: 0;
	padding: 1rem 0 0.6rem;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	display: flex;
	flex-wrap: wrap;
}

.meco-cl-account .meco-profile-wrapper__footer > * {
	margin-top: 10px;
	margin-right: 10px;
}