/* SuperNav Live-Demo — Bühne & Fixes für den statischen Betrieb (ohne WordPress) */

/* Dashicons-Basis: WP lädt .dashicons als Basisklasse — die Doku-Beispiele nutzen
   nur "dashicons-xyz", daher hier die Font-Zuweisung für alle Glyphen-Klassen. */
[class^="dashicons-"], [class*=" dashicons-"] {
  display: inline-block;
  font-style: normal;
  line-height: 1;
}
[class^="dashicons-"]::before, [class*=" dashicons-"]::before {
  font-family: dashicons;
  -webkit-font-smoothing: antialiased;
}

/* ── Demo-Bühne ── */
.demo-stage {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: visible;
  margin: 1.25rem 0 2rem;
}
.demo-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #e2e8f0;
  border-radius: 14px 14px 0 0;
}
.demo-browser-bar span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.demo-browser-bar .d1 { background: #f87171; }
.demo-browser-bar .d2 { background: #fbbf24; }
.demo-browser-bar .d3 { background: #34d399; }
.demo-browser-bar .demo-url {
  flex: 1; width: auto; height: auto; border-radius: 6px;
  background: #fff; color: #64748b; font-size: 0.78rem;
  padding: 3px 10px; margin-left: 8px;
}

.demo-site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.demo-site-logo {
  font-weight: 800;
  font-size: 1.02rem;
  color: #111827;
  white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.demo-site-logo img { width: 26px; height: 26px; border-radius: 6px; }

/* Demo-Seiteninhalt unter der Navbar, damit das Panel etwas überlagern kann */
.demo-page-body {
  min-height: 560px;
  padding: 2rem 1.5rem;
  color: #94a3b8;
  font-size: 0.9rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, #eef2f7 26px 27px);
  border-radius: 0 0 14px 14px;
}
.demo-page-body .demo-ph-line { height: 12px; border-radius: 6px; background: #e2e8f0; margin-bottom: 14px; }
.demo-page-body .w60 { width: 60%; }
.demo-page-body .w80 { width: 80%; }
.demo-page-body .w40 { width: 40%; }

/* Trigger-Umschalter */
.demo-controls {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0.75rem 0 0.25rem;
  font-size: 0.9rem;
}
.demo-controls a.demo-mode {
  padding: 5px 14px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--border); color: var(--ink); background: #fff;
}
.demo-controls a.demo-mode.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* JSON-Blöcke unter der Demo */
.demo-json details {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); margin-bottom: 0.75rem; overflow: hidden;
}
.demo-json summary {
  cursor: pointer; padding: 0.65rem 1rem; font-weight: 600; color: var(--accent);
}
.demo-json pre { margin: 0; border-radius: 0; }

/* ── Tester-Vorschau: Panel statisch einblenden ── */
.jt-preview-wrap { margin-top: 1rem; display: none; }
.jt-preview-wrap.visible { display: block; }
.jt-preview-wrap > p.jt-preview-title { font-weight: 600; margin: 0 0 0.5rem; }
.jt-preview {
  background: #f8fafc;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 1rem;
  overflow-x: auto;
}
.jt-preview .lmm-mega-panel {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: 900px;
  margin: 0 auto;
}