/*
Theme Name: My Aviation - 翼起飞
Theme URI: https://example.com/my-aviation
Author: Aviation Explorer Team
Author URI: https://example.com
Description: 一个兼具专业航空知识深度与儿童友好交互体验的飞机信息展示WordPress主题。像"翼起飞"一样探索全球飞机。
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-aviation
Tags: aviation, aircraft, museum, education, kids-friendly, custom-post-type, custom-taxonomy, featured-images, full-width-template
*/

/* ============================================
   设计系统 — 儿童友好 · 明亮 · 童趣
   理念：天空 + 彩虹 + 云朵 + 大触摸区 + 高对比度
   ============================================ */
:root {
    /* —— 主色调：天空世界 —— */
    --color-sky-1: #4DA6FF;        /* 天空蓝（主） */
    --color-sky-2: #74C2FF;        /* 浅天蓝 */
    --color-sky-3: #2B8FE0;        /* 深天蓝 */
    --color-sky-deep: #1B6FBF;     /* 深海蓝（标题） */
    --color-cloud: #F3F8FF;       /* 云朵白 */
    --color-cloud-2: #E8F1FC;     /* 云朵灰 */
    --color-cloud-3: #D5E5F5;     /* 边框灰蓝 */

    /* —— 童趣点缀色：彩虹调色板 —— */
    --color-sun: #FFB940;          /* 阳光橙 */
    --color-sun-light: #FFD073;
    --color-sun-deep: #E89A1A;
    --color-coral: #FF6B6B;       /* 珊瑚红 */
    --color-coral-light: #FF9999;
    --color-grass: #51CF66;       /* 草地绿 */
    --color-grass-light: #8CE99A;
    --color-grape: #9775FA;        /* 葡萄紫 */
    --color-grape-light: #B4A0FA;
    --color-lemon: #FFD93D;       /* 柠檬黄 */
    --color-pink: #FF8FAB;         /* 粉色 */

    /* —— 分类专属色 —— */
    --color-cat-airliner: #4DA6FF;
    --color-cat-fighter: #FF6B6B;
    --color-cat-helicopter: #51CF66;
    --color-cat-spacecraft: #9775FA;
    --color-cat-general: #FFB940;
    --color-cat-historic: #FF8FAB;

    /* —— 文字 —— */
    --color-text-1: #1E3A5F;       /* 主文字（深海军蓝） */
    --color-text-2: #4A6B8A;       /* 次要文字 */
    --color-text-3: #8FA8C2;       /* 辅助文字 */
    --color-white: #FFFFFF;

    /* —— 背景层 —— */
    --color-bg: #F3F8FF;
    --color-bg-warm: #FFF9F0;

    /* —— 语义色 —— */
    --color-success: #51CF66;
    --color-danger: #FF6B6B;
    --color-warning: #FFB940;
    --color-info: #4DA6FF;

    /* —— 阴影：柔和、彩色 —— */
    --shadow-xs: 0 1px 3px rgba(77, 166, 255, 0.06);
    --shadow-sm: 0 2px 8px rgba(77, 166, 255, 0.10);
    --shadow-md: 0 6px 20px rgba(77, 166, 255, 0.14);
    --shadow-lg: 0 12px 36px rgba(77, 166, 255, 0.18);
    --shadow-xl: 0 20px 60px rgba(77, 166, 255, 0.22);
    --shadow-sun: 0 6px 20px rgba(255, 185, 64, 0.25);
    --shadow-coral: 0 6px 20px rgba(255, 107, 107, 0.20);

    /* —— 圆角：更大、更圆 —— */
    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 40px;
    --radius-full: 9999px;

    /* —— 间距 —— */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4.5rem;

    /* —— 过渡：更有弹性 —— */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-slow: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* —— 字体：使用系统自带中文字体，零外部请求 —— */
    --font-heading: 'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Hiragino Sans GB', 'Heiti SC', sans-serif;
    --font-body: 'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Hiragino Sans GB', 'Heiti SC', sans-serif;
    --font-fun: 'PingFang SC', 'Microsoft YaHei', '微软雅黑', sans-serif;

    /* —— 布局 —— */
    --container-max: 1280px;
    --header-height: 76px;

    /* —— 动画 —— */
    --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   基础重置
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text-1);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-sky-deep);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; }

a {
    color: var(--color-sky-1);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-sky-deep); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { list-style-position: inside; }

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================
   工具类
   ============================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* ============================================
   通用按钮 — 超大、圆润、有弹性
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 52px;
    padding: 0.85rem 2rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    cursor: pointer;
    border: 3px solid transparent;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--color-sky-1);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}
.btn-primary:hover {
    background: var(--color-sky-3);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-lg);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-secondary {
    background: var(--color-sun);
    color: var(--color-white);
    box-shadow: var(--shadow-sun);
}
.btn-secondary:hover {
    background: var(--color-sun-deep);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-sun);
}

.btn-coral {
    background: var(--color-coral);
    color: var(--color-white);
    box-shadow: var(--shadow-coral);
}
.btn-coral:hover {
    background: #E85555;
    transform: translateY(-3px) scale(1.03);
}

.btn-outline {
    background: var(--color-white);
    color: var(--color-sky-1);
    border-color: var(--color-sky-2);
    border-width: 3px;
}
.btn-outline:hover {
    background: var(--color-sky-1);
    color: var(--color-white);
    border-color: var(--color-sky-1);
    transform: translateY(-2px);
}

.btn-lg {
    min-height: 60px;
    padding: 1.1rem 2.8rem;
    font-size: 1.2rem;
}
.btn-sm {
    min-height: 44px;
    padding: 0.5rem 1.3rem;
    font-size: 0.9rem;
}

/* ============================================
   页面通用结构
   ============================================ */
.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    padding: 0;
}

.main-content.home-main {
    padding: 0;
}

.section { padding: var(--spacing-3xl) 0; }

/* — 段落标题：更童趣 — */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}
.section-header h2 {
    color: var(--color-sky-deep);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}
.section-header h2 i {
    color: var(--color-sun);
    font-size: 0.9em;
}
.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 6px;
    background: var(--color-sun);
    border-radius: var(--radius-full);
}
.section-header p {
    color: var(--color-text-2);
    margin-top: var(--spacing-md);
    font-size: 1.15rem;
}

/* ============================================
   面包屑导航
   ============================================ */
.breadcrumb {
    background: var(--color-white);
    padding: var(--spacing-md) 0;
    box-shadow: var(--shadow-xs);
}
.breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    gap: var(--spacing-xs);
}
.breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--color-text-2);
}
.breadcrumb li:not(:last-child)::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.55rem;
    margin-left: var(--spacing-xs);
    color: var(--color-text-3);
}
.breadcrumb a { color: var(--color-sky-1); }
.breadcrumb .current {
    color: var(--color-text-1);
    font-weight: 700;
}

/* ============================================
   加载动画
   ============================================ */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--color-cloud-3);
    border-top-color: var(--color-sky-1);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: var(--spacing-xl) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   淡入动画
   ============================================ */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }
.fade-in-delay-4 { animation-delay: 0.4s; }

/* — 弹跳动画 — */
@keyframes bounce-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* — 摇摆动画 — */
@keyframes wiggle {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* — 漂浮动画 — */
@keyframes float-soft {
    0%, 100% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-12px) translateX(8px); }
    66% { transform: translateY(6px) translateX(-5px); }
}

/* ============================================
   无障碍
   ============================================ */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 4px solid var(--color-sun);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* ============================================
   滚动条美化
   ============================================ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-cloud-2); }
::-webkit-scrollbar-thumb {
    background: var(--color-sky-2);
    border-radius: var(--radius-full);
    border: 3px solid var(--color-cloud-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-sky-1); }

/* ============================================
   选中文本
   ============================================ */
::selection {
    background: var(--color-sun);
    color: var(--color-white);
}