/* Shower Thoughts Custom Styles */

:root {
  --link-color: #3b82f6;
  --link-hover: #6366f1;
  --quote-gradient-start: #667eea;
  --quote-gradient-end: #764ba2;
}

/* Quote block styling - for shower thought display */
.block-content[data-block-type="quote"] {
  font-size: 1.5rem;
  text-align: center;
  font-style: italic;
  padding: 2rem;
  background: linear-gradient(135deg, var(--quote-gradient-start) 0%, var(--quote-gradient-end) 100%);
  color: white;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  margin: 2rem 0;
  line-height: 1.6;
}

/* Thought title styling */
h2:has(+ p) {
  color: #7c3aed;
  margin-top: 2rem;
}

/* Emoji headings for thought sections */
h2:first-child {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Category badges */
.category-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5rem;
}

.category-mind-blowing {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.category-existential {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  color: white;
}

.category-philosophical {
  background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
  color: white;
}

.category-funny {
  background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
  color: white;
}

.category-science {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  color: white;
}

/* Enhance readability for long content */
.article-content p {
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.article-content ul,
.article-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.article-content li {
  margin-bottom: 0.5rem;
}

/* Thought number styling */
.thought-number {
  font-family: 'Courier New', monospace;
  color: #a0aec0;
  font-size: 0.875rem;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .block-content[data-block-type="quote"] {
    font-size: 1.25rem;
    padding: 1.5rem;
  }

  h2:first-child {
    font-size: 1.75rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --link-color: #60a5fa;
    --link-hover: #818cf8;
  }

  h2:has(+ p) {
    color: #a78bfa;
  }
}