/* ==========================================================================
   ZFRQBL — Global Styles & Pico CSS Overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography & System Variables
   -------------------------------------------------------------------------- */
:root {
  --pico-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-serif: "Newsreader", "Georgia", Cambria, serif;
  --pico-font-family-monospace: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  --pico-font-family: var(--pico-font-family-sans);
  --pico-line-height: 1.65;
  --pico-font-size: 100%;
}

/* Optional serif styling for long-form essays */
article.essay-content {
  font-family: var(--pico-font-family-serif);
  font-size: 1.125rem;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   2. Theme Color Palettes
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --pico-primary: #2563eb;
  --pico-primary-background: #2563eb;
  --pico-primary-underline: rgba(37, 99, 235, 0.5);
  --pico-background-color: #fcfcfc;
  --pico-color: #1c1d22;
  --pico-muted-color: #64748b;
  --pico-muted-border-color: #e2e8f0;
}

[data-theme="dark"] {
  --pico-primary: #3b82f6;
  --pico-primary-background: #3b82f6;
  --pico-primary-underline: rgba(59, 130, 246, 0.5);
  --pico-background-color: #090d16;
  --pico-color: #f1f5f9;
  --pico-muted-color: #94a3b8;
  --pico-muted-border-color: #1e293b;
}

/* --------------------------------------------------------------------------
   3. Feed Items & Badges
   -------------------------------------------------------------------------- */
.feed-item {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px dashed var(--pico-muted-border-color);
  transition: opacity 0.2s ease;
}

.meta-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.badge-essay {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.badge-note {
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
}

/* Filter buttons formatting */
.filter-btn {
  padding: 0.2rem 0.65rem !important;
  font-size: 0.8rem !important;
  width: auto !important;
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   4. Code Containers & Copy Button
   -------------------------------------------------------------------------- */
.code-container {
  position: relative;
  margin-bottom: 1.5rem;
  border-radius: 6px;
  overflow: hidden;
}

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10;
}

.copy-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

pre[class*="language-"] {
  border-radius: 6px !important;
  margin-bottom: 0 !important;
  font-size: 0.875rem !important;
}

/* --------------------------------------------------------------------------
   5. Clean Print / Save-to-PDF Styles
   -------------------------------------------------------------------------- */
@media print {
  header, footer, .copy-btn, #theme-toggle, .filter-container {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt;
  }
  a {
    text-decoration: underline;
    color: #000000 !important;
  }
  pre, code {
    border: 1px solid #ccc;
    white-space: pre-wrap !important;
  }
}