/* ==================== CSS基础变量样式 ==================== */
/* 注意：这些变量会被functions.php中的shaperfactory_output_theme_colors_css()函数动态覆盖 */
/* 默认值（如果WordPress自定义器未设置，则使用这些值） */
:root {
    --primary-color: #000e4f; /* 主色调（默认 #000e4f，可在自定义器中修改） */
    --primary-hover: #E6892A; /* 深橙色 - hover状态 */
    --secondary-color: #FFFEF9; /* 奶油白/象牙白 - 辅助色 */
    /* --accent-color 和 --accent-hover 由 WordPress 自定义器动态设置，不在此处定义 */
    /* 默认值：--accent-color: #FF9933; --accent-hover: #E6892A; */
    --text-dark: #000e4f; /* 默认深色文本（通常等于主色调） */
    --text-gray: #666;
    --bg-light: #FFFEF9; /* 奶油白/象牙白 - 背景色 */
    --red-accent: #ff0000;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;

    /* Spacing scale */
    --spacing-0: 0;
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 50px;
    --spacing-4xl: 60px;

    /* Font size scale */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;
    --font-size-5xl: 33px;
    --font-size-6xl: 36px;

    /* Radius scale */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
}


* { box-sizing: border-box; }

/* 隐藏 WordPress 管理工具栏（Admin Bar）- 全站通用，安全考虑 */
#wpadminbar {
    display: none !important;
}

/* 当管理工具栏隐藏时，调整body的padding-top */
html.admin-bar {
    margin-top: 0 !important;
}

html.admin-bar body {
    padding-top: 0 !important;
}

html, body { 
    margin: 0; 
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 防止水平滚动 */
}

body {
    position: relative;
    font-family: var(--font-body, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
    font-size: 16px;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

/* ==================== Typography Color Rules ==================== */
/* 规则：
   - h1/h2 使用主色调
   - h3-h6、p、label、a 不使用主色调（默认用更中性的深灰）
   说明：通过变量而不是写死颜色，保证可控且便于主题统一调整
*/

h1,
h2 {
    color: var(--heading-primary-color, var(--primary-color));
}

/* 内容区域：h3-h6 使用单独的标题色，p/label/a 使用正文色 */
#site-content h3,
#site-content h4,
#site-content h5,
#site-content h6 {
    color: var(--heading-secondary-color, var(--body-text-color, #333));
}

#site-content p,
#site-content label,
#site-content a {
    color: var(--body-text-color, #333);
}

/* 内容区域链接 hover 使用点缀色（交互强调），不使用主色调 */
main a:hover {
    color: var(--accent-color, #FF9933);
}

small,
.text-muted {
    color: var(--text-gray, #666);
}

/* ==================== Bootstrap 栅格系统（自定义） ==================== */

/* Container - 最大宽度 1400px，和 footer 一致 */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    width: 100%;
}

/* Shapesculpt 主题容器（ss- 前缀） */
.ss-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    width: 100%;
}

/* Row - Flexbox 布局 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    box-sizing: border-box;
}

/* 栅格基础样式 */
[class*="col-"] {
    position: relative;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 小屏幕 >=576px */
@media screen and (min-width: 576px) {
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* 中等屏幕 >=768px */
@media screen and (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* 大屏幕 >=992px - Bootstrap lg breakpoint */
@media screen and (min-width: 992px) {
    /* col-lg-3 - 25% 宽度 */
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    /* col-lg-4 - 33.33% 宽度 */
    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    /* col-lg-5 - 41.67% 宽度 */
    .col-lg-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    
    /* col-lg-6 - 50% 宽度 */
    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* col-lg-7 - 58.33% 宽度 */
    .col-lg-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    
    /* col-lg-8 - 66.67% 宽度 */
    .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    
    /* col-lg-12 - 100% 宽度 */
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 小屏幕 <992px - 单列布局 */
@media screen and (max-width: 991px) {
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 移动端响应式调整（<768px） */
@media screen and (max-width: 767px) {
    /* 确保container在移动端没有多余的margin */
    .container,
    .ss-container {
        padding-left: 20px; /* 统一左右 padding 为 20px */
        padding-right: 20px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* 调整row的负margin以适应移动端，与 container 的 padding 20px 匹配 */
    .row {
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        box-sizing: border-box;
    }
    
    /* 确保列在移动端有正确的padding，与 container 的 padding 20px 匹配 */
    [class*="col-"] {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ==================== 统一居中规则 ==================== */
/* 统一所有 section、container、grid 等盒子居中，排除首页 banner 内容盒子 */

/* Container 本身已通过 margin: 0 auto 实现水平居中 */
/* Section Header 默认居中（已在 main.css 中设置） */

/* Grid 容器内的元素默认居中（适用于卡片、按钮等） */
/* 如果需要左对齐，可以使用 .text-left 类覆盖 */
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-6 > * {
    text-align: center;
}

/* Grid 内的段落文本可以保持左对齐（如果需要） */
.grid-2 > * p,
.grid-3 > * p,
.grid-4 > * p,
.grid-6 > * p {
    text-align: left;
}

/* 排除首页 banner 内容盒子，保持左对齐 */
.hero-banner__content,
.hero-banner__content.container,
.hero-banner__content * {
    text-align: left !important;
}

/* 文本对齐工具类 */
.text-center {
    text-align: center;
}

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

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