/* [file: wp-content/themes/storytheme/assets/css/theme.css] */

/**
 * Storytheme design tokens + base layout
 * Standalone bedtime world — no Storefront, no Customizer.
 */

:root {
    --gng-bg:        #0f1226;
    --gng-bg-deep:   #0a0c1c;
    --gng-bg-glow:   rgba(244, 201, 122, 0.06);

    --gng-card:        #161a35;
    --gng-card-hover:  #1c2142;

    --gng-border:        rgba(255, 255, 255, 0.08);
    --gng-border-hover:  rgba(244, 201, 122, 0.40);

    --gng-text:        #e8eaf2;
    --gng-text-muted:  #9aa0c0;
    --gng-text-dim:    #7b8198;

    --gng-accent:        #f4c97a;
    --gng-accent-hover:  #e8b85f;
    --gng-accent-soft:   rgba(244, 201, 122, 0.14);

    --gng-success:       #8fb89a;

    --gng-lavender:        #b9a7e8;
    --gng-lavender-deep:   #6f5bb5;
    --gng-lavender-soft:   #ece6fa;
    --gng-cloud:           #f7f5ff;
    --gng-cloud-card:      #ffffff;
    --gng-ink:             #2b2545;
    --gng-ink-muted:       #6a6488;

    --gng-radius:        14px;
    --gng-radius-lg:     18px;
    --gng-radius-pill:   999px;
    --gng-shadow:        0 6px 20px rgba(5, 6, 15, 0.45);
    --gng-shadow-soft:   0 3px 12px rgba(5, 6, 15, 0.35);
    --gng-shadow-hover:  0 10px 28px rgba(5, 6, 15, 0.5);
    --gng-section-gap:   clamp(48px, 8vw, 80px);
    --gng-container:     1200px;

    --gng-font-title:  "Quicksand", "Open Sans", sans-serif;
    --gng-font-body:   "Open Sans", Helvetica, Arial, sans-serif;

    --storybot-grid-bg-primary:     var(--gng-bg);
    --storybot-grid-bg-secondary:   var(--gng-bg-deep);
    --storybot-grid-bg-tertiary:    var(--gng-card);
    --storybot-grid-bg-card:        var(--gng-card);
    --storybot-grid-bg-hover:       var(--gng-card-hover);
    --storybot-grid-text-primary:   var(--gng-text);
    --storybot-grid-text-secondary: var(--gng-text);
    --storybot-grid-text-muted:     var(--gng-text-muted);
    --storybot-grid-border-primary: var(--gng-border);
    --storybot-grid-border-hover:   var(--gng-border-hover);
    --storybot-grid-shadow-light:   rgba(5, 6, 15, 0.35);
    --storybot-grid-shadow-glow:    rgba(244, 201, 122, 0.16);
}

.storybot-theme-light {
    --gng-bg:        #f6f3ec;
    --gng-bg-deep:   #efeae0;
    --gng-bg-glow:   rgba(244, 201, 122, 0.10);
    --gng-card:        #ffffff;
    --gng-card-hover:  #fbf7ee;
    --gng-border:        rgba(60, 50, 30, 0.10);
    --gng-border-hover:  rgba(212, 160, 60, 0.55);
    --gng-text:        #2f2a22;
    --gng-text-muted:  #6b6557;
    --gng-text-dim:    #8a8475;
    --gng-accent:        #c9952f;
    --gng-accent-hover:  #b58326;
    --gng-accent-soft:   rgba(201, 149, 47, 0.12);
    --gng-success:       #5e8f6e;
    --gng-shadow:        0 6px 20px rgba(60, 50, 30, 0.12);
    --gng-shadow-soft:   0 3px 12px rgba(60, 50, 30, 0.10);
    --gng-shadow-hover:  0 10px 28px rgba(60, 50, 30, 0.18);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--gng-bg);
    background-image:
        radial-gradient(1100px 560px at 50% -8%, var(--gng-bg-glow), transparent 70%),
        linear-gradient(180deg, var(--gng-bg) 0%, var(--gng-bg-deep) 100%);
    color: var(--gng-text);
    font-family: var(--gng-font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--gng-accent);
    text-decoration: none;
}

a:hover {
    color: var(--gng-accent-hover);
}

h1, h2, h3, h4 {
    font-family: var(--gng-font-title);
    color: var(--gng-text);
    font-weight: 700;
    line-height: 1.25;
}

figure {
    margin: 0;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
    width: 100%;
}

.gng-wrap {
    max-width: var(--gng-container);
    margin: 0 auto;
    padding: 32px 20px 64px;
}

.gng-home {
    width: 100%;
}

.gng-section {
    max-width: var(--gng-container);
    margin: 0 auto;
    padding-block: var(--gng-section-gap);
    padding-inline: 20px;
}

.gng-section-title {
    font-family: var(--gng-font-title);
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--gng-text);
    text-align: center;
    margin: 0 0 0.4em;
}

.gng-section-intro {
    text-align: center;
    color: var(--gng-text-muted);
    max-width: 640px;
    margin: 0 auto clamp(24px, 4vw, 40px);
    font-size: 1.05rem;
}

/* Full-width bands: 100% of the page, never 100vw (avoids scrollbar overflow) */
.gng-bleed {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.gng-section--light {
    background: var(--gng-cloud);
    color: var(--gng-ink);
}

.gng-section--light .gng-section-title,
.gng-section--light h2,
.gng-section--light h3 {
    color: var(--gng-ink);
}

.gng-section--light .gng-section-intro,
.gng-section--light p {
    color: var(--gng-ink-muted);
}

.gng-cloud-divider {
    height: clamp(70px, 12vw, 140px);
    background-image: url('../img/divider-clouds.png');
    background-size: auto 200%;
    background-position: center bottom;
    background-repeat: repeat-x;
    pointer-events: none;
}

.gng-cloud-divider--flip {
    transform: scaleY(-1);
}

/* Buttons — moon-gold, high specificity so nothing else can recolor them */
html body a.gng-btn,
html body button.gng-btn,
html body .gng-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 26px;
    border-radius: var(--gng-radius-pill);
    font-family: var(--gng-font-title);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: var(--gng-shadow-soft);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

html body a.gng-btn:hover,
html body button.gng-btn:hover,
html body .gng-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

html body a.gng-btn--primary,
html body button.gng-btn--primary,
html body .gng-btn--primary {
    background: var(--gng-accent);
    color: #2a2410;
}

html body a.gng-btn--primary:hover,
html body button.gng-btn--primary:hover {
    background: var(--gng-accent-hover);
    color: #2a2410;
    box-shadow: var(--gng-shadow-hover);
}

html body a.gng-btn--secondary,
html body .gng-btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--gng-text);
    border: 1px solid var(--gng-border);
}

html body a.gng-btn--ghost,
html body .gng-btn--ghost {
    background: rgba(15, 18, 38, 0.35);
    color: var(--gng-text);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}

html body a.gng-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--gng-accent);
    color: var(--gng-accent);
}

.gng-howitworks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 8px;
}

.gng-howitworks-step {
    background: var(--gng-card);
    border: 1px solid var(--gng-border);
    border-radius: var(--gng-radius-lg);
    padding: 30px 24px;
    text-align: center;
    box-shadow: var(--gng-shadow-soft);
}

.gng-howitworks-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    color: #2a2410;
    background: var(--gng-accent);
}

.gng-howitworks-step h3 {
    font-family: var(--gng-font-title);
    font-size: 1.25rem;
    margin: 0 0 8px;
    color: var(--gng-text);
}

.gng-howitworks-step p {
    margin: 0;
    color: var(--gng-text-muted);
}

/* Footer */
.gng-site-footer {
    background: var(--gng-bg-deep);
    border-top: 1px solid var(--gng-border);
    padding: 32px 20px;
    text-align: center;
    color: var(--gng-text-muted);
    font-size: 0.9rem;
}

.gng-site-footer .flag-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

.gng-site-footer .flag-link img {
    height: 28px;
    width: auto;
}

@media (max-width: 768px) {
    .gng-howitworks {
        grid-template-columns: 1fr;
    }
}

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