/* =====================================================================
   ReadingNova – Rainbow theme (Phase 1: colours, header, mobile menu, footer)
   Loaded AFTER styles.css on every public page. styles.css is unchanged.
   New class names (rn-*) are used so old .navbar/.footer rules never interfere.
   ===================================================================== */

:root {
    /* VIBGYOR – one colour per section */
    --rn-violet: #A855F7;  --rn-violet-deep: #7E22CE;  --rn-violet-tint: #F3E8FF;
    --rn-indigo: #6366F1;  --rn-indigo-deep: #4338CA;  --rn-indigo-tint: #E0E7FF;
    --rn-blue:   #0EA5E9;  --rn-blue-deep:   #0369A1;  --rn-blue-tint:   #E0F2FE;
    --rn-green:  #22C55E;  --rn-green-deep:  #15803D;  --rn-green-tint:  #DCFCE7;
    --rn-yellow: #FACC15;  --rn-yellow-deep: #A16207;  --rn-yellow-tint: #FEF9C3;
    --rn-orange: #F97316;  --rn-orange-deep: #C2410C;  --rn-orange-tint: #FFEDD5;
    --rn-red:    #EF4444;  --rn-red-deep:    #B91C1C;  --rn-red-tint:    #FEE2E2;

    /* Neutrals */
    --rn-navy: #1E2A4A;
    --rn-body: #4B5568;
    --rn-muted: #6B7385;
    --rn-cloud: #F6F7FB;
    --rn-line: #E6E8F0;
    --rn-gold: #FFC928;

    --rn-font-head: 'Fredoka', 'Poppins', sans-serif;
    --rn-font-body: 'Poppins', sans-serif;

    /* Header height = bar + rainbow stripe (used to offset page content) */
    --rn-bar-h: 76px;
    --rn-stripe-h: 6px;
    --rn-h: calc(var(--rn-bar-h) + var(--rn-stripe-h));
}

@media (max-width: 1099px) {
    :root { --rn-bar-h: 60px; --rn-stripe-h: 5px; }
}

html { scroll-padding-top: calc(var(--rn-h) + 16px); }

/* ---------- Rainbow stripe (header + footer) ---------- */
.rn-rainbow {
    height: var(--rn-stripe-h);
    background: linear-gradient(90deg,
        var(--rn-violet) 0 14.28%, var(--rn-indigo) 14.28% 28.57%, var(--rn-blue) 28.57% 42.85%,
        var(--rn-green) 42.85% 57.14%, var(--rn-yellow) 57.14% 71.42%, var(--rn-orange) 71.42% 85.71%,
        var(--rn-red) 85.71% 100%);
}

/* ---------- Header ---------- */
.rn-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #FFFFFF;
    font-family: var(--rn-font-body);
    transition: box-shadow .2s ease;
}
.rn-header.is-scrolled { box-shadow: 0 6px 18px rgba(30, 42, 74, .10); }

.rn-header__bar {
    max-width: 1280px;
    height: var(--rn-bar-h);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.rn-logo { display: flex; align-items: center; flex-shrink: 0; border-radius: 12px; }
.rn-logo img { display: block; height: 60px; width: auto; }
/* Bigger logo (19 Oct): the picture file has empty space above and below the artwork,
   so it is drawn larger and the empty space is allowed to overlap the bar. Visible artwork ≈ 60px tall. */
.rn-header .rn-logo img { height: 93px; margin: -11px 0 -22px; }

.rn-nav { flex: 1 1 auto; min-width: 0; }
.rn-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.rn-nav__home { display: none; }
.rn-nav__contact { margin-left: auto; }

/* Each link carries its section colour */
.rn-link { --c: var(--rn-navy); --cd: var(--rn-navy); --ct: var(--rn-cloud); }
.rn-link[data-section="home"]            { --c: var(--rn-navy);   --cd: var(--rn-navy);        --ct: var(--rn-cloud); }
.rn-link[data-section="doodle"]          { --c: var(--rn-red);    --cd: var(--rn-red-deep);    --ct: var(--rn-red-tint); }
.rn-link[data-section="colouring-pages"] { --c: var(--rn-orange); --cd: var(--rn-orange-deep); --ct: var(--rn-orange-tint); }
.rn-link[data-section="colouring-books"] { --c: var(--rn-yellow); --cd: var(--rn-yellow-deep); --ct: var(--rn-yellow-tint); }
.rn-link[data-section="posters"]         { --c: var(--rn-green);  --cd: var(--rn-green-deep);  --ct: var(--rn-green-tint); }
.rn-link[data-section="worksheets"]      { --c: var(--rn-blue);   --cd: var(--rn-blue-deep);   --ct: var(--rn-blue-tint); }
.rn-link[data-section="storybooks"]      { --c: var(--rn-indigo); --cd: var(--rn-indigo-deep); --ct: var(--rn-indigo-tint); }
.rn-link[data-section="novalab"]         { --c: var(--rn-violet); --cd: var(--rn-violet-deep); --ct: var(--rn-violet-tint); }
.rn-link[data-section="rhymes"]          { --c: #EC4899;          --cd: #BE185D;               --ct: #FCE7F3; }

.rn-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    font-family: var(--rn-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--rn-navy);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.rn-link::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c);
    flex-shrink: 0;
}
.rn-link:hover { background: var(--ct); color: var(--cd); }
.rn-link.is-active { background: var(--ct); color: var(--cd); font-weight: 600; box-shadow: inset 0 -3px 0 var(--c); }
.rn-link:focus-visible, .rn-burger:focus-visible, .rn-logo:focus-visible,
.rn-footer a:focus-visible { outline: 3px solid var(--rn-indigo); outline-offset: 2px; }

.rn-link--contact {
    background: var(--rn-navy);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 0 18px;
    font-weight: 600;
}
.rn-link--contact::before { display: none; }
.rn-link--contact:hover { background: var(--rn-indigo-deep); color: #FFFFFF; }
.rn-link--contact.is-active { background: var(--rn-indigo-deep); color: #FFFFFF; box-shadow: none; }

/* Burger (phones + tablets) */
.rn-burger {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--rn-navy);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
}
.rn-burger span {
    display: block;
    width: 20px;
    height: 2.5px;
    border-radius: 2px;
    background: #FFFFFF;
    transition: transform .2s ease, opacity .2s ease;
}
.rn-header.is-open .rn-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.rn-header.is-open .rn-burger span:nth-child(2) { opacity: 0; }
.rn-header.is-open .rn-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1099px) {
    .rn-header__bar { padding: 0 16px; gap: 12px; }
    .rn-logo img { height: 46px; }
    .rn-header .rn-logo img { height: 71px; margin: -8px 0 -17px; } /* visible artwork ≈ 46px tall */
    .rn-burger { display: flex; }

    .rn-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #FFFFFF;
        box-shadow: 0 16px 30px rgba(30, 42, 74, .16);
        border-radius: 0 0 24px 24px;
        max-height: calc(100vh - var(--rn-h));
        max-height: calc(100dvh - var(--rn-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .rn-header.is-open .rn-nav { display: block; }
    .rn-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 14px 16px 18px;
        max-width: 560px;
        margin: 0 auto;
    }
    .rn-nav__home { display: block; }
    .rn-nav__contact { margin: 6px 0 0; }
    .rn-link {
        min-height: 52px;
        padding: 0 16px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 16px;
        background: var(--ct);
        color: var(--cd);
    }
    .rn-link::before { width: 14px; height: 14px; }
    .rn-link.is-active { box-shadow: inset 4px 0 0 var(--c); }
    .rn-link--contact { justify-content: center; background: var(--rn-navy); color: #FFFFFF; }
}

/* Hidden sections stay hidden (NovaLab, Rhymes) – same switch as before */
.rn-header .site-section--temp-hidden,
.rn-footer .site-section--temp-hidden { display: none !important; }

/* ---------- Offset page content for the new, slimmer fixed header ---------- */
/* Section pages previously used margin-top: 80px under a 103–123px header. */
.rn-header ~ .drawing-canvas-section,
.rn-header ~ .colouring-categories,
.rn-header ~ .story-categories,
.rn-header ~ .worksheet-categories,
.rn-header ~ .poster-categories { margin-top: var(--rn-h); }
.rn-header ~ .work-in-progress { margin-top: var(--rn-h) !important; }
.rn-header ~ .contact-description { margin-top: calc(var(--rn-h) + 24px) !important; } /* page sets 8rem inline */
/* Fix: contact intro line was set to nowrap, which cut it off on phones and pushed tablets sideways */
.rn-header ~ .contact-description p { white-space: normal !important; }
.rn-header ~ .interactive-lab-page { padding-top: calc(var(--rn-h) + 24px); }
@media (max-width: 1279px) {
    .rn-header ~ .hero { padding-top: calc(var(--rn-h) + 24px); }
}

/* ---------- Footer ---------- */
.rn-footer {
    background: var(--rn-navy);
    color: #D6DAE6;
    font-family: var(--rn-font-body);
}
.rn-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.rn-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.rn-footer__logo {
    align-self: flex-start;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 8px 12px;
    display: flex;
}
.rn-footer__logo img { display: block; height: 48px; width: auto; }
.rn-footer__title,
.rn-footer__col h2 {
    margin: 0;
    font-family: var(--rn-font-head);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    color: #FFFFFF;
}
.rn-footer__brand p { margin: 0; font-size: 14px; line-height: 1.7; color: #C3C9DA; max-width: 420px; }
.rn-footer__col { display: flex; flex-direction: column; gap: 12px; }
.rn-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rn-footer__col a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    color: #D6DAE6;
    text-decoration: none;
    font-size: 14px;
}
.rn-footer__col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.rn-footer__col a .rn-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.rn-social { display: flex; gap: 10px; flex-wrap: wrap; }
.rn-social a {
    width: 46px;
    height: 46px;
    min-height: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.rn-social a:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, .25); text-decoration: none; }
.rn-social svg { display: block; }
.rn-social__yt { background: #FF0000; }
.rn-social__fb { background: #1877F2; }
.rn-social__ig { background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4); }

.rn-footer__bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px 26px;
    border-top: 1px solid #34406A;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    font-size: 13px;
    color: #A9B0C6;
}
.rn-footer__bottom p { margin: 0; }

@media (max-width: 900px) {
    .rn-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rn-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .rn-footer__inner { padding: 36px 16px 24px; gap: 28px 16px; }
    .rn-footer__bottom { padding: 16px 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .rn-header, .rn-link, .rn-burger span, .rn-social a { transition: none; }
}