/**
 * TopOrange 内页品牌样式
 * ---------------------------------------------------------------
 * 背景：站点首页(front-page.php)与归档页(articles.php)使用手写 HTML +
 *       custom-style.css，视觉是品牌橙 #FF6B35；而所有走 Astra 默认模板的
 *       内页（page.php / single.php）使用 Astra 出厂默认配色（蓝色 #046bd2、
 *       白底、无品牌元素），两套视觉完全割裂。
 *
 * 本文件作用：把 Astra 渲染的内页统一到品牌视觉体系，
 * 只做"配色 / 字体 / 容器装饰"覆盖，不改动 Astra 的布局结构，可安全回滚。
 *
 * 挂载方式：mu-plugins/toporange-inner-brand.php
 * URL：/blog/inner-page.css
 */

/* ============================================================
   1. 品牌变量（对齐 custom-style.css）
   ============================================================ */
:root,
body {
  --to-primary: #FF6B35;
  --to-primary-dark: #E8531A;
  --to-primary-light: #FF9A6C;
  --to-primary-pale: #FFF5F0;
  --to-secondary: #2C3E50;
  --to-text: #444444;
  --to-heading: #1a1a1a;
  --to-border: #ECECEC;
  --to-bg: #F8F9FA;

  /* 覆盖 Astra 出厂蓝色系全局色板 */
  --ast-global-color-0: #FF6B35;
  --ast-global-color-1: #E8531A;
  --ast-global-color-2: #1a1a1a;
  --ast-global-color-3: #444444;
  --ast-global-color-4: #FFFFFF;
  --ast-global-color-5: #F8F9FA;
  --ast-global-color-6: #2C3E50;
  --ast-global-color-7: #ECECEC;
  --ast-global-color-8: #2C3E50;
}

/* ============================================================
   2. 字体与基础
   ============================================================ */
body,
button,
input,
select,
textarea,
.main-header-menu a,
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans SC", "思源黑体", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background: var(--to-bg);
  color: var(--to-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ============================================================
   3. 顶部导航：白底 + 橙色底线 + 深色菜单
   ============================================================ */
.site-header {
  background: #fff;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}

.ast-primary-header-bar,
.main-header-bar {
  background: #fff;
  border-bottom: 3px solid var(--to-primary);
}

/* 头部单行：logo 左 / 菜单右，垂直居中，不换行 */
.ast-primary-header-bar {
  padding: 0;
}

.main-header-bar-wrap .ast-builder-grid-row,
.ast-primary-header-bar .ast-builder-grid-row {
  align-items: center;
  min-height: 72px;
}

.ast-builder-grid-row-layout-header .site-branding,
.site-branding {
  align-items: center;
}

.main-header-menu {
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
}

.main-header-menu > li {
  display: flex;
  align-items: center;
}

/* 站名 */
.site-branding {
  flex-shrink: 0;
}

.site-title,
.site-title a {
  color: var(--to-heading) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 21px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.site-title a:hover {
  color: var(--to-primary) !important;
}

/* 品牌图标（用内联 SVG，避免额外请求） */
.site-title a::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: -4px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='6' fill='%23FF6B35'/%3E%3Cpath d='M12 2c1.6 2.2 1.6 4.4 0 6.6-1.6-2.2-1.6-4.4 0-6.6z' fill='%23FF9A6C'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* 菜单 */
.main-header-menu > li > a,
.main-header-menu > li > .menu-link {
  color: var(--to-secondary) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 0 9px;
  white-space: nowrap;
  line-height: 72px;
  transition: color 0.2s ease;
}

.main-header-menu > li > a:hover,
.main-header-menu > li > .menu-link:hover,
.main-header-menu > .current-menu-item > a,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current_page_item > a,
.main-header-menu > .current_page_item > .menu-link,
.main-header-menu > .current_page_parent > a,
.main-header-menu > .current_page_parent > .menu-link {
  color: var(--to-primary) !important;
}

/* 下拉菜单 */
.main-header-menu .sub-menu {
  border-top: 2px solid var(--to-primary);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1);
}

.main-header-menu .sub-menu a:hover {
  color: var(--to-primary) !important;
  background: var(--to-primary-pale);
}

/* 移动端汉堡按钮 */
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .menu-toggle {
  color: var(--to-secondary);
  border-color: var(--to-border);
}

.ast-button-wrap .menu-toggle:hover,
.ast-button-wrap .menu-toggle:focus {
  color: var(--to-primary);
  border-color: var(--to-primary);
}

/* ============================================================
   4. 内容区：白卡片 + 橙色标题装饰
   ============================================================ */
.site-content {
  padding: 44px 0 64px;
  background: var(--to-bg);
}

/* 收窄阅读宽度，避免 1200px 下一行过长影响阅读 */
.site-content > .ast-container {
  max-width: 1040px;
}

/* 文章/页面容器做成卡片 */
#primary > article,
#primary .ast-article-single {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 40px 44px;
  box-shadow: 0 4px 24px rgba(17, 24, 39, 0.06);
  border: 1px solid var(--to-border);
}

/* 标题区 */
.entry-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--to-border);
}

h1.entry-title,
.entry-title {
  font-size: 34px;
  line-height: 1.32;
  font-weight: 700;
  color: var(--to-heading);
  margin: 0;
  position: relative;
  padding-bottom: 14px;
}

h1.entry-title::after,
.entry-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--to-primary), var(--to-primary-light));
}

/* 正文 */
.entry-content {
  font-size: 16px;
  line-height: 1.9;
  color: var(--to-text);
}

.entry-content p {
  margin-bottom: 16px;
}

.entry-content h2 {
  font-size: 23px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--to-heading);
  margin: 36px 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--to-primary);
  border-radius: 2px;
}

.entry-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--to-secondary);
  margin: 26px 0 12px;
}

.entry-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--to-secondary);
  margin: 22px 0 10px;
}

.entry-content a {
  color: var(--to-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 107, 53, 0.3);
  transition: all 0.2s ease;
}

.entry-content a:hover {
  color: var(--to-primary-dark);
  border-bottom-color: var(--to-primary-dark);
}

.entry-content ul,
.entry-content ol {
  padding-left: 22px;
  margin-bottom: 18px;
}

.entry-content li {
  margin-bottom: 10px;
}

.entry-content ul li::marker {
  color: var(--to-primary);
}

.entry-content ol li::marker {
  color: var(--to-primary);
  font-weight: 600;
}

/* 强调块 */
.entry-content blockquote {
  background: var(--to-primary-pale);
  border-left: 4px solid var(--to-primary);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 24px 0;
  color: var(--to-secondary);
}

.entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 22px 0;
  font-size: 15px;
}

.entry-content th {
  background: var(--to-primary-pale);
  color: var(--to-secondary);
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--to-border);
}

.entry-content td {
  padding: 11px 14px;
  border: 1px solid var(--to-border);
}

.entry-content tr:nth-child(even) td {
  background: #FCFCFD;
}

/* 按钮 */
.entry-content .wp-block-button__link,
.ast-button,
button,
input[type="submit"] {
  background: var(--to-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 26px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.entry-content .wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--to-primary-dark);
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.25);
}

/* ============================================================
   5. 页脚：深蓝灰底
   ============================================================ */
.site-footer {
  background: var(--to-secondary) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  padding: 18px 0;
  margin-top: 8px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--to-primary-light);
}

.ast-footer-copyright,
.ast-footer-copyright p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.site-footer .ast-builder-grid-row {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ============================================================
   6. 服务列表（mu-plugin 输出的 .toporange-svc-listing）
   ============================================================ */
.toporange-svc-listing {
  margin: 28px 0 8px;
}

.toporange-svc-listing a {
  display: inline-block;
  margin: 0 8px 10px 0;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--to-primary-pale);
  border: 1px solid rgba(255, 107, 53, 0.22);
  color: var(--to-primary-dark);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.toporange-svc-listing a:hover {
  background: var(--to-primary);
  border-color: var(--to-primary);
  color: #fff;
}

/* ============================================================
   7. 响应式
   ============================================================ */
@media (max-width: 921px) {
  /* 移动端菜单改为可换行，否则 nowrap 会把容器撑宽导致整页横向溢出 */
  .main-header-menu {
    flex-wrap: wrap;
  }

  .main-header-menu > li > a,
  .main-header-menu > li > .menu-link {
    line-height: 1.6;
    padding: 10px 16px;
    white-space: normal;
  }

  .main-header-bar-wrap .ast-builder-grid-row,
  .ast-primary-header-bar .ast-builder-grid-row {
    min-height: 62px;
  }

  .site-title,
  .site-title a {
    font-size: 19px;
  }
}

@media (max-width: 768px) {
  .site-content {
    padding: 24px 0 44px;
  }

  .site-content > .ast-container {
    max-width: 100%;
  }

  #primary > article,
  #primary .ast-article-single {
    border-radius: 12px;
    padding: 24px 20px;
  }

  h1.entry-title,
  .entry-title {
    font-size: 25px;
    padding-bottom: 12px;
  }

  h1.entry-title::after,
  .entry-title::after {
    width: 40px;
    height: 3px;
  }

  .entry-content {
    font-size: 15px;
    line-height: 1.85;
  }

  .entry-content h2 {
    font-size: 19px;
    margin-top: 28px;
    padding-left: 11px;
    border-left-width: 3px;
  }

  .entry-content h3 {
    font-size: 16px;
  }

  .site-title,
  .site-title a {
    font-size: 19px;
  }

  .site-title a::before {
    width: 21px;
    height: 21px;
    margin-right: 8px;
  }

  .ast-primary-header-bar,
  .main-header-bar {
    border-bottom-width: 2px;
  }

  .entry-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .site-title a::before {
    display: none;
  }
}

/* ============================================================
   9. 核心要点卡（GEO：可被 AI 直接引用的结构化摘要块）
   由 mu-plugins/toporange-seo-geo-boost.php 注入
   ============================================================ */
.tpor-keypoints {
  margin: 22px 0 30px;
  padding: 18px 20px 14px;
  background: var(--to-primary-pale);
  border: 1px solid #FFDCCB;
  border-left: 4px solid var(--to-primary);
  border-radius: 8px;
}

.tpor-keypoints__title {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 17px !important;
  font-weight: 700;
  color: var(--to-heading) !important;
  line-height: 1.4;
}

.tpor-keypoints__list {
  margin: 0 0 8px !important;
  padding-left: 20px !important;
  list-style: none;
}

.tpor-keypoints__list li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 2px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--to-text);
}

.tpor-keypoints__list li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--to-primary);
}

.tpor-keypoints__meta {
  margin: 0 !important;
  font-size: 12px !important;
  color: #9A8679 !important;
  line-height: 1.6;
}

@media (max-width: 544px) {
  .tpor-keypoints {
    margin: 16px 0 22px;
    padding: 14px 14px 10px;
  }
  .tpor-keypoints__list li {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* ============================================================
   10. 宽表格在窄屏横向滚动（Markdown 转换后的多列表格）
   ============================================================ */
@media (max-width: 768px) {
  .entry-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 14px;
  }
  .entry-content th,
  .entry-content td {
    white-space: nowrap;
    padding: 10px 12px;
  }
}