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

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

/* Override account.css's classic `#mepr-account-nav { background: #06429e }`
   (specificity 1,0,0, ID-based — wins against shell.css's class-only
   `.mepr-rl-shell .mepr-rl-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. */
.mepr-rl-account #mepr-account-nav {
  background: var(--mepr-rl-shell-menu-bg);
}

/* The content div carries `mepr-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 `.mepr-rl-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) { #mepr-account-content { padding: 2em 2em 2em 0 } }`
   (zero left padding — classic mode relies on `.mepr-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. */
.mepr-rl-account #mepr-account-content {
  display: flex;
  flex-direction: column;
  padding: 1.25em 1.5em 1.5em;
  /* Classic account inherited ~16px body from mp-pro-theme; block themes often scale this region down. */
  font-size: 1rem;
  line-height: 1.5;
}

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

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

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

.mepr-rl-account #mepr-account-content .mepr-account-message {
  margin-bottom: 0.875rem;
}

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

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

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

.mepr-rl-account #mepr-account-content .mepr-profile-wrapper {
  grid-gap: 18px;
}

.mepr-rl-account #mepr-account-content .mepr-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) {
  .mepr-rl-account #mepr-account-content {
    gap: 1.25rem;
  }

  .mepr-rl-account #mepr-account-content > h1.mepr_page_header {
    margin: 1rem 0 0;
  }

  .mepr-rl-account #mepr-account-content > .mepr-account-message {
    margin-bottom: 0;
  }
}

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

.mepr-rl-account--horizontal #mepr-account-nav .mepr-nav-item {
  display: inline-block;
}

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

.mepr-rl-account--horizontal #mepr-account-nav .mepr-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 `--mepr-rl-shell-*`; these `--mepr-account-*` parallels
   are emitted by render_readylaunch_account_menu_block() so site CSS can
   target Account specifically. */
.mepr-rl-account #mepr-account-nav .mepr-nav-item a {
  color: var(--mepr-account-button-text, var(--mepr-rl-shell-button-text));
  font-size: 18px;
}

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

.mepr-rl-account #mepr-account-nav .mepr-nav-item.--active a,
.mepr-rl-account #mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a {
  background: var(--mepr-account-button-bg, var(--mepr-rl-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) {
  .mepr-rl-account #mepr-account-nav .mepr-account-mobile-quicklinks {
    display: none !important;
  }
}

/* ---- Mobile (≤ 839px): per-item drawer padding (markup-specific). ---- */
@media screen and (max-width: 839px) {
  /* account.css toggles `#mepr-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. */
  .mepr-rl-account #mepr-account-nav,
  .mepr-rl-account #mepr-account-nav.open {
    display: flex;
  }

  /* The cloned profile-menu links land inside `.mepr-account-container`
     (which is `display: contents` but still a real DOM ancestor in FSE mode),
     so account.css's `.mepr-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. */
  .mepr-rl-account .mepr-rl-shell-mobile-quicklinks a,
  .mepr-rl-account .mepr-rl-shell-mobile-quicklinks a:visited {
    color: var(--mepr-rl-shell-button-text);
  }

  .mepr-rl-account #mepr-account-nav .mepr-nav-item {
    display: block;
    width: 100%;
  }

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

  .mepr-rl-account #mepr-account-nav .mepr-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 .mepr-rl-account #mepr-account-nav .mepr-nav-item,
  .editor-styles-wrapper .mepr-rl-account #mepr-account-nav .mepr-nav-item {
    display: inline-block !important;
    width: auto !important;
  }

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

  .block-editor-block-list__layout .mepr-rl-account #mepr-account-nav .mepr-nav-item a::before,
  .editor-styles-wrapper .mepr-rl-account #mepr-account-nav .mepr-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 .mepr-account-container in the block layout
   so the list reset rules need to live here). ---- */
.mepr-rl-account .mepr-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;
}

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