/* ── Hero section on landing page ── */
.hero {
  text-align: center;
  padding: 2rem 0 1rem;
}

.hero-tagline {
  font-size: 1.6rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}

.hero .md-button {
  margin: 0.25rem;
}

/* ── Brain / Hand admonition types ── */

/* Brain admonition — purple */
.md-typeset .admonition.brain,
.md-typeset details.brain {
  border-color: #7c4dff;
}

.md-typeset .admonition.brain > .admonition-title,
.md-typeset details.brain > summary {
  background-color: rgba(124, 77, 255, 0.1);
}

.md-typeset .admonition.brain > .admonition-title::before,
.md-typeset details.brain > summary::before {
  content: "🧠";
  margin-right: 0.4rem;
}

/* Hand admonition — orange */
.md-typeset .admonition.raised-back-of-hand,
.md-typeset details.raised-back-of-hand {
  border-color: #ff9100;
}

.md-typeset .admonition.raised-back-of-hand > .admonition-title,
.md-typeset details.raised-back-of-hand > summary {
  background-color: rgba(255, 145, 0, 0.1);
}

.md-typeset .admonition.raised-back-of-hand > .admonition-title::before,
.md-typeset details.raised-back-of-hand > summary::before {
  content: "🤚";
  margin-right: 0.4rem;
}

/* ── Grid cards ── */
.grid.cards > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.8rem;
  list-style: none;
  padding: 0;
}

/* ── Mermaid diagram tweaks ── */
.mermaid {
  margin: 1.5rem 0;
}

/* ── Code block header labels ── */
.md-typeset .highlight .filename {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Table styling (Rails Guides-like) ── */
.md-typeset table:not([class]) {
  font-size: 0.85rem;
}

.md-typeset table:not([class]) th {
  font-weight: 600;
  white-space: nowrap;
}

/* ── Version badge ── */
.version-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #7c4dff;
  color: #fff;
}

/* ── Responsive tweaks ── */
@media screen and (max-width: 76.25em) {
  .hero-tagline {
    font-size: 1.3rem;
  }
}