/*此处定义全局变量和全局样式重置*/
/* 根变量：全局主题配置 */
:root {
    /* 深色背景上的白色文字/图标 */
    --text-on-dark: #ffffff;
    /* 正文默认色：深灰色 */
    --body-text-color: #333333;
    /* 主题色：导航按钮、链接hover、标题装饰线、关闭按钮,文章标题底部装饰线等 */
    --theme-color: #aa0aae;
    /* 全局字体策略：英文优先Georgia，中文优先宋体系列；原文Arial/黑体作为兜底 */
    --body-font: Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", "Arial", "SimHei", "Microsoft YaHei", serif;
    /* 头部固定高度，方便布局计算 */
    --header-height: 64px;
    /* h1 标题尺寸：统一页面主标题样式 */
    --heading-h1-size: 2rem;
    /* 首页英雄区大字尺寸（可直接修改）*/
    --hero-banner-title-size: 40px;
    /* 地图深色描边光标：深色填充(#1f2937) + 白色描边(#fff)，确保在任意背景（含系统白色光标主题、浅色地图底）下都清晰可见 */
    /* 默认（可拖拽）：深色箭头，热点在箭头尖端 */
    --map-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M5 3 L5 18 L9 14.5 L11.6 20.5 L14 19.4 L11.4 13.6 L17 13.6 Z' fill='%231f2937' stroke='%23ffffff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4;
    /* 拖拽中：深色四向移动箭头，热点居中 */
    --map-cursor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L15.2 5.2 H13 V11 H18.8 V8.8 L22 12 L18.8 15.2 V13 H13 V18.8 H15.2 L12 22 L8.8 18.8 H11 V13 H5.2 V15.2 L2 12 L5.2 8.8 V11 H11 V5.2 H8.8 Z' fill='%231f2937' stroke='%23ffffff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14;
}

/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {height: 100%;}

/* 确保页面内锚点跳转时不会被固定头部遮挡*/
[id] {scroll-margin-top: calc(max(var(--header-height), 64px) + 12px);}

/*全局平滑滚动（页面内锚点/脚本滚动优先）*/
html {scroll-behavior: smooth;}

/* 隐藏页面最右侧滚动条，保留滚动功能 */
html,
body {
    scrollbar-width: none;/* Firefox */
    -ms-overflow-style: none;/* IE/Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;}/* Chrome/Safari/新Edge */

body {
    display: flex;
    background-color: #f5f5f5;
    flex-direction: column;
    min-height: 100vh;
    /* 固定头部占位：与 --header-height同步，防止JS异步加载失败时首屏被header遮挡或底部露出下一节 */
    padding-top: var(--header-height);
    font-family: Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", "Arial", "SimHei",
    "Microsoft YaHei", sans-serif;/*全站字体*/
    color: var(--body-text-color);
    overflow-x: hidden;
}

/* 列表重置 */
ul, li {list-style: none;}

/* 链接样式 */
a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* 图片自适应 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
}

/* main区域伸展 */
main {
    flex: 1 0 auto;
    display: block;
}

/* 输入框重置 */
input {
    font-family: inherit;
    outline: none;
    border: none;
}
/* ===== 页面加载动画 ====
加载时：header和footer显示，main区域显示loading动画，加载完成后：移除loading类，显示实际内容*/
/* Loading遮罩层 */
.page-loading-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    /* 全屏加载遮罩：覆盖header之下的所有内容（main/hero），按项目层级规范取 100，非弹窗层级故不用极大值 */
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loading-overlay .loading-text {
    margin-top: 12px;
    font-size: 14px;
    color: #999;
}

/* Loading旋转动画 */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e0e0e0;
    border-top-color: var(--theme-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 加载时隐藏main内容 */
body.is-loading main {
    opacity: 0;
    visibility: hidden;
}