/* ===========================
   Flowtic Docs – style.css
   Pure CSS, no frameworks
   =========================== */

/* ---------- CSS Variables ---------- */
:root{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --ink: #0b1220;
  --ink-soft: #334155;
  --muted: #64748b;
  --border: #e5e7eb;
  --ring: #60a5fa;
  --brand: #2563eb;
  --brand-ink: #fff;
  --code-bg: #0f172a;
  --code-ink: #e5e7eb;
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --shadow: 0 10px 30px rgba(2, 6, 23, .06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f14;
    --panel: rgba(255,255,255,.06);
    --panel-solid: #0f141a;
    --ink: #e5edf7;
    --ink-soft: #cfd8e3;
    --muted: #93a4b7;
    --border: rgba(255,255,255,.12);
    --ring: #60a5fa;
    --brand: #3b82f6;
    --brand-ink: #0b1220;
    --code-bg: #0b1220;
    --code-ink: #e5edf7;
    --link: #93c5fd;
    --link-hover: #bfdbfe;
    --shadow: 0 12px 40px rgba(0,0,0,.35);
  }
  body::before{
    background: radial-gradient(1200px 800px at 10% 10%, rgba(59,130,246,.12), transparent 60%);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 200vw 200vh;     /* oversize canvas to prevent edges */
    background-attachment: fixed;     /* keep it fixed and non-repeating */
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fixed, non-repeating gradient canvas (prevents visible tiling) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(59,130,246,.10), transparent 60%);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 200vw 200vh;     /* oversize canvas to prevent edges */
  background-attachment: fixed;     /* keep it fixed and non-repeating */
}

/* Layout */
header, footer { background: var(--panel); border-bottom: 1px solid var(--border); }
footer { border-top: 1px solid var(--border); border-bottom: 0; }
.wrapper{ min-height: 100%; display: flex; flex-direction: column; }
.container{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 20;
  box-shadow: var(--shadow);
  background: var(--panel-solid);
}
.brand{
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0; font-weight: 800; letter-spacing: 0.3px;
}
.brand__logo{
  width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), #60a5fa);
}
.brand__name{ font-size: 1.25rem; color: var(--ink); }

/* Nav */
.nav{
  display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0 16px;
}
.nav a{
  color: var(--ink);
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-solid);
  transition: transform .1s ease, background .2s ease, border-color .2s ease;
}
.nav a:hover{ transform: translateY(-1px); border-color: var(--ring); }
.nav a.is-active{
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}

/* Main content */
main{ flex: 1; }
.hero{
  padding: 48px 0 10px;
}
.lead{
  font-size: 1.1rem; color: var(--muted); max-width: 65ch;
}

/* Cards / panels */
.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 22px;
}
/* Hover/Cover-Effekt für Startseiten-Kacheln */
.panel--hover {
  position: relative;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.panel--hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at top left, rgba(59,130,246,0.16), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

.panel--hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.22);
  border-color: rgba(59,130,246,0.45);
}

.panel--hover:hover::before {
  opacity: 1;
}

/* Typography */
h1,h2,h3,h4{ color: var(--ink); margin: 1.2em 0 .5em; line-height: 1.25; }
h1{ font-size: clamp(1.6rem, 1rem + 2vw, 2.2rem); }
h2{ font-size: clamp(1.3rem, .9rem + 1.2vw, 1.6rem); }
h3{ font-size: 1.1rem; }
p{ margin: .7em 0; }
ul,ol{ padding-left: 1.2rem; }
small, .muted{ color: var(--muted); }

/* Links & focus */
a{ color: var(--link); }
a:hover{ color: var(--link-hover); }
:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Buttons */
.btn{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, transform .1s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: var(--ring); }
.btn.primary{ background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.danger{ background: #fee2e2; color: #991b1b; border-color: #fecaca; }
@media (prefers-color-scheme: dark){
  .btn.danger{ background: rgba(220,38,38,.12); color: #fecaca; border-color: rgba(220,38,38,.35); }
}

/* Badges */
.badge{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .75rem;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink-soft);
}
.badge.ok{ color:#16a34a; border-color:#16a34a33; background:#16a34a14; }
.badge.warn{ color:#d97706; border-color:#d9770633; background:#d9770614; }
.badge.danger{ color:#dc2626; border-color:#dc262633; background:#dc262614; }

/* Tables */
.table{
  width: 100%; border-collapse: collapse; font-size: .95rem;
  background: var(--panel); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
}
.table th, .table td{ padding: 12px 14px; border-bottom: 1px solid var(--border); }
.table thead th{
  text-align: left; color: var(--ink-soft);
  background: linear-gradient(0deg, transparent, rgba(0,0,0,.02));
}
.table tr:hover td{ background: rgba(99,102,241,.04); }

/* Code & Pre */
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9em;
  padding: .15em .35em;
  border-radius: 6px;
  background: rgba(2,6,23,.06);
  color: #0f172a;
}
@media (prefers-color-scheme: dark){
  code{ background: rgba(255,255,255,.08); color: #e5edf7; }
}
pre{
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: 12px;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
pre code{
  background: transparent; color: inherit; padding: 0;
}

/* Simple "pseudo-highlighting" for code (no JS) */
pre code .k { color: #93c5fd; }   /* keywords */
pre code .s { color: #86efac; }   /* strings */
pre code .c { color: #94a3b8; }   /* comments */
pre code .p { color: #e5e7eb; }   /* plain */

/* Callouts */
.callout{
  border-left: 4px solid var(--brand);
  background: linear-gradient(90deg, rgba(59,130,246,.10), transparent);
  padding: 14px 16px; border-radius: 10px;
}
.callout.ok{ border-color: var(--ok); background: linear-gradient(90deg, rgba(22,163,74,.12), transparent); }
.callout.warn{ border-color: var(--warn); background: linear-gradient(90deg, rgba(217,119,6,.12), transparent); }
.callout.danger{ border-color: var(--danger); background: linear-gradient(90deg, rgba(220,38,38,.12), transparent); }

/* Grids & helpers */
.grid{ display: grid; gap: 14px; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){ .grid.cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr; } }

.max-w-prose{ max-width: 75ch; }
.center{ text-align: center; }
.mt-0{ margin-top: 0; } .mt-1{ margin-top: .25rem; } .mt-2{ margin-top: .5rem; } .mt-3{ margin-top: .75rem; } .mt-4{ margin-top: 1rem; }
.mb-0{ margin-bottom: 0; } .mb-1{ margin-bottom: .25rem; } .mb-2{ margin-bottom: .5rem; } .mb-3{ margin-bottom: .75rem; } .mb-4{ margin-bottom: 1rem; }

/* Forms */
input[type="text"], input[type="email"], input[type="search"], textarea, select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input::placeholder, textarea::placeholder{ color: var(--muted); }
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 25%, transparent);
}

/* Footer */
.site-footer{ padding: 18px 0; color: var(--muted); }
.site-footer a{ color: inherit; text-decoration: underline; }
.site-footer a:hover{ color: var(--ink); }

/* Utilities for docs layout */
.section{
  margin: 28px 0;
}
kbd{
  background: #111827; color: #f3f4f6; border-radius: 6px; padding: 2px 6px; font-size: .85em;
  border: 1px solid #374151;
}
@media (prefers-color-scheme: dark){
  kbd{ background: #111827; border-color: #1f2937; }
}

/* Small banner */
.banner{
  padding: 10px 14px; margin: 12px 0;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: linear-gradient(0deg, transparent, rgba(2,6,23,.02));
}

/* Code block caption */
.code-caption{
  font-size: .85rem; color: var(--muted); margin: 6px 2px 0;
}