/* China (zh-CN) site overrides for hithere.life — Spotted gold theme, no i18n */

body.cn-site {
    --spotted-accent: #d4ab20;
    --spotted-accent-dark: #b89218;
    --spotted-accent-surface: #f7f0d8;
    --spotted-black: #000000;
    --spotted-border: #e5e5ea;
}

body.cn-site .navbar {
    border-bottom: 2px solid var(--spotted-accent-surface);
}

body.cn-site .nav-brand,
body.cn-site .nav-brand:hover {
    color: var(--spotted-black);
}

body.cn-site .nav-links a:hover,
body.cn-site .nav-links a.active {
    color: var(--spotted-accent-dark);
}

body.cn-site .nav-menu-btn {
    background: linear-gradient(180deg, #fffef8 0%, #fff 100%);
}

body.cn-site .nav-menu-btn:hover {
    border-color: var(--spotted-accent);
}

body.cn-site .nav-menu-btn:focus-visible {
    outline: 2px solid var(--spotted-accent);
}

body.cn-site .nav-menu-icon span {
    background: linear-gradient(90deg, var(--spotted-accent), var(--spotted-accent-dark));
}

body.cn-site .nav-menu-panel a:hover,
body.cn-site .nav-menu-panel a:focus-visible,
body.cn-site .nav-menu-panel a.active {
    background: var(--spotted-accent-surface);
    color: var(--spotted-black);
}

body.cn-site .nav-menu-panel a.active {
    color: var(--spotted-accent-dark);
}

body.cn-site .hero,
body.cn-site .studio-hero {
    background: linear-gradient(135deg, #fffef8 0%, #f7f0d8 55%, #fff 100%);
    color: var(--spotted-black);
}

body.cn-site .hero h1,
body.cn-site .studio-hero h1 {
    color: var(--spotted-black);
}

body.cn-site .hero-subtitle {
    color: #444;
}

body.cn-site .studio-apps-section {
    background: linear-gradient(180deg, #fff 0%, #fffef8 40%, #f7f0d8 100%);
}

body.cn-site .studio-apps-section h2,
body.cn-site .cn-highlights h2,
body.cn-site .cn-cta-band h2,
body.cn-site .feature-card h3 {
    color: var(--spotted-accent-dark);
}

body.cn-site .feature-card {
    border-top-color: var(--spotted-accent);
}

body.cn-site .feature-card:hover {
    box-shadow: 0 8px 20px rgba(212, 171, 32, 0.25);
    border-color: var(--spotted-accent);
}

body.cn-site .feature-card::before {
    background: linear-gradient(90deg, var(--spotted-accent), var(--spotted-accent-dark));
}

body.cn-site footer a:hover {
    color: var(--spotted-accent-dark);
}

.cn-kicker {
    font-weight: 700;
    color: var(--spotted-accent-dark);
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}

.cn-hero .hero-subtitle {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.cn-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.cn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cn-btn:hover {
    transform: translateY(-1px);
}

.cn-btn-primary {
    background: #b89218;
    color: #fff;
    box-shadow: 0 8px 20px rgba(184, 146, 24, 0.32);
}

.cn-btn-primary:hover {
    background: #a07f14;
    color: #fff;
}

.cn-btn-secondary {
    background: #fff;
    color: #b89218;
    border: 1px solid rgba(212, 171, 32, 0.45);
}

.cn-featured-card {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Single product card: don't leave it stuck in the first of 3 grid columns */
body.cn-site .studio-app-cards {
    display: flex;
    justify-content: center;
    grid-template-columns: none;
}

.cn-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
}

.cn-card-tags li {
    font-size: 0.8rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #f7f0d8;
    color: #7a6410;
}

.cn-highlights {
    padding: 3rem 0 1rem;
}

.cn-cta-band {
    padding: 2.5rem 0 3.5rem;
}

.cn-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    margin-top: 1.25rem;
}

.cn-qr {
    border-radius: 12px;
    border: 1px solid #eee;
    background: #fff;
}

.cn-cta-note {
    margin-top: 0.75rem;
    color: #666;
    font-size: 0.95rem;
}

.cn-beian {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
}

.cn-beian a {
    color: #888;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cn-beian a:hover {
    color: #b89218;
}

.cn-beian-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

/* Details page (spotted/faxian themes): keep CTA readable like the landing page */
body.spotted-theme a.cn-btn-primary,
body.faxian-theme a.cn-btn-primary {
    background: #b89218;
    color: #fff;
}

body.spotted-theme a.cn-btn-primary:hover,
body.faxian-theme a.cn-btn-primary:hover {
    background: #a07f14;
    color: #fff;
}

/* Gold footer: ICP link must stay light, not accent-gold-on-gold */
body.spotted-theme .cn-beian,
body.spotted-theme .cn-beian a,
body.faxian-theme .cn-beian,
body.faxian-theme .cn-beian a {
    color: #fffef8;
}

body.spotted-theme .cn-beian a:hover,
body.faxian-theme .cn-beian a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Mobile app download block on 发现你啦 */
.faxian-download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.faxian-download-card {
    background: #fff;
    border: 1px solid rgba(212, 171, 32, 0.25);
    border-radius: 16px;
    padding: 1.1rem;
    text-align: center;
}

.faxian-download-card .store-badge {
    margin: 0 auto;
}

.faxian-download-card .store-qr {
    width: 120px;
    height: 120px;
    margin: 0.75rem auto 0.35rem;
    display: block;
}

.faxian-download-card .store-qr-caption {
    font-size: 0.85rem;
    color: #555;
}