/*
 * 皓旭主题 - 自定义样式
 */

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #93c5fd;
  --primary-50: #eff6ff;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====== Typography (Prose) ====== */
.prose {
  color: #374151;
  max-width: none;
  font-size: 15px;
  line-height: 1.8;
}
.dark .prose {
  color: #d1d5db;
}
.prose p { margin: 1.2em 0; }
.prose h2 { font-size: 1.4em; font-weight: 700; margin: 1.8em 0 0.8em; color: #111827; }
.dark .prose h2 { color: #f3f4f6; }
.prose h3 { font-size: 1.15em; font-weight: 600; margin: 1.5em 0 0.6em; color: #1f2937; }
.dark .prose h3 { color: #e5e7eb; }
.prose ul, .prose ol { padding-left: 1.5em; margin: 1em 0; }
.prose li { margin: 0.4em 0; }
.prose a { color: #2563eb; text-decoration: none; font-weight: 500; }
.prose a:hover { text-decoration: underline; }
.dark .prose a { color: #93c5fd; }
.prose blockquote {
  border-left: 3px solid #2563eb;
  background: #eff6ff;
  padding: 0.8em 1.2em;
  margin: 1.4em 0;
  border-radius: 0 8px 8px 0;
  font-style: normal;
}
.dark .prose blockquote {
  background: rgba(37, 99, 235, 0.1);
  border-left-color: #3b82f6;
}
.prose img { border-radius: 12px; margin: 1.5em 0; }
.prose hr { margin: 2em 0; border-color: #e5e7eb; }
.dark .prose hr { border-color: #374151; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14px; }
.prose th { padding: 10px 14px; border-bottom: 2px solid #e5e7eb; font-weight: 600; text-align: left; background: #f9fafb; }
.dark .prose th { background: #1f2937; border-bottom-color: #374151; }
.prose td { padding: 9px 14px; border-bottom: 1px solid #e5e7eb; }
.dark .prose td { border-bottom-color: #374151; }
.prose pre { background: #111827; color: #e5e7eb; padding: 1em 1.25em; border-radius: 12px; overflow-x: auto; font-size: 13px; line-height: 1.6; margin: 1.5em 0; }
.prose code { font-size: 0.9em; font-weight: 500; padding: 0.15em 0.4em; border-radius: 4px; background: #f3f4f6; }
.dark .prose code { background: #374151; }
.prose pre code { background: none; padding: 0; border-radius: 0; font-weight: 400; }
.prose iframe { border-radius: 12px; }

/* ====== Widgets ====== */
.widget {
  @apply bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-100/80 dark:border-gray-800/80 p-5;
}
.widget-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dark .widget-title {
  border-color: #1f2937;
}
.widget-title::before {
  content: '';
  width: 3px;
  height: 16px;
  background: #2563eb;
  border-radius: 2px;
  display: block;
  flex-shrink: 0;
}

/* Tag Cloud */
.tagcloud a {
  display: inline-block;
  padding: 0.3em 0.8em;
  margin: 0.15em;
  font-size: 12px !important;
  background: #f3f4f6;
  color: #4b5563;
  border-radius: 6px;
  transition: all 0.2s;
}
.dark .tagcloud a {
  background: #374151;
  color: #d1d5db;
}
.tagcloud a:hover {
  background: #2563eb;
  color: #fff;
}
.dark .tagcloud a:hover {
  background: #3b82f6;
}

/* Recent Posts Widget */
.widget_recent_entries ul,
.widget_recent_comments ul,
.widget_archive ul,
.widget_categories ul,
.widget_meta ul,
.widget_pages ul {
  @apply space-y-2;
}
.widget_recent_entries li,
.widget_recent_comments li,
.widget_archive li,
.widget_categories li,
.widget_meta li,
.widget_pages li {
  @apply py-2 border-b border-gray-100 dark:border-gray-800 last:border-0 text-sm;
}
.widget_recent_entries a,
.widget_recent_comments a {
  @apply text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-medium;
}

/* ====== Masonry Grid ====== */
.masonry-grid {
  columns: 2;
  column-gap: 1.25rem;
}
@media (min-width: 1024px) {
  .masonry-grid {
    columns: 3;
  }
}
.masonry-grid > * {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

/* ====== Card Animations ====== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.post-card {
  animation: fadeInUp 0.4s ease-out both;
}
.post-card:nth-child(1) { animation-delay: 0.03s; }
.post-card:nth-child(2) { animation-delay: 0.06s; }
.post-card:nth-child(3) { animation-delay: 0.09s; }
.post-card:nth-child(4) { animation-delay: 0.12s; }
.post-card:nth-child(5) { animation-delay: 0.15s; }
.post-card:nth-child(6) { animation-delay: 0.18s; }
.post-card:nth-child(7) { animation-delay: 0.21s; }
.post-card:nth-child(8) { animation-delay: 0.24s; }

/* ====== Comment Form ====== */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  @apply w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl text-sm focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 outline-none transition-all;
}
.comment-form textarea { @apply min-h-[120px]; }
.comment-form .submit {
  @apply px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition-colors font-medium text-sm cursor-pointer border-0;
}

/* ====== Comments List ====== */
.comment-list { @apply space-y-4; }
.comment-body { @apply p-4 bg-gray-50 dark:bg-gray-800/50 rounded-xl; }
.comment-author .avatar { @apply rounded-full; }
.comment-author .fn { @apply text-sm font-semibold not-italic; }
.comment-metadata { @apply text-xs text-gray-400 mt-0.5; }
.comment-content { @apply text-sm text-gray-600 dark:text-gray-300 mt-2 leading-relaxed; }
.reply { @apply mt-2; }
.comment-reply-link { @apply text-xs text-blue-600 dark:text-blue-400 font-medium hover:underline; }

/* ====== Scrollbar ====== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

/* ====== Selection ====== */
::selection { background: #2563eb; color: white; }

/* ====== Skip Link ====== */
.skip-link { @apply sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded-xl; }

/* ====== WordPress Blocks ====== */
.wp-block-button__link {
  @apply inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors font-medium no-underline text-sm;
}
.wp-block-cover { @apply relative overflow-hidden rounded-2xl min-h-[300px]; }
.wp-block-cover__background { @apply absolute inset-0; }
.wp-block-cover__inner-container { @apply relative z-10; }

.aligncenter { @apply mx-auto; }
.alignleft { @apply float-left mr-4; }
.alignright { @apply float-right ml-4; }

.wp-block-table { @apply overflow-x-auto; }
.wp-block-gallery { @apply grid grid-cols-2 md:grid-cols-3 gap-4; }
.wp-block-gallery .blocks-gallery-item { @apply overflow-hidden rounded-xl; }
.wp-block-gallery .blocks-gallery-item img { @apply w-full h-full object-cover; }

/* ====== Tags ====== */
.tags-links a,
.tag-cloud-link,
a[rel="tag"] {
  display: inline-block;
  padding: 0.25em 0.7em;
  margin: 0.15em;
  font-size: 12px !important;
  background: #f3f4f6;
  color: #4b5563;
  border-radius: 6px;
  transition: all 0.2s;
  text-decoration: none;
}
.dark .tags-links a,
.dark .tag-cloud-link,
.dark a[rel="tag"] {
  background: #374151;
  color: #d1d5db;
}
.tags-links a:hover,
.tag-cloud-link:hover,
a[rel="tag"]:hover {
  background: #2563eb;
  color: #fff;
}
.dark .tags-links a:hover,
.dark .tag-cloud-link:hover,
.dark a[rel="tag"]:hover {
  background: #3b82f6;
}

/* ====== Print ====== */
@media print {
  .site-header, .site-footer, #secondary, #back-to-top { display: none !important; }
}

/* ====== Mobile Fixes ====== */
@media (max-width: 1023px) {
  #mobile-menu.open {
    display: block;
    animation: fadeInUp 0.25s ease-out;
  }
  #search-bar.open {
    display: block;
    animation: fadeInUp 0.2s ease-out;
  }
}