/* Supplemental styles for the static clone */

/* Red paper background so green accents (Robinhood) pop hard */
:root {
  --background: #c8102e;
  --foreground: #0a0a0a;
  --ink: #0a0a0a;
  --card: #fff5f5;
  --card-foreground: #0a0a0a;
  --secondary: #e8a0a8;
  --muted: #d96a78;
  --muted-foreground: #2a0a0e;
  --border: #8a1528;
  --highlight: #00ff66;
  --tape: #00ff66;
  --accent: #00ff66;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  background: #c8102e;
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

/* Soften the crosshatch so it still reads on red */
.pointer-events-none.fixed svg g {
  stroke: rgba(0, 0, 0, 0.18) !important;
}

/* All titles / headlines — neon green */
h1,
h2,
h3,
.font-display,
header a.font-display,
footer .font-display {
  color: #00ff66 !important;
  text-shadow:
    0 0 1px #000,
    0 1px 0 #000,
    0 0 14px rgba(0, 255, 102, 0.45);
}

/* FAQ question titles also neon */
#faq summary {
  color: #00ff66 !important;
  text-shadow:
    0 0 1px #000,
    0 1px 0 #000,
    0 0 10px rgba(0, 255, 102, 0.4);
}

/* Ensure text-highlight works as neon accent on titles */
.text-highlight {
  color: #00ff66 !important;
  -webkit-text-stroke: 1px #0a0a0a;
  paint-order: stroke fill;
}

/* Green pop text on red page (no red badge — page IS the red) */
.rh {
  display: inline;
  color: #00ff66 !important;
  background: transparent !important;
  font-weight: 800;
  padding: 0;
  border: none !important;
  text-shadow:
    0 0 1px #000,
    0 1px 0 #000,
    0 0 12px rgba(0, 255, 102, 0.55);
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.4px #003d1a;
}

.rh-block {
  display: inline-block;
  color: #00ff66 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  font-weight: 800;
  padding: 0.35em 0.7em;
  border: 2px solid #00ff66 !important;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

/* Sticky header on red */
header.sticky {
  background: rgba(200, 16, 46, 0.92) !important;
}

/* Highlight marker under words — keep neon green */
.highlight {
  background-image: linear-gradient(
    180deg,
    transparent 55%,
    #00ff66 55%,
    #00ff66 92%,
    transparent 92%
  ) !important;
}

/* FAQ summary reset */
#faq summary::-webkit-details-marker {
  display: none;
}

#faq summary {
  list-style: none;
}

/* Mobile nav open state handled in JS via .hidden toggle */

/* Slight paper grain via body overlay is already in original SVG pattern */

/* Video poster sizing */
video {
  display: block;
  background: oklch(15% 0.02 60 / 0.08);
}

/* Code CA box */
#ca {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Sticky header sits above content */
header {
  position: sticky;
}

/* Fallback if original torn mask fails in some browsers */
.torn-y {
  overflow: hidden;
}

/* .rh / .rh-block defined above (green on full-page red) */