/* ============================================================
   APEX MARKET MENTOR & ADVISER — Header and sign-up prompt
   ============================================================
   One slim live-market strip, then one glass navigation bar:
   brand · menu · Log in · Create an Account · Start Learning!
   Loaded after styles.css and heritage.css on every page, so it
   wins over their older header rules. The class names main.js
   and apex-session.js rely on (.site-header, .nav-menu,
   .has-dropdown, .dropdown, .nav-toggle, body.nav-open) are kept.
   ============================================================ */
:root { --header-h: 72px; }

/* ---------- Live PSX strip ---------- */
.psx-ticker-wrap { height: 32px; background: #021f15; border-bottom: 1px solid rgba(201, 162, 75, .14); }
.psx-ticker-label { padding: 0 14px; background: #021f15; border-right: 1px solid rgba(201, 162, 75, .18); font-size: 0.68rem; letter-spacing: .18em; color: var(--hx-gold-bright, #dcb765); }
.psx-ticker-label .live-dot { width: 6px; height: 6px; }
.psx-ticker-item { gap: 8px; padding: 0 18px; font-size: 0.76rem; border-right-color: rgba(255, 255, 255, .06); }
.psx-ticker-item .chg { font-size: 0.72rem; padding: 1px 6px; }

/* ---------- The bar ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(3, 42, 29, .86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(220, 183, 101, .16);
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.scrolled { background: rgba(2, 31, 21, .94); box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .7); }
.site-header .container { max-width: 1320px; }
.site-header .nav { height: var(--header-h); gap: 28px; }

/* Brand: emblem + wordmark */
.site-header .brand { gap: 12px; }
.site-header .brand-logo { padding: 3px; border-radius: 10px; border: 1px solid rgba(220, 183, 101, .45); background: #fbf7ec; box-shadow: none; }
.site-header .brand-logo img { width: 36px; height: 36px; border-radius: 7px; }
.site-header .brand-name { font-family: var(--hx-serif, Georgia, serif); font-weight: 600; font-size: 1.3rem; letter-spacing: .2em; line-height: 1; color: #f7f2e6; }
.site-header .brand-sub { margin-top: 3px; font-size: 0.6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(220, 183, 101, .85); }

/* Menu: quiet text links, a gold underline marks the page you're on */
.site-header .nav-menu { gap: 2px; margin-right: auto; }
.site-header .nav-link {
  position: relative; padding: 10px 12px; border-radius: 0; background: none;
  font-size: 0.9rem; font-weight: 500; letter-spacing: .01em; color: rgba(247, 242, 230, .72);
}
.site-header .nav-link::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--hx-gold-bright, #dcb765); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.site-header .nav-link:hover { color: #fff; background: none; }
.site-header .nav-link:hover::after { transform: scaleX(.5); }
.site-header .nav-link.active { color: #fff; font-weight: 500; }
.site-header .nav-link.active::after { transform: scaleX(1); }
.site-header .has-dropdown > .nav-link::after { right: 30px; }

/* Training menu */
.site-header .dropdown {
  top: calc(100% + 14px); min-width: 520px; padding: 10px; gap: 2px;
  background: #fbf7ec; border: 1px solid rgba(201, 162, 75, .35); border-radius: 14px;
  box-shadow: 0 30px 60px -24px rgba(2, 31, 21, .55);
}
.site-header .dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* hover bridge */
.site-header .dropdown-item { border-radius: 10px; padding: 12px; }
.site-header .dropdown-item:hover { background: #efe8d6; }
.site-header .dropdown-item .di-icon { width: 36px; height: 36px; border-radius: 10px; background: #032a1d; color: #dcb765; }
.site-header .dropdown-item h4 { color: #032a1d; font-weight: 600; }
.site-header .dropdown-item p { color: #4b5a51; }

/* ---------- Right-hand actions ---------- */
.site-header .nav-actions { gap: 14px; flex: none; }
.nav-login { padding: 8px 4px; font-size: 0.9rem; font-weight: 500; color: rgba(247, 242, 230, .78); white-space: nowrap; }
.nav-login:hover { color: #fff; }

/* "Create an Account": a dark pill inside a slowly turning gold ring. */
.btn-account {
  --ring: conic-gradient(from var(--a, 0deg), #c9a24b, #f6e3a6, #8f6c22, #f0d481, #c9a24b);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 20px; border-radius: 999px;
  font-size: 0.86rem; font-weight: 600; letter-spacing: .02em; color: #f7f2e6; white-space: nowrap;
  background: var(--ring); background-origin: border-box;
  border: 1.5px solid transparent;
  animation: amma-ring 6s linear infinite;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn-account::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #04301f; transition: background .2s ease; }
.btn-account svg { width: 16px; height: 16px; color: #dcb765; }
.btn-account:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(220, 183, 101, .12), 0 10px 24px -12px rgba(220, 183, 101, .6); }
.btn-account:hover::before { background: #0a4a33; }
.btn-account:focus-visible, .btn-start:focus-visible, .nav-login:focus-visible { outline: 2px solid #f0d481; outline-offset: 3px; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes amma-ring { to { --a: 360deg; } }

/* "Start Learning!": the solid gold call to action. */
.btn-start {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; border-radius: 999px;
  background: linear-gradient(135deg, #f0d481 0%, #c9a24b 55%, #b48a35 100%);
  color: #032a1d; font-size: 0.88rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 8px 22px -12px rgba(220, 183, 101, .9), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-start svg { width: 16px; height: 16px; transition: transform .2s ease; }
.btn-start:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 28px -14px rgba(220, 183, 101, 1), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-start:hover svg { transform: translateX(3px); }

/* Signed in: the account menu replaces Log in + Create an Account. */
[data-auth][hidden] { display: none !important; }
.nav-account-slot { position: relative; list-style: none; }
.nav-account-slot > .nav-link { gap: 8px; padding: 6px 10px 6px 6px; color: #f7f2e6; }
.nav-account-slot > .nav-link::after { display: none; }
.nav-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #f0d481, #c9a24b); color: #032a1d; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.site-header .dropdown-account { top: calc(100% + 12px); min-width: 260px; }

/* Toggle (phones and tablets) */
.site-header .nav-toggle { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(220, 183, 101, .4); background: transparent; color: #f0d481; }

/* "Join Our Investor Circle": the one menu item drawn as a button */
.site-header .nav-link.nav-cta { margin-left: 6px; padding: 8px 16px; border: 1px solid rgba(220, 183, 101, .7); border-radius: 999px; color: #f0d481; font-weight: 600; white-space: nowrap; }
.site-header .nav-link.nav-cta::after { display: none; }
.site-header .nav-link.nav-cta:hover, .site-header .nav-link.nav-cta.active { background: rgba(220, 183, 101, .14); color: #fff3c4; }

/* "Start Learning!" already goes to sign-up, so the header keeps one sign-up button */
.site-header .nav-actions .btn-account { display: none; }

/* Items that only belong in the phone menu */
.site-header .nav-menu .mobile-only { display: none; }

/* The menu's investor button needs the room of the small line under the logo */
@media (min-width: 1152px) {
  .site-header .brand-sub { display: none; }
}

/* ---------- Narrow desktops ---------- */
@media (min-width: 1152px) and (max-width: 1320px) {
  .site-header .nav { gap: 18px; }
  .site-header .nav-link { padding: 10px 9px; font-size: 0.86rem; }
  .site-header .nav-link::after { left: 9px; right: 9px; }
  .site-header .brand-sub { display: none; }
  .nav-login { display: none; }
}

/* ---------- Phones and tablets: a full-width dark panel ---------- */
@media (max-width: 1151px) {
  .site-header .nav { gap: 12px; }
  .site-header .nav-actions .btn-account,
  .site-header .nav-actions .nav-login,
  .site-header .nav-actions .nav-account-slot { display: none; }
  .site-header .nav-menu {
    inset: calc(var(--header-h)) 0 auto 0; padding: 12px 16px 20px; gap: 0; margin: 0;
    background: #032a1d; border-bottom: 1px solid rgba(220, 183, 101, .25); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8);
  }
  .site-header .nav-link { padding: 14px 6px; font-size: 1.02rem; color: #f7f2e6; border-bottom: 1px solid rgba(247, 242, 230, .08); }
  .site-header .nav-link::after { display: none; }
  .site-header .nav-link.active { color: #f0d481; }
  .site-header .dropdown { min-width: 0; padding: 4px 0 10px; background: transparent; border: 0; box-shadow: none; }
  .site-header .dropdown-item:hover { background: rgba(247, 242, 230, .06); }
  .site-header .dropdown-item h4 { color: #f7f2e6; font-weight: 500; }
  .site-header .dropdown-item .di-icon { background: rgba(220, 183, 101, .12); }
  .site-header .nav-menu .mobile-only { display: block; }
  .site-header .nav-link.nav-cta { display: flex; justify-content: center; margin: 14px 0 0; padding: 13px 16px; border-bottom: 1px solid rgba(220, 183, 101, .7); }
  .site-header .nav-menu .mobile-only + .mobile-only { margin-top: 10px; }
  .site-header .nav-menu .mobile-cta { padding-top: 18px; display: grid; gap: 10px; }
  .site-header .nav-menu .btn-account, .site-header .nav-menu .btn-start { justify-content: center; min-height: 48px; width: 100%; }
  .site-header .nav-menu .nav-login { text-align: center; padding: 10px; }
}
@media (max-width: 520px) {
  .site-header .brand-sub { display: none; }
  .site-header .nav-actions .btn-start { padding: 0 14px; font-size: 0.82rem; }
  .site-header .nav-actions .btn-start svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-account { animation: none; }
  .btn-account, .btn-start, .btn-start svg, .site-header .nav-link::after { transition: none; }
}

/* ============================================================
   Sign-up prompt (apex-signup-prompt.js)
   ============================================================ */
.sp-overlay {
  position: fixed; inset: 0; z-index: 4900; display: grid; place-items: center; padding: 16px;
  background: rgba(2, 20, 13, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}
.sp-overlay[hidden] { display: none; }
.sp-overlay.is-in { opacity: 1; }
.sp-card {
  position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 36px 32px 26px; text-align: center; border-radius: 20px;
  background: #032a1d radial-gradient(120% 80% at 50% 0%, rgba(201, 162, 75, .22), rgba(3, 42, 29, 0) 60%);
  border: 1px solid rgba(220, 183, 101, .35); color: #f7f2e6;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  transform: translateY(14px) scale(.98); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.sp-overlay.is-in .sp-card { transform: none; }
.sp-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: rgba(247, 242, 230, .7); cursor: pointer; }
.sp-close:hover { background: rgba(247, 242, 230, .08); color: #fff; }
.sp-close svg { width: 20px; height: 20px; }
.sp-emblem { width: 56px; height: 56px; margin: 0 auto 14px; padding: 4px; border-radius: 14px; background: #fbf7ec; border: 1px solid rgba(220, 183, 101, .5); }
.sp-eyebrow { margin: 0 0 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #dcb765; }
.sp-title { margin: 0 0 10px; font-family: var(--hx-serif, Georgia, serif); font-weight: 500; font-size: 2rem; line-height: 1.1; color: #fff; }
.sp-title em { color: #f0d481; }
.sp-text { margin: 0 auto 18px; max-width: 34ch; font-size: 0.94rem; line-height: 1.6; color: rgba(247, 242, 230, .78); }
.sp-list { list-style: none; margin: 0 0 22px; padding: 14px 16px; display: grid; gap: 10px; text-align: left; border-radius: 12px; background: rgba(247, 242, 230, .05); border: 1px solid rgba(220, 183, 101, .15); }
.sp-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; color: #f7f2e6; }
.sp-list svg { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: rgba(143, 216, 176, .16); color: #8fd8b0; }
.sp-cta { width: 100%; justify-content: center; min-height: 50px; font-size: 0.95rem; }
.sp-foot { margin: 14px 0 0; font-size: 0.86rem; color: rgba(247, 242, 230, .7); }
.sp-foot a { color: #f0d481; text-decoration: underline; text-underline-offset: 3px; }
.sp-later { margin-top: 6px; padding: 8px 12px; border: 0; background: none; font: inherit; font-size: 0.82rem; color: rgba(247, 242, 230, .55); cursor: pointer; }
.sp-later:hover { color: #fff; }
.sp-close:focus-visible, .sp-later:focus-visible, .sp-foot a:focus-visible { outline: 2px solid #f0d481; outline-offset: 2px; }
body.sp-open { overflow: hidden; }
@media (max-width: 480px) { .sp-card { padding: 30px 20px 20px; } .sp-title { font-size: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .sp-overlay, .sp-card { transition: none; } }

/* ============================================================
   One button language for the whole site
   ============================================================
   The header's rounded pills set the shape; the page buttons
   (.hx-btn, .btn) follow it so the site reads as one design.
   ============================================================ */
.hx-btn, .hx main .btn, .hx .signin-popup .btn { border-radius: 999px; letter-spacing: .06em; font-weight: 600; }
.hx-btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.hx-btn--gold, .hx main .btn-dark, .hx .page-hero .btn-primary, .hx .cta-band .btn-primary {
  background: linear-gradient(135deg, #f0d481 0%, #c9a24b 55%, #b48a35 100%); color: #032a1d;
  box-shadow: 0 10px 24px -14px rgba(220, 183, 101, .9), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.hx-btn--gold:hover, .hx main .btn-dark:hover, .hx .page-hero .btn-primary:hover, .hx .cta-band .btn-primary:hover {
  background: linear-gradient(135deg, #f6e3a6 0%, #d4ad55 55%, #bf953d 100%);
}

/* "Log in to subscribe": a short message that fades away (apex-auth-forms.js) */
.auth-toast { position: fixed; left: 50%; top: calc(var(--header-h) + 48px); z-index: 4800; transform: translate(-50%, -12px); padding: 13px 24px; border-radius: 999px; background: linear-gradient(135deg, #f0d481, #c9a24b); border: 0; color: #032a1d; font-size: 0.95rem; font-weight: 600; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); opacity: 0; transition: opacity .35s ease, transform .35s ease; pointer-events: none; white-space: nowrap; }
.auth-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .auth-toast { transition: none; } }

/* ---------- Menu arrows ----------
   Desktop: the dropdown sits 14px below its menu word. An invisible strip
   fills that gap, so moving the mouse down to the menu keeps it open instead
   of flickering it (and its arrow) shut and open again. The arrow turns while
   the menu is open by mouse or keyboard. Phones: the arrow follows the menu's
   open state from a tap, never a leftover hover. */
.site-header .has-dropdown > .dropdown::before {
  content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.site-header .has-dropdown:focus-within > .nav-link svg { transform: rotate(180deg); }
@media (max-width: 1151px) {
  .site-header .has-dropdown > .dropdown::before { display: none; }
  .site-header .has-dropdown:hover > .nav-link svg,
  .site-header .has-dropdown:focus-within > .nav-link svg { transform: none; }
  .site-header .has-dropdown > .nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
}