/* ============================================================
 * 梧桐树芯样式 (wutong.css)
 * 说明: 梧桐树芯页面（WutongPage）的特定样式
 * 路由: /wutong
 * ============================================================ */

/* 手写字体 */
.font-script {
    font-family: "Ma Shan Zheng", "Noto Serif SC", cursive;
}

/* 导航栏只显示图标 - wutong页面专用 */
header.wutong-nav-icon-only nav > a:first-child {
    display: none !important;
}

header.wutong-nav-icon-only .hidden.md\:flex {
    display: none !important;
}

header.wutong-nav-icon-only button.md\:hidden {
    display: flex !important;
}

/* 下拉菜单：电脑端也保持显示，且用block布局保证两列等宽 */
header.wutong-nav-icon-only div.mt-2.md\:hidden {
    display: block !important;
}

header.wutong-nav-icon-only nav {
    max-width: 4rem !important;
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* 页面背景 - 使用樱花页面的背景图 */
.wutong-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    /* 抵消main的顶部padding，让背景图从导航栏下面开始 */
    margin-top: -5rem;
    /* 负margin-bottom让背景图向下延伸填满底部空白，不增加占位高度 */
    margin-bottom: -5rem;
    /* 电脑端：显示banner图，全部显示 */
    background: linear-gradient(rgba(255,240,245,0.15), rgba(255,228,235,0.2)), url('../../js/pages/login/sakura/bg-banner.webp') center/cover no-repeat fixed;
}

/* 电脑端：抵消更多padding */
@media (min-width: 768px) {
    .wutong-page {
        margin-top: -6rem;
        margin-bottom: -6rem;
        min-height: 100vh;
    }
}

/* 手机端：显示樱花夜景图，只显示上面一部分 */
@media (max-width: 768px) {
    .wutong-page {
        background: linear-gradient(rgba(255,240,245,0.1), rgba(255,228,235,0.15)), url('../../js/pages/login/sakura/bg-mobile.webp') center top/cover no-repeat fixed;
    }
}

/* 粉色系 */
.bg-pink-200\/30 {
    background-color: rgba(251, 207, 232, 0.3);
}

.bg-rose-200\/30 {
    background-color: rgba(254, 205, 211, 0.3);
}

/* 模糊效果 */
.blur-3xl {
    filter: blur(64px);
}

/* 动画 */
.animate-spin {
    animation: spin 1s linear infinite;
}

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