/* --- 玄易万年历 · 国风道韵样式 --- */

/* :root 定义全局颜色变量，方便统一管理 */
:root {
    --color-background: #fdfbf5; /* 宣纸白 */
    --color-text: #2c2c2c;       /* 墨色 */
    --color-primary-text: #3a3a3a;
    --color-title: #4a5c6a;      /* 青石灰 */
    --color-border: #e0d9c8;     /* 雅致边框 */
    --color-highlight: #c93756;  /* 印章朱砂红 */
    --color-yi: #2e8b57;         /* 吉祥森绿 */
    --color-ji: #ab2f2f;         /* 禁忌暗红 */
    --color-week: #ab2f2f;         /* 禁忌暗红 */
    --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
}

/* 全局样式 - 道法自然 */
body {
    font-family: var(--font-serif);
    background-color: #e8e2d6; /* 稍深的底色，衬托画卷 */
    background-image: url('../images/background.jpg'); /* 确保你有一张水墨背景图 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: overlay;
    color: var(--color-primary-text);
    margin: 0;
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    box-sizing: border-box;
}

/* 主容器 - 如同展开的画卷 */
.container {
    max-width: 900px;
    width: 100%;
    background-color: rgba(253, 251, 245, 0.85); /* 半透明宣纸效果 */
    backdrop-filter: blur(8px); /* 毛玻璃效果，现代感与古典结合 */
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 30px 40px;
}

/* 标题 - 笔锋有力 */
header h1 {
    font-size: 2.8em;
    font-weight: 700;
    color: var(--color-title);
    text-align: center;
    letter-spacing: 0.3em;
    margin: 0 0 30px 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.05);
}

/* 日期选择器 - 择日问天 (优化后) */
.date-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 元素之间的间距 */
    flex-wrap: wrap; /* 允许元素在空间不足时换行 */
    margin-bottom: 35px;
}
.date-selector form {
    display: flex;
    align-items: center;
    gap: 10px; /* 内部元素间距 */
    margin: 0;
}
.date-selector input[type="date"] {
    font-family: var(--font-serif);
    font-size: 1em;
    padding: 10px 15px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: #fff;
    color: var(--color-text);
}
.date-selector button {
    font-family: var(--font-serif);
    font-size: 1.1em;
    padding: 10px 25px;
    border: 1px solid var(--color-title);
    background-color: var(--color-title);
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    letter-spacing: 0.1em; /* 增加按钮文字间距，更大气 */
}
.date-selector button:hover {
    background-color: #3c4a56;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 前后一天及月历导航按钮的样式 */
.nav-button {
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--font-serif);
    font-size: 1.1em;
    color: var(--color-title);
    background-color: transparent;
    border: 1px solid var(--color-title);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap; /* 防止文字换行 */
}
.nav-button:hover {
    background-color: var(--color-title);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


/* 主内容区 - 网格布局，井然有序 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* 信息卡片 */
.info-card {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 20px 25px;
    border: 1px solid #e9e3d6;
    border-radius: 4px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.07);
}
.info-card h2 {
    font-size: 1.5em;
    color: var(--color-title);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
    flex-shrink: 0; /* 防止标题被压缩 */
}
.info-card p {
    margin: 5px 0;
    line-height: 1.9;
    font-size: 1.05em;
}

/* 跨栏卡片 */
.wide-card {
    grid-column: 1 / -1;
}

/* 节气卡片 - 特殊高亮 */
.jieqi-card {
    grid-column: 1 / -1;
    text-align: center;
    background: linear-gradient(135deg, #e3f2fd, #f1f8e9);
    border-color: #c8e6c9;
}
.highlight-jieqi {
    font-size: 1.2em;
    font-weight: 700;
    color: #0d47a1;
}

/* 黄历宜忌 - 视觉核心 */
.huangli-container {
    display: flex;
    gap: 30px;
}
.huangli-item {
    flex: 1;
    display: flex;
    align-items: flex-start;
}
.huangli-item .label {
    font-size: 3.5em;
    font-weight: 700;
    line-height: 1.2;
    margin-right: 20px;
}
.label-yi { color: var(--color-yi); }
.label-ji { color: var(--color-ji); }
.huangli-item .content {
    font-size: 1.1em;
    line-height: 2;
    word-break: break-word;
}

/* 每日指南 - 更清晰的栅格 */
.guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 20px;
}

/* 各种高亮样式 */
.highlight-date {
    color: var(--color-text);
    font-size: 1.1em;
}
.highlight-god {
    color: var(--color-highlight);
    font-weight: 600;
}
.highlight-buddha {
    color: #f57c00; /* 温暖的橙色/金色 */
    font-weight: 600;
}

/* 修正：为吉凶颜色添加 !important 以确保其拥有最高优先级 */
.highlight-good, .luck-good {
    color: var(--color-yi) !important; /* 强制使用绿色 */
    font-weight: 600;
}
.luck-bad {
    color: var(--color-ji) !important; /* 强制使用红色 */
    font-weight: 600;
}


/* 页脚 - 结尾点睛 */
footer {
    text-align: center;
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    color: #888;
    font-size: 0.9em;
    letter-spacing: 0.1em;
}


/* 美化农历详情卡片 */
.lunar-details {
    display: flex;
    flex-direction: column;
    align-items: center; /* 居中对齐 */
    text-align: center;
    flex-grow: 1; /* 填充卡片剩余空间 */
    justify-content: center; /* 垂直居中 */
}

.lunar-main-date {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
    width: 80%;
}

.lunar-main-date .year {
    display: block;
    font-size: 1.2em;
    color: var(--color-text);
    margin-bottom: 5px;
}

.lunar-main-date .month-day {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--color-highlight);
    letter-spacing: 0.1em;
}

.lunar-main-date .week {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--color-week);
    letter-spacing: 0.1em;
}

.lunar-extra-info {
    line-height: 2;
}

.lunar-extra-info p {
    margin: 5px 0;
    font-size: 1.1em;
}

/* 美化日期选择器中的星期显示，使用主题高亮色 */
.date-selector .week {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-highlight); /* 修改为醒目的朱砂红 */
    white-space: nowrap;
    margin: 0 -5px 0 0;
}

/* 月相卡片专用样式 */
.yuexiang-card-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* 关键：让这个容器填满卡片除了标题外的所有剩余空间 */
    font-size: 3em;
    font-weight: 700;
    color: var(--color-highlight);
    text-align: center;
}


/* 响应式设计 - 适配移动端 */
@media (max-width: 768px) {
    body { padding: 15px 10px; }
    .container { padding: 20px; }
    .calendar-grid, .guide-grid { grid-template-columns: 1fr; }
    header h1 { font-size: 2.2em; }
    .huangli-container { flex-direction: column; }
    .huangli-item { margin-bottom: 15px; }

    /* 日期选择器在移动端保持flex布局，利用wrap换行 */
    .date-selector input[type="date"] {
        /* 让日期选择框在需要时可以占据整行 */
        width: calc(100% - 30px); 
        margin: 5px 0;
    }

    .date-selector form {
        flex-wrap: wrap; /* 允许表单内元素也换行 */
        justify-content: center;
    }
}