/**
 * SEO Landing Page — Base Layer
 * Variables, resets, wrapper, reading progress, scroll reveal, admin banner.
 *
 * Design aligned with Anantys DS (documentation/anantys-design-system/).
 * Rules: documentation/portal/portal-design-guidelines.md
 */

/* ========================================
   CSS Variables — Aligned to Anantys DS
   ======================================== */
:root {
  /* Backgrounds — DS navy scale */
  --seo-bg-deep: var(--ap-bg, #161a22);
  --seo-bg-dark: var(--ap-surface-1, #1b2029);
  --seo-bg-card: var(--ap-surface-2, #1f2430);
  --seo-bg-card-hover: var(--ap-surface-3, #2a2f3a);
  --seo-bg-surface: var(--ap-surface-3, #2a2f3a);

  /* Accent — DS mint */
  --seo-accent: var(--ap-accent, #00e5a0);
  --seo-accent-dim: var(--ap-accent-hover, #00cc8e);
  --seo-accent-glow: rgba(0, 229, 160, 0.15);
  --seo-accent-glow-strong: rgba(0, 229, 160, 0.25);
  --seo-accent-bg: rgba(0, 229, 160, 0.08);

  /* Text — higher contrast than portal DS for editorial readability */
  --seo-text-primary: hsl(0 0% 100%);
  --seo-text-secondary: hsla(0 0% 100% / 0.82);
  --seo-text-muted: var(--ap-text-muted, #a4abb7);
  --seo-text-dim: hsla(0 0% 100% / 0.35);

  /* Borders — DS border */
  --seo-border: var(--ap-border, rgba(255, 255, 255, 0.06));
  --seo-border-hover: rgba(255, 255, 255, 0.12);
  --seo-border-accent: rgba(0, 229, 160, 0.25);

  /* Semantic — DS colors */
  --seo-green: var(--ap-success, #00e5a0);
  --seo-yellow: var(--ap-warning, #c49a4c);
  --seo-red: var(--ap-danger, #ff4d6a);
  --seo-gold: #ffd700;
  --seo-silver: #c0c0c0;
  --seo-bronze: #cd7f32;

  /* Radius — DS scale */
  --seo-radius-sm: 8px;
  --seo-radius: 12px;
  --seo-radius-lg: var(--ap-radius-xl, 16px);
  --seo-radius-pill: 999px;

  /* Typography — DS font stack */
  --font-heading: var(--ap-font-title, 'Space Grotesk', system-ui, sans-serif);
  --font-body: var(--ap-font-body, 'DM Sans', system-ui, sans-serif);
  --font-mono: var(--ap-font-mono, 'DM Mono', ui-monospace, monospace);

  /* Transitions */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   Box-Sizing Reset & Page Wrapper
   ======================================== */
.seo-page-wrapper {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  box-sizing: border-box;
  font-family: var(--font-body);
  color: var(--seo-text-primary);
  background: var(--seo-bg-deep);
}

.seo-page-wrapper *,
.seo-page-wrapper *::before,
.seo-page-wrapper *::after {
  box-sizing: border-box;
}

/* ========================================
   Main Content Layout
   FIX(Bug1): width: 100% on mobile, inset only on desktop
   ======================================== */
.seo-main-content {
  width: 100%;
  max-width: 1600px;
  margin: -1.5rem auto 0;
  display: block;
  background: #f6f7f9;
  border-radius: 24px 24px 0 0;
  padding: 2rem 0.5rem;
  position: relative;
  box-shadow: 0 -4px 24px hsla(0 0% 0% / 0.15);
  overflow: clip;
}

.seo-main-column {
  width: 100%;
  min-width: 0;
}

/* Content Layout — Main + Sidebar */
.seo-content-layout {
  display: block;
  width: 100%;
}

/* ========================================
   Reading Progress Bar
   ======================================== */
.seo-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--seo-accent);
  z-index: 9999;
  transition: width 50ms linear;
}

/* ========================================
   Scroll Reveal Animations
   ======================================== */
.seo-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.seo-reveal.seo-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   Admin Preview Banner
   ======================================== */
.seo-admin-banner {
  width: 100%;
  background: var(--seo-yellow);
  color: #000;
  text-align: center;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
}

.seo-admin-banner a {
  color: #000;
  text-decoration: underline;
}

/* ========================================
   Section Titles — Space Grotesk
   ======================================== */
.seo-section-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--seo-text-primary);
  margin: 1.75rem 0 1rem;
  padding-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.seo-section-title i {
  color: var(--seo-accent);
  font-size: 1.125rem;
}

/* ========================================
   Semantic Colors
   ======================================== */
.seo-momentum-high { color: var(--seo-green); }
.seo-momentum-mid { color: var(--seo-yellow); }
.seo-momentum-low { color: var(--seo-red); }
.seo-perf-positive { color: var(--seo-green); }

/* Performance spans in content */
.perf-positive,
.seo-hero-intro .perf-positive,
.seo-section-content .perf-positive,
.seo-conclusion-text .perf-positive {
  color: var(--seo-green);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.perf-negative,
.seo-hero-intro .perf-negative,
.seo-section-content .perf-negative,
.seo-conclusion-text .perf-negative {
  color: var(--seo-red);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ========================================
   Ticker Links in Content
   ======================================== */
.seo-ticker-link,
a[data-ticker] {
  color: var(--seo-accent);
  padding: 0.125rem 0.25rem;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted var(--seo-accent-dim);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.seo-ticker-link:hover,
a[data-ticker]:hover {
  color: var(--seo-accent);
  background-color: var(--seo-accent-bg);
  border-bottom-color: var(--seo-accent);
}

/* ========================================
   Disclaimer
   ======================================== */
.seo-disclaimer {
  width: 100%;
  background: hsla(0 0% 100% / 0.02);
  border: 1px solid var(--seo-border);
  border-radius: var(--seo-radius-sm);
  padding: 1.125rem 1.25rem;
  margin-top: 2rem;
  font-size: 0.8125rem;
  color: var(--seo-text-muted);
  line-height: 1.65;
}

.seo-disclaimer strong {
  color: var(--seo-text-secondary);
}

p.investment-disclaimer {
  margin-top: 1rem !important;
  padding: 0.875rem;
  background: hsla(0 0% 100% / 0.02);
  border: 1px solid var(--seo-border);
  border-radius: var(--seo-radius-sm);
  font-size: 0.8rem;
  color: var(--seo-text-muted);
}