/* ============================================================
   Public Common Styles - 公共样式表
   包含所有页面共用的基础样式(字体、圆角、背景、滚动条、颜色变量、按钮、卡片等)
   ============================================================ */

/* ========== Zorn Tales 品牌色变量(全局可用) ========== */
:root {
    --zt-gold: #FFC84B;
    --zt-gold-light: #FFE08A;
    --zt-gold-dark: #E6A320;
    --zt-orange: #FF8C42;
    --zt-orange-dark: #D96A26;
    --zt-coral: #FF6B5B;
    --zt-brown: #5D3A1A;
    --zt-brown-dark: #3D2410;
    --zt-cream: #FFF8E7;
    --zt-sand: #F5E6C8;
    --zt-tan: #D4B483;
    --zt-purple: #9B59B6;
    --zt-purple-light: #C39BD3;
    --zt-purple-dark: #7D3C98;
    --zt-magic: #E056FD;
    --zt-green: #58D68D;
    --zt-teal: #48C9B0;
    --zt-blue: #5DADE2;
    --zt-red: #E74C3C;
    --zt-dark: #2C1810;
    --zt-darker: #1A0F08;
    --zt-shadow: rgba(61, 36, 16, 0.05);
    --zt-shadow-lg: rgba(61, 36, 16, 0.08);
    --zt-radius-sm: 8px;
    --zt-radius-md: 16px;
    --zt-radius-lg: 24px;

    /* 字体 */
    --font-display: 'Fredoka', 'Baloo 2', 'Nunito', 'Segoe UI', sans-serif;
    --font-body: 'Nunito', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

/* ========== 字体定义 ========== */
@font-face {
    font-family: myFont;
    src: url('../fonts/Montserrat-Regular.ttf');
}

/* ========== 全局字体应用(所有页面生效) ========== */
html,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
.uk-heading-2xlarge,
.uk-heading-large,
.uk-heading-medium,
.uk-heading-small,
.uk-heading-xlarge,
.uk-button,
.uk-navbar-nav>li>a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
a,
span {
    font-family: myFont!important;
}

/* ========== 基础布局 ========== */
body {
    margin: 0 auto;
    min-width: 1400px;
}

html {
    scroll-behavior: smooth;
}

.uk-font-01 {
    font-family: myFont01 !important;
}

/* ========== 圆角通用类 ========== */
.my-radius {
    border-radius: 15px;
}

.my-radius2 {
    border-radius: 50px;
}

.my-radius3 {
    border-radius: 30px;
}

/* ========== 文字颜色 ========== */
.uk-text-white {
    color: #FFF;
}

/* ========== 背景配色(其他页面用) ========== */
.gm-bg {
    background: #f9da6d;
}

.gm-bg-body {
    background: #edbf1d;
}

.x-background-img {
    background: #f5d4aa;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ========== 自定义滚动条样式 ========== */
.g-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.g-scrollbar::-webkit-scrollbar-track {
    background: #373400;
    border-radius: 10px;
}

.g-scrollbar::-webkit-scrollbar-thumb {
    background: #fba46a;
    border-radius: 10px;
    border: solid 1px #d38959;
}

.g-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c681ff;
}

/* ========== 页脚背景(其他页面用) ========== */
.footer-bg {
    background: #605c43;
    height: auto;
    padding: 30px 160px;
}

/* ============================================================
   公共组件样式 - 按钮和卡片(所有页面可用)
   ============================================================ */

/* ========== 通用按钮 .zt-btn(渐变 + 立体阴影) ========== */
.zt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 6px 0 var(--zt-shadow-lg);
    text-decoration: none;
    line-height: 1.2;
}

.zt-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 var(--zt-shadow-lg);
    text-decoration: none;
}

/* 主按钮(金色渐变) */
.zt-btn-primary {
    background: linear-gradient(180deg, var(--zt-gold-light) 0%, var(--zt-gold) 100%);
    color: var(--zt-brown-dark);
}

.zt-btn-primary:hover {
    color: var(--zt-brown-dark);
}

/* 次按钮(橙色渐变) */
.zt-btn-secondary {
    background: linear-gradient(180deg, var(--zt-orange) 0%, var(--zt-orange-dark) 100%);
    color: #fff;
}

.zt-btn-secondary:hover {
    color: #fff;
}

/* 紫色按钮 */
.zt-btn-purple {
    background: linear-gradient(180deg, var(--zt-purple-light) 0%, var(--zt-purple) 100%);
    color: #fff;
}

.zt-btn-purple:hover {
    color: #fff;
}

/* ========== 通用卡片 .zt-card(深色渐变 + 边框 + 阴影) ========== */
.zt-card {
    background: linear-gradient(180deg, rgba(93, 58, 26, 0.9) 0%, rgba(61, 36, 16, 0.95) 100%);
    border: 3px solid var(--zt-tan);
    border-radius: var(--zt-radius-lg);
    padding: 28px;
    box-shadow: 0 8px 24px var(--zt-shadow);
}

/* ========== 通用圆形图标 .zt-icon-circle ========== */
.zt-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--zt-gold) 0%, var(--zt-orange) 100%);
    color: var(--zt-brown-dark);
    box-shadow: 0 4px 12px var(--zt-shadow);
}

/* ========== 通用区段标题 .zt-section-title ========== */
.zt-section-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 3px 3px 0 var(--zt-brown-dark);
    color: var(--zt-gold-light);
    font-weight: 700;
    line-height: 1.2;
}

.zt-section-subtitle {
    font-size: 1.15rem;
    text-align: center;
    color: var(--zt-sand);
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

/* ========== 公共 Footer 样式 ========== */
.zt-footer {
    background: var(--zt-darker);
    border-top: 3px solid var(--zt-tan);
    padding: 60px 0 30px;
    color: var(--zt-cream);
}

.zt-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.zt-footer-brand img {
    height: 60px;
    margin-bottom: 16px;
    max-width: 100%;
}

.zt-footer-brand p {
    color: var(--zt-sand);
    font-size: 0.95rem;
    max-width: 300px;
    line-height: 1.6;
    margin: 0;
}

.zt-footer-col h4 {
    color: var(--zt-gold);
    margin: 0 0 18px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.zt-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zt-footer-col a {
    color: var(--zt-sand);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s;
}

.zt-footer-col a:hover {
    color: var(--zt-gold);
    text-decoration: none;
}

.zt-footer-bottom {
    text-align: center;
    color: var(--zt-tan);
    font-size: 0.9rem;
    padding-top: 24px;
    border-top: 1px solid rgba(212, 180, 131, 0.2);
}

.zt-footer-bottom a {
    color: var(--zt-tan);
    text-decoration: none;
    transition: color 0.2s;
}

.zt-footer-bottom a:hover {
    color: var(--zt-gold);
}

/* ========== Footer 响应式 ========== */
@media (max-width: 1024px) {
    .zt-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .zt-footer-grid {
        grid-template-columns: 1fr;
    }
}