/*
 * Site-level overrides on top of the docgo theme. Docgo's own brand token is
 * already #7700ff, so this file only carries the scratcher.js typography and
 * the styles the landing page uses outside of previews.
 */

:root {
  --dg-font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-sans: var(--dg-font-sans);
}

/*
 * Korean wraps mid-word by default, which splits words like "오픈소스" across
 * lines in the hero. `keep-all` is a no-op for Latin text, so it can be global.
 */
.dg-home-heading,
.dg-home-tagline,
.dg-home-feature-title,
.dg-home-feature-details,
.dg-article-title,
.dg-article-desc {
  word-break: keep-all;
}

/*
 * Docgo decorates only the first three feature cards; give the fourth a mark of
 * its own so the row does not end on an empty tile.
 */
.dg-home-feature:nth-child(4) .dg-home-feature-icon {
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 26%,
      var(--dg-text-strong) 27% 38%,
      transparent 39%
    ),
    linear-gradient(135deg, var(--dg-surface), var(--dg-surface-hover));
}

/* "Surprisingly easy to use": intro animation beside the code sample. */
.dg-home-content .ease-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 2.5rem;
}

.dg-home-content .ease-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dg-home-content .ease-intro {
  width: 15rem;
  max-width: 100%;
  margin-bottom: 1rem;
}

.dg-home-content .ease-lead {
  font-size: 1.125rem;
}

.dg-home-content .ease-desc {
  margin: 0.35rem 0 0;
  color: var(--dg-muted);
  font-weight: 300;
}

.dg-home-content .ease-right {
  min-width: 0;
}

.dg-home-content .ease-right .code-group {
  margin: 0;
}

@media (max-width: 860px) {
  .dg-home-content .ease-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Scratch canvases are always drag targets, inside previews and out. */
.scratch-canvas {
  cursor: crosshair;
}