/**
 * 语文考点 - 通用样式
 * 包含：打印优化、焦点管理、无障碍访问等
 */

/* ==================== 焦点管理 ==================== */

/* 增强焦点样式 - 仅键盘导航时显示 */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 按钮和链接的焦点样式 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* 输入框焦点样式 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 0;
  border-color: #3b82f6;
}

/* ==================== 无障碍访问 ==================== */

/* 屏幕阅读器专用类 */
.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 {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: #3b82f6;
  color: white;
  z-index: 9999;
}

/* 跳过导航链接 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 100;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* ==================== 打印优化 ==================== */

@media print {
  /* 隐藏不需要打印的元素 */
  header,
  nav,
  footer,
  button,
  .no-print,
  #backToTop,
  #shareButtons,
  #mobileMenu,
  #mobileMenuBtn,
  .sticky,
  [role="navigation"],
  [aria-label="返回顶部"],
  [aria-label="分享"] {
    display: none !important;
  }

  /* 重置页面样式 */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.6;
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
  }

  /* 优化内容显示 */
  main,
  article,
  section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* 标题样式 */
  h1 {
    font-size: 24pt;
    margin-bottom: 12pt;
    page-break-after: avoid;
  }

  h2 {
    font-size: 18pt;
    margin-top: 12pt;
    margin-bottom: 8pt;
    page-break-after: avoid;
  }

  h3 {
    font-size: 14pt;
    margin-top: 10pt;
    margin-bottom: 6pt;
    page-break-after: avoid;
  }

  /* 段落样式 */
  p {
    margin-bottom: 8pt;
    orphans: 3;
    widows: 3;
  }

  /* 避免分页断行 */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  img {
    page-break-inside: avoid;
    max-width: 100% !important;
  }

  blockquote,
  pre,
  table {
    page-break-inside: avoid;
  }

  /* 链接样式 */
  a {
    text-decoration: underline;
    color: #000 !important;
  }

  /* 显示链接URL */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }

  /* 不显示内部链接的URL */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  /* 表格样式 */
  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 12pt;
  }

  th, td {
    border: 1px solid #000;
    padding: 4pt 8pt;
    text-align: left;
  }

  th {
    background-color: #f0f0f0 !important;
    font-weight: bold;
  }

  /* 代码块样式 */
  pre, code {
    border: 1px solid #000;
    padding: 4pt;
    font-family: monospace;
    font-size: 10pt;
    white-space: pre-wrap;
  }

  /* 页面边距 */
  @page {
    margin: 2cm;
  }

  /* 页眉页脚 */
  @page :first {
    margin-top: 3cm;
  }

  /* 打印时显示的元素 */
  .print-only {
    display: block !important;
  }

  /* 诗文内容优化 */
  .poem-content,
  .article-content {
    font-size: 12pt;
    line-height: 1.8;
  }

  /* 注释和译文 */
  .annotation,
  .translation {
    font-size: 10pt;
    margin-top: 8pt;
    padding-left: 12pt;
    border-left: 2px solid #000;
  }
}

/* ==================== 响应式辅助类 ==================== */

/* 移动端隐藏 */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* 桌面端隐藏 */
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

/* ==================== 动画效果 ==================== */

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* 滑入动画 */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

/* ==================== 懒加载图片 ==================== */

img.lazy {
  opacity: 0;
  transition: opacity 0.3s;
}

img.lazy.loaded {
  opacity: 1;
}

/* 加载占位符 */
img[data-src] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ==================== 高对比度模式支持 ==================== */

@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }

  a {
    text-decoration: underline;
  }

  button {
    border: 2px solid currentColor;
  }
}

/* ==================== 减少动画模式 ==================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== 暗色模式支持（预留） ==================== */

@media (prefers-color-scheme: dark) {
  /* 暗色模式样式可以在这里添加 */
  /* 目前网站使用浅色主题，暗色模式可以后续添加 */
}

/* ==================== 工具类 ==================== */

/* 文本截断 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行截断 */
.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;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==================== 可访问性增强 ==================== */

/* 确保最小触摸目标大小（44x44px） */
@media (pointer: coarse) {
  button,
  a,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* 提高文本可读性 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 选中文本样式 */
::selection {
  background-color: #3b82f6;
  color: white;
}

::-moz-selection {
  background-color: #3b82f6;
  color: white;
}