/* ═══════════════════════════════════════════════════════════
   萌宠百科 PetPedia - 自定义样式表
   修复：移除无效的 Tailwind @import（改用 HTML script 加载）
         v2.3 新增：暗色模式支持
   ═══════════════════════════════════════════════════════════ */

:root {
    --color-primary: #f59e0b;
    --color-primary-dark: #d97706;
}

.petpedia-body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.petpedia-ad-banner {
    display: inline-block;
    width: 728px;
    height: 90px;
}

.score-1 { width: 20%; }
.score-2 { width: 40%; }
.score-3 { width: 60%; }
.score-4 { width: 80%; }
.score-5 { width: 100%; }

/* ── 暗色模式支持（v2.3 新增）──────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0f172a;
        --color-surface: #1e293b;
        --color-text: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-border: #334155;
        --color-primary: #fbbf24;
        --color-primary-dark: #f59e0b;
    }

    body {
        background-color: var(--color-bg) !important;
        color: var(--color-text) !important;
    }

    /* 覆盖 Tailwind 的 bg-gray-50 */
    .bg-gray-50 {
        background-color: var(--color-bg) !important;
    }

    .bg-white {
        background-color: var(--color-surface) !important;
    }

    .bg-gray-100 {
        background-color: var(--color-border) !important;
    }

    .text-gray-900 {
        color: var(--color-text) !important;
    }

    .text-gray-800,
    .text-gray-700 {
        color: var(--color-text) !important;
    }

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

    .text-gray-500 {
        color: var(--color-text-secondary) !important;
    }

    .text-amber-800 {
        color: var(--color-primary) !important;
    }

    .border-gray-100 {
        border-color: var(--color-border) !important;
    }

    .border-gray-200 {
        border-color: var(--color-border) !important;
    }

    /* 知识文章正文 */
    .prose-gray {
        color: var(--color-text) !important;
    }

    .prose-gray h1,
    .prose-gray h2,
    .prose-gray h3,
    .prose-gray h4 {
        color: var(--color-text) !important;
    }

    .prose-gray p,
    .rich-content p {
        color: var(--color-text-secondary) !important;
    }

    .rich-content h1,
    .rich-content h2,
    .rich-content h3,
    .rich-content h4 {
        color: var(--color-text) !important;
    }

    /* 页脚 */
    footer.bg-gray-800 {
        background-color: #020617 !important;
    }

    /* 广告容器 */
    .ad-container {
        background-color: var(--color-surface) !important;
    }

    .ad-label,
    .ad-container .text-gray-400 {
        color: var(--color-text-secondary) !important;
    }

    input,
    select,
    textarea {
        background-color: var(--color-surface) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--color-text-secondary) !important;
    }

    /* 选中高亮 */
    ::selection {
        background-color: #78350f;
        color: #fef3c7;
    }

    /* 滚动条 */
    ::-webkit-scrollbar-thumb {
        background: #475569;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

    /* 打印样式保持浅色 */
    @media print {
        body {
            background: #fff !important;
            color: #000 !important;
        }
    }
}

/* ── [L2] 高对比度文本（WCAG AA 4.5:1）────────────── */
/* amber-500 (#f59e0b) 在白色背景上对比度约 2.9:1，不满足 AA */
/* 正文链接和按钮文字使用 amber-700 (#b45309) 或 amber-800 (#92400e) */
.text-wcag-amber { color: #b45309; }  /* amber-700, 对比度 4.6:1 */

/* ── 工具类 ──────────────────────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only:focus,
.sr-only.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ── 键盘焦点与点击目标 ──────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #b45309;
    outline-offset: 3px;
}

button,
[role="button"],
nav a {
    min-height: 24px;
}

/* ── 图片懒加载 ──────────────────────────────────── */
img[loading="lazy"] {
    transition: opacity 0.3s ease;
}

/* ── 广告容器 ──────────────────────────────────────── */
.ad-container {
    text-align: center;
    overflow: hidden;
    max-width: 100%;
}

.ad-container ins {
    display: inline-block !important;
}

.ad-label {
    letter-spacing: 0;
}

.knowledge-meta {
    min-width: 0;
}

.source-link,
.prose a {
    overflow-wrap: anywhere;
}

/* ── 滚动条 ──────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ── 选中高亮 ──────────────────────────────────────── */
::selection {
    background-color: #fef3c7;
    color: #92400e;
}

/* ── 对比表格赢家高亮 ──────────────────────────────── */
.compare-winner {
    background-color: #fffbeb;
}

/* ── 响应式 ──────────────────────────────────────── */
@media (max-width: 640px) {
    .ad-container ins {
        width: 100% !important;
        height: auto !important;
    }
}

/* ── 打印 ──────────────────────────────────────── */
@media print {
    header, footer, .ad-container, #lang-switcher, nav { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}

/* ── 动画 ──────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .animate-fade-in-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── 搜索框 ──────────────────────────────────────── */
#search-container input:focus {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

#search-results,
#search-results-mobile {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

/* ── 移动端菜单遮罩层 ──────────────────────────────── */
#mobile-overlay {
    transition: opacity 0.2s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── 暗色模式补充 ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* 搜索结果下拉 */
    #search-results,
    #search-results-mobile,
    #lang-menu {
        background-color: var(--color-surface) !important;
        border-color: var(--color-border) !important;
    }

    #search-results a:hover,
    #search-results-mobile a:hover {
        background-color: rgba(251, 191, 36, 0.1) !important;
    }

    #search-results .text-gray-800,
    #search-results-mobile .text-gray-800 {
        color: var(--color-text) !important;
    }

    #search-results .text-gray-500,
    #search-results-mobile .text-gray-500 {
        color: var(--color-text-secondary) !important;
    }

    /* 搜索输入框 */
    #search-input,
    #search-input-desktop,
    #search-input-mobile {
        background-color: var(--color-surface) !important;
        border-color: var(--color-border) !important;
        color: var(--color-text) !important;
    }

    #search-input::placeholder,
    #search-input-desktop::placeholder,
    #search-input-mobile::placeholder {
        color: #94a3b8 !important;
    }

    /* 卡片 hover 阴影 */
    .hover\:shadow-lg:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important;
    }

    /* 对比表格赢家高亮 */
    .compare-winner {
        background-color: rgba(251, 191, 36, 0.1) !important;
    }

    /* shadow-sm 和 shadow-lg 在暗色模式下加深 */
    .shadow-sm {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
    }

    /* amber 标签在暗色模式下 */
    .bg-amber-50 {
        background-color: rgba(251, 191, 36, 0.15) !important;
    }

    .text-amber-700 {
        color: #fbbf24 !important;
    }

    /* HOT 标签 */
    .bg-amber-500 {
        background-color: #d97706 !important;
    }

    /* 语言切换菜单 hover */
    #lang-menu a:hover {
        background-color: rgba(251, 191, 36, 0.1) !important;
    }

    /* 输入框 focus ring */
    #search-input:focus,
    #search-input-desktop:focus,
    #search-input-mobile:focus {
        box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3) !important;
    }
}