/* Shared Clay UI skin for static public pages. */
:root {
    --clay-bg-1: #fff7e9;
    --clay-bg-2: #ffeef7;
    --clay-bg-3: #edf7ff;
    --clay-surface: #fffdf8;
    --clay-line: #f2d8ba;
    --clay-ink: #32233a;
    --clay-muted: #6f6178;
    --clay-pink: #ff5c9f;
    --clay-pink-dark: #d62972;
    --clay-purple: #7c5cff;
    --clay-gold: #ffd66b;
    --clay-sky: #9fd7ff;
    --clay-green: #26a96c;
    --clay-press: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 214, 107, 0.36), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(159, 215, 255, 0.42), transparent 30%),
        linear-gradient(135deg, var(--clay-bg-1) 0%, var(--clay-bg-2) 52%, var(--clay-bg-3) 100%) !important;
    color: var(--clay-ink) !important;
}

body.site-home {
    --clay-bg-1: #fff8df;
    --clay-bg-2: #fff0d9;
    --clay-bg-3: #eef8ff;
    --clay-line: #f1d29b;
    --clay-pink: #ff9f43;
    --clay-pink-dark: #d87400;
    --clay-purple: #ff6f91;
    --clay-gold: #ffd66b;
    --clay-sky: #9fd7ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 214, 107, 0.45), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(255, 159, 67, 0.26), transparent 30%),
        linear-gradient(135deg, var(--clay-bg-1) 0%, var(--clay-bg-2) 52%, var(--clay-bg-3) 100%) !important;
}

body.site-download {
    --clay-bg-1: #eef8ff;
    --clay-bg-2: #e9f5ff;
    --clay-bg-3: #f5fbf2;
    --clay-line: #b8dffc;
    --clay-pink: #2f80ed;
    --clay-pink-dark: #1f5fb8;
    --clay-purple: #4f8cff;
    --clay-gold: #7bd6ff;
    --clay-sky: #9fd7ff;
    background:
        radial-gradient(circle at 12% 8%, rgba(47, 128, 237, 0.22), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(123, 214, 255, 0.44), transparent 30%),
        linear-gradient(135deg, var(--clay-bg-1) 0%, var(--clay-bg-2) 52%, var(--clay-bg-3) 100%) !important;
}

body.site-guide {
    --clay-bg-1: #f1fff7;
    --clay-bg-2: #e9fff4;
    --clay-bg-3: #fff8df;
    --clay-line: #bfe8cf;
    --clay-pink: #26a96c;
    --clay-pink-dark: #177647;
    --clay-purple: #5f8f64;
    --clay-gold: #ffd66b;
    --clay-sky: #b7ead0;
    background:
        radial-gradient(circle at 12% 8%, rgba(38, 169, 108, 0.24), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(255, 214, 107, 0.28), transparent 30%),
        linear-gradient(135deg, var(--clay-bg-1) 0%, var(--clay-bg-2) 52%, var(--clay-bg-3) 100%) !important;
}

body.site-download .download-btn {
    box-shadow: 0 8px 0 #1f5fb8, 0 16px 30px rgba(47, 128, 237, 0.24) !important;
}

body.site-guide .mob-menu-btn,
body.site-guide .latest-entry {
    box-shadow: 0 8px 0 #177647, 0 16px 30px rgba(38, 169, 108, 0.24) !important;
}

a:focus-visible,
button:focus-visible {
    outline: 4px solid rgba(124, 92, 255, 0.35);
    outline-offset: 3px;
}

.top-nav,
.sidebar,
.card,
.petgarden-card,
.tool-card,
.steps,
.page-hero,
.chapter,
.feature-img,
.img-wrap img {
    background: var(--clay-surface) !important;
    border: 3px solid var(--clay-line) !important;
    border-radius: 28px !important;
    box-shadow: 0 10px 0 rgba(240, 214, 181, 0.74), 0 20px 42px rgba(50, 35, 58, 0.12) !important;
}

.top-nav {
    top: 12px !important;
    left: 16px;
    right: 16px;
    width: auto;
    border-radius: 999px !important;
}

.top-nav-logo,
.nav-logo,
.sb-logo-title,
.eyebrow,
.hero-badge,
.toc-chip {
    color: var(--clay-pink-dark) !important;
    font-weight: 900 !important;
}

h1,
.app-title,
.section-title,
.page-hero-title,
.ch-title {
    color: var(--clay-ink) !important;
    font-weight: 900 !important;
}

.subtitle,
.app-desc,
.page-hero-desc,
.step-desc,
.ch-subtitle {
    color: var(--clay-muted) !important;
}

.latest-entry,
.download-btn,
.mob-menu-btn {
    min-height: 48px;
    border: 3px solid #fff !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--clay-pink), #ff8dbb) !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 0 var(--clay-pink-dark), 0 16px 30px rgba(255, 92, 159, 0.28) !important;
    transition: transform 0.2s var(--clay-press), box-shadow 0.2s var(--clay-press) !important;
}

.latest-entry:hover,
.download-btn:hover,
.mob-menu-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 11px 0 var(--clay-pink-dark), 0 20px 34px rgba(255, 92, 159, 0.3) !important;
}

.top-nav-back,
.toc-chip,
.step-tag,
.sb-item {
    border: 2px solid var(--clay-line) !important;
    border-radius: 999px !important;
    background: #fffdf8 !important;
    box-shadow: 0 4px 0 rgba(240, 214, 181, 0.58);
    transition: transform 0.2s var(--clay-press), box-shadow 0.2s var(--clay-press), background 0.2s;
}

.top-nav-back:hover,
.toc-chip:hover,
.sb-item:hover,
.sb-item.active {
    transform: translateY(-2px);
    background: #fff1f6 !important;
    color: var(--clay-pink-dark) !important;
}

.pet-cta {
    border: 3px solid #fff !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg, #fff7d7, #fff1f6) !important;
    box-shadow: 0 8px 0 rgba(240, 214, 181, 0.72), 0 16px 28px rgba(255, 92, 159, 0.12) !important;
    color: var(--clay-pink-dark) !important;
}

.pet-box,
.step,
.tip,
.tool-pill,
.feature-pill {
    border: 2px solid var(--clay-line) !important;
    border-radius: 22px !important;
    background: rgba(255, 253, 248, 0.88) !important;
}

.step-num,
.ch-num,
.sb-num {
    background: linear-gradient(135deg, var(--clay-pink), #ff8dbb) !important;
    color: #fff !important;
    border: 3px solid #fff;
    box-shadow: 0 5px 0 var(--clay-pink-dark);
    font-weight: 900 !important;
}

.tip {
    border-left: 6px solid var(--clay-gold) !important;
    color: #8a5a00 !important;
}

.tip-success {
    border-left-color: var(--clay-green) !important;
    color: #176b43 !important;
}

.sidebar {
    left: 12px !important;
    top: 12px !important;
    bottom: 12px !important;
    overflow: hidden auto;
}

.main {
    padding-top: 32px !important;
}

.img-wrap img {
    border-radius: 18px !important;
}

footer {
    background: rgba(255, 253, 248, 0.86) !important;
    border-top: 3px solid var(--clay-line) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 860px) {
    .top-nav {
        top: 8px !important;
        left: 8px;
        right: 8px;
    }

    .sidebar {
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        border-radius: 0 24px 24px 0 !important;
    }

    .main {
        padding-top: 24px !important;
    }
}