/* Custom layer on top of the prebuilt Tailwind CSS. Light, paper-like
   theme inspired by worker.md / soul.md. Keep this small. */

html { scroll-behavior: smooth; }

body {
  /* Slightly tighter line-height for prose-heavy site */
  line-height: 1.65;
}

/* Pygments-rendered codehilite blocks (used on /examples/<slug>, /docs, /integration) */
.codehilite {
  background: #fafaf9 !important;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  overflow-x: auto;
}
.codehilite pre {
  margin: 0 !important;
  background: transparent !important;
  white-space: pre;
  color: #1c1917;
}

/* Quickstart code blocks on /docs */
.codeblock {
  position: relative;
  margin-top: 0.75rem;
  background: #fafaf9;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  overflow: hidden;
}
.codeblock pre {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #1c1917;
}
.codeblock .copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.7rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #fff;
  color: #44403c;
  border: 1px solid #e7e5e4;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.codeblock .copy-btn:hover { background: #1c1917; color: #fff; border-color: #1c1917; }

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Compact YAML preview shown inside each /examples gallery card.
   Hide horizontal overflow cleanly (no mid-glyph clipping) and fade
   the bottom so tall snippets don't look chopped. */
.codehilite-preview { position: relative; }
.codehilite-preview .codehilite {
  padding: 0.75rem 1rem;
  font-size: 0.72rem;
  line-height: 1.5;
  max-height: 11rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}
.codehilite-preview .codehilite pre {
  white-space: pre-wrap;       /* wrap long lines instead of horizontal clip */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.codehilite-preview::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3rem;
  background: linear-gradient(to bottom, rgba(250, 250, 249, 0), rgba(250, 250, 249, 1));
  pointer-events: none;
}

.spec-field-copy {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

/* Override the dark-theme `bg-ink-900/...` opacity utilities that
   templates use for muted backgrounds — we want them to read as
   subtle paper tints, not overlays on a black page. */
.bg-ink-900\/50,
.bg-ink-900\/60,
.bg-ink-900\/70,
.bg-ink-900\/80,
.bg-ink-900\/90,
.bg-ink-900\/95 { background-color: rgba(255, 255, 255, 0.95) !important; }

.bg-ink-800\/40,
.bg-ink-800\/50,
.bg-ink-800\/60,
.bg-ink-800\/70,
.bg-ink-800\/80 { background-color: #fafaf9 !important; }

/* Brand-color "fill" utilities used by the old dark theme become text-only
   accent on light bg. */
.bg-brand\/5,
.bg-brand\/10,
.bg-brand\/15,
.bg-brand\/20 { background-color: #fafaf9 !important; }
.border-brand\/20,
.border-brand\/30,
.border-brand\/40 { border-color: #e7e5e4 !important; }

/* Typography: prefer serif for ALL h1/h2 by default so legacy templates
   without explicit font-serif classes still pick up the new vibe. */
h1, h2 { font-family: "Source Serif 4", "Source Serif Pro", Georgia, Cambria, "Times New Roman", serif; letter-spacing: -0.01em; }

/* Visited link color stability */
a { text-underline-offset: 3px; }

/* The old hero used a gradient bleeding from brand-light → brand on
   bg-clip-text. Fall back to a solid dark fill so the headline is
   readable on white. */
.bg-clip-text.text-transparent { -webkit-text-fill-color: #1c1917 !important; color: #1c1917 !important; background-image: none !important; }