/* Custom styles for Diary of Sankey - Notion-inspired Warm Design */

/* ===== NOTION-INSPIRED COLOR SYSTEM ===== */
:root {
  /* Warm color palette inspired by Notion's sophistication */
  --warm-bg-primary: #fefbf3;
  --warm-bg-secondary: #faf6eb;
  --warm-bg-tertiary: #f5f0e3;
  --warm-bg-code: #f9f5ed;
  --warm-bg-hover: #f3ede0;
  
  --warm-border-light: #e8dfc9;
  --warm-border-medium: #ddd1b8;
  --warm-border-accent: #d4915c;
  
  --warm-text-primary: #2d1b0f;
  --warm-text-secondary: #5c3f2a;
  --warm-text-muted: #8b6f47;
  --warm-text-accent: #d4915c;
  --warm-text-link: #c17d11;
  
  --warm-orange-50: #fff8f1;
  --warm-orange-100: #feecdc;
  --warm-orange-200: #fcd9bd;
  --warm-orange-500: #f97316;
  --warm-orange-600: #ea580c;
}

/* ===== OVERRIDE TAILWIND GREYS ===== */
.text-gray-500,
.blog-post .text-gray-500 {
  color: var(--warm-text-muted) !important;
}

.text-gray-600,
.blog-post .text-gray-600 {
  color: var(--warm-text-secondary) !important;
}

.text-gray-700,
.blog-post .text-gray-700 {
  color: var(--warm-text-primary) !important;
}

.bg-gray-100,
.blog-post .bg-gray-100 {
  background-color: var(--warm-bg-tertiary) !important;
}

.bg-gray-200,
.blog-post .bg-gray-200 {
  background-color: var(--warm-bg-secondary) !important;
}

.border-gray-200,
.blog-post .border-gray-200 {
  border-color: var(--warm-border-light) !important;
}

.border-gray-300,
.blog-post .border-gray-300 {
  border-color: var(--warm-border-medium) !important;
}

/* ===== SOPHISTICATED HOVER EFFECTS ===== */

.post-link:hover {
  background: linear-gradient(135deg, var(--warm-bg-hover), var(--warm-bg-tertiary)) !important;
  transition: all 0.15s ease-out;
  border-radius: 8px;
}

.tag {
  background: var(--warm-bg-code) !important;
  color: var(--warm-text-secondary) !important;
  border: 1px solid var(--warm-border-light) !important;
  transition: all 0.15s ease-out;
  border-radius: 6px;
}

.tag:hover {
  background: var(--warm-bg-hover) !important;
  border-color: var(--warm-border-medium) !important;
  transform: translateY(-1px);
}

nav a {
  transition: color 0.15s ease-out;
}

nav a:hover {
  color: var(--warm-text-accent) !important;
}

.category-button:hover {
  background: var(--warm-bg-hover) !important;
}

/* ===== NOTION-STYLE BLOG POST ELEMENTS ===== */

/* Table of Contents - Notion style */
.blog-post nav[class*="bg-white"] {
  background: var(--warm-bg-code) !important;
  border: 1px solid var(--warm-border-light) !important;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(212, 145, 92, 0.1);
}

/* Callout boxes - Notion style */
.prose div[class*="bg-orange-200"] {
  background: linear-gradient(135deg, var(--warm-orange-50), var(--warm-orange-100)) !important;
  border: 1px solid var(--warm-border-accent) !important;
  border-radius: 8px;
  border-left: 4px solid var(--warm-orange-500) !important;
}

/* Inline code - Notion style */
.prose code:not(pre code),
.blog-post code:not(pre code) {
  background: var(--warm-bg-code) !important;
  color: var(--warm-text-primary) !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--warm-border-light) !important;
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important;
  font-size: 0.875rem !important;
  font-weight: 500;
}

/* Code blocks - Notion style */
.prose pre,
.blog-post pre {
  position: relative;
  background: var(--warm-bg-code) !important;
  border: 1px solid var(--warm-border-light) !important;
  padding: 16px !important;
  border-radius: 8px !important;
  overflow-x: auto;
  margin: 16px 0;
  box-shadow: 0 1px 3px rgba(212, 145, 92, 0.1);
}

.prose pre code,
.blog-post pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--warm-text-primary) !important;
  font-weight: 400;
}

/* Notion-style copy button */
.copy-button {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--warm-text-accent);
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.15s ease-out;
  box-shadow: 0 1px 3px rgba(212, 145, 92, 0.3);
}

.copy-button:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(212, 145, 92, 0.4);
}

.copy-button.copied {
  background: #16a34a;
}

/* Post navigation - Notion style */
.blog-post a[class*="hover:bg-orange-50"]:hover {
  background: var(--warm-bg-hover) !important;
  border-radius: 8px;
}

/* Author bio section - Notion style */
.blog-post div[class*="bg-white"]:has(h4) {
  background: var(--warm-bg-secondary) !important;
  border: 1px solid var(--warm-border-light) !important;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(212, 145, 92, 0.1);
}

/* ===== NOTION-STYLE TYPOGRAPHY ===== */

.blog-post h1 {
  color: var(--warm-text-primary) !important;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.blog-post h2,
.blog-post h3,
.blog-post h4 {
  color: var(--warm-text-primary) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.blog-post a:not([class*="bg-"]):not([class*="border-"]) {
  color: var(--warm-text-link) !important;
  transition: color 0.15s ease-out;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.blog-post a:not([class*="bg-"]):not([class*="border-"]):hover {
  color: var(--warm-orange-600) !important;
  border-bottom-color: var(--warm-border-accent);
}

/* Notion-style blockquotes */
.prose blockquote,
.blog-post blockquote {
  border-left: 4px solid var(--warm-border-accent) !important;
  background: var(--warm-bg-secondary) !important;
  color: var(--warm-text-secondary) !important;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 3px rgba(212, 145, 92, 0.1);
  margin: 16px 0;
  padding: 16px 20px;
}

/* Notion-style tables */
.prose table,
.blog-post table {
  background: var(--warm-bg-primary) !important;
  border: 1px solid var(--warm-border-light) !important;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(212, 145, 92, 0.1);
  overflow: hidden;
}

.prose th,
.blog-post th {
  background: var(--warm-bg-tertiary) !important;
  color: var(--warm-text-primary) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--warm-border-medium) !important;
}

.prose td,
.blog-post td {
  border-bottom: 1px solid var(--warm-border-light) !important;
  color: var(--warm-text-secondary);
}

/* ===== NOTION-STYLE PROSE IMPROVEMENTS ===== */

.prose,
.blog-post {
  color: var(--warm-text-secondary);
  line-height: 1.6;
}

.prose p,
.blog-post p {
  margin: 16px 0;
}

.prose ul,
.prose ol,
.blog-post ul,
.blog-post ol {
  margin: 16px 0;
  padding-left: 24px;
}

.prose li,
.blog-post li {
  margin: 8px 0;
  color: var(--warm-text-secondary);
}

/* Enhanced spacing and rhythm */
.prose > * + *,
.blog-post > * + * {
  margin-top: 1.25rem;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + *,
.blog-post h2 + *,
.blog-post h3 + *,
.blog-post h4 + * {
  margin-top: 0.75rem;
}

/* ===== BLOG LIST STYLING ===== */

/* Blog card container with Notion-style hover */
.blog-card {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.15s ease-out;
  margin: 0 -16px; /* Negative margin to allow hover expansion */
}

.blog-card:hover {
  background: var(--warm-bg-secondary);
  border-color: var(--warm-border-light);
  box-shadow: 0 1px 3px rgba(212, 145, 92, 0.1);
  transform: translateY(-1px);
}

/* Category badge styling */
.category-badge {
  background: var(--warm-bg-code);
  color: var(--warm-text-secondary);
  border: 1px solid var(--warm-border-light);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
}

/* Post tags styling */
.post-tag {
  background: var(--warm-bg-tertiary);
  color: var(--warm-text-muted);
  border: 1px solid var(--warm-border-light);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 400;
  transition: all 0.15s ease-out;
}

.post-tag:hover {
  background: var(--warm-bg-hover);
  color: var(--warm-text-secondary);
  border-color: var(--warm-border-medium);
}

/* Improve existing tag styling for consistency */
.tag {
  background: var(--warm-bg-tertiary) !important;
  color: var(--warm-text-secondary) !important;
  border: 1px solid var(--warm-border-light) !important;
  transition: all 0.15s ease-out;
  border-radius: 6px;
  font-weight: 500;
}

.tag:hover {
  background: var(--warm-bg-hover) !important;
  border-color: var(--warm-border-medium) !important;
  transform: translateY(-1px);
}

/* Category button improvements */
.category-button {
  background: var(--warm-bg-code) !important;
  color: var(--warm-text-secondary) !important;
  border: 1px solid var(--warm-border-light) !important;
  transition: all 0.15s ease-out;
  border-radius: 6px;
  font-weight: 500;
}

.category-button:hover {
  background: var(--warm-bg-hover) !important;
  color: var(--warm-text-primary) !important;
  border-color: var(--warm-border-medium) !important;
  transform: translateY(-1px);
}

/* Update post-link hover for legacy support */
.post-link:hover {
  background: var(--warm-bg-secondary) !important;
  transition: all 0.15s ease-out;
  border-radius: 8px;
  transform: translateY(-1px);
}