/* Custom CSS for Chirpy Theme Color Variations */

/* 記事ページ本文 */
div.post-content {
  background: #f8fafc !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  margin-bottom: 2rem !important;
}

/* トップページの記事カード */
div.post-preview {
  background: #f8fafc !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.05) !important;
}

/* Post content subtle background */
.post-content {
  background: #f8fafc !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  margin-bottom: 2rem !important;
}

/* Category-specific colors */
.post-meta .categories a[href*="dev"] {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #1d4ed8 !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}

.post-meta .categories a[href*="blog"] {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #047857 !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}

/* Tag color variations using nth-child */
.post-tag:nth-child(2n) {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #1e3a8a !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

.post-tag:nth-child(3n) {
  background: rgba(139, 92, 246, 0.12) !important;
  color: #5b21b6 !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
}

.post-tag:nth-child(4n) {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #92400e !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

.post-tag:nth-child(5n) {
  background: rgba(236, 72, 153, 0.12) !important;
  color: #be185d !important;
  border-color: rgba(236, 72, 153, 0.2) !important;
}

/* Tag hover effects */
.post-tag:hover {
  opacity: 0.8 !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* Code block enhancements */
.highlight,
figure.highlight,
div[class^="language-"] {
  background: rgba(14, 165, 163, 0.05) !important;
  border: 1px solid rgba(14, 165, 163, 0.1) !important;
  border-radius: 8px !important;
}

/* Archive and category pages */
#page-category,
#page-tag,
#archives {
  background: #f8fafc !important;
  padding: 2rem !important;
  border-radius: 16px !important;
  border: 1px solid rgba(14, 165, 163, 0.1) !important;
}

/* Enhanced sidebar */
#sidebar {
  background: linear-gradient(135deg, rgba(14, 165, 163, 0.03), rgba(14, 165, 163, 0.01)) !important;
}

/* Breadcrumb styling */
#breadcrumb {
  background: rgba(14, 165, 163, 0.02) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 8px !important;
  margin-bottom: 1rem !important;
}

/* Post list cards */
.card {
  border: 1px solid rgba(14, 165, 163, 0.1) !important;
  transition: all 0.3s ease !important;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(14, 165, 163, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Subtle section dividers */
.post-tail-wrapper {
  border-top: 2px solid rgba(14, 165, 163, 0.1) !important;
  padding-top: 2rem !important;
  margin-top: 3rem !important;
}

/* Dark mode adjustments */
[data-mode="dark"] .post-content {
  background: #2a2a2a !important;
}

[data-mode="dark"] #sidebar {
  background: linear-gradient(135deg, rgba(14, 165, 163, 0.08), rgba(14, 165, 163, 0.02)) !important;
}

[data-mode="dark"] #page-category,
[data-mode="dark"] #page-tag,
[data-mode="dark"] #archives {
  background: #2a2a2a !important;
  border-color: rgba(14, 165, 163, 0.2) !important;
}

[data-mode="dark"] #breadcrumb {
  background: rgba(14, 165, 163, 0.08) !important;
}

[data-mode="dark"] .highlight,
[data-mode="dark"] figure.highlight,
[data-mode="dark"] div[class^="language-"] {
  background: rgba(14, 165, 163, 0.12) !important;
  border-color: rgba(14, 165, 163, 0.2) !important;
}

/* Category and tag links in dark mode */
[data-mode="dark"] .post-meta .categories a[href*="dev"] {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
}

[data-mode="dark"] .post-meta .categories a[href*="blog"] {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
}

/* Dark mode tag colors */
[data-mode="dark"] .post-tag:nth-child(2n) {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-mode="dark"] .post-tag:nth-child(3n) {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #c4b5fd !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-mode="dark"] .post-tag:nth-child(4n) {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-mode="dark"] .post-tag:nth-child(5n) {
  background: rgba(236, 72, 153, 0.2) !important;
  color: #f472b6 !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
}

/* (removed) Site-wide header background image */

/* ========== Post cover wrappers: keep header area compact ========== */
.post-cover {
  max-height: 300px;
  overflow: hidden;
  position: relative;
}

.post-cover img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 576px) {
  .post-cover { max-height: 220px; }
  .post-cover img { height: 220px; }
}