/*
Theme Name: 亦涛教育国际留学 (Yitao Education)
Theme URI: https://yitao.edu
Author: Yitao Team
Description: 专业的国际留学与跨境教育服务主题，支持院校申请、语言培训、海外住宿和全球文化学习。
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yitao
*/

/*
  Note: This theme uses Tailwind CSS via CDN.
  The styles below provide layout foundation and WordPress-specific styling.
*/

/* ============ 布局基础（固定 Header 内容偏移） ============ */

/* === 固定 Header 样式 === */
#main-header {
  height: 80px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Header 内的内容容器垂直居中 */
#main-header > div {
  height: 100%;
  display: flex;
  align-items: center;
}

/* === body 顶部偏移 - 为固定 Header 预留空间 === */
body {
  padding-top: 80px;
}

/* === 移动端适配（有底部导航时） === */
@media (max-width: 767px) {
  #main-header {
    height: 72px;
  }
  body {
    padding-top: 72px;
    padding-bottom: 80px;
  }
}

/* === 当有公告栏时，额外增加偏移 === */
body.has-announcement #main-header {
  top: 40px;
}
body.has-announcement {
  padding-top: 120px;
}
@media (max-width: 767px) {
  body.has-announcement {
    padding-top: 112px;
  }
}

/* === WordPress 登录管理栏兼容 === */
body.admin-bar #main-header {
  top: 32px;
}
body.admin-bar {
  padding-top: 112px;
}
@media screen and (max-width: 782px) {
  body.admin-bar #main-header {
    top: 46px;
  }
  body.admin-bar {
    padding-top: 126px;
  }
}
@media (max-width: 767px) {
  body.admin-bar {
    padding-top: 118px;
  }
}

/* === main 容器补充样式 === */
#primary.site-main {
  min-height: 60vh;
  display: block;
}

/* === Filter Bar 与 Header / Admin Bar 兼容 === */
#filter-bar {
  top: 80px;
}
body.admin-bar #filter-bar {
  top: 112px;
}
@media screen and (max-width: 782px) {
  body.admin-bar #filter-bar {
    top: 126px;
  }
}
@media (max-width: 767px) {
  #filter-bar {
    top: 72px;
  }
  body.admin-bar #filter-bar {
    top: 118px;
  }
}

/* ============ Tailwind 插件兼容（prose 排版，详见下方增强定义） ============ */

/* ============ WordPress 通用样式 ============ */

.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #f1f1f1;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Comments */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-list .children {
  list-style: none;
  padding-left: 2rem;
  margin: 0;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  width: 100%;
}

/* ============================================================
   基础重置 — 最小化，不与 Tailwind 冲突
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #ffffff;
  color: #1e293b;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: #20558A; }
a:hover { color: #143B63; }
img { max-width: 100%; height: auto; display: block; }

/* WordPress 表单基础 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #1e293b;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: #20558A;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* =============================================================
   主题自定义样式 — 不依赖 Tailwind 版本
   ============================================================= */

/* backdrop-blur -webkit 前缀兜底（旧浏览器兼容性） */
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); }
.backdrop-blur    { -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); }

/* 固定定位元素的 z-index 层级一致性 */
#main-header { z-index: 50; }
#announcement-bar { position: relative; z-index: 40; }
#filter-bar { z-index: 30; }
footer { position: relative; z-index: 10; }

/* =============================================================
   WordPress 专用组件样式
   ============================================================= */

/* 分页 */
.page-numbers { display:inline-flex; gap:.5rem; align-items:center; margin-top:2rem; justify-content:center; list-style:none; padding:0; }
.page-numbers li .page-numbers { padding:.5rem 1rem; border:1px solid #e2e8f0; border-radius:.5rem; color:#475569; transition:all .2s; }
.page-numbers li .page-numbers.current,
.page-numbers li .page-numbers:hover { background:#20558A; color:#fff; border-color:#20558A; }

/* 评论 */
.comment-list, .comment-list .children { list-style:none; padding:0; margin:0; }
.comment-list .children { padding-left:2rem; }

/* AI 助手页面专用 */
.ai-chat-container { max-width:800px; margin:0 auto; padding:24px; }
.ai-chat-messages { min-height:400px; border:1px solid #e2e8f0; border-radius:12px; padding:16px; margin-bottom:16px; overflow-y:auto; }
.ai-message { padding:12px 16px; border-radius:8px; margin-bottom:8px; }
.ai-message.user { background:#eff6ff; text-align:right; }
.ai-message.assistant { background:#f8fafc; }

/* Footer */
footer { border-top: 1px solid #e2e8f0; }
#main-footer { background: #f8fafc; }

/* =============================================================
   暗模式支持
   ============================================================= */
body.dark {
    background-color: #0f172a;
    color: #e2e8f0;
}

body.dark #main-header {
    background-color: rgba(30, 41, 59, 0.9);
    border-bottom-color: #334155;
}

body.dark .site-main {
    background-color: #0f172a;
}

body.dark section.bg-white {
    background-color: #1e293b !important;
}

body.dark section.bg-gray-50,
body.dark section.from-gray-50 {
    background-color: #0f172a !important;
    background-image: linear-gradient(to bottom, #0f172a, #1e293b) !important;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
    color: #f1f5f9;
}

body.dark p.text-slate-900,
body.dark span.text-slate-900 {
    color: #f1f5f9 !important;
}

body.dark p.text-slate-600,
body.dark span.text-slate-600 {
    color: #94a3b8 !important;
}

body.dark p.text-slate-500,
body.dark span.text-slate-500 {
    color: #64748b !important;
}

body.dark .border-slate-100,
body.dark .border-slate-200 {
    border-color: #334155 !important;
}

body.dark #mobile-bottom-nav {
    background-color: rgba(30, 41, 59, 0.95);
    border-top-color: #334155;
}

/* =============================================================
   动画效果
   ============================================================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

/* 平滑过渡 */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* 返回顶部按钮 */
#back-to-top {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #1B4A77, #20558A);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
}

/* ============ 兜底样式：预编译 Tailwind 缺失的类 ============ */

/* line-clamp - 文本截断 */
.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;
}
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* aspect-ratio - 宽高比 */
.aspect-video {
    aspect-ratio: 16 / 9;
}
.aspect-square {
    aspect-ratio: 1 / 1;
}
.aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
}
.aspect-\[4\/3\] img,
.aspect-video img,
.aspect-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* rounded arbitrary values - 任意值圆角 */
.rounded-\[2\.5rem\] { border-radius: 2.5rem; }
.rounded-\[2rem\] { border-radius: 2rem; }
.rounded-\[1\.5rem\] { border-radius: 1.5rem; }

/* prose - 文章排版（模拟 Tailwind Typography） */
.prose {
    color: #334155;
    font-size: 1rem;
    line-height: 1.75;
}
.prose-lg {
    font-size: 1.125rem;
    line-height: 1.8;
}
.prose-lg p { margin-top: 1.25em; margin-bottom: 1.25em; }
.prose-lg h1, .prose h1 {
    color: #0f172a;
    font-weight: 800;
    font-size: 2.25rem;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
}
.prose-lg h2, .prose h2 {
    color: #0f172a;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
}
.prose-lg h3, .prose h3 {
    color: #0f172a;
    font-weight: 700;
    font-size: 1.25rem;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
}
.prose-lg h4, .prose h4 {
    color: #0f172a;
    font-weight: 700;
    font-size: 1.125rem;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.6;
}
.prose-lg ul, .prose ul,
.prose-lg ol, .prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}
.prose-lg li, .prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.prose-lg a, .prose a {
    color: #20558A;
    text-decoration: underline;
    font-weight: 500;
}
.prose-lg a:hover, .prose a:hover {
    color: #143B63;
}
.prose-lg blockquote, .prose blockquote {
    border-left: 4px solid #e2e8f0;
    padding-left: 1em;
    font-style: italic;
    color: #475569;
    margin: 1.5em 0;
}
.prose-lg img, .prose img {
    border-radius: 0.75rem;
    margin: 1.5em auto;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
.prose-lg code, .prose code {
    background: #f1f5f9;
    color: #db2777;
    padding: 0.125em 0.375em;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}
.prose-lg pre, .prose pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1.25em;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 1.5em 0;
    font-size: 0.875em;
    line-height: 1.7;
}
.prose-lg pre code, .prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}
.prose-lg hr, .prose hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 2em 0;
}
.prose-lg table, .prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9em;
}
.prose-lg th, .prose th {
    background: #f8fafc;
    padding: 0.75em 1em;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0;
}
.prose-lg td, .prose td {
    padding: 0.75em 1em;
    border-bottom: 1px solid #e2e8f0;
}
.prose-lg strong, .prose strong { font-weight: 700; color: #0f172a; }
.prose-max-w-none { max-width: none; }
.prose :where(.prose > :last-child) { margin-bottom: 0; }
.prose :where(.prose > :first-child) { margin-top: 0; }

/* 自定义间距 / 阴影 / 颜色 */
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.-translate-y-1 { transform: translateY(-0.25rem); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* object-* 图片适配 */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }

/* shrink-0 / flex-grow */
.shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* focus 态样式 */
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5); outline: none; }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
.focus\:border-transparent:focus { border-color: transparent; }
.focus\:outline-none:focus { outline: none; }

/* text-opacity 颜色透明度 */
.text-slate-400\/60 { color: rgba(148, 163, 184, 0.6); }
.text-slate-500\/70 { color: rgba(100, 116, 139, 0.7); }

/* 渐变背景 */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }

/* 小文字样式 */
.text-\[10px\] { font-size: 10px; }
.text-\[9px\] { font-size: 9px; }
.text-xs { font-size: 0.75rem; }

/* 颜色透明度类 - Tailwind 3 / 语法 */
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-white\/15 { background-color: rgba(255, 255, 255, 0.15); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }

/* focus ring 白色变体 */
.focus\:ring-white\/30:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); }

/* 额外的 aspect-ratio 变体 */
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.aspect-\[21\/9\] { aspect-ratio: 21 / 9; }
.aspect-\[16\/10\] img,
.aspect-\[21\/9\] img { width: 100%; height: 100%; object-fit: cover; }

/* backdrop-blur 额外变体 */
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* grid columns */
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* transform scale hover */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:grayscale-0 { filter: grayscale(0); }
.group:hover .group-hover\:text-blue-600 { color: #20558A; }
.group:hover .group-hover\:shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }

/* sticky z-40 (filter bar) */
.sticky { position: sticky; }

/* 移动端适配 */
@media (max-width: 767px) {
    .prose-lg { font-size: 1rem; line-height: 1.7; }
    .prose-lg h1, .prose h1 { font-size: 1.75rem; }
    .prose-lg h2, .prose h2 { font-size: 1.35rem; }
}

#back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* 手风琴样式 */
.accordion-header {
    cursor: pointer;
    transition: all 0.3s ease;
}

.accordion-header.active {
    color: #20558A;
}

.accordion-content {
    display: none;
    overflow: hidden;
}

/* 图片懒加载占位 */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img.lazy.loaded {
    opacity: 1;
}

/* 安全区域适配（移动端） */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 响应式优化 */
@media (max-width: 768px) {
    #back-to-top {
        bottom: 90px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

/* 打印样式 */
@media print {
    #main-header,
    #mobile-bottom-nav,
    #back-to-top,
    footer {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* =============================================================
   课程归档页专用（从 archive-course.php 内联 <style> 抽出）
   ============================================================= */
.course-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
}
.course-card:nth-child(1) { animation-delay: 0.05s; }
.course-card:nth-child(2) { animation-delay: 0.1s; }
.course-card:nth-child(3) { animation-delay: 0.15s; }
.course-card:nth-child(4) { animation-delay: 0.2s; }
.course-card:nth-child(5) { animation-delay: 0.25s; }
.course-card:nth-child(6) { animation-delay: 0.3s; }
.course-card:nth-child(7) { animation-delay: 0.35s; }
.course-card:nth-child(8) { animation-delay: 0.4s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.filter-btn-active { background: #20558A !important; color: white !important; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }

.course-stat-icon { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.course-grid-view .course-card { display: block; }
.course-list-view .course-card { display: flex; flex-direction: row; }
.course-list-view .course-card .aspect-\[4\/3\] { width: 280px; min-height: 100%; }
.course-list-view .course-card .p-5 { flex: 1; }

/* =============================================================
   体验增强（亦涛教育 · 平台完善）
   ============================================================= */

/* 锚点跳转时为固定 Header 预留偏移，避免被遮挡（如课程大纲 #syllabus） */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

/* 统一文本选中配色 */
::selection {
  background: #20558A;
  color: #ffffff;
}

/* 移动端底部导航已通过 style.css 的 body padding-bottom 处理，
   此处补充：当存在底部导航时，主内容区额外留白，避免被固定导航遮挡 */
@media (max-width: 767px) {
  body {
    padding-bottom: 80px;
  }
  /* 文章/页面正文图片在窄屏下不溢出 */
  .prose img,
  .entry-content img {
    height: auto;
  }
}

/* =============================================================
   移动端紧凑化（原生 APP 满屏风格）
   目标：收敛大留白、元素紧密排列、交互流畅。
   通过覆盖 Tailwind 间距工具类在窄屏下的取值，一处生效全站。
   ============================================================= */
@media (max-width: 767px) {
  /* 收敛超大纵向留白：桌面 py-24(6rem) → 移动 2.5rem，依此类推 */
  .py-32 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-28 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .py-24 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .py-20 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .py-16 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-14 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .py-12 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

  /* 区块之间的纵向间隔收紧 */
  .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; margin-bottom: 0; }
  .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem; margin-bottom: 0; }
  .space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; margin-bottom: 0; }
  .space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; margin-bottom: 0; }

  /* 网格/弹性间距收紧，提升信息密度 */
  .gap-8 { gap: 0.75rem; }
  .gap-6 { gap: 0.625rem; }
  .gap-10 { gap: 1rem; }
  .gap-12 { gap: 1.25rem; }

  /* 外下边距收紧 */
  .mb-8 { margin-bottom: 1rem; }
  .mb-12 { margin-bottom: 1.25rem; }
  .mb-16 { margin-bottom: 1.5rem; }
  .mt-12 { margin-top: 1.25rem; }
  .mt-16 { margin-top: 1.5rem; }

  /* 卡片内边距收紧，贴近原生 APP 列表密度 */
  .p-8 { padding: 1.125rem; }
  .p-10 { padding: 1.25rem; }
  .px-8 { padding-left: 1rem; padding-right: 1rem; }

  /* 容器左右留白略收，更充分利用屏幕宽度 */
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 网格在窄屏更密：默认单列时卡片间距更小；明确多列场景 */
  .grid-cols-2 { gap: 0.625rem; }
  .grid-cols-3 { gap: 0.5rem; }

  /* Hero 文案在移动端不过大，避免整屏被标题占满 */
  .leading-tight { line-height: 1.2; }

  /* 让固定底部导航的页面呈现"满屏"感：主区域最小高度撑满视口 */
  .site-main { min-height: calc(100vh - 56px); }

  /* 移动端侧滑导航：强制单列、整行、正常换行，防止竖排字 */
  #mobile-nav-drawer ul { display: flex !important; flex-direction: column !important; gap: 0.25rem; }
  #mobile-nav-drawer li { width: 100% !important; }
  #mobile-nav-drawer li a,
  #mobile-nav-drawer li span { display: block !important; width: 100% !important; word-break: keep-all !important; white-space: normal !important; }
}

/* 隐藏滚动条但保留滚动（横向筛选条/标签页更 App 化） */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* =============================================================
   移动端首页「排满」增强（原生 APP 网格密度）
   说明：home-sections.php 的卡片网格在 <640px 已改为 2 列（grid-cols-2），
   此处进一步收紧卡片内边距与圆角，让图片在窄卡中更适配，呈现满屏紧凑感。
   仅作用于 .grid-cols-2 内部，不影响 hero / AI 卡 / 关于板块（它们手机端为单列）。
   ============================================================= */
@media (max-width: 767px) {
  /* 卡片圆角更 App 化 */
  .yt-section .yt-card { border-radius: 12px; }

  /* 2 列网格内卡片内层内边距收紧（覆盖 p-5 / p-6 / p-4 等 Tailwind 间距） */
  .yt-section .grid-cols-2 .p-5,
  .yt-section .grid-cols-2 .p-6,
  .yt-section .grid-cols-2 .p-4 { padding: 0.875rem; }

  /* 窄卡内标题与描述字号收敛，避免换行溢出 */
  .yt-section .grid-cols-2 .yt-h3 { font-size: 1.02rem; line-height: 1.3; }
  .yt-section .grid-cols-2 .yt-text-ink2 { font-size: 0.82rem; }

  /* 课程/案例卡图在 2 列下更矮，减少纵向占用 */
  .yt-section .grid-cols-2 .aspect-video { aspect-ratio: 16 / 10; }

  /* 区块标题与「查看全部」在手机端紧凑 */
  .yt-section-head { margin-bottom: 1.5rem; gap: 0.25rem; }
  .yt-more { font-size: 0.85rem; }

  /* 金刚区图标在超小屏略缩，保证 4 列不挤 */
  .grid-cols-4 .w-12 { width: 2.75rem; height: 2.75rem; }
}

/* 细滚动条（Webkit），提升长列表/抽屉的视觉一致性 */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.55);
}

/* 焦点可达性：键盘导航时显示清晰的焦点环 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #20558A;
  outline-offset: 2px;
}

/* =============================================================
   首页新增模块样式补充
   ============================================================= */

/* FAQ 原生 details/summary：去除默认三角形标记，使用自定义旋转箭头 */
.yitao-faq summary::-webkit-details-marker { display: none; }
.yitao-faq summary { list-style: none; }
.yitao-faq[open] summary { color: #143B63; }

/* 服务流程时间轴：移动端连接线隐藏（grid 已变两列），桌面端由内联样式绘制 */
@media (max-width: 767px) {
  /* Hero 区块底部叠加的数据条在窄屏略微上移，增强层次 */
  .yitao-stat-strip { margin-top: -3rem; }
  /* 流程步骤在移动端两列时缩小间距，更紧凑 */
  .yitao-process .grid-cols-2 > div { padding: 0.25rem; }
  /* 师资/资讯卡片在超窄屏去除多余圆角留白 */
  .grid-cols-2 .rounded-2xl { border-radius: 1rem; }
}

/* =============================================================
   移动端底部导航 7 项布局（AI 助手居中凸出）
   ============================================================= */
#mobile-bottom-nav .app-nav-item span {
  font-size: 10px;
  line-height: 1.1;
}
#mobile-bottom-nav .app-nav-item svg {
  width: 1.5rem;
  height: 1.5rem;
}
#mobile-bottom-nav .app-nav-center {
  position: relative;
  z-index: 1;
}
#mobile-bottom-nav .app-nav-center span:first-child {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
/* 兜底：即使 Tailwind grid-cols-7 未命中/缓存，也强制 7 列横向布局 */
#mobile-bottom-nav nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 0.125rem;
  min-width: 320px;
  max-width: 100vw;
}
#mobile-bottom-nav .app-nav-center {
  grid-column: auto;
}