/*
 * 页脚：粘底 + 「支持正版 · 官方商店」
 * 模板 template-parts/global/footer-stores.php，在 footer.php 的 .footer-copyright 里输出。
 */

/* 粘底：内容不足一屏时页脚贴住视口底边，内容长时照常跟在正文后面。
   #app.site 包着顶栏、hero、分类条、main 和 footer；顶栏本身是 absolute/fixed，不受影响。
   最小高度扣掉登录用户的 WP 管理条，免得短页面多出一截滚动；dvh 让手机地址栏收放时不多滚。 */
.site {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.site > * { flex-shrink: 0; }
.site > .site-content { flex: 1 0 auto; }
/* app.css 在 ≤1024px 给 body 留了 60px 底边（让出手机底栏 .m-menubar），这里一起扣掉 */
@media (max-width: 1024px) {
    .site {
        min-height: calc(100vh - 60px - var(--wp-admin--admin-bar--height, 0px));
        min-height: calc(100dvh - 60px - var(--wp-admin--admin-bar--height, 0px));
    }
}

/* 商店入口：无边框，石墨渐变图标 + 字标，细竖线分隔；悬停换品牌色并带一层柔光 */
.xy-stores { margin-bottom: 16px; }
.xy-stores-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.xy-stores-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: 3px;
    color: #a3aab3;
}
.xy-stores-title::before,
.xy-stores-title::after {
    content: "";
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #dde2e7);
}
.xy-stores-title::after { transform: scaleX(-1); }

.xy-stores-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.xy-stores-list li { position: relative; display: flex; align-items: center; padding: 0 22px; }
.xy-stores-list li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: #e3e7eb;
}
.site-footer .xy-store {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1;
    text-decoration: none;
}
.xy-store svg { flex: none; width: 20px; height: 20px; transition: transform .3s, filter .3s; }
.xy-store path { fill: url(#xy-store-metal) #6f7781; transition: fill .2s; }
.xy-store span {
    color: #6f7781;
    background: linear-gradient(180deg, #9aa1aa, #5f6670);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.xy-store:hover path,
.xy-store:focus-visible path { fill: var(--c); }
.xy-store:hover span,
.xy-store:focus-visible span { -webkit-text-fill-color: var(--c); }
.xy-store:hover svg,
.xy-store:focus-visible svg {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--c) 45%, transparent));
}

/* 手机只留图标 */
@media (max-width: 575.98px) {
    .xy-stores-list li { padding: 0 14px; }
    .xy-store svg { width: 22px; height: 22px; }
    .xy-store span { display: none; }
}

/* 暗色 */
.dark-open .xy-stores-title { color: #7d8698; }
.dark-open .xy-stores-title::before,
.dark-open .xy-stores-title::after { background: linear-gradient(90deg, transparent, #3a4358); }
.dark-open .xy-stores-list li + li::before { background: #3a4358; }
.dark-open #xy-store-metal stop:first-child { stop-color: #c9cfd9; }
.dark-open #xy-store-metal stop:last-child { stop-color: #7c8597; }
.dark-open .xy-store span { background-image: linear-gradient(180deg, #c9cfd9, #7c8597); }
.dark-open .xy-store:hover path,
.dark-open .xy-store:focus-visible path { fill: var(--cd); }
.dark-open .xy-store:hover span,
.dark-open .xy-store:focus-visible span { -webkit-text-fill-color: var(--cd); }
.dark-open .xy-store:hover svg,
.dark-open .xy-store:focus-visible svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cd) 55%, transparent)); }

/* 星穹铁道装扮：深蓝玻璃底；装扮对 .site-footer a/p 写了 !important 文字色，字标靠 text-fill-color 不受它影响 */
body.xy-space-site.xy-space-starrail .xy-stores-title { color: #b3c7e1 !important; }
body.xy-space-site.xy-space-starrail .xy-stores-title::before,
body.xy-space-site.xy-space-starrail .xy-stores-title::after { background: linear-gradient(90deg, transparent, #b3c7e170); }
body.xy-space-site.xy-space-starrail .xy-stores-list li + li::before { background: #b3c7e140; }
body.xy-space-site.xy-space-starrail #xy-store-metal stop:first-child { stop-color: #f2f6fc; }
body.xy-space-site.xy-space-starrail #xy-store-metal stop:last-child { stop-color: #9fb3cf; }
body.xy-space-site.xy-space-starrail .xy-store span { background-image: linear-gradient(180deg, #f2f6fc, #9fb3cf); }
body.xy-space-site.xy-space-starrail .xy-store:hover path,
body.xy-space-site.xy-space-starrail .xy-store:focus-visible path { fill: var(--cd); }
body.xy-space-site.xy-space-starrail .xy-store:hover span,
body.xy-space-site.xy-space-starrail .xy-store:focus-visible span { -webkit-text-fill-color: var(--cd); }
body.xy-space-site.xy-space-starrail .xy-store:hover svg,
body.xy-space-site.xy-space-starrail .xy-store:focus-visible svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cd) 60%, transparent)); }