/* Serranova - Unique Magazine Style - Purple Lavender Theme */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap');

:root {
  --brand-purple: #5E2B8C;
  --brand-lavender: #EDE4F5;
  --brand-dark: #2C1E4A;
  --brand-text: #3D2F5C;
  --brand-bg: #FDF8F5;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--brand-dark);
  background-color: var(--brand-bg);
}

.heading-serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.05;
}

/* Magazine style cards */
.magazine-card {
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  border: 1px solid #EDE4F5;
}

.magazine-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  border-color: #C9A7EB;
}

.article-full {
  scroll-margin-top: 120px;
}

/* Sidebar */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: #EDE4F5 #fff;
}

/* Hero decorative */
.hero-accent {
  background: linear-gradient(135deg, #5E2B8C 0%, #7B4D9E 100%);
}

/* Custom form styles */
.form-input {
  transition: all 0.2s ease;
}

.form-input:focus {
  border-color: #5E2B8C;
  box-shadow: 0 0 0 3px rgba(94, 43, 140, 0.1);
  outline: none;
}

/* Category pills */
.category-pill {
  font-size: 12px;
  padding: 2px 14px;
  border-radius: 9999px;
  background: #F7F3FA;
  color: #5E2B8C;
  font-weight: 500;
  transition: all .2s ease;
}

.category-pill:hover {
  background: #EDE4F5;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .magazine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .magazine-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-content {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Subtle shadows for depth */
.soft-shadow {
  box-shadow: 0 10px 15px -3px rgb(94 43 140 / 0.05), 0 4px 6px -4px rgb(94 43 140 / 0.05);
}

/* Article typography */
.article-body p {
  margin-bottom: 1.25rem;
  line-height: 1.8;
}

.article-body h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #2C1E4A;
}