/* ============================================================
   SHARED PUBLIC SHELL — Nav, Footer, Theme Toggle
   (Used by public-shell.js across all public pages)
   ============================================================ */

/* ---- Navigation ---- */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--retire-bg);
  border-bottom: 0.0625rem solid var(--retire-border);
  transition: box-shadow var(--transition-normal);
}
.landing-nav.scrolled {
  box-shadow: var(--retire-shadow-md);
}
.nav-inner {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--retire-text);
  font-weight: 800;
  font-size: 1.375rem;
}
.nav-logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--retire-primary);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.125rem;
}
.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--retire-text-secondary);
  text-decoration: none;
  font-size: var(--font-body);
  font-weight: 500;
  border-radius: 0.375rem;
  transition: color var(--transition-fast), background var(--transition-fast);
  min-height: var(--touch-min);
}
.nav-links a:hover {
  color: var(--retire-primary);
  background: var(--retire-bg-alt);
}
.nav-links a.active {
  color: var(--retire-primary);
  font-weight: 600;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border: none;
  background: transparent;
  color: var(--retire-text);
  font-size: 1.375rem;
  cursor: pointer;
  border-radius: 0.375rem;
}
.mobile-menu-btn:hover { background: var(--retire-surface); }

/* ---- Mobile Nav Panel ---- */
.mobile-nav {
  display: none;
  position: fixed;
  top: 4.25rem;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--retire-bg);
  z-index: 99;
  padding: 1.5rem;
  overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  color: var(--retire-text);
  text-decoration: none;
  font-size: var(--font-label);
  font-weight: 500;
  border-radius: 0.5rem;
  min-height: var(--touch-min);
}
.mobile-nav a:hover { background: var(--retire-surface); }

/* ---- Public-shell "Company" nav dropdown (desktop) ---- */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--retire-text-secondary);
  font-family: inherit;
  font-size: var(--font-body);
  font-weight: 500;
  border-radius: 0.375rem;
  cursor: pointer;
  min-height: var(--touch-min);
}
.nav-dropdown-trigger:hover {
  color: var(--retire-primary);
  background: var(--retire-bg-alt);
}
.nav-dropdown-caret {
  font-size: 0.75rem;
  transition: transform var(--transition-fast);
}
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 12rem;
  display: none;
  flex-direction: column;
  background: var(--retire-bg);
  border: 0.0625rem solid var(--retire-border);
  border-radius: 0.5rem;
  box-shadow: var(--retire-shadow-md);
  padding: 0.375rem;
  z-index: 101;
}
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color: var(--retire-text-secondary);
  text-decoration: none;
  font-size: var(--font-body);
  font-weight: 500;
  border-radius: 0.375rem;
  min-height: var(--touch-min);
}
.nav-dropdown-menu a:hover {
  color: var(--retire-primary);
  background: var(--retire-bg-alt);
}
.nav-dropdown-menu a.active {
  color: var(--retire-primary);
  font-weight: 600;
}

/* Mobile-nav section label (e.g. "Company") */
.mobile-nav-label {
  padding: 0.875rem 1rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--retire-text-secondary);
}

/* The public-shell header (.landing-nav) is 4.25rem tall — taller than the
   legacy 3.75rem he-header that .pt-header was sized for. On pages that mount
   the public-shell header via #site-header, bump the body offset to match.
   Scoped so it never affects he-header pages (no .landing-nav) or pages that
   pad their own <main> instead of the body (e.g. onboarding). */
body.pt-header:has(.landing-nav) { padding-top: 4.25rem; }

/* Several per-page CSS files (about.css, pricing.css, features.css, …) pin
   .landing-nav / .mobile-nav at top:6.25rem so they sat below the he-header +
   context bar. Now that public-shell owns the header on these pages, force it
   (and the mobile panel) to the very top. The #site-header id beats those
   class-only page rules regardless of stylesheet order. */
#site-header .landing-nav { top: 0; }
#site-header .mobile-nav { top: 4.25rem; }

/* ============================================================
   AUTH-AWARE TOGGLING (public-shell header)
   Mirrors landing.css so marketing/onboarding pages that load
   retireplusplus.css (but not landing.css) hide authed-only header
   controls from guests and reveal them once body.is-authenticated is set
   by public-shell.js. Without the default-hide rule, guests would see the
   bell/avatar (which have no inline display:none).
   ============================================================ */
[data-auth-show="authenticated"] { display: none !important; }
body.is-authenticated [data-auth-show="authenticated"] { display: block !important; }
body.is-authenticated [data-auth-show="guest"]          { display: none  !important; }
body.is-authenticated [data-auth-show="authenticated"][data-auth-display="flex"] { display: flex !important; }
body.is-authenticated [data-auth-show="authenticated"][data-auth-display="grid"] { display: grid !important; }

/* ---- Theme Toggle Button ---- */
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 0.0625rem solid var(--retire-border);
  background: var(--retire-surface);
  color: var(--retire-text);
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1.125rem;
  transition: all var(--transition-fast);
}
.theme-btn:hover { background: var(--retire-card-hover-bg); }

/* ---- Footer ---- */
.landing-footer {
  background: var(--retire-surface);
  border-top: 0.0625rem solid var(--retire-border);
  padding: 3rem 1.5rem 2rem;
}
.footer-grid {
  max-width: 75rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--retire-text);
  margin-bottom: 0.75rem;
}
.footer-col h4 {
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--retire-text);
  margin-bottom: 0.875rem;
}
.footer-col a {
  display: block;
  color: var(--retire-text-secondary);
  text-decoration: none;
  padding: 0.3125rem 0;
  font-size: var(--font-body);
  transition: color var(--transition-fast);
}
.footer-col a:hover { color: var(--retire-primary); }
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: 0.5rem;
  background: var(--retire-card-hover-bg);
  color: var(--retire-text-secondary);
  font-size: 1.125rem;
  transition: all var(--transition-fast);
}
.footer-social a:hover {
  background: var(--retire-primary);
  color: #FFFFFF;
}
.footer-bottom {
  max-width: 75rem;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid var(--retire-border);
  text-align: center;
  color: var(--retire-text-muted);
  font-size: 0.875rem;
}

/* ---- Desktop Breakpoint (shared shell) ---- */
@media (min-width: 48rem) {
  .nav-links { display: flex; }
  .mobile-menu-btn { display: none; }
}

/* ---- Motion sensitivity (WCAG 2.3.3 / vestibular safety) ----
   Honors OS-level "Reduce Motion" preference. Disables AOS scroll
   animations, transitions, and animations site-wide so the senior-
   first design promise extends to motion-sensitive users. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ============================================================
   Wave30 Epic B: shared utility classes that replace inline
   style="..." attributes during the CSP style-src 'unsafe-inline'
   removal. Add ONE class to the element instead of an inline style.
   See RELEASE_NOTES_2026-05-07_wave30.md for the full mapping.
   ============================================================ */
.pt-header                { padding-top: 3.75rem; }
.text-retire-primary      { color: var(--retire-primary); }
.text-retire-accent       { color: var(--retire-accent); }
.text-retire-secondary    { color: var(--retire-secondary); }
.text-retire-rose         { color: var(--retire-rose); }
.text-retire-muted        { color: var(--retire-text-muted); }
.text-retire-secondary-fg { color: var(--retire-text-secondary); }
.text-retire              { color: var(--retire-text); }
.text-home-muted          { color: var(--home-muted); }
.text-home-success        { color: var(--home-success); }
.text-home-text           { color: var(--home-text); }
.text-body                { font-size: var(--font-body, 1.0625rem); }
.text-label               { font-size: var(--font-label); }
.text-heading-sm          { font-size: var(--font-heading-sm); }
.text-heading-md          { font-size: var(--font-heading-md); }
.text-heading-xl          { font-size: var(--font-heading-xl); }
.text-meta                { font-size: 0.9375rem; }
.min-h-touch              { min-height: var(--touch-target); }
.min-h-auto               { min-height: auto; }
.text-tiny                { font-size: 0.75rem; }
.text-meta-sm             { font-size: 0.8125rem; }
.text-lg-bold             { font-size: 1.125rem; font-weight: 700; }
.hero-cta                 { font-size: var(--font-label); padding: 0.875rem 2rem; }
.bg-translucent-primary   { background: rgba(138, 90, 5, 0.12); }   /* deep amber */
.bg-translucent-secondary { background: rgba(47, 93, 80, 0.12); }   /* pine */
.bg-translucent-accent    { background: rgba(245, 158, 11, 0.12); } /* brand amber */
.bg-translucent-violet    { background: rgba(47, 93, 80, 0.12); }   /* remapped -> pine (no blue/violet) */
.bg-translucent-rose      { background: rgba(140, 58, 43, 0.12); }  /* claret */

/* Wave30: investor-portal / webosai progress-bar widths
   (avoids inline style="width:N%" which would otherwise need
   'unsafe-inline' on style-src). */
.w-pct-1   { width:   1%; }
.w-pct-4   { width:   4%; }
.w-pct-12  { width:  12%; }
.w-pct-13  { width:  13%; }
.w-pct-15  { width:  15%; }
.w-pct-20  { width:  20%; }
.w-pct-30  { width:  30%; }
.w-pct-35  { width:  35%; }
.w-pct-45  { width:  45%; }
.w-pct-56  { width:  56%; }
.w-pct-60  { width:  60%; }
.w-pct-80  { width:  80%; }
.w-pct-100 { width: 100%; }

/* Residual single-use named utilities (wave30 third pass). */
.no-underline       { text-decoration: none; }
.min-w-auto         { min-width: auto; }
.min-h-9            { min-height: 2.25rem; }
.min-h-12           { min-height: 3rem; }
.section-padding-x  { padding: var(--section-padding) 1.5rem; }
.fixed-toast        { position: fixed; top: 1rem; right: 1rem; z-index: 100; }
.sr-skip-link       { position: absolute; left: -624.9375rem; }

/* Inline prose link (UI eval #11) — a discoverable, themed text link for
   marketing copy (Tailwind preflight strips default anchor color/underline).
   Light uses --retire-primary; dark remaps to --retire-primary-light so it
   keeps AA-level contrast in both themes. */
.inline-link {
  color: var(--retire-primary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  font-weight: 600;
}
.inline-link:hover { color: var(--retire-primary-dark); }
[data-theme="dark"] .inline-link { color: var(--retire-primary-light); }
[data-theme="dark"] .inline-link:hover { color: var(--retire-primary-light); }

/* ============================================================
   TV / 10-FOOT LEAN-BACK BREAKPOINT (>= 120rem / ~1920px+)
   Bump the whole rem system so copy is readable at ~3m, calm the
   density, and thicken focus rings for remote navigation. Every page's
   CSS inherits this through rem; per-page tuning can layer on top.
   ============================================================ */
@media (min-width: 120rem) {
  html { font-size: 135%; }
  :root {
    --card-padding: 2.5rem;
    --section-padding: 7rem;
    --retire-shadow-lg: 0 0.75rem 2.5rem rgba(74, 54, 30, 0.16);
  }
  body { line-height: 1.65; }
  /* stronger, calmer focus at distance */
  *:focus-visible,
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible {
    outline-width: 0.28rem;
    outline-offset: 0.3rem;
  }
  /* shared shell breathes wider on a TV canvas */
  .nav-inner { min-height: 5.5rem; }
  .nav-inner, .footer-grid, .footer-bottom { max-width: 104rem; }
  .nav-links a { font-size: 1.05rem; }
}

/* ============================================================
   SHARED HEADER — bring SHARED_DASHBOARD's header-embed into the system
   ============================================================
   /SHARED_DASHBOARD/css/header-embed.css is loaded by 98 pages and ships its
   own slate/blue token set + Inter, so the fixed bar at the top of every page
   was a different product from the page beneath it: cool gray-900 (#111827)
   sitting on warm espresso (#1B1510), a navy breadcrumb strip (#1F2A40), and a
   blue->purple "Start Free".

   That CSS is owned by SHARED_DASHBOARD and must not be edited from here — but
   its values are all custom properties, so we can re-point them. The site
   accent already resolves to amber at runtime (site-config.js sets
   DASHBOARD_SITE_CODE='retireplusplus'); what needed overriding is the
   chrome that never read --he-accent in the first place.

   SPECIFICITY MATTERS HERE. header-embed.css is linked AFTER this file on every
   page, so equal-specificity rules lose on load order. Every selector below is
   deliberately one step stronger than the shared sheet's (`html:root` /
   `html[data-theme=...]` beat `:root` / `[data-theme=...]`; `.he-x.he-x` beats
   `.he-x`). Do not "tidy" these into single-class selectors — they will
   silently stop applying and the header reverts to slate/blue/Inter.

   AND the theme attribute is stamped on BOTH <html> and <body>. The shared
   sheet's bare `[data-theme="light"]` therefore matches <body> as well, and a
   custom property re-declared on <body> shadows the <html> one for everything
   inside it — so overriding on `html` alone silently does nothing below the
   body tag. Both element scopes must be listed. */

html:root,
html[data-theme="light"],
body[data-theme="light"] {
  --he-bg: #FCF6EC;                  /* paper surface, not #FFFFFF */
  --he-bg-hover: #F1E6D2;            /* warm hover, was blue-100 #DBEAFE */
  --he-bg-elevated: #F7EFE2;         /* breadcrumb bar, was slate-50 */
  --he-text-primary: #2A211A;        /* deep warm ink, was slate-900 */
  --he-text-secondary: #5A4D3E;      /* ~6.4:1 on paper, was slate-600 */
  --he-text-muted: #6E5F4E;          /* was #CBD5E1 — 1.5:1 on white, unreadable */
  --he-border: rgba(74, 54, 30, 0.14);
  --he-border-hover: rgba(74, 54, 30, 0.24);
  --he-icon-blue: #2F5D50;           /* pine stands in for the blue icon slot */
  --he-icon-purple: #8A5A05;         /* deep amber stands in for purple */
}

html[data-theme="dark"],
body[data-theme="dark"] {
  --he-bg: #241D15;                  /* lifted espresso — was cool #111827 */
  --he-bg-hover: #322818;
  --he-bg-elevated: #2C241A;         /* breadcrumb bar — was navy #1F2A40 */
  --he-text-primary: #F3E9D8;
  --he-text-secondary: #C4B49A;      /* ~7.6:1 on espresso, was slate-400 */
  --he-text-muted: #A2917A;          /* ~4.9:1 — clears AA */
  --he-border: rgba(243, 233, 216, 0.10);
  --he-border-hover: rgba(243, 233, 216, 0.18);
  --he-icon-blue: #6FB79E;
  --he-icon-purple: #F5C24B;
}

/* Header type: the shared sheet hardcodes Inter, which is a third typeface on
   a page already running Fraunces + Plus Jakarta. */
.he-header.he-header,
.he-header.he-header button,
.he-header.he-header input,
.he-user-btn.he-user-btn,
.he-context-bar.he-context-bar {
  font-family: var(--font-sans);
}

/* The guest CTA hardcodes linear-gradient(135deg, var(--he-icon-blue),
   var(--he-icon-purple)) with white text, so re-pointing the icon tokens alone
   would still leave white on amber. Give it the real amber fill + dark ink. */
.he-guest-start.he-guest-start,
.he-login-link.he-guest-start {
  background: var(--retire-accent);
  background-image: none;
  color: var(--retire-on-accent);
  font-weight: 700;
}
.he-guest-start.he-guest-start:hover,
.he-login-link.he-guest-start:hover {
  background: var(--retire-accent-dark);
  background-image: none;
  color: var(--retire-on-accent);
}

/* Plain login link — the shared sheet fills it with --he-accent (amber, via the
   site accent) and white text = 2.2:1. Amber fill takes dark ink. */
.he-login-link.he-login-link:not(.he-guest-start) {
  background: var(--retire-accent);
  color: var(--retire-on-accent);
}
.he-login-link.he-login-link:not(.he-guest-start):hover {
  background: var(--retire-accent-dark);
  color: var(--retire-on-accent);
}

/* Brand mark: was a blue->purple gradient square. */
.he-brand-icon.he-brand-icon {
  background: linear-gradient(135deg, var(--retire-accent), var(--retire-accent-dark));
  color: var(--retire-on-accent);
}

/* Avatar: was teal->blue. */
.he-avatar.he-avatar {
  background: linear-gradient(135deg, var(--retire-secondary), var(--retire-accent-dark));
  color: #FFFFFF;
}

.he-theme-toggle.he-theme-toggle { color: var(--retire-accent-dark); }
[data-theme="dark"] .he-theme-toggle.he-theme-toggle { color: var(--retire-accent-light); }

/* The shared sheet ALSO hardcodes slate for the light-theme context bar and
   breadcrumbs at [data-theme="light"] .he-x (0,0,2,0), which token re-pointing
   cannot reach, plus some values inside @media blocks. These re-assert the
   tokens at (0,0,2,1)+ so paper wins in both themes. */
html .he-header.he-header,
html .he-header.he-guest-header {
  background: var(--he-bg);
  border-bottom-color: var(--he-border);
}
html .he-context-bar.he-context-bar,
html .he-app-menu.he-app-menu {
  background: var(--he-bg-elevated);
  border-bottom-color: var(--he-border);
}
html .he-header.he-header .he-brand-name,
html .he-breadcrumb-item--active.he-breadcrumb-item--active,
html .he-app-item--active.he-app-item--active {
  color: var(--he-text-primary);
}
html .he-context-back.he-context-back,
html .he-breadcrumb-item.he-breadcrumb-item,
html .he-app-back.he-app-back,
html .he-app-item.he-app-item,
html .he-header.he-header .he-menu-item {
  color: var(--he-text-secondary);
}
html .he-breadcrumb-sep.he-breadcrumb-sep,
html .he-app-sep.he-app-sep {
  color: var(--he-text-muted);
}
html .he-app-label.he-app-label { color: var(--retire-accent-ink); }
html .he-context-back.he-context-back:hover,
html .he-breadcrumb-item.he-breadcrumb-item:hover,
html .he-app-back.he-app-back:hover,
html .he-app-item.he-app-item:hover {
  color: var(--he-text-primary);
  background: var(--he-bg-hover);
}
html .he-app-item--active.he-app-item--active { background: var(--retire-amber-wash); }

/* ------------------------------------------------------------------
   SHARED_AUTH SSO overlay — the parts we can reach
   ------------------------------------------------------------------
   onboarding.html embeds the SHARED_AUTH sign-in overlay inline, so this
   stylesheet is present and can correct its slate greys:
     .modal-tab   #64748B on #20242A  3.29:1
     .dot-num     #64748B on #111827  3.73:1
     #sso-lbl     #64748B on #111827  3.73:1
     .forgot-link #9C7D2E on #FFFFFF  3.90:1
   NOTE: /profile.html and /settings.html NAVIGATE to the SHARED_AUTH page
   itself, where this file is not loaded — those remain genuinely external and
   need a fix in the SHARED_AUTH repo. */
.modal-tab,
#sso-stepper .dot-num,
#sso-lbl {
  color: var(--retire-text-secondary);
}

html.page-mode-embedded {
  --app-header-offset: 0rem;
}

html.page-mode-standalone body.pt-header {
  padding-top: var(--app-header-offset);
}

html.page-mode-embedded body {
  padding-top: 0 !important;
}

.page-sticky-top {
  top: var(--app-header-offset);
}

.rpp-feedback-region {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-start: calc(var(--app-header-offset) + 1rem);
  z-index: 120;
  display: grid;
  gap: 0.75rem;
  width: min(24rem, calc(100vw - 2rem));
}

.rpp-feedback {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: var(--touch-target);
  padding: 0.875rem 1rem;
  border: 0.0625rem solid var(--retire-border);
  border-radius: var(--radius);
  background: var(--retire-surface-elevated);
  color: var(--retire-text);
  box-shadow: var(--retire-shadow-lg);
}

.rpp-feedback-success i { color: var(--retire-secondary); }
.rpp-feedback-error i { color: var(--retire-rose); }

body.rpp-modal-open { overflow: hidden; }

.rpp-skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  inset-block-start: 0.5rem;
  z-index: 200;
  min-height: var(--touch-target);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--retire-surface-elevated);
  color: var(--retire-text);
  box-shadow: var(--retire-shadow-lg);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.rpp-skip-link:focus {
  transform: translateY(0);
  outline: 0.1875rem solid var(--retire-focus);
  outline-offset: 0.1875rem;
}
.auth-tabs .modal-tab.active {
  color: var(--retire-text);
}
.forgot-link {
  color: var(--retire-accent-ink);
}