/* ============================================================
   RetirePlusPlus Help Module — Sidebar + Header + Layout
   ============================================================
   Shared CSS for all help/workflow pages.

   W7 "golden-hour" retint (2026-07-24): every local token below is now an
   ALIAS of the site-wide `--retire-*` scale defined in css/retireplusplus.css,
   which already flips between the cream-paper light theme and the espresso
   dark theme. That is why there is a single token block instead of the old
   light/dark pair — aliasing a token that flips gives us both themes for free
   and removes the slate/blue duplicate that had drifted out of sync.

   Every page that loads this sheet MUST also load /css/retireplusplus.css.
   The `var(--retire-x, #fallback)` fallbacks are belt-and-braces only; they
   resolve to the LIGHT value and will not follow the theme.

   Zero px units — all values in rem.
   ============================================================ */

/* ---- Theme Variables — aliases onto the golden-hour scale ---- */
:root {
  --sidebar-bg: var(--retire-bg-alt, #F1E6D3);
  --sidebar-border: var(--retire-border, #E9DCC6);
  --sidebar-text: var(--retire-text, #2A211A);
  --sidebar-link-color: var(--retire-text-secondary, #5A4D3E);
  --sidebar-link-hover: var(--retire-primary, #8A5A05);
  --sidebar-link-active-bg: var(--retire-amber-wash, rgba(245, 158, 11, 0.14));
  --sidebar-link-active-border: var(--retire-primary, #8A5A05);
  --sidebar-title-color: var(--retire-text-muted, #6E5F4E);
  --sidebar-chevron: var(--retire-text-muted, #6E5F4E);
  --page-bg: var(--retire-bg, #F7EFE2);
  --page-text: var(--retire-text, #2A211A);
  --page-text-secondary: var(--retire-text-secondary, #5A4D3E);
  --page-text-muted: var(--retire-text-muted, #6E5F4E);
  --page-border: var(--retire-border, #E9DCC6);
  --page-surface: var(--retire-surface, #FCF6EC);
  --page-surface-elevated: var(--retire-surface-elevated, #FFFDF9);
  --page-shadow: var(--retire-shadow, 0 0.0625rem 0.1875rem rgba(74, 54, 30, 0.07));
  --page-shadow-md: var(--retire-shadow-md, 0 0.25rem 0.75rem rgba(74, 54, 30, 0.10));
  --page-overlay: var(--retire-overlay, rgba(42, 33, 26, 0.5));
  --header-bg: var(--retire-surface, #FCF6EC);
  --header-border: var(--retire-border, #E9DCC6);
  --header-text: var(--retire-text, #2A211A);
  --header-link: var(--retire-text-secondary, #5A4D3E);
  --header-link-hover: var(--retire-primary, #8A5A05);
  --breadcrumb-link: var(--retire-primary, #8A5A05);
  --breadcrumb-sep: var(--retire-text-muted, #6E5F4E);

  /* Step badges are an amber FILL, so the digit must be the dark
     --retire-on-accent ink; white on amber is ~2:1 and fails AA. Both amber
     stops are theme-invariant, so this reads in light AND dark. */
  --step-badge-from: var(--retire-accent-light, #F5C24B);
  --step-badge-to: var(--retire-accent, #F59E0B);
  --step-badge-text: var(--retire-on-accent, #1F2937);

  --card-bg: var(--retire-surface, #FCF6EC);
  --card-border: var(--retire-border, #E9DCC6);
  --card-hover-bg: var(--retire-card-hover-bg, #F1E6D3);
  --benefit-icon-bg: var(--retire-amber-wash, rgba(245, 158, 11, 0.14));
  --benefit-icon-color: var(--retire-primary, #8A5A05);
  --contact-input-bg: var(--retire-surface-elevated, #FFFDF9);
  --contact-input-border: var(--retire-border, #E9DCC6);
  --contact-input-text: var(--retire-text, #2A211A);

  /* ---- Local composites ----
     --help-cta-grad carries WHITE text, so both stops must stay dark in BOTH
     themes: --retire-accent-ink / --retire-secondary-solid are the
     theme-invariant deep amber + pine (5.9:1 and 7.5:1 against white).
     Never build this from --retire-primary, which repoints to a LIGHT amber
     under [data-theme="dark"] and would drop white text to ~1.5:1. */
  --help-cta-grad: linear-gradient(135deg, var(--retire-accent-ink, #8A5A05), var(--retire-secondary-solid, #2F5D50));
  /* Opaque paint under the gradient: a gradient-only background leaves
     computed background-color transparent, so contrast checkers composite the
     white label against the PAGE instead of the button. */
  --help-cta-bg: var(--retire-accent-ink, #8A5A05);
  --help-cta-text: #FFFDF9;
  /* --help-brand-grad is clipped to TEXT, so it is the foreground and must
     flip with the theme — hence --retire-primary / --retire-secondary. */
  --help-brand-grad: linear-gradient(135deg, var(--retire-primary, #8A5A05), var(--retire-secondary, #2F5D50));

  --help-ok-bg: var(--retire-pine-wash, rgba(47, 93, 80, 0.12));
  --help-ok-text: var(--retire-secondary, #2F5D50);
  --help-ok-border: rgba(47, 93, 80, 0.32);
  --help-err-bg: rgba(140, 58, 43, 0.12);
  --help-err-text: var(--retire-rose, #8C3A2B);
  --help-err-border: rgba(140, 58, 43, 0.32);
}

[data-theme="dark"] {
  /* Claret is only defined as a background-safe deep tone site-wide, so the
     dark-theme TEXT variant is lifted locally to clear 4.5:1 on espresso. */
  --help-err-text: #E3A08D;
  --help-err-bg: rgba(227, 160, 141, 0.14);
  --help-err-border: rgba(227, 160, 141, 0.34);
  --help-ok-border: rgba(111, 183, 158, 0.34);
}

/* ============================================================
   SITE HEADER (.help-site-header)
   ============================================================ */
.help-site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
}

.help-site-nav {
  background: var(--header-bg);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  border-bottom: 0.0625rem solid var(--header-border);
}

.help-nav-inner {
  display: flex;
  align-items: center;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
  min-height: 3.5rem;
  gap: 1rem;
}

.help-nav-network-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--header-link);
  cursor: pointer;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  transition: color var(--transition-fast, 150ms ease);
  flex-shrink: 0;
}

.help-nav-network-btn:hover {
  color: var(--header-link-hover);
}

.help-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}

.help-nav-logo {
  font-size: 1.25rem;
  color: var(--retire-primary, #8A5A05);
}

.help-nav-brand-text {
  font-size: 1.125rem;
  font-weight: 700;
  background: var(--help-brand-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.help-nav-links {
  display: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-nav-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  min-height: 2.75rem;
  color: var(--header-link);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: color var(--transition-fast, 150ms ease);
}

.help-nav-link:hover {
  color: var(--header-link-hover);
}

.help-nav-link-active {
  color: var(--retire-primary, #8A5A05);
  font-weight: 600;
}

.help-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

.help-nav-cta {
  display: none;
  align-items: center;
  padding: 0.5rem 1.25rem;
  min-height: 2.75rem;
  background-color: var(--help-cta-bg);
  background-image: var(--help-cta-grad);
  color: var(--help-cta-text, #FFFDF9);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: opacity var(--transition-fast, 150ms ease);
}

.help-nav-cta:hover {
  opacity: 0.9;
}

.help-nav-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--header-text);
  cursor: pointer;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

.help-nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--header-bg);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  border-bottom: 0.0625rem solid var(--header-border);
  padding: 0.5rem 1rem 1rem;
}

.help-nav-mobile-open {
  display: flex;
}

.help-nav-mobile-link {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  min-height: 2.75rem;
  color: var(--header-link);
  text-decoration: none;
  font-size: 1rem;
  border-radius: 0.375rem;
  transition: background var(--transition-fast, 150ms ease);
}

.help-nav-mobile-link:hover {
  background: var(--card-hover-bg);
}

.help-nav-mobile-link-active {
  color: var(--retire-primary, #8A5A05);
  font-weight: 600;
}

.help-nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 0.625rem 1.25rem;
  min-height: 2.75rem;
  background-color: var(--help-cta-bg);
  background-image: var(--help-cta-grad);
  color: var(--help-cta-text, #FFFDF9);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
}

@media (min-width: 48rem) {
  .help-nav-links {
    display: flex;
  }

  .help-nav-cta {
    display: flex;
  }

  .help-nav-mobile-btn {
    display: none;
  }
}