/*
--------------------------------------------------------------------------------
SPARKLE TREE STUDIO — SITE THEME
From the Stitch design "Sparkle Tree Studio - Enchanted Learning & Creation Hub"
(project "Sparkle Tree Creation Studio"). Loaded after style.css on every page
except the Creation Kit (which has its own css/creation-kit.css in the same
visual language).

1. Re-points the shared design tokens, which style.css and the pages' inline
   styles read, at the midnight-violet / stardust-gold palette.
2. Styles the new site header, construction banner and footer (st-* classes).
3. Re-skins the shared page components: buttons, page headers, cards, forms,
   blog posts.
--------------------------------------------------------------------------------
*/

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../fonts/quicksand-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
    /* New palette */
    --st-void: #0c0817;
    --st-deep: #140a26;
    --st-bg: #190b30;
    --st-night: #1e1035;
    --st-surface: #2b1854;
    --st-card: #3b2a59;
    --st-border: #4e3b74;
    --st-text: #ecdcff;
    --st-muted: #c9b8e6;
    --st-gold: #fbbf24;
    --st-gold-deep: #f59e0b;
    --st-mint: #34d399;
    --st-mint-deep: #10b981;
    --st-pink: #f472b6;
    --st-sky: #38bdf8;
    --st-heading: 'Quicksand', 'Fredoka', system-ui, sans-serif;
    --st-body: 'Outfit', system-ui, sans-serif;
    --st-radius: 1rem;
    --st-lift: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(12, 8, 23, 0.45);
    --st-glow: 0 0 16px rgba(251, 191, 36, 0.35);
    --st-wrap: 1280px;

    /* Legacy tokens, re-pointed so existing markup and inline styles follow the new look */
    --color-deep-nebula: var(--st-bg);
    --color-cosmic-purple: var(--st-pink);
    --color-stardust-gold: var(--st-gold);
    --color-magical-teal: var(--st-mint);
    --color-cloud-white: var(--st-text);
    --font-primary: var(--st-body);
    --font-playful: var(--st-heading);
    --shadow-glow-gold: var(--st-glow);
    --hero-scrim: linear-gradient(to bottom, rgba(12, 8, 23, 0.7), rgba(25, 11, 48, 0.92));
    --dream-scrim: var(--hero-scrim);
    --kit-scrim: var(--hero-scrim);
}

body {
    background-color: var(--st-bg);
    color: var(--st-text);
    font-family: var(--st-body);
}

h1, h2, h3, h4 { font-family: var(--st-heading); }

::selection { background: rgba(251, 191, 36, 0.35); color: #fff; }

:focus-visible {
    outline: 3px solid var(--st-gold);
    outline-offset: 2px;
}

.st-i {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
    flex: none;
    vertical-align: -0.15em;
}

/* ── 2a. Header ────────────────────────────────────────────────────────── */
.st-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(30, 16, 53, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(78, 59, 116, 0.5);
}

.st-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    min-height: 80px;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.st-brand-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.st-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.st-brand img {
    height: 32px;
    width: 128px;
    display: block;
}

.st-brand-name {
    font-family: var(--st-heading);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--st-gold);
    white-space: nowrap;
}

.st-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--st-surface);
    color: var(--st-sky);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.st-nav ul {
    list-style: none;
    margin: 0;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    background: rgba(34, 20, 57, 0.9);
}

.st-nav li { position: relative; }

.st-nav a {
    display: block;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    color: var(--st-muted);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.st-nav a:hover {
    color: var(--st-text);
    background: rgba(60, 46, 84, 0.9);
}

.st-nav a[aria-current="page"] {
    background: var(--st-gold);
    color: var(--st-night);
}

.st-nav-tag {
    position: absolute;
    right: -0.2rem;
    top: -0.45rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--st-mint-deep);
    color: #03261a;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}

.st-header-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.st-parent-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffe1a7;
    color: #402d00;
    text-decoration: none;
}

.st-parent-link:hover { box-shadow: var(--st-glow); }

.st-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--st-border);
    background: var(--st-surface);
    color: var(--st-text);
    cursor: pointer;
    place-items: center;
}

.st-banner {
    background: rgba(43, 24, 84, 0.95);
    color: var(--st-gold);
    text-align: center;
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(78, 59, 116, 0.5);
}

@media (max-width: 1240px) {
    .st-chip-wide { display: none; }
}

@media (max-width: 1060px) {
    .st-header-inner { padding: 0 1rem; min-height: 68px; }
    .st-menu-toggle { display: grid; }
    .st-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        padding: 0.75rem 1rem 1rem;
        background: rgba(30, 16, 53, 0.98);
        border-bottom: 1px solid var(--st-border);
    }
    .st-nav.is-open { display: block; }
    .st-nav ul {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--st-radius);
        padding: 0.5rem;
    }
    .st-nav a { padding: 0.8rem 1rem; font-size: 1rem; }
    .st-nav-tag { right: 0.75rem; top: 50%; transform: translateY(-50%); }
}

@media (max-width: 520px) {
    .st-brand-name { display: none; }
    .st-chip span { display: none; }
}

/* The old header's sticky offset no longer applies. */
.site { padding-top: 0 !important; }

/* ── 2b. Footer ────────────────────────────────────────────────────────── */
.st-footer {
    background: var(--st-bg);
    border-top: 1px solid rgba(78, 59, 116, 0.4);
    padding: 4rem 0 2rem;
    color: var(--st-muted);
}

.st-footer-inner {
    max-width: var(--st-wrap);
    margin: 0 auto;
    padding: 0 2rem;
}

.st-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
}

.st-footer-brand p {
    margin: 1.25rem 0 1.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 30rem;
}

.st-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.st-footer-badges span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: var(--st-surface);
    font-size: 0.82rem;
    font-weight: 700;
}

.st-footer-badges span:first-child { color: var(--st-mint); }
.st-footer-badges span:last-child { color: var(--st-sky); }

.st-footer h2 {
    margin: 0 0 1.1rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--st-text);
}

.st-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.st-footer a {
    color: var(--st-muted);
    text-decoration: none;
}

.st-footer a:hover { color: var(--st-gold); }

.st-footer-bottom {
    margin-top: 3rem;
    padding: 1.1rem 1.5rem;
    border-radius: var(--st-radius);
    background: rgba(20, 6, 43, 0.6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    font-size: 0.9rem;
}

.st-footer-bottom p { margin: 0; }

.st-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .st-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .st-footer-inner { padding: 0 1rem; }
    .st-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── 3. Shared components ──────────────────────────────────────────────── */
.btn {
    font-family: var(--st-body);
    font-weight: 700;
    border-radius: 999px;
    border: 0;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}

.btn:active { transform: scale(0.97); }

.btn-primary,
.btn-primary.btn-glow {
    background: var(--st-gold);
    color: var(--st-night);
    box-shadow: none;
}

.btn-primary:hover { background: #fcd34d; color: var(--st-night); box-shadow: 0 0 24px rgba(251, 191, 36, 0.4); }

.btn-secondary,
.btn-secondary.btn-teal-border {
    background: var(--st-surface);
    color: var(--st-text);
    border: 1px solid var(--st-border);
    box-shadow: none;
}

.btn-secondary:hover { border-color: var(--st-gold); color: var(--st-text); background: var(--st-card); }

.page-padding { padding-top: 4rem; padding-bottom: 5rem; }

.page-title,
.section-title {
    font-family: var(--st-heading);
    color: var(--st-text);
    letter-spacing: -0.01em;
}

.text-glow { text-shadow: none; }

.section-subtitle { color: var(--st-muted); }

.section-badge-tiny {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: var(--st-surface);
    border: 0;
    color: var(--st-gold);
    font-family: var(--st-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-badge-tiny.teal { color: var(--st-mint); }
.section-badge-tiny.purple { color: var(--st-sky); }

/* Cards used across Adventures, the Store, the Animated Series and About pages */
.story-card,
.video-card,
.store-card,
.about-section,
.contact-form-container,
.parent-zone {
    background: var(--st-night);
    border: 1px solid rgba(78, 59, 116, 0.6);
    border-radius: var(--st-radius);
    box-shadow: var(--st-lift);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.story-card:hover,
.video-card:hover,
.store-card:hover {
    transform: translateY(-4px);
    border-color: var(--st-gold);
    box-shadow: var(--st-lift), var(--st-glow);
}

.card-title,
.card-title a,
.store-card h3,
.video-card h3,
.about-section h2 {
    font-family: var(--st-heading);
    color: var(--st-text);
}

.card-excerpt,
.store-card-desc,
.about-section p { color: var(--st-muted); }

.post-date {
    color: var(--st-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.store-card-price { color: var(--st-gold); font-family: var(--st-heading); }

.about-section-highlight {
    border-left-color: var(--st-gold);
    color: var(--st-gold);
}

/* Forms */
.form-group label { color: var(--st-text); font-weight: 600; }

.form-group input,
.form-group textarea,
.form-group select {
    background: var(--st-deep);
    border: 1px solid var(--st-border);
    border-radius: 0.75rem;
    color: var(--st-text);
    font-family: var(--st-body);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--st-gold);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
    outline: none;
}

/* Blog posts */
.back-link { color: var(--st-gold); font-weight: 600; }

.blog-post-hero {
    border-radius: 1.5rem;
    border: 1px solid rgba(78, 59, 116, 0.6);
}

.blog-post-hero .overlay {
    background: linear-gradient(to top, rgba(12, 8, 23, 0.95) 10%, rgba(12, 8, 23, 0.2));
}

.blog-post-hero h1 { font-family: var(--st-heading); }

.blog-post-body {
    background: var(--st-night);
    border: 1px solid rgba(78, 59, 116, 0.5);
    border-radius: 1.5rem;
    color: var(--st-text);
}

.blog-post-body h2,
.blog-post-body h3 { font-family: var(--st-heading); color: var(--st-gold); }

.blog-post-body a { color: var(--st-gold); }
.blog-post-body blockquote { border-left-color: var(--st-pink); }

/* ── Legal pages (privacy, terms, cookies) ─────────────────────────────── */
body.st-legal main .wrap { max-width: 760px; }
body.st-legal h1,
body.st-legal h2,
body.st-legal h3 { font-family: var(--st-heading); }

/* Parent Dashboard: the old white panels become dark cards. */
.parent-zone h2 { color: var(--st-text); }
.parent-zone p { color: var(--st-muted); }
.parent-zone li { color: var(--st-text); border-bottom-color: rgba(78, 59, 116, 0.6); }

.st-footer-bottom a { color: var(--st-muted); text-decoration: underline; }