/* 
 * Lab Content Styles 
 * Brutalist formatting for standard Gutenberg blocks
 */

/* ─── HEADINGS ─── */
.lab-content h2,
.lab-content h3,
.lab-content h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lab-content h2::before {
  content: '# root@lab:~ ';
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--accent);
  opacity: 0.8;
  letter-spacing: 0;
}

.lab-content h3::before {
  content: '>';
  font-family: var(--font-mono);
  color: var(--accent-warm);
}

/* ─── TYPOGRAPHY & PARAGRAPHS ─── */
.lab-content p {
  margin-bottom: var(--space-md);
}

.lab-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}

.lab-content a:hover {
  border-color: var(--accent);
}

/* ─── BLOCKQUOTES (CALLOUTS) ─── */
.lab-content blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-surface-2);
  border-left: 4px solid var(--accent-warm);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.lab-content blockquote p:last-child {
  margin-bottom: 0;
}

/* ─── LISTS ─── */
.lab-content ul,
.lab-content ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xl);
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

.lab-content li {
  margin-bottom: var(--space-xs);
  position: relative;
}

.lab-content ul {
  list-style: none;
}

.lab-content ul li::before {
  content: '■';
  position: absolute;
  left: -1.2rem;
  color: var(--accent-dim);
  font-size: 0.8em;
  top: 0.2rem;
}

/* ─── INLINE CODE ─── */
.lab-content code:not([class*="language-"]):not(pre code) {
  background: var(--bg-surface-2);
  padding: 0.2em 0.4em;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent);
  border: 1px solid var(--bg-border-bright);
}

/* ─── DEFAULT PRE CODE BLOCKS ─── */
.lab-content pre.wp-block-code,
.lab-content pre:not([class*="cbp-"]) {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--bg-border-bright) !important;
  padding: var(--space-md) !important;
  font-family: var(--font-mono) !important;
  color: var(--text-secondary) !important;
  overflow-x: auto;
  margin: var(--space-md) 0;
}

/* ─── IMAGES ─── */
.lab-content img {
  max-width: 100%;
  height: auto;
  border: 1px dashed var(--bg-border-bright);
  opacity: 0.9;
  transition: opacity var(--transition-base);
  margin: var(--space-md) 0;
  display: block;
}

.lab-content img:hover {
  opacity: 1;
  border-color: var(--accent);
}

/* ─── LUCKYWP TABLE OF CONTENTS ─── */
.lab-content #lwptoc,
.lab-content .lwptoc,
.lab-content .lwptoc_i {
  margin: var(--space-xl) 0 !important;
  padding: var(--space-lg) !important;
  background: var(--bg-root) !important;
  background-color: var(--bg-root) !important;
  border: 1px solid var(--bg-border-bright) !important;
  font-family: var(--font-mono) !important;
  color: var(--text-primary) !important;
}

.lab-content .lwptoc_header {
  margin-bottom: var(--space-md) !important;
  color: var(--accent) !important;
  font-size: 1.1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lab-content .lwptoc_title {
  color: var(--accent) !important;
}

.lab-content .lwptoc_toggle a {
  color: var(--text-muted) !important;
}

/* Override plugin's default list styles */
.lab-content .lwptoc_itemWrap ul,
.lab-content .lwptoc_itemWrap ol {
  padding-left: 0 !important;
  list-style: none !important;
}

.lab-content .lwptoc_itemWrap ul li,
.lab-content .lwptoc_itemWrap ol li {
  padding-left: 1.5rem !important;
  position: relative;
}

.lab-content .lwptoc_itemWrap ul li::before,
.lab-content .lwptoc_itemWrap ol li::before {
  content: '├──' !important;
  position: absolute;
  left: 0;
  color: var(--text-muted);
  font-size: 1rem;
}

.lab-content .lwptoc_itemWrap ul li:last-child::before,
.lab-content .lwptoc_itemWrap ol li:last-child::before {
  content: '└──' !important;
}

.lab-content .lwptoc_itemWrap a {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s;
}

.lab-content .lwptoc_itemWrap a:hover {
  color: var(--accent) !important;
}

/* ─── CODE BLOCK PRO (VS Code Engine) ─── */
.lab-content .cbp-block {
  margin: var(--space-xl) 0 !important;
  border-radius: 0 !important;
  border: 1px solid var(--bg-border-bright) !important;
  box-shadow: none !important;
}

.lab-content .cbp-block pre {
  border-radius: 0 !important;
  background-color: var(--bg-surface) !important; /* Force match theme */
}

.lab-content .cbp-header {
  border-radius: 0 !important;
  background-color: var(--bg-surface-2) !important;
  border-bottom: 1px dashed var(--bg-border-bright) !important;
}

.lab-content .cbp-mac-dots {
  display: none !important; /* Remove Mac style dots for brutalist look */
}