/* ============================================================
   Baker 1031 Investments — shared design tokens
   Single source of truth for colors, type, and layout values.
   Every page links this file BEFORE its page-specific styles.
   ============================================================ */

:root {
  /* Brand */
  --navy:         #2b3a5f;   /* primary accent — buttons, links, active states */
  --navy-dark:    #22304f;   /* hover state for navy */
  --navy-overlay: rgba(30, 42, 74, 0.72);  /* hero video/photo scrim */

  /* Ink (text) */
  --ink:      #2f3237;   /* primary text */
  --ink-soft: #4a4a4a;   /* body / secondary text */
  --muted: #5f646e;   /* labels, captions, fine print (AA 4.5:1 on white) */
  --muted-strong: #565b64;   /* uppercase headings, fine legal print */

  /* Surfaces & lines */
  --hairline: #e4e4e4;   /* borders and dividers */
  --wash:     #f7f8fa;   /* light panel background (stat tiles, cards) */

  /* Status */
  --good: #1e6b2e;   /* positive: Available chip, Advantages, Above Average */
  --bad:  #a33a2a;   /* negative: Concerns, Below Average */

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Layout */
  --container-max: 78rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --header-height: 72px;
}

/* Skip-to-content link — off-screen until keyboard-focused (present on every page) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 500;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 0;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Portal-nav "Home" dropdown — shared across every logged-in page.
   Links to the marketing homepage's anchor sections. Hover opens on
   desktop; a caret button + auth.js handle click/keyboard. On mobile
   (inside the collapsed account-box) the links render as a static list.
   ============================================================ */
.nav-home { position: relative; display: inline-flex; align-items: center; gap: 0.1rem; }
.nav-home > .nav-home-link { color: var(--ink); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.nav-home > .nav-home-link:hover { color: var(--navy); }
.nav-home-toggle { background: none; border: none; cursor: pointer; padding: 0.2rem; color: var(--muted); display: inline-flex; align-items: center; }
.nav-home-toggle svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform 0.15s; }
.nav-home-menu {
  position: absolute; top: 100%; left: 0; margin-top: 0.4rem; min-width: 12rem;
  background: #fff; border: 1px solid var(--hairline); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(9, 14, 26, 0.12); padding: 0.4rem;
  display: none; flex-direction: column; z-index: 200;
}
/* Invisible bridge over the visual gap so the cursor can travel from "Home"
   into the menu without the hover dropping and closing it. */
.nav-home-menu::before { content: ""; position: absolute; top: -0.5rem; left: 0; right: 0; height: 0.5rem; }
.nav-home { padding-bottom: 0.15rem; }
.nav-home:hover .nav-home-menu, .nav-home.open .nav-home-menu { display: flex; }
.nav-home:hover .nav-home-toggle svg, .nav-home.open .nav-home-toggle svg { transform: rotate(180deg); }
.nav-home-menu a { font-size: 0.88rem; color: var(--ink-soft); padding: 0.45rem 0.6rem; border-radius: 6px; text-decoration: none; }
.nav-home-menu a:hover { background: #f3f5f8; color: var(--navy); }
@media (max-width: 720px) {
  .account-box .nav-home { flex-direction: column; align-items: flex-start; width: 100%; gap: 0.3rem; }
  .account-box .nav-home-toggle { display: none; }
  .account-box .nav-home-menu { position: static; display: flex; margin-top: 0.2rem; box-shadow: none; border: none; padding: 0 0 0 0.6rem; min-width: 0; }
}

/* "Back to Learn" link — top of the left sidebar on every Learn-area page
   (glossary, markets, articles) so readers can always return to the hub. */
.learn-back {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 600; color: var(--navy); text-decoration: none;
  padding: 0.3rem 0.6rem 0.7rem;
}
.learn-back:hover { text-decoration: underline; }

/* Insights/Learn sidebar on mobile: the sidebar is position:sticky on desktop,
   which on narrow (single-column) screens pinned it below the header and let it
   overlap the article as the page scrolled. Below the 900px layout breakpoint,
   make it a normal static block that flows above the content. tokens.css loads
   before each page's inline <style>, so !important is needed to win. */
@media (max-width: 900px) {
  .learn-nav {
    position: static !important;
    top: auto !important;
    max-height: 62vh !important;
    overflow-y: auto;
    margin-bottom: 1.5rem;
  }
}

/* Accessibility: a visible keyboard focus ring on every interactive element,
   site-wide (many custom controls reset the UA outline). */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 2px; }

/* Contrast fixes for grays that were hard-coded in page <style> blocks below
   the WCAG AA threshold. tokens.css loads first, so !important applies them. */
.site-footer .footer-disclosure p { color: #565b64 !important; } /* was #8a8f99 (3.3:1) */
.site-footer h5 { color: #666b74 !important; }                    /* was #9aa0ab (2.6:1) */

/* Soft gate (Learn + Performance) — injected by auth.js for signed-out humans
   only. Content stays in the DOM for crawlers/LLMs; this is a dismissible
   registration prompt, not an intrusive interstitial. */
#soft-gate { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(20,26,38,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#soft-gate .soft-gate-card { background: #fff; border-radius: 14px; max-width: 26rem; width: 100%; padding: 2rem 1.9rem; box-shadow: 0 24px 60px rgba(9,14,26,0.28); text-align: center; }
#soft-gate .soft-gate-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.6rem; }
#soft-gate h2 { font-size: 1.3rem; font-weight: 800; color: var(--ink); margin: 0 0 0.6rem; letter-spacing: -0.01em; }
#soft-gate p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1.3rem; }
#soft-gate .soft-gate-btn { display: block; width: 100%; background: var(--navy); color: #fff; border: none; border-radius: 8px; padding: 0.8rem 1rem; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
#soft-gate .soft-gate-btn:hover { background: var(--navy-dark); }
#soft-gate .soft-gate-dismiss { display: block; width: 100%; background: none; border: none; color: var(--muted); font: inherit; font-size: 0.85rem; font-weight: 600; margin-top: 0.8rem; cursor: pointer; }
#soft-gate .soft-gate-dismiss:hover { color: var(--navy); text-decoration: underline; }

/* Print deterrent: printing a page shows a notice instead of the content.
   Screen reading/selection is unaffected; crawlers ignore print styles. */
@media print {
  body * { visibility: hidden !important; }
  body::after {
    visibility: visible; content: "© Baker 1031 Investments — this content is not available for printing. Visit baker1031.com.";
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 2rem; text-align: center; font-family: -apple-system, sans-serif; font-size: 14pt; color: #2b3a5f;
  }
}

/* ---------- Accessibility: respect reduced-motion (a11y quick win) ----------
   Users who set "reduce motion" get near-instant transitions, no marquee
   scroll, and no autoplaying hero-video motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .logo-marquee, .logo-track, [class*="marquee"] { animation: none !important; }
  video[autoplay] { /* motion-sensitive users: video still loads but is paused by JS below where supported */ }
}