/* ============================================
   西安职教老赵 - 详情页样式
   基于 Bootstrap 5 扩展
   ============================================ */

/* CSS 变量 - 主题色 */
:root {
  --primary-blue: #2563eb;
  --primary-blue-dark: #1d4ed8;
  --primary-blue-darker: #1e40af;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
}

/* 基础样式 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  background-color: var(--slate-50);
  min-height: 100vh;
}

/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--slate-100); }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* 文本截断工具类 */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* --- 扩展 Bootstrap 样式：让卡片更好看 --- */


/* ============================================
   顶部 Header
   ============================================ */
.top-header {
  background: white;
  border-bottom: 1px solid var(--slate-200);
}

.brand-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-blue);
  text-decoration: none;
}

.brand-logo:hover {
  color: var(--primary-blue-dark);
}

.search-input {
  border-radius: 0.375rem 0 0 0.375rem;
  border-right: none;
}

.search-input:focus {
  border-color: var(--primary-blue);
  box-shadow: none;
}

.search-btn {
  border-radius: 0 0.375rem 0.375rem 0;
}

/* ============================================
   主导航
   ============================================ */
.main-nav {
  background-color: var(--primary-blue);
}

.main-nav .nav-link {
  color: rgba(255,255,255,0.9);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: all 0.15s;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: white;
  background-color: var(--primary-blue-darker);
}

/* ============================================
   面包屑导航
   ============================================ */
.breadcrumb-section {
  background: white;
  border-bottom: 1px solid var(--slate-200);
  padding: 0.75rem 0;
}

.breadcrumb-item a {
  color: var(--slate-500);
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb-item a:hover {
  color: var(--primary-blue);
}

/* ============================================
   文章卡片
   ============================================ */
.article-card {
  background: white;
  border-radius: 0.5rem;
  border: 1px solid var(--slate-200);
  overflow: hidden;
}

.article-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--slate-100);
}

.article-tag {
  font-size: 0.625rem;
  padding: 0.25rem 0.5rem;
  background-color: #dbeafe;
  color: #1d4ed8;
  border-radius: 0.25rem;
}

.article-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--slate-900);
}

@media (min-width: 768px) {
  .article-title {
    font-size: 1.875rem;
  }
}

/* ============================================
   文章内容
   ============================================ */
.article-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--slate-800);
}

.article-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--slate-700);
}

.article-content p {
  margin-bottom: 1rem;
  line-height: 1.8;
  color: var(--slate-600);
}

.article-content ul,
.article-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.article-content li {
  margin-bottom: 0.5rem;
  color: var(--slate-600);
}

.article-content a {
  color: var(--primary-blue);
  text-decoration: underline;
}

.article-content a:hover {
  color: var(--primary-blue-dark);
}

.article-content blockquote {
  border-left: 4px solid var(--slate-200);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--slate-500);
  font-style: italic;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.article-content th,
.article-content td {
  border: 1px solid var(--slate-200);
  padding: 0.75rem;
  text-align: left;
}

.article-content th {
  background-color: var(--slate-50);
  font-weight: 600;
}

/* ============================================
   文章底部
   ============================================ */
.article-footer {
  padding: 1rem 1.5rem;
  background-color: var(--slate-50);
  border-top: 1px solid var(--slate-100);
}

.tag-link {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: white;
  border: 1px solid var(--slate-200);
  color: var(--slate-600);
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.15s;
}

.tag-link:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* ============================================
   侧边栏卡片
   ============================================ */
.sidebar-card {
  background: white;
  border-radius: 0.5rem;
  border: 1px solid var(--slate-200);
  overflow: hidden;
}

.sidebar-card-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-800);
}

.sidebar-card-header i {
  margin-right: 0.5rem;
}

/* ============================================
   快速咨询卡片
   ============================================ */
.consult-card {
  background: linear-gradient(to bottom right, var(--primary-blue), var(--primary-blue-darker));
  border-radius: 0.5rem;
  padding: 1rem;
  color: white;
}

.consult-card .phone-number {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* ============================================
   热门文章列表
   ============================================ */
.hot-item {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem;
  transition: background-color 0.15s;
}

.hot-item:hover {
  background-color: var(--slate-50);
}

.hot-item .rank {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
}

.hot-item .rank.top {
  background-color: #f97316;
  color: white;
}

.hot-item .rank.normal {
  background-color: var(--slate-200);
  color: var(--slate-600);
}

.hot-item .title {
  flex: 1;
  font-size: 0.875rem;
  color: var(--slate-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}

.hot-item:hover .title {
  color: var(--primary-blue);
}

/* ============================================
   推荐院校
   ============================================ */
.school-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  transition: background-color 0.15s;
}

.school-item:hover {
  background-color: var(--slate-50);
}

.school-item .thumb {
  width: 4rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  overflow: hidden;
}

.school-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-item .info h4 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-900);
  margin-bottom: 0.25rem;
  transition: color 0.15s;
}

.school-item:hover .info h4 {
  color: var(--primary-blue);
}

.school-item .info p {
  font-size: 0.75rem;
  color: var(--slate-500);
  margin: 0;
}

/* ============================================
   标签云
   ============================================ */
.tag-cloud .tag-item {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--slate-100);
  color: var(--slate-700);
  border-radius: 0.25rem;
  text-decoration: none;
  transition: all 0.15s;
}

.tag-cloud .tag-item:hover {
  background-color: var(--primary-blue);
  color: white;
}

.tag-cloud .tag-item.active {
  background-color: #dbeafe;
  color: #1d4ed8;
}

/* ============================================
   上一篇/下一篇导航
   ============================================ */
.nav-article {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  border: 1px solid var(--slate-200);
  text-decoration: none;
  transition: border-color 0.15s;
}

.nav-article:hover {
  border-color: #93c5fd;
}

.nav-article .label {
  font-size: 0.75rem;
  color: var(--slate-400);
}

.nav-article .title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-900);
  margin-top: 0.25rem;
}

/* ============================================
   相关文章
   ============================================ */
.related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  transition: background-color 0.15s;
}

.related-item:hover {
  background-color: var(--slate-50);
}

.related-item .title {
  font-size: 0.875rem;
  color: var(--slate-700);
  transition: color 0.15s;
}

.related-item:hover .title {
  color: var(--primary-blue);
}

.related-item .date {
  font-size: 0.75rem;
  color: var(--slate-400);
}

/* ============================================
   友情链接
   ============================================ */
.friend-links {
  padding: 1rem 0;
  background-color: var(--slate-50);
  border-top: 1px solid var(--slate-200);
}

.friend-links a {
  font-size: 0.75rem;
  color: var(--slate-500);
  text-decoration: none;
  transition: color 0.15s;
}

.friend-links a:hover {
  color: var(--primary-blue);
}

/* ============================================
   页脚
   ============================================ */
.site-footer {
  background-color: var(--slate-800);
  color: var(--slate-300);
  padding: 2rem 0;
}

.site-footer h4 {
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  margin-bottom: 0.75rem;
}

/* 手机端底部标题字号 */
@media (max-width: 991.98px) {
  .site-footer h4 {
    font-size: 0.75rem;
  }
  
  .site-footer a {
    font-size: 0.6875rem;
  }
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  margin-bottom: 0.5rem;
}

.site-footer a {
  font-size: 0.75rem;
  color: var(--slate-400);
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer a:hover {
  color: white;
}

.footer-brand {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.footer-desc {
  font-size: 0.75rem;
  color: var(--slate-400);
  line-height: 1.6;
}

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--slate-700);
  text-align: center;
}

.footer-bottom p {
  font-size: 0.75rem;
  color: var(--slate-500);
  margin: 0;
}

/* ============================================
   工具类
   ============================================ */
.sticky-sidebar {
  position: sticky;
  top: 1rem;
}

.divider {
  border-top: 1px solid var(--slate-100);
}

/* ============================================
   手机端导航
   ============================================ */
.mobile-nav {
  background-color: white;
  border-bottom: 1px solid var(--slate-200);
}

.mobile-nav .container {
  display: flex;
  flex-direction: column;
}

.mobile-nav-link {
  display: block;
  padding: 0.875rem 0.5rem;
  color: var(--slate-700);
  text-decoration: none;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--slate-100);
  transition: all 0.15s;
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-link:hover {
  color: var(--primary-blue);
  background-color: var(--slate-50);
  padding-left: 0.75rem;
}

.mobile-nav-link.active {
  color: var(--primary-blue);
  font-weight: 500;
  background-color: #eff6ff;
  border-left: 3px solid var(--primary-blue);
  padding-left: 0.75rem;
}

/* 手机端导航展开动画 */
.mobile-nav .collapse {
  transition: height 0.35s ease;
}

/* 手机端导航链接图标效果 */
.mobile-nav-link::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--slate-300);
  margin-right: 0.75rem;
  transition: all 0.15s;
}

.mobile-nav-link:hover::before,
.mobile-nav-link.active::before {
  background-color: var(--primary-blue);
  transform: scale(1.2);
}

/* 汉堡菜单按钮激活状态 */
.mobile-menu-btn[aria-expanded="true"] i::before {
  content: "\F62A"; /* Bootstrap Icons 的 X 图标 */
}

/* --- 西安老赵升学网 - 文章排版全局样式 --- */
/* =========================================
   文章通用排版样式系统 (By 智谱清言)
   ========================================= */

/* 1. 根容器 */
.article-container {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    max-width: 100%;
    padding: 15px;
    background-color: #fff;
    word-wrap: break-word; /* 防止长单词撑破容器 */
}

/* 2. 标题系统 */
.art-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #000;
    margin-top: 0;
    margin-bottom: 10px;
}

.art-subtitle {
    text-align: center;
    color: #d35400;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
}

/* H2 章节标题 - 默认黑色边框 */
.art-h2 {
    font-size: 15px;
    font-weight: bold;
    padding-left: 8px;
    margin-top: 25px;
    margin-bottom: 15px;
    border-left: 3px solid #333;
}
/* H2 颜色变体 */
.art-h2.is-blue { color: #2980b9; border-left-color: #2980b9; }
.art-h2.is-red { color: #c0392b; border-left-color: #c0392b; }
.art-h2.is-purple { color: #8e44ad; border-left-color: #8e44ad; }

/* H3 子标题 - 默认黑色 */
.art-h3 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
}
/* H3 颜色变体 */
.art-h3.is-blue { color: #2980b9; }
.art-h3.is-red { color: #c0392b; }
.art-h3.is-purple { color: #8e44ad; }

/* 3. 文本段落 */
.art-p {
    margin-bottom: 15px;
    text-align: justify;
}

/* 重点句子高亮 */
.art-highlight {
    background-color: #fffbe6;
    padding: 2px 4px;
    border-radius: 2px;
}

/* 引用块 (适合金句) */
.art-quote {
    border-left: 4px solid #d35400;
    padding: 10px 15px;
    margin: 20px 0;
    background-color: #fdf2e9;
    color: #555;
    font-style: italic;
}

/* 4. 案例卡片系统 (核心通用组件) */
.art-card {
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 15px;
    border: 1px dashed transparent; /* 默认透明边框，由子类控制颜色 */
}
.art-card p { margin: 0; line-height: 1.7; }
.art-card-title { font-weight: bold; margin-bottom: 8px !important; display: block; }
.art-card-text { margin-top: 8px !important; }

/* 卡片颜色皮肤 */
/* 红色皮肤 (适合警示、痛点) */
.skin-red { background-color: #fff0f0; border-color: #e6b0af; color: #641e16; }
/* 绿色皮肤 (适合成功案例、正向建议) */
.skin-green { background-color: #e8f6f3; border-color: #a3e4d7; color: #0e6655; }
/* 紫色皮肤 (适合心理、规划、总结) */
.skin-purple { background-color: #f4ecf7; border-color: #d2b4de; color: #4a235a; }
/* 蓝色皮肤 (适合干货、方法) */
.skin-blue { background-color: #e8f4f8; border-color: #aed6f1; color: #154360; }

/* 5. 列表样式 */
.art-list {
    margin-bottom: 15px;
    padding-left: 5px;
    list-style: none;
}
.art-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}
.art-list li::before {
    content: "•";
    color: #d35400;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* 6. 表格样式 */
.art-table-box {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
    border: 1px solid #eee;
}
.art-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background-color: #fff;
}
.art-table th, .art-table td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}
.art-table th {
    background-color: #fafafa;
    font-weight: bold;
    color: #333;
}
.art-table tr:nth-child(even) { background-color: #fdfdfd; }

/* 7. 图片样式 */
.art-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.art-img-caption {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: -10px;
    margin-bottom: 15px;
}

/* 8. CTA 转化区域 (固定结构) */
.art-cta-box {
    text-align: center;
    border-top: 1px solid #eee;
    padding: 25px 15px;
    background-color: #fafafa;
    margin: 20px -15px 0 -15px; /* 抵消父级padding */
}
.cta-intro { text-align: left; font-weight: bold; margin-bottom: 15px; }

.cta-list-box {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 15px;
    text-align: left;
    margin-bottom: 20px;
}
.cta-list-box p { margin: 0 0 8px 0; color: #555; }
.cta-list-box p:last-child { margin-bottom: 0; }

.cta-promise-box {
    background-color: #fdf2e9;
    border: 1px solid #f5cba7;
    border-radius: 6px;
    padding: 15px;
    text-align: left;
}
.cta-promise-title { margin: 0 0 10px 0; color: #d35400; font-weight: bold; font-size: 14px; }
.cta-promise-text { margin: 0; color: #333; line-height: 1.6; font-size: 14px; }