/* ============================================================
   Recallm — Custom theme: dark crimson + soft typography
   ============================================================ */

/* Google Fonts — single request for all families */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Color scheme ─────────────────────────────────────────── */
[data-md-color-scheme="recallm-dark"] {
  --md-primary-fg-color:        #B71C1C;
  --md-primary-fg-color--light: #EF9A9A;
  --md-primary-fg-color--dark:  #7F0000;
  --md-accent-fg-color:         #FF5252;
  --md-accent-fg-color--transparent: rgba(255, 82, 82, 0.1);

  --md-default-bg-color:        #111113;
  --md-default-bg-color--light: #161618;
  --md-default-bg-color--lighter: #1C1C1F;
  --md-default-bg-color--lightest: #222226;

  --md-default-fg-color:        #ECEFF4;
  --md-default-fg-color--light: #A1A1AA;
  --md-default-fg-color--lighter: #71717A;
  --md-default-fg-color--lightest: #3F3F46;

  --md-typeset-color:           #ECEFF4;
  --md-typeset-a-color:         #FF5252;
  --md-typeset-mark-color:      rgba(183, 28, 28, 0.25);

  --md-code-bg-color:           #1A1A1D;
  --md-code-fg-color:           #EF9A9A;
  --md-code-hl-color:           rgba(183, 28, 28, 0.15);

  --md-shadow-z1: 0 2px 8px rgba(0, 0, 0, 0.5);
  --md-shadow-z2: 0 4px 16px rgba(0, 0, 0, 0.6);
  --md-shadow-z3: 0 8px 32px rgba(0, 0, 0, 0.7);
}

[data-md-color-scheme="recallm-light"] {
  --md-primary-fg-color:        #B71C1C;
  --md-primary-fg-color--light: #EF9A9A;
  --md-primary-fg-color--dark:  #7F0000;
  --md-accent-fg-color:         #C62828;
  --md-accent-fg-color--transparent: rgba(198, 40, 40, 0.1);

  --md-default-bg-color:           #ffffff;
  --md-default-bg-color--light:    rgba(0, 0, 0, 0.07);
  --md-default-bg-color--lighter:  rgba(0, 0, 0, 0.03);
  --md-default-bg-color--lightest: rgba(0, 0, 0, 0.01);

  --md-default-fg-color:           rgba(0, 0, 0, 0.87);
  --md-default-fg-color--light:    rgba(0, 0, 0, 0.54);
  --md-default-fg-color--lighter:  rgba(0, 0, 0, 0.32);
  --md-default-fg-color--lightest: rgba(0, 0, 0, 0.07);

  --md-typeset-color:              rgba(0, 0, 0, 0.87);
  --md-typeset-a-color:            #C62828;
  --md-typeset-mark-color:         rgba(183, 28, 28, 0.2);

  --md-code-bg-color:              #f0f0f0;
  --md-code-fg-color:              #37474f;
  --md-code-hl-color:              rgba(183, 28, 28, 0.08);

  --md-shadow-z1: 0 2px 8px rgba(0, 0, 0, 0.12);
  --md-shadow-z2: 0 4px 16px rgba(0, 0, 0, 0.16);
  --md-shadow-z3: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ── Typography ───────────────────────────────────────────── */
:root {
  --headline-font: "Outfit", sans-serif;
  --md-text-font:  "Plus Jakarta Sans", sans-serif;
  --md-code-font:  "JetBrains Mono", "Fira Code", monospace;
}

body {
  font-family: var(--md-text-font);
  -webkit-font-smoothing: antialiased;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--headline-font);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Hero grid layout ─────────────────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding: 4.5rem 0 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero-eyebrow {
  font-family: var(--headline-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FF5252;
  opacity: 0.9;
}

.hero-title {
  font-family: var(--headline-font);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  background: linear-gradient(135deg, #FFFFFF 0%, #C4C4C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #A1A1AA;
  max-width: 38ch;
  margin: 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.hero-install {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #1C1C1F;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.55rem 1rem;
  font-family: var(--md-code-font);
  font-size: 0.85rem;
  color: #EF9A9A;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, background 0.2s;
  text-decoration: none;
}

.hero-install:hover {
  border-color: rgba(183, 28, 28, 0.5);
  background: #222226;
}

.hero-install .hero-install-icon {
  font-size: 0.75rem;
  opacity: 0.5;
}

/* ── Code panel in hero ───────────────────────────────────── */
.hero-code-panel {
  background: #0F0F11;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(183, 28, 28, 0.15);
  min-width: 0;
}

.hero-code-titlebar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  background: #161618;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.hero-code-dot--red    { background: #FF5F57; }
.hero-code-dot--yellow { background: #FEBC2E; }
.hero-code-dot--green  { background: #28C840; }

.hero-code-filename {
  font-family: var(--md-code-font);
  font-size: 0.72rem;
  color: #71717A;
  margin-left: 0.5rem;
}

.hero-code-panel pre {
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 1.25rem 1.5rem !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
}

/* ── How it works — 3 step cards ─────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.step-card {
  background: #161618;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}

.step-card:hover {
  border-color: rgba(183, 28, 28, 0.4);
  transform: translateY(-2px);
}

.step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7F0000, #FF5252);
  opacity: 0;
  transition: opacity 0.25s;
}

.step-card:hover::before {
  opacity: 1;
}

.step-number {
  font-family: var(--headline-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FF5252;
  margin-bottom: 0.75rem;
}

.step-card h3 {
  font-family: var(--headline-font);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
  color: #ECEFF4;
}

.step-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #A1A1AA;
  margin: 0;
}

/* ── Stats strip ──────────────────────────────────────────── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  margin: 2.5rem 0;
}

.stat-item {
  background: #161618;
  padding: 2rem 1.5rem;
  text-align: center;
}

.stat-number {
  font-family: var(--headline-font);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  line-height: 1;
  display: block;
  white-space: nowrap;
}

.stat-label {
  font-size: 0.8rem;
  color: #71717A;
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* ── Hit rates table enhancement ─────────────────────────── */
.md-typeset .hit-rates-table table {
  font-size: 0.9rem;
}

/* ── Section headers ──────────────────────────────────────── */
.section-label {
  font-family: var(--headline-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FF5252;
  margin-bottom: 0.5rem;
  display: block;
}

/* ── Expand content area: override MkDocs grid constraints ── */
/* Must target .md-grid and .md-main__inner, not just __inner  */
.md-grid {
  max-width: 1280px !important;
}

.md-content__inner {
  max-width: none !important;
  padding: 0 1.5rem !important;
}

/* Hero: break out to full content width */
.hero-grid {
  width: 100%;
}

/* Hero code panel: allow horizontal scroll instead of clipping */
.hero-code-panel {
  min-width: 0;
  overflow: hidden;
}

.hero-code-panel pre {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: pre !important;
  font-size: 0.75rem !important;
}

/* Step cards: prevent word-wrapping from becoming unreadable at mid widths */
.steps-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

/* Stats: keep numbers on one line at medium widths */
.stat-number {
  white-space: nowrap;
}

/* ── Light mode: hero title must use dark text (not white gradient) */
[data-md-color-scheme="recallm-light"] .hero-title {
  background: linear-gradient(135deg, #1a1a2e 0%, #3d0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Light mode: step cards and stats adapt to light background ── */
[data-md-color-scheme="recallm-light"] .step-card {
  background: #f8f5f5;
  border-color: rgba(183, 28, 28, 0.15);
}

[data-md-color-scheme="recallm-light"] .step-card h3 {
  color: #1a1a1e;
}

[data-md-color-scheme="recallm-light"] .step-card p {
  color: #3f3f46;
}

[data-md-color-scheme="recallm-light"] .stats-strip {
  background: rgba(183, 28, 28, 0.07);
  border-color: rgba(183, 28, 28, 0.15);
}

[data-md-color-scheme="recallm-light"] .stat-item {
  background: #fdf4f4;
}

[data-md-color-scheme="recallm-light"] .stat-number {
  color: #1a1a1e;
}

[data-md-color-scheme="recallm-light"] .stat-label {
  color: #71717a;
}

[data-md-color-scheme="recallm-light"] .hero-grid {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* ── Light mode: header / tabs — keep dark so white text stays visible ── */
[data-md-color-scheme="recallm-light"] .md-header {
  background: #1a0505;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="recallm-light"] .md-tabs {
  background: #1a0505;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Light mode: red accent text stays red ─────────────────── */
[data-md-color-scheme="recallm-light"] .hero-eyebrow,
[data-md-color-scheme="recallm-light"] .section-label,
[data-md-color-scheme="recallm-light"] .step-number {
  color: #C62828 !important;
}

/* ── Light mode: hero terminal chrome adapts ───────────────── */
[data-md-color-scheme="recallm-light"] .hero-code-panel {
  background: #e8e8ec;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(183, 28, 28, 0.12);
}
[data-md-color-scheme="recallm-light"] .hero-code-titlebar {
  background: #d8d8dc;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
[data-md-color-scheme="recallm-light"] .hero-code-filename {
  color: #666;
}
[data-md-color-scheme="recallm-light"] .hero-code-panel pre {
  color: #1a1a1e !important;
}

/* ── Light mode: hero content area ─────────────────────────── */
[data-md-color-scheme="recallm-light"] .hero-subtitle {
  color: rgba(0, 0, 0, 0.6);
}
[data-md-color-scheme="recallm-light"] .hero-install {
  background: #f0eeed;
  border-color: rgba(0, 0, 0, 0.14);
  color: #7F0000;
}
[data-md-color-scheme="recallm-light"] .hero-install:hover {
  border-color: rgba(183, 28, 28, 0.5);
  background: #e8e0e0;
}
[data-md-color-scheme="recallm-light"] .hero-install .hero-install-icon {
  color: #B71C1C;
}

/* ── Responsive breakpoints ───────────────────────────────── */
@media screen and (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3rem 0 2rem;
  }

  .hero-title {
    font-size: 2.4rem;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .stats-strip {
    grid-template-columns: 1fr;
  }
}

/* ── Nav + header refinements ─────────────────────────────── */
.md-header {
  background: #0D0D0F;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

.md-tabs {
  background: #0D0D0F;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── ISSUE-002: Dark mode Pygments token overrides ───────────
   Pygments default colours are light-theme dark-on-white.
   Our dark background requires inverting uncoloured tokens.   ── */
[data-md-color-scheme="recallm-dark"] .highlight,
[data-md-color-scheme="recallm-dark"] .highlight code {
  color: #ECEFF4;
}
[data-md-color-scheme="recallm-dark"] .highlight .n,
[data-md-color-scheme="recallm-dark"] .highlight .na,
[data-md-color-scheme="recallm-dark"] .highlight .nd,
[data-md-color-scheme="recallm-dark"] .highlight .ni,
[data-md-color-scheme="recallm-dark"] .highlight .nn,
[data-md-color-scheme="recallm-dark"] .highlight .nv { color: #ECEFF4; }
[data-md-color-scheme="recallm-dark"] .highlight .nc { color: #FFCB6B; }
[data-md-color-scheme="recallm-dark"] .highlight .o,
[data-md-color-scheme="recallm-dark"] .highlight .ow { color: #89DDFF; }
[data-md-color-scheme="recallm-dark"] .highlight .p  { color: #A1A1AA; }
[data-md-color-scheme="recallm-dark"] .highlight .mi,
[data-md-color-scheme="recallm-dark"] .highlight .mf,
[data-md-color-scheme="recallm-dark"] .highlight .mh { color: #F78C6C; }
[data-md-color-scheme="recallm-dark"] .highlight .c,
[data-md-color-scheme="recallm-dark"] .highlight .c1,
[data-md-color-scheme="recallm-dark"] .highlight .cm { color: #546E7A; font-style: italic; }
[data-md-color-scheme="recallm-dark"] .highlight .k,
[data-md-color-scheme="recallm-dark"] .highlight .kn,
[data-md-color-scheme="recallm-dark"] .highlight .kd,
[data-md-color-scheme="recallm-dark"] .highlight .kr { color: #C792EA; }
[data-md-color-scheme="recallm-dark"] .highlight .s,
[data-md-color-scheme="recallm-dark"] .highlight .s1,
[data-md-color-scheme="recallm-dark"] .highlight .s2,
[data-md-color-scheme="recallm-dark"] .highlight .sb { color: #C3E88D; }
[data-md-color-scheme="recallm-dark"] .highlight .nb { color: #82AAFF; }
[data-md-color-scheme="recallm-dark"] .highlight .nf,
[data-md-color-scheme="recallm-dark"] .highlight .fm { color: #82AAFF; }

/* ── Custom copy button (.recallm-copy) — replaces .md-clipboard via JS ─ */
.recallm-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--md-code-font);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  z-index: 2;
}

.highlight:hover .recallm-copy,
.recallm-copy:focus {
  opacity: 1;
}

.recallm-copy:hover {
  background: rgba(183, 28, 28, 0.25);
  border-color: rgba(183, 28, 28, 0.55);
  color: #EF9A9A;
}

.recallm-copy--done {
  color: #C3E88D !important;
  border-color: rgba(195, 232, 141, 0.4) !important;
  opacity: 1 !important;
}

/* Ensure the .highlight wrapper is positioned so absolute child works */
.highlight {
  position: relative;
}

/* Light mode copy button */
[data-md-color-scheme="recallm-light"] .recallm-copy {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.35);
}
[data-md-color-scheme="recallm-light"] .recallm-copy:hover {
  background: rgba(183, 28, 28, 0.1);
  border-color: rgba(183, 28, 28, 0.4);
  color: #B71C1C;
}
[data-md-color-scheme="recallm-light"] .recallm-copy--done {
  color: #2e7d32 !important;
  border-color: rgba(46, 125, 50, 0.4) !important;
}

/* ── Light mode: code block background & tokens ──────────────── */
[data-md-color-scheme="recallm-light"] .highlight {
  background: #f5f2f2 !important;
}
[data-md-color-scheme="recallm-light"] .highlight pre,
[data-md-color-scheme="recallm-light"] .md-typeset pre {
  background: transparent !important;
}
[data-md-color-scheme="recallm-light"] .highlight,
[data-md-color-scheme="recallm-light"] .highlight code {
  color: #1a1a1e !important;
}
/* Inline code: keep crimson accent on light bg */
[data-md-color-scheme="recallm-light"] .md-typeset code:not(.highlight code) {
  background: rgba(183, 28, 28, 0.07) !important;
  color: #7F0000 !important;
}

/* ── Light mode Pygments token colors ────────────────────────── */
[data-md-color-scheme="recallm-light"] .highlight .n,
[data-md-color-scheme="recallm-light"] .highlight .na,
[data-md-color-scheme="recallm-light"] .highlight .nd,
[data-md-color-scheme="recallm-light"] .highlight .ni,
[data-md-color-scheme="recallm-light"] .highlight .nn,
[data-md-color-scheme="recallm-light"] .highlight .nv { color: #1a1a1e; }
[data-md-color-scheme="recallm-light"] .highlight .nc { color: #6A1B9A; }
[data-md-color-scheme="recallm-light"] .highlight .o,
[data-md-color-scheme="recallm-light"] .highlight .ow { color: #B71C1C; }
[data-md-color-scheme="recallm-light"] .highlight .p  { color: #555; }
[data-md-color-scheme="recallm-light"] .highlight .mi,
[data-md-color-scheme="recallm-light"] .highlight .mf,
[data-md-color-scheme="recallm-light"] .highlight .mh { color: #1565C0; }
[data-md-color-scheme="recallm-light"] .highlight .c,
[data-md-color-scheme="recallm-light"] .highlight .c1,
[data-md-color-scheme="recallm-light"] .highlight .cm { color: #607d8b; font-style: italic; }
[data-md-color-scheme="recallm-light"] .highlight .k,
[data-md-color-scheme="recallm-light"] .highlight .kn,
[data-md-color-scheme="recallm-light"] .highlight .kd,
[data-md-color-scheme="recallm-light"] .highlight .kr { color: #7F0000; font-weight: 600; }
[data-md-color-scheme="recallm-light"] .highlight .s,
[data-md-color-scheme="recallm-light"] .highlight .s1,
[data-md-color-scheme="recallm-light"] .highlight .s2,
[data-md-color-scheme="recallm-light"] .highlight .sb { color: #2e7d32; }
[data-md-color-scheme="recallm-light"] .highlight .nb { color: #1565C0; }
[data-md-color-scheme="recallm-light"] .highlight .nf,
[data-md-color-scheme="recallm-light"] .highlight .fm { color: #1565C0; }

/* ── ISSUE-004: pip install copy button styling ─────────────── */
.hero-install {
  cursor: pointer;
  user-select: none;
}

.hero-copy-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  opacity: 0.45;
  transition: opacity 0.15s;
  font-size: 0.8rem;
  vertical-align: middle;
}

.hero-install:hover .hero-copy-btn {
  opacity: 1;
}

/* ── Admonition accent ─────────────────────────────────────── */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #B71C1C;
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(183, 28, 28, 0.1);
}

/* ── md-button accent ─────────────────────────────────────── */
.md-typeset .md-button--primary {
  background: #B71C1C;
  border-color: #B71C1C;
  color: #fff;
}

.md-typeset .md-button--primary:hover {
  background: #880E0E;
  border-color: #880E0E;
}