/*
Theme Name: Child Crawl
Theme URI: 
Description: Child theme of Blank Slate for [project name]
Author: SK
Template: blankslate
Version: 1.0.0
Text Domain: child-crawl
*/


/* ============================
   ROOT / DESIGN TOKENS
============================ */
:root {
    /* Colors */
    --color-heading-accent: #C79BFF;      
    --color-body-text: #FFFFFFB2;         
    --color-bg-hero: #F5F6F8;             
    --color-h2-tone: #E5E2E1;             
    --color-h4-tone: #F5F6F8;             
    --color-btn-primary-bg: #56007A;
    --color-btn-shadow: #DA26DE38;
    --color-white: #FFFFFF;

    --color-white-60: rgba(255,255,255,0.6);
    --color-white-40: rgba(255,255,255,0.4);
    --color-white-20: rgba(255,255,255,0.2);
    --color-purple-dim: rgba(199,155,255,0.49);
    --color-purple-faint: rgba(182,128,255,0.12);
    --color-purple-border: rgba(182,128,255,0.3);
    --color-purple-bg: rgba(112,0,255,0.1);
    --color-muted: #b5b0b7;
    --color-card-bg: rgba(0,0,0,0.1);
    --color-purple-muted: #865d99;
    --color-purple-light: #D8B9FF;
    --color-section-fade: #190122;
    --color-star: #FFD000;
    --color-nav-active: #D86DFF;

 
    /* Font Families */
    --font-manrope: 'Manrope', sans-serif;
    --font-inter: 'Inter', sans-serif;
    --font-instrument: 'Instrument Sans', sans-serif;
    --font-serif: 'DM Serif Display', serif;
    --font-geometric: 'Space Grotesk', sans-serif; 
 
    /* Font Sizes - Desktop */
    --fs-h1: 48px;
    --fs-h2: 40px;
    --fs-h4: 24px;
    --fs-badge: 16px;
    --fs-body: 18px;
    --fs-btn: 16px;

    /* TODO: add once provided */
    /* --fs-h3 */
}

    /* ============================
    RESPONSIVE
    ============================ */
    @media (max-width: 1024px) {
        :root {
            --fs-h1: 36px;
            --fs-h2: 32px;
            --fs-body: 16px;
        }
    }

    @media (max-width: 768px) {
        :root {
            --fs-h1: 28px;
            --fs-h2: 24px;
            --fs-body: 14px;
        }
    }
    
/* ============================
   RESET / BASE
============================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    font-family: var(--font-instrument);
    background-color: #000;
    overflow-x:hidden
}
 
img {
    max-width: 100%;
    display: block;
}
 
a {
    text-decoration: none;
    color: inherit;
}
 
button {
    font-family: inherit;
}
 
/* ============================
   H1
============================ */
h1 {
    font-family: var(--font-manrope);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: 100%;
    letter-spacing: -1.4px;
    color: #F5F6F8;
    /* NOTE: this is a very light color (near-white). Only looks right if H1 sits on a dark/colored
       background. If your hero section background is light (e.g. white or #F5F6F8 itself), this
       text will be nearly invisible - double check against the actual Figma frame. */
}
 
/* wrap highlighted word(s) in H1 with <span class="highlighted"> in HTML */
h1 .highlighted {
    color: var(--color-heading-accent);
}
 
/* ============================
   TOP BADGE TEXT
============================ */
.badge-text {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: var(--fs-badge);
    line-height: 140%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--color-heading-accent);
}
 
/* ============================
   P TAG
============================ */
p {
    font-family: var(--font-instrument);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 150%;
    letter-spacing: 0%;
    color: var(--color-body-text);
}
 
/* Highlighted paragraph text - wrap the relevant word(s) in <span class="highlighted"> inside a <p> */
p .highlighted {
    color: var(--color-heading-accent); /* #C79BFF */
    font-family: var(--font-instrument);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 150%;
    letter-spacing: 0%;
}
 
/* ============================
   H2
============================ */
h2 {
    font-family: var(--font-manrope);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: 100%;
    letter-spacing: -1.4px;
    text-align: center;
    color: var(--color-h2-tone); /* #E5E2E1 - CONFIRM this is correct as text color */
}
 
/* ============================
   H4
============================ */
h4 {
    font-family: var(--font-manrope);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: 100%;
    letter-spacing: -0.75px;
    color: var(--color-h4-tone); /* #F5F6F8 - CONFIRM this is correct as text color */
}
 
/* ============================
   BUTTONS
============================ */
 
/* Primary Button */
.btn-primary {
    display: inline-block;
    border-radius: 8px;
    /* padding: 1px was in Figma export - CONFIRM if this is actually a border width, not inner padding */
    padding: 1px;
    background: var(--color-btn-primary-bg);
    box-shadow: 0px 4px 16px 0px var(--color-btn-shadow);
    box-sizing: border-box;
 
    font-family: var(--font-instrument);
    font-weight: 600;
    font-size: var(--fs-btn);
    line-height: 28px;
    letter-spacing: -1%;
    vertical-align: middle;
    color: var(--color-white);
 
    border: none;
    cursor: pointer;
    text-align: center;
}
 
/* Secondary Button */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 80px;
    padding: 15px 16px 15px 24px;
    background: transparent;
    border: 1px solid var(--color-white); /* TODO: confirm exact border color + width from Figma stroke panel - assumed 1px white for now */
 
    font-family: var(--font-instrument);
    font-weight: 600;
    font-size: var(--fs-btn);
    line-height: 28px;
    letter-spacing: -1%;
    vertical-align: middle;
    color: var(--color-white);
 
    cursor: pointer;
    text-align: center;
}
 
/* ============================
   CONTAINER
   Max width is fixed at 1440px. Side padding is NOT fixed globally -
   it varies per section/content, so set padding individually on each
   section/element as needed rather than relying on a single global value.
============================ */
.container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    /* no default padding here - add per-section as needed based on Figma */
}
.icon{display:flex;align-items:center;justify-content:flex-start;}
 
/* ============================
   HEADER
============================ */
#site-header{position:absolute;top:0;left:0;right:0;width:100%;z-index:1000;padding:20px 120px;box-sizing:border-box;background:none}
#site-header::before{content:'';position:absolute;top:-350px;left:25%;width:479px;height:235px;background:#EC6DFF;filter:blur(140px);transform:rotate(28.2deg);opacity:1;z-index:0;pointer-events:none}
#site-header::after{content:'';position:absolute;top:-300px;left:60%;width:263px;height:241px;background:#EC6DFF;filter:blur(140px);transform:rotate(-59.09deg);opacity:1;z-index:0;pointer-events:none}
#site-header.is-stuck{position:fixed;animation:headerSlideDown .35s ease}
@keyframes headerSlideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}

.site-header__inner{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;height:auto;display:flex;align-items:center;justify-content:space-between;gap:80px;padding:16px;box-sizing:border-box;border-radius:8px;background:#0F0F10B2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#site-header.is-stuck .site-header__inner{box-shadow:0 10px 30px rgba(0,0,0,.35)}

.site-header__nav{width:auto;max-width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;background:none;padding:0}
#site-nav .menu-div-cv{display:flex;gap:30px;align-items:center}

.site-header__logo img{width:140px;height:40px;display:block}

.site-header__menu{display:flex;align-items:center;gap:30px;list-style:none}
.site-header__menu li a{font-family:var(--font-inter);font-weight:500;font-size:16px;line-height:100%;letter-spacing:-1%;text-align:center;color:var(--color-white)}
.site-header__menu li.current-menu-item a,.site-header__menu li a.active{color:#D86DFF}
.site-header__menu li.menu-item-has-children>a{display:inline-flex;align-items:center;gap:6px}
.site-header__menu li.menu-item-has-children>a::after{content:'';width:7px;height:7px;border-right:1.5px solid var(--color-white);border-bottom:1.5px solid var(--color-white);transform:rotate(45deg);margin-top:-3px}

.site-header__btn{display:inline-flex;align-items:center;gap:8px;width:188px;height:40px;border-radius:8px;padding:1px 12px;background:var(--color-btn-primary-bg);box-shadow:0px 4px 16px 0px var(--color-btn-shadow);box-sizing:border-box;color:var(--color-white);font-family:var(--font-instrument);font-weight:600;font-size:14px;white-space:nowrap;justify-content:center}

.site-header__toggle{display:none;position:relative;z-index:1001;width:24px;height:18px;justify-content:center;align-items:center;background:none;border:none;cursor:pointer}
.site-header__toggle span{position:absolute;width:24px;height:2px;background:var(--color-white);transition:transform .3s ease,opacity .3s ease}
.site-header__toggle span:nth-child(1){top:0}
.site-header__toggle span:nth-child(2){top:8px}
.site-header__toggle span:nth-child(3){top:16px}
.site-header__toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.site-header__toggle.is-active span:nth-child(2){opacity:0}
.site-header__toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============================
   HEADER - RESPONSIVE
============================ */
@media (max-width:1024px){
#site-header{position:fixed;top:0;padding:20px 20px}
#site-header::before,#site-header::after{opacity:.5}
.site-header__inner{gap:24px}
.site-header__nav{position:fixed;top:0;right:-100%;height:100vh;width:260px;background:#0F0F10;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:100px 24px;overflow-y:auto;transition:right .3s ease;z-index:999}
.site-header__nav.is-open{right:0}
.menu-div-cv{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%}
.site-header__menu{flex-direction:column;align-items:flex-start;gap:16px;width:100%}
.site-header__menu li{width:100%;text-align:left}
.site-header__menu li.menu-item-has-children>a::after{margin-left:6px}
.site-header__btn{display:inline-flex;width:100%;justify-content:center}
.site-header__toggle{display:flex}
}




/* @media (max-width:768px){
#site-header{padding:16px 20px}
#site-header::before,#site-header::after{opacity:.5}
.site-header__nav{position:fixed;top:0;right:-100%;height:100vh;width:260px;background:#0F0F10;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:100px 24px;overflow-y:auto;transition:right .3s ease;z-index:999}
.site-header__nav.is-open{right:0}
.menu-div-cv{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%}
.site-header__menu{flex-direction:column;align-items:flex-start;gap:16px;width:100%}
.site-header__menu li{width:100%;text-align:left}
.site-header__menu li.menu-item-has-children>a::after{margin-left:6px}
.site-header__btn{display:inline-flex;width:100%;justify-content:center}
.site-header__toggle{display:flex}
} */


 

/* Footer */
.site-footer{background-color:var(--color-section-fade);width:100%}
.footer-inner{display:flex;flex-direction:column;gap:97px;padding:60px 120px;box-sizing:border-box}

.footer-top{display:flex;align-items:flex-start;gap:46px}
.footer-brand{display:flex;flex-direction:column;gap:32px;align-items:flex-start;flex-shrink:0;width:420px}
.footer-logo{width:196px;height:56px;flex-shrink:0}
.footer-logo img{width:100%;height:100%;object-fit:contain;display:block}
.footer-tagline{font-family:var(--font-inter);font-weight:400;font-size:16px;line-height:1.5;color:rgba(255,255,255,0.7);margin:0}

.footer-social{display:flex;align-items:center;gap:16px}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;opacity:1;transition:opacity .2s ease}
.footer-social-link:hover{opacity:.7}
.footer-social-link svg{display:block;width:100%;height:100%}

.footer-nav{display:flex;align-items:flex-start;gap:46px;flex:1}
.footer-nav-col{display:flex;flex-direction:column;gap:16px;align-items:flex-start;flex-shrink:0}
.footer-nav-heading{font-family:var(--font-inter);font-weight:700;font-size:16px;line-height:19.5px;letter-spacing:0.325px;color:var(--color-white);margin:0;white-space:nowrap}
.footer-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.footer-nav-list li{padding:8px 0}
.footer-nav-list li:first-child{padding-top:0}
.footer-nav-link{font-family:var(--font-inter);font-weight:400;font-size:16px;line-height:1.5;color:rgba(255,255,255,0.7);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.footer-nav-list a:hover .footer-nav-link{color:var(--color-white)}

.footer-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,0.12);padding-top:24px}
.footer-copyright{font-family:var(--font-inter);font-weight:400;font-size:16px;line-height:1.5;color:rgba(255,255,255,0.7);margin:0;white-space:nowrap}
.footer-legal{display:flex;align-items:center;gap:30px}
.footer-legal-link{font-family:var(--font-inter);font-weight:400;font-size:16px;line-height:1.5;color:rgba(255,255,255,0.7);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.footer-legal-link:hover{color:var(--color-white)}

@media (max-width:1200px){
.footer-inner{padding:60px 60px}
}

@media (max-width:1024px){
.footer-inner{padding:60px 40px;gap:60px}
.footer-top{flex-direction:column;gap:40px}
.footer-brand{width:100%}
.footer-nav{flex-wrap:wrap;gap:32px}
}

@media (max-width:768px){
.footer-inner{padding:40px 20px}
.footer-nav{flex-direction:column;gap:24px}
.footer-bottom{flex-direction:column;gap:16px;align-items:flex-start}
}