/**
 * ============================================================
 *   哎呀好网 — 共享基础样式
 *   供 index.html / 404.html 及未来所有页面统一引用
 *   需配合 Tailwind CDN 使用（此文件提供 Tailwind CDN 不包含的定制样式）
 * ============================================================
 */

/* ========================
   1. CSS 变量
   ======================== */
:root {
  --orange-100: #ffedd5;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --white:    #ffffff;
  --page-bg-mobile: #ededed;
  --header-bg: #e8f0fe;
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* ========================
   2. 全局重置与基础
   与主站 qfgj.html Tailwind CSS 4 的 @layer base 重置保持一致
   ======================== */
*, :before, :after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* antialiased 由 body class 统一控制，与主站 www.aiyahao.wang 保持一致 */
}
img, svg { vertical-align: middle; display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: inherit; }
h1, h2 { font-size: inherit; font-weight: inherit; }
button { font: inherit; color: inherit; appearance: button; }

/* ========================
   3. 侧边栏样式（aside nav）
   防止 visited 变紫色、hover 态等
   ======================== */
aside nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: background-color 0.15s, color 0.15s;
}
aside nav a,
aside nav a:visited,
aside nav a:link {
  color: #4b5563;
}
aside nav a:hover {
  background-color: #f3f4f6;
}
/* 选中态子链接 */
aside nav a.bg-orange-100,
aside nav a.bg-orange-100:visited {
  color: #c2410c !important;
}
/* summary 默认文字颜色 */
aside nav summary {
  color: #4b5563;
}
aside nav summary:hover {
  color: #1f2937;
}

/* ========================
   4. 响应式断点工具类
   （Tailwind CDN 不生成的 lg: 组合）
   ======================== */
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
  .hidden.lg\:block { display: block !important; }
  .hidden.lg\:flex { display: flex !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ========================
   5. details/summary 折叠箭头
   ======================== */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
.group[open] > summary > .chevron {
  transform: rotate(180deg);
}

/* ========================
   6. 移动端脚底导航 & 安全区
   ======================== */
@media (max-width: 1023px) {
  body { padding-bottom: 56px; }
}
.safe-area-pb {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ========================
   7. Footer 链接
   ======================== */
footer a {
  color: #9ca3af;
  font-size: 0.875rem;
  transition: color 0.15s;
}
footer a:hover {
  color: #ea580c;
}

/* ========================
   8. 渐变文字工具
   ======================== */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}
.text-transparent { color: transparent; }

/* ========================
   9. 动画
   ======================== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.6s ease forwards; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* ========================
   10. 自定义滚动条
   ======================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

/* ========================
   11. 选中文字颜色
   ======================== */
::selection {
  background-color: var(--orange-500);
  color: white;
}