/* ═══════════════════════════════════════════════════
   GantryGraph — extra.css
   ═══════════════════════════════════════════════════ */

:root {
  --gg-primary:     #4f46e5;
  --gg-primary-l:   #818cf8;
  --gg-accent:      #06b6d4;
  --gg-dark:        #0f172a;
  --gg-dark-2:      #1e293b;
  --gg-dark-3:      #334155;
  --gg-radius:      12px;
  --gg-max:         1200px;

  --md-primary-fg-color:        #4f46e5;
  --md-primary-fg-color--light: #818cf8;
  --md-primary-fg-color--dark:  #3730a3;
  --md-accent-fg-color:         #06b6d4;
}

/* ── Reset for home sections ── */
.gg-hero, .gg-stats, .gg-pillars, .gg-loop, .gg-oss, .gg-footer {
  width: 100%;
  box-sizing: border-box;
}

/* ═══════════════ HERO ═══════════════ */
.gg-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  padding: 90px 24px 80px;
}
.gg-hero__inner {
  max-width: var(--gg-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) {
  .gg-hero__inner { grid-template-columns: 1fr; }
  .gg-hero__code  { display: none; }
}

/* Badges */
.gg-hero__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.gg-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: rgba(79,70,229,.25);
  color: #a5b4fc;
  border: 1px solid rgba(79,70,229,.4);
  text-decoration: none;
}
.gg-badge:hover { background: rgba(79,70,229,.4); }
.gg-badge--dim  { background: rgba(255,255,255,.06); color: #94a3b8; border-color: rgba(255,255,255,.1); }

/* Headline */
.gg-hero__headline {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #f1f5f9;
  margin: 0 0 16px;
  letter-spacing: -.02em;
}
.gg-hero__accent { color: var(--gg-primary-l); }

.gg-hero__tagline {
  font-size: 1.05rem;
  color: #94a3b8;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 520px;
}

/* CTA buttons */
.gg-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

.gg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all .15s ease;
  cursor: pointer;
  border: none;
  line-height: 1;
}
.gg-btn--primary { background: #6366f1; color: #fff !important; box-shadow: 0 0 0 1px rgba(99,102,241,.5); }
.gg-btn--primary:hover { background: #4f46e5; transform: translateY(-1px); color: #fff !important; box-shadow: 0 4px 16px rgba(99,102,241,.4); }
.gg-btn--ghost {
  background: rgba(255,255,255,.08);
  color: #cbd5e1 !important;
  border: 1px solid rgba(255,255,255,.18);
}
.gg-btn--ghost:hover { background: rgba(255,255,255,.14); color: #f1f5f9 !important; border-color: rgba(255,255,255,.28); }

/* Install pill */
.gg-install {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(79,70,229,.35);
  border-radius: 8px;
  padding: 10px 16px;
}
.gg-install__label { font-size: .75rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.gg-install__cmd   { font-family: 'JetBrains Mono', monospace; font-size: .9rem; color: #a5b4fc; }
.gg-install__copy  {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 4px;
  line-height: 1;
}
.gg-install__copy:hover { color: #a5b4fc; }

/* Code window */
.gg-window {
  background: #0d1117;
  border-radius: var(--gg-radius);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.5);
}
.gg-window__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: #161b22;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gg-dot { width: 12px; height: 12px; border-radius: 50%; }
.gg-window__name { margin-left: 8px; font-size: .78rem; color: #6e7681; font-family: 'JetBrains Mono', monospace; }
.gg-window__body { padding: 20px 24px; overflow-x: auto; }
.gg-window__body pre {
  margin: 0;
  background: transparent !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  line-height: 1.65;
  color: #c9d1d9;
}
/* Syntax colours */
.gg-window__body .kn  { color: #ff7b72; }
.gg-window__body .nn  { color: #79c0ff; }
.gg-window__body .n   { color: #e6edf3; }
.gg-window__body .nd  { color: #d2a8ff; }
.gg-window__body .k   { color: #ff7b72; }
.gg-window__body .nf  { color: #d2a8ff; }
.gg-window__body .s   { color: #a5d6ff; }
.gg-window__body .nb  { color: #79c0ff; }
.gg-window__body .o   { color: #ff7b72; }
.gg-window__body .mi  { color: #79c0ff; }
.gg-window__body .p   { color: #e6edf3; }

.gg-window__out {
  padding: 10px 24px 14px;
  background: #0d1117;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .8rem;
  color: #6e7681;
  font-family: 'JetBrains Mono', monospace;
}
.gg-out-ok { color: #3fb950; }

/* ═══════════════ STATS BAR ═══════════════ */
.gg-stats {
  background: #161d2e;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 28px 24px;
}
.gg-stats__inner {
  max-width: var(--gg-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
}
.gg-stat { display: flex; flex-direction: column; align-items: center; padding: 4px 24px; }
.gg-stat__n { font-size: 1.9rem; font-weight: 800; color: var(--gg-primary-l); }
.gg-stat__l { font-size: .78rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* ═══════════════ PILLARS ═══════════════ */
.gg-pillars { background: #0b1120; padding: 80px 24px; }
.gg-pillars__inner { max-width: var(--gg-max); margin: 0 auto; }

.gg-section-h {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #f1f5f9;
  text-align: center;
  margin-bottom: 12px;
}
.gg-section-sub {
  text-align: center;
  color: #64748b;
  font-size: 1.05rem;
  margin-bottom: 52px;
}
.gg-pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.gg-pillar {
  background: #131c2e;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--gg-radius);
  padding: 28px 28px 24px;
  transition: border-color .2s, transform .2s;
}
.gg-pillar:hover { border-color: rgba(79,70,229,.5); transform: translateY(-2px); }

.gg-pillar__icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.gg-icon--red    { background: rgba(239,68,68,.12);   color: #fca5a5; }
.gg-icon--purple { background: rgba(139,92,246,.12);  color: #c4b5fd; }
.gg-icon--blue   { background: rgba(59,130,246,.12);  color: #93c5fd; }
.gg-icon--green  { background: rgba(34,197,94,.12);   color: #86efac; }

.gg-pillar h3 { font-size: 1.05rem; font-weight: 700; color: #f1f5f9; margin: 0 0 10px; }
.gg-pillar p  { font-size: .88rem; color: #94a3b8; line-height: 1.65; margin-bottom: 16px; }
.gg-pillar p code {
  background: rgba(79,70,229,.2);
  color: #a5b4fc;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .82em;
}
.gg-pillar__link {
  font-size: .85rem;
  font-weight: 600;
  color: var(--gg-primary-l);
  text-decoration: none;
}
.gg-pillar__link:hover { text-decoration: underline; }

/* ═══════════════ LOOP ═══════════════ */
.gg-loop {
  background: #0f172a;
  padding: 80px 24px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.gg-loop__inner { max-width: var(--gg-max); margin: 0 auto; }
.gg-loop__steps {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.gg-step {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  background: #131c2e;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--gg-radius);
  padding: 22px 20px;
}
.gg-step__num {
  font-size: .72rem;
  font-weight: 800;
  color: var(--gg-primary-l);
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.gg-step__body strong { display: block; color: #f1f5f9; font-size: .95rem; margin-bottom: 6px; }
.gg-step__body p { color: #94a3b8; font-size: .83rem; line-height: 1.55; margin: 0; }
.gg-step__body p code {
  background: rgba(79,70,229,.2);
  color: #a5b4fc;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: .8em;
}
.gg-step__arrow { color: #2d3f5e; font-size: 1.5rem; align-self: center; flex-shrink: 0; }
@media (max-width: 700px) { .gg-step__arrow { display: none; } }

/* ═══════════════ OSS ═══════════════ */
.gg-oss {
  background: linear-gradient(135deg, #1a1640 0%, #0f172a 100%);
  padding: 70px 24px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.05);
}
.gg-oss__inner { max-width: 680px; margin: 0 auto; }
.gg-oss .gg-section-sub { margin-bottom: 32px; }

/* ═══════════════ FOOTER ═══════════════ */
.gg-footer {
  background: #080e1a;
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 36px 24px 28px;
}
.gg-footer__inner {
  max-width: var(--gg-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.gg-footer__brand { display: flex; align-items: center; gap: 12px; }
.gg-footer__logo { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.gg-footer__tagline { color: #475569; font-size: .85rem; }

.gg-footer__links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.gg-footer__links a { color: #64748b; font-size: .88rem; text-decoration: none; }
.gg-footer__links a:hover { color: #94a3b8; }

.gg-footer__copy { color: #334155; font-size: .78rem; line-height: 1.6; }

/* ═══════════════ Docs pages ═══════════════ */
/* Hide MkDocs edit button */
.md-content__button.md-icon { display: none; }

/* Better admonition styling in docs */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
}

/* Make inline code stand out a bit more */
.md-typeset code:not(.highlight code) {
  border-radius: 4px;
}