/* ═══════════════════════════════════════════════════════════════════
   Build With Gaia — Custom Theme
   Modern AI company documentation aesthetic
   ═══════════════════════════════════════════════════════════════════ */

/* ── Brand Colors ─────────────────────────────────────────────────── */
:root {
  --md-primary-fg-color: #6C3FC5;
  --md-primary-fg-color--light: #8B5CF6;
  --md-primary-fg-color--dark: #4C1D95;
  --md-accent-fg-color: #14B8A6;
  --md-accent-fg-color--transparent: rgba(20, 184, 166, 0.1);

  --gaia-gradient-start: #6C3FC5;
  --gaia-gradient-mid: #8B5CF6;
  --gaia-gradient-end: #06B6D4;
  --gaia-gradient: linear-gradient(135deg, var(--gaia-gradient-start), var(--gaia-gradient-mid), var(--gaia-gradient-end));

  --gaia-text-gradient: linear-gradient(135deg, #8B5CF6, #06B6D4);
  --gaia-surface-glow: 0 0 80px rgba(139, 92, 246, 0.08);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #8B5CF6;
  --md-primary-fg-color--light: #A78BFA;
  --md-primary-fg-color--dark: #6C3FC5;
  --md-accent-fg-color: #2DD4BF;
  --md-accent-fg-color--transparent: rgba(45, 212, 191, 0.1);
  --md-default-bg-color: #0F0F1A;
  --md-default-bg-color--light: #16162A;
  --md-default-fg-color: #E2E8F0;
  --md-default-fg-color--light: #94A3B8;
  --md-code-bg-color: #1A1A2E;
}

/* ── Typography ───────────────────────────────────────────────────── */
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  font-weight: 600;
}

/* ── Header ───────────────────────────────────────────────────────── */
.md-header {
  background: rgba(15, 15, 26, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

[data-md-color-scheme="default"] .md-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(108, 63, 197, 0.12);
  /* Override Material's assumption that headers have a dark background */
  color: var(--md-default-fg-color);
}

/* Make header text and icons visible on the light background */
[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__topic,
[data-md-color-scheme="default"] .md-header__topic .md-ellipsis {
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="default"] .md-header__button {
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="default"] .md-header__button:hover {
  color: var(--md-primary-fg-color);
}

/* ── Navigation Tabs ──────────────────────────────────────────────── */
.md-tabs {
  background: transparent;
  border-bottom: 1px solid rgba(139, 92, 246, 0.06);
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--md-accent-fg-color);
}

/* Nav tabs legible on the light header */
[data-md-color-scheme="default"] .md-tabs {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(108, 63, 197, 0.08);
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: var(--md-default-fg-color--light);
  opacity: 1;
}

[data-md-color-scheme="default"] .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: var(--md-primary-fg-color);
}

/* ── Hero Section (Home Page) ─────────────────────────────────────── */
.md-content .hero-section {
  position: relative;
  text-align: center;
  padding: 4rem 2rem 3rem;
  margin: -1rem -0.8rem 2rem;
  border-radius: 1rem;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .hero-section {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(6, 182, 212, 0.04) 60%, transparent 100%);
}

[data-md-color-scheme="default"] .hero-section {
  background: linear-gradient(180deg, rgba(108, 63, 197, 0.06) 0%, rgba(20, 184, 166, 0.03) 60%, transparent 100%);
}

.hero-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(ellipse at 30% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 60%, rgba(6, 182, 212, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.hero-section > * {
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  background: var(--gaia-text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--md-default-fg-color--light);
  max-width: 640px;
  margin: 0.75rem auto 2rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-actions .md-button {
  border-radius: 0.5rem;
  padding: 0.65rem 1.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}

.hero-actions .md-button--primary {
  background: var(--gaia-gradient);
  border: none;
  color: white;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
}

.hero-actions .md-button--primary:hover {
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.35);
  transform: translateY(-1px);
}

.hero-actions .md-button:not(.md-button--primary) {
  border: 1.5px solid rgba(139, 92, 246, 0.3);
  color: var(--md-primary-fg-color--light);
}

.hero-actions .md-button:not(.md-button--primary):hover {
  border-color: var(--md-primary-fg-color--light);
  background: rgba(139, 92, 246, 0.05);
}

/* ── Feature Grid ─────────────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.feature-card {
  padding: 1.75rem;
  border-radius: 0.875rem;
  border: 1px solid rgba(139, 92, 246, 0.08);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .feature-card {
  background: rgba(22, 22, 42, 0.6);
}

[data-md-color-scheme="default"] .feature-card {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.feature-card:hover {
  border-color: rgba(139, 92, 246, 0.2);
  transform: translateY(-2px);
  box-shadow: var(--gaia-surface-glow);
}

.feature-card h3 {
  margin-top: 0 !important;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-card .feature-icon {
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.5rem;
  background: rgba(139, 92, 246, 0.1);
}

.feature-card p {
  color: var(--md-default-fg-color--light);
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.feature-card a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--md-accent-fg-color);
  text-decoration: none;
}

.feature-card a:hover {
  text-decoration: underline;
}

/* ── Quickstart Section ───────────────────────────────────────────── */
.quickstart-section {
  margin: 3rem 0;
  padding: 2rem;
  border-radius: 0.875rem;
  border: 1px solid rgba(139, 92, 246, 0.08);
}

[data-md-color-scheme="slate"] .quickstart-section {
  background: rgba(22, 22, 42, 0.4);
}

[data-md-color-scheme="default"] .quickstart-section {
  background: rgba(248, 250, 252, 0.8);
}

.quickstart-section h2 {
  margin-top: 0 !important;
  font-size: 1.5rem;
}

/* ── Code Blocks ──────────────────────────────────────────────────── */
.md-typeset code {
  border-radius: 0.3rem;
  padding: 0.15em 0.35em;
}

.md-typeset pre {
  border-radius: 0.625rem;
  border: 1px solid rgba(139, 92, 246, 0.06);
}

[data-md-color-scheme="slate"] .md-typeset pre {
  background: #0D0D1F;
}

.md-typeset pre > code {
  font-size: 0.82rem;
  line-height: 1.65;
}

.md-clipboard {
  color: var(--md-default-fg-color--light);
}

/* ── Admonitions ──────────────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.625rem;
  border-left-width: 3px;
  font-size: 0.88rem;
}

/* ── Search ───────────────────────────────────────────────────────── */
.md-search__form {
  border-radius: 0.5rem;
}

[data-md-color-scheme="slate"] .md-search__form {
  background: rgba(22, 22, 42, 0.8);
}

.md-search__input::placeholder {
  font-size: 0.88rem;
}

.md-search-result .md-search-result__meta {
  color: var(--md-accent-fg-color);
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.md-nav__link {
  font-size: 0.82rem;
  transition: color 0.15s ease;
}

.md-nav__link--active {
  font-weight: 600;
  color: var(--md-accent-fg-color) !important;
}

.md-nav__item--nested > .md-nav__link {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
}

/* ── Footer Navigation ────────────────────────────────────────────── */
.md-footer {
  border-top: 1px solid rgba(139, 92, 246, 0.06);
}

.md-footer-nav__link {
  transition: opacity 0.2s ease;
}

.md-footer-nav__link:hover {
  opacity: 0.8;
}

/* ── Tables ───────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  font-size: 0.82rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* ── Stats Bar (Home) ─────────────────────────────────────────────── */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  background: var(--gaia-text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
  margin-top: 0.25rem;
}

/* ── Announcement Bar & Ticker ────────────────────────────────────── */
.md-banner {
  background: var(--gaia-gradient);
  color: white;
  font-size: 0.82rem;
  font-weight: 500;
  padding-bottom: 1rem; /* room for the dot nav */
}

.md-banner a {
  color: white;
  text-decoration: underline;
}

/* Ticker wrapper — height of one text line */
.announce-ticker {
  position: relative;
  height: 1.3em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Each item stacks inside the wrapper */
.announce-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 0.5rem;
}

.announce-item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Pill badge — "New" label */
.announce-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1em 0.55em;
  border-radius: 2em;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

/* Dot navigation below ticker items */
.announce-dots {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.announce-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}

.announce-dot.is-active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.3);
}

/* ── Community Projects Grid ──────────────────────────────────────── */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.community-card {
  border-radius: 1rem;
  border: 1px solid rgba(139, 92, 246, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

[data-md-color-scheme="slate"] .community-card {
  background: rgba(22, 22, 42, 0.6);
}

[data-md-color-scheme="default"] .community-card {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.community-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.1);
}

.community-card--placeholder {
  opacity: 0.6;
}

.community-card--placeholder:hover {
  opacity: 0.8;
}

.community-card__logo {
  padding: 1.5rem 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.community-card__img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  display: block;
  padding: 0.55rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  box-sizing: border-box;
}

.community-card__body {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.community-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.community-card__author {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

.community-card__badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15em 0.6em;
  border-radius: 2rem;
  background: rgba(139, 92, 246, 0.1);
  color: var(--md-primary-fg-color--light);
  border: 1px solid rgba(139, 92, 246, 0.15);
}

.community-card__badge--coming {
  background: rgba(20, 184, 166, 0.08);
  color: var(--md-accent-fg-color);
  border-color: rgba(20, 184, 166, 0.2);
}

.community-card__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.5rem !important;
  line-height: 1.3;
  color: var(--md-default-fg-color);
}

.community-card__desc {
  font-size: 0.84rem !important;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  margin: 0 0 1rem !important;
  flex: 1;
}

.community-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.community-tag {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.2em 0.65em;
  border-radius: 2rem;
  background: rgba(6, 182, 212, 0.08);
  color: var(--md-accent-fg-color);
  border: 1px solid rgba(6, 182, 212, 0.15);
}

.community-card__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(139, 92, 246, 0.06);
}

.community-link {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--md-accent-fg-color) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.15s ease;
}

.community-link:hover {
  color: var(--md-primary-fg-color--light) !important;
  text-decoration: underline !important;
}

/* ── Blog post typography tweaks ──────────────────────────────────── */
.md-typeset .md-post__meta {
  font-size: 0.8rem;
}

/* ── Smooth Scrolling ─────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Print Styles ─────────────────────────────────────────────────── */
@media print {
  .hero-section { background: none !important; }
  .hero-title { -webkit-text-fill-color: #4C1D95 !important; }
  .feature-card { break-inside: avoid; }
}

/* ── Mobile Refinements ───────────────────────────────────────────── */
@media screen and (max-width: 76.1875em) {
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 0.95rem; }
  .stats-bar { gap: 1.5rem; }
  .stat-number { font-size: 1.5rem; }
  .feature-grid { grid-template-columns: 1fr; }
}

/* ── Content width on large screens ───────────────────────────────── */
@media screen and (min-width: 100em) {
  .md-grid {
    max-width: 82rem;
  }
}