/* ─── Stegflow — brand theme + signature graph (theme-aware) ───
   Colors, fonts and components follow the Stegflow brand guidelines
   (v1.0). The palette is set to `custom` in zensical.toml; the exact
   brand hex values live here so both schemes stay on-brand. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ── Brand color tokens ───────────────────────────────────────
      Brand:  Cyan 600 #0891B2 · Cyan 500 #06B6D4 · Cyan 100 #CFFAFE
              Orange 500 #F97316 · Orange 50 #FFF7ED · Ink 900 #0F172A
      State:  Success #10B981 · Running #06B6D4 · Waiting #F59E0B · Failed #EF4444 */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #0891B2;  /* Cyan 600 — brand */
  --md-primary-fg-color--light: #06B6D4;  /* Cyan 500 */
  --md-primary-fg-color--dark:  #0E7490;  /* Cyan 700 */
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, .7);
  --md-accent-fg-color:         #F97316;  /* Orange 500 — accent */

  --md-typeset-a-color:         #0891B2;

  /* Brand surfaces used by the home-page components */
  --sf-ink:        #0F172A;
  --sf-cyan-50:    #ECFEFF;
  --sf-cyan-200:   #A5F3FC;
  --sf-cyan-700:   #0E7490;
  --sf-surface:    #F1F5F9;
  --sf-border:     #E2E8F0;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #22D3EE;  /* Cyan 400 — reads on ink */
  --md-primary-fg-color--light: #67E8F9;  /* Cyan 300 */
  --md-primary-fg-color--dark:  #06B6D4;  /* Cyan 500 */
  --md-primary-bg-color:        #0F172A;
  --md-accent-fg-color:         #FB923C;  /* Orange 400 */

  --md-typeset-a-color:         #22D3EE;

  --sf-ink:        #E2E8F0;
  --sf-cyan-50:    rgba(34, 211, 238, .12);
  --sf-cyan-200:   rgba(34, 211, 238, .35);
  --sf-cyan-700:   #67E8F9;
  --sf-surface:    var(--md-code-bg-color);
  --sf-border:     var(--md-default-fg-color--lightest);
}

/* ── Header: translucent, brand-light (mockup nav) ──────────── */
.md-header {
  color: var(--sf-ink);
  background-color: color-mix(in srgb, var(--md-default-bg-color) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sf-border);
  box-shadow: none;
}
.md-header__title,
.md-header [data-md-color-scheme] { color: inherit; }
.md-tabs {
  color: var(--sf-ink);
  background-color: transparent;
}

/* ── Footer trademark / non-affiliation notice ────────────────
      Rendered by overrides/main.html (footer block) as a discreet
      fine-print strip that blends with the footer. */
.sf-legal { background: var(--md-footer-bg-color--dark); }
.sf-legal .md-grid {
  padding: .7rem .8rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--md-footer-fg-color--lighter) 22%, transparent);
  font-size: .62rem; line-height: 1.5; text-align: center;
  color: var(--md-footer-fg-color--lighter);
}

/* ── Hero ───────────────────────────────────────────────── */
.sf-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
}
@media (max-width: 60em) { .sf-hero { grid-template-columns: 1fr; } }

.sf-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Space Mono", monospace;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--sf-cyan-700);
  background: var(--sf-cyan-50);
  border: 1px solid var(--sf-cyan-200);
  padding: .35rem .75rem; border-radius: 999px;
}
.sf-hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.3rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  color: var(--sf-ink);
  margin: 1rem 0 .75rem;
  text-wrap: balance;
}
.sf-hero > div > p:first-of-type { font-size: 1.05rem; line-height: 1.6; color: var(--md-default-fg-color--light); }

.sf-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.5rem; }
.sf-chip {
  font-family: "Space Mono", monospace; font-size: .72rem;
  padding: .35rem .65rem; border-radius: 7px;
  background: var(--sf-surface); color: var(--md-default-fg-color);
  border: 1px solid var(--sf-border);
}

/* ── Buttons: brand-styled CTAs ───────────────────────────── */
.md-typeset .md-button {
  border-radius: 9px; font-weight: 600;
  border-color: var(--sf-border);
  color: var(--sf-ink);
  transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s;
}
.md-typeset .md-button:not(.md-button--primary):hover {
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-fg-color);
  background: transparent;
}
.md-typeset .md-button--primary {
  background-color: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--md-primary-fg-color) 60%, transparent);
}
.md-typeset .md-button--primary:hover {
  background-color: var(--md-primary-fg-color--dark);
  border-color: var(--md-primary-fg-color--dark);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--md-primary-fg-color) 65%, transparent);
}

/* ── Hero media — image / animated GIF slot ───────────────────
      Sized to the 460 × 430 design panel. Apply `.sf-hero-media`
      to the empty placeholder div, or to a Markdown image once added. */
.sf-hero-media {
  display: block; width: 100%; max-width: 460px; aspect-ratio: 46 / 43;
  margin-inline: auto; border-radius: 14px;
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--sf-ink) 28%, transparent);
}
/* Empty placeholder state — dashed frame + size hint */
.sf-hero-media:empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--sf-border);
  background-image: radial-gradient(var(--md-default-fg-color--lightest) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: none;
}
.sf-hero-media:empty::after {
  content: attr(data-placeholder);
  font-family: "Space Mono", monospace; font-size: .72rem;
  color: var(--md-default-fg-color--light);
}
/* A real image fills the slot */
img.sf-hero-media { object-fit: cover; }

/* A real video keeps its native aspect ratio (no crop, no distortion) */
video.sf-hero-media {
  aspect-ratio: auto;
  height: auto;
  max-width: 420px;
  object-fit: contain;
}

/* ── Feature cards (mockup): inline cyan icon + title, soft card ──
      Icons come from Markdown via `:lucide-…:{ .lg .middle }` shortcodes
      (no inline SVG in index.md); everything below is pure styling. */
.md-typeset .grid.cards > ul > li {
  position: relative; overflow: hidden;
  border-radius: 14px; padding: 1.6rem;
  border: 1px solid var(--sf-border);
  background: var(--md-default-bg-color);
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* Card header — first paragraph holds the icon + bold title on one row */
.md-typeset .grid.cards > ul > li > p:first-child {
  display: flex; align-items: center; gap: .7rem; margin: 0 0 .2rem;
}
.md-typeset .grid.cards > ul > li > p:first-child > strong {
  font-size: 1.15rem; font-weight: 700; color: var(--sf-ink);
}
.md-typeset .grid.cards .twemoji.lg {
  flex-shrink: 0; width: 1.55rem; height: 1.55rem;
  color: var(--md-primary-fg-color);
}
.md-typeset .grid.cards .twemoji.lg svg { width: 100%; height: 100%; }

/* Divider after the title, then body copy + cyan lead-ins */
.md-typeset .grid.cards > ul > li > hr {
  margin: .9rem 0; border: 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset .grid.cards > ul > li > p:not(:first-child) {
  font-size: .9rem; line-height: 1.6; color: var(--md-default-fg-color--light);
}

/* Feature list — bullet-less stacked rows; the cyan lead term carries it */
.md-typeset .grid.cards > ul > li > ul {
  margin: .55rem 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .42rem;
}
.md-typeset .grid.cards > ul > li > ul > li {
  margin: 0; padding: 0;
  font-size: .85rem; line-height: 1.5; color: var(--md-default-fg-color--light);
}
/* Inline icons inside a feature row — cyan, aligned with the text */
.md-typeset .grid.cards > ul > li > ul .twemoji {
  color: var(--md-primary-fg-color); vertical-align: -.15em;
}

/* Status marks in the API actions lists (AWS compatibility) */
.md-typeset .twemoji.sf-ok { color: #10B981; vertical-align: -.15em; }
.md-typeset .twemoji.sf-no { color: var(--md-default-fg-color--lighter); vertical-align: -.15em; }

/* Keep the first column of content tables on a single line */
.md-typeset table:not([class]) th:first-child,
.md-typeset table:not([class]) td:first-child {
  white-space: nowrap;
}

/* Important words recalled in cyan — lead terms in body & list rows.
   The (more specific) title rule above keeps the heading in ink. */
.md-typeset .grid.cards > ul > li strong {
  color: var(--md-primary-fg-color); font-weight: 600;
}

/* Accent top-line + lift on hover */
.md-typeset .grid.cards > ul > li::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
  opacity: 0; transition: opacity .15s;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--md-primary-fg-color) 14%, transparent);
  transform: translateY(-2px);
}
.md-typeset .grid.cards > ul > li:hover::after { opacity: 1; }

/* ── Live-executions strip (mirrors the mockup activity rows) ── */
.sf-exec { display: flex; flex-direction: column; gap: .45rem; margin: 1.1rem 0 .5rem; }
.sf-exec-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem .9rem; border-radius: 9px;
  border: 1px solid var(--sf-border);
  background: var(--md-default-bg-color);
}
.sf-badge {
  flex-shrink: 0; width: 86px; text-align: center;
  font-family: "Space Mono", monospace; font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: .25rem 0; border-radius: 5px;
}
.sf-badge--ok   { background: color-mix(in srgb, #10B981 16%, transparent); color: #059669; }
.sf-badge--run  { background: color-mix(in srgb, var(--md-primary-fg-color) 16%, transparent); color: var(--md-primary-fg-color); }
.sf-badge--err  { background: color-mix(in srgb, #EF4444 16%, transparent); color: #DC2626; }
.sf-badge--wait { background: color-mix(in srgb, #F59E0B 16%, transparent); color: #B45309; }
.sf-exec-name { font-family: "Space Mono", monospace; font-size: .78rem; color: var(--md-default-fg-color); }
.sf-exec-meta { font-size: .72rem; color: var(--md-default-fg-color--light); margin-top: .1rem; }
.sf-exec-time { margin-left: auto; flex-shrink: 0; font-family: "Space Mono", monospace; font-size: .72rem; color: var(--md-default-fg-color--light); }

/* ── Reference definition lists (e.g. configuration env vars) ──
      Each term (a long variable name) gets its own full-width line as a
      subtle chip, with the description below. Avoids table-cell wrapping. */
.md-typeset dl dt {
  margin-top: 1.1rem;
  font-weight: 400;
}
.md-typeset dl dt > code {
  font-size: .8em;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  padding: .15em .5em;
  border-radius: 6px;
}
.md-typeset dl dd {
  margin-top: .25rem;
  color: var(--md-default-fg-color--light);
}

/* ── "See it in action" screenshot carousel (scroll-snap) ────── */
.sf-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.sf-shots > p { margin: 0; }
.sf-shots img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--sf-border);
  box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--sf-ink) 45%, transparent);
  cursor: zoom-in;
  transition: transform .15s, box-shadow .15s;
}
.sf-shots img:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--sf-ink) 50%, transparent);
}

/* External links in the left nav: a small "external" arrow. The
   `--external` class and target=_blank are set by external-links.js
   (true cross-origin links only). */
.md-nav__link--external::after {
  content: "↗";
  margin-left: .3em;
  font-size: .8em;
  opacity: .55;
}