/* Basic reset & layout */
.root-wrap{min-height:100vh}
:root{
  /* Updated from Brand Guidelines: refined purple primary, warmer accent and slightly darker muted for contrast */
  --primary:#5a2d90; /* close to existing purple, aligns with PDF visuals */
  --accent:#ff5e6b; /* slightly warmer/coral accent */
  --muted:#5f6574; /* a touch darker for better accessibility */
  --bg:#f6f7fa; /* near-white background from brand doc */
  --max-width:1400px; /* increased to allow header items to fit on one line */
  --gap:24px;
}
*{box-sizing:border-box}
body{font-family:'Poppins', Inter, system-ui, Arial, sans-serif;color:#222;margin:0;background:var(--bg);}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
.topbar{background:var(--primary);color:#fff;height:50px;font-size:1rem;padding:0;line-height:50px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;height:100%;padding:0 16px}
.topbar a{color:#fff;text-decoration:underline}
.topbar .topbar-left{display:flex;gap:12px;align-items:center}
.topbar .topbar-left .topbar-social{display:flex;gap:12px;align-items:center}
.topbar .topbar-right{display:flex;gap:14px;align-items:center}
.topbar .topbar-right .contact-item{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,0.95);text-decoration:none;font-size:1rem}
.topbar .topbar-right .contact-item svg{opacity:0.95;width:18px;height:18px}
.topbar .topbar-social .social-link{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(255,255,255,0.08);color:#fff}
.topbar .topbar-social .social-link svg{width:16px;height:16px}
.topbar .topbar-social .social-link:hover{background:rgba(255,255,255,0.12)}
.site-header{background:#fff;border-bottom:0;padding:12px 0}
/* Make the header sticky so the menu remains visible while scrolling */
.site-header{position:sticky;top:0;z-index:60}
.site-header.scrolled{box-shadow:0 6px 18px rgba(11,9,36,0.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.brand{font-weight:800;color:var(--primary);text-decoration:none;font-size:1.125rem;display:inline-flex;align-items:center;gap:10px}
.brand img{max-height:40px;display:inline-block}
.main-nav{display:flex;gap:8px;align-items:center;flex:0;justify-content:flex-start;white-space:nowrap;margin-left:12px}
.main-nav a{margin:0 6px;color:#374151;text-decoration:none;padding:6px 8px;border-radius:6px;font-family:'Poppins',sans-serif;font-size:0.95rem;display:inline-flex;align-items:center;gap:6px;font-weight:700}
.main-nav a:hover{background:rgba(91,46,145,0.06)}
.main-nav .nav-home{font-weight:600;color:#374151}

/* Dropdown styles */
.nav-item{position:relative}
.dropdown-toggle{background:transparent;border:0;padding:6px 8px;border-radius:6px;color:#374151;cursor:pointer;font-weight:700;font-family:'Poppins',sans-serif;font-size:0.95rem;display:inline-flex;align-items:center;gap:6px}
.dropdown-toggle::after{content:'▾';margin-left:6px;font-size:0.8em;opacity:0.8}
.dropdown-menu{position:absolute;left:0;top:100%;min-width:200px;background:#fff;border:1px solid rgba(0,0,0,0.06);box-shadow:0 10px 30px rgba(11,9,36,0.06);display:none;border-radius:8px;padding:8px 0;z-index:40}
.dropdown-menu a{display:block;padding:8px 14px;color:#374151;text-decoration:none}
.dropdown-menu a:hover{background:#f7f7fb}
.nav-item:hover .dropdown-menu{display:block}
.header-ctas{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.donate-btn{background:var(--primary);color:#fff;padding:8px 12px;border-radius:999px;font-weight:700;font-family:'Poppins',sans-serif;font-size:0.95rem;box-shadow:0 8px 24px rgba(91,46,145,0.12)}
.donate-btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.header-ctas .btn{font-family:'Poppins',sans-serif;font-size:1rem}
/* Header social icons */
.header-social{display:flex;gap:8px;margin-right:8px}
.header-social .social-link{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.header-social .social-link svg{width:16px;height:16px}
.header-social .social-link.facebook{background:#1877F2;color:#fff}
.header-social .social-link.linkedin{background:#0A66C2;color:#fff}
.header-social .social-link.youtube{background:#FF0000;color:#fff}
.header-social .social-link.tiktok{background:#000;color:#fff}
/* Ensure header social icons are visible and on top */
.header-social{visibility:visible;opacity:1}
.header-ctas{z-index:70}
.header-social .social-link{display:inline-flex!important;visibility:visible!important}
.header-social svg{fill:currentColor}
.btn{display:inline-block;padding:10px 14px;border-radius:6px;text-decoration:none;font-weight:600}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{border:1px solid #ddd;color:#333;background:transparent}
.header-contact{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:0.95rem}
.header-contact .contact-item{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none}
.header-contact .contact-item svg{width:16px;height:16px;flex:0 0 auto}
.header-contact .contact-item span{display:inline-block}
.hero{padding:80px 0 40px;position:relative}
.hero-inner{display:flex;gap:24px;align-items:center;padding:48px;border-radius:12px;position:relative;z-index:2}
.hero:before{content:'';position:absolute;inset:0;background-image:url('/assets/images/hero.jpg');background-size:cover;background-position:center;filter:brightness(.55) contrast(.95);opacity:1;z-index:1;border-radius:0}
/* site-hero: reuse hero background sizing for page hero sections */
.site-hero{position:relative;overflow:hidden;border-radius:0;margin-bottom:24px;
  /* make hero full-bleed (edge to edge) */
  width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;box-sizing:border-box;
  /* match home page hero vertical spacing */
  padding:80px 0 40px}
.site-hero .hero-inner{padding:48px;align-items:center;max-width:var(--max-width);margin:0 auto}
    .site-hero:before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('/assets/images/youth-hero.avif');
        background-size: cover;
        background-position: center;
        filter: brightness(.55) contrast(.95);
        opacity: 1;
        z-index: 1
    }
.site-hero .hero-copy{position:relative;z-index:2}
.hero-copy{flex:1;color:#fff}
.hero-copy h1{font-size:2.6rem;margin:0 0 14px;line-height:1.02;font-weight:800;text-shadow:0 10px 30px rgba(11,9,36,0.5)}
.hero-copy p{color:rgba(255,255,255,0.95);margin:0 0 20px;font-size:1.05rem}
.hero-ctas a{margin-right:12px}
.grid{display:grid;gap:16px}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.overview{margin-top:28px}
.overview .grid article{background:#fff;padding:20px;border-radius:12px;box-shadow:0 8px 28px rgba(15,15,80,0.06)}
.overview .overview-intro{color:#333;margin-bottom:16px}
.features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:rgba(255,255,255,0.95);padding:20px;border-radius:12px;box-shadow:0 10px 30px rgba(15,15,80,0.06)}
.feature .feature-icon{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg,rgba(91,46,145,0.12),rgba(123,86,184,0.08));display:flex;align-items:center;justify-content:center}
.feature h3{margin:0;font-size:1.125rem}
.feature p{margin:0;color:#555}
.feature .btn-outline{border:1px solid rgba(91,46,145,0.12);color:var(--primary);background:transparent;padding:8px 12px;border-radius:8px}
.overview h2,.impact h2,.events h2{margin-top:0}
.stats{display:flex;gap:24px}
.stats div{background:#f8f8ff;padding:16px;border-radius:8px}
.events-list{display:grid;gap:12px}
.site-footer{background:#fafafa;padding:24px;border-top:1px solid #eee;margin-top:24px}
.footer-inner{display:flex;gap:24px;align-items:flex-start}
.footer-col{flex:1}
.footer-bottom{padding:24px;text-align:center;color:var(--muted);background:transparent;margin-top:18px}
.footer-legal{font-size:0.9rem;color:#6b7080}

/* Social links in footer */
.social-links{display:flex;gap:10px;margin-top:12px}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:transparent;color:var(--muted);text-decoration:none}
.social-link svg{width:20px;height:20px}
.social-link:hover{background:rgba(91,46,145,0.08);color:var(--primary)}

/* Newsletter */
.newsletter{display:flex;gap:12px;align-items:center}
.newsletter{display:flex;gap:8px;align-items:center}
.newsletter input[type="email"]{padding:10px;border-radius:6px;border:1px solid #e6e6ef;flex:1}
.newsletter button{padding:10px 14px}
.newsletter-col p{margin-bottom:8px}
.cookie-consent{position:fixed;bottom:20px;right:20px;background:#fff;padding:12px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.hidden{display:none}
/* Responsive */
@media(max-width:800px){
  .hero-inner{flex-direction:column;padding:24px}
  .footer-inner{flex-direction:column}
  .features{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .overview .overview-intro{color:#333}
  .hero-copy h1{font-size:1.6rem}
}
/* (removed section-inner centering per user request) */

/* Mobile nav */
.nav-toggle{display:none;border:0;background:transparent;padding:8px;cursor:pointer;position:absolute;right:18px;top:18px}
.nav-toggle .hamburger{width:22px;height:2px;background:#333;display:block;position:relative}
.nav-toggle .hamburger:before,.nav-toggle .hamburger:after{content:'';position:absolute;left:0;width:22px;height:2px;background:#333}
.nav-toggle .hamburger:before{top:-7px}
.nav-toggle .hamburger:after{top:7px}

@media(max-width:800px){
  .nav-toggle{display:block}
  .nav-wrap{display:none}
  .nav-wrap.open{display:block}
  .main-nav{display:flex;flex-direction:column;padding:12px 0}
  .main-nav a,.dropdown-toggle{padding:12px 16px}
  .dropdown-menu{position:static;border:none;box-shadow:none;padding:0;display:none}
  .nav-item.open .dropdown-menu{display:block}
  .header-ctas{display:flex;flex-direction:column;padding:12px 0}
  .header-ctas .btn{margin:8px 0}
  .header-inner{align-items:center}
}

/* Animated dropdown: collapse with max-height transition */
@media(max-width:800px){
  .nav-wrap{display:block;max-height:0;overflow:hidden;transition:max-height .32s ease,opacity .24s ease;opacity:0}
  .nav-wrap.open{max-height:640px;opacity:1}
  /* small visual polish */
  .main-nav a{border-bottom:1px solid #f0f0f4;padding:12px 0}
}

/* Funders */
.funders{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px}
.funders img{max-height:64px;max-width:220px;object-fit:contain;background:#fff;padding:6px;border-radius:6px;box-shadow:0 6px 18px rgba(15,15,80,0.04)}
.funders-block p{margin-bottom:8px}

/* Contact layout */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.contact-grid-full{grid-template-columns:1fr !important}
.contact-info h3{margin-top:0}
.contact-card{background:#fff;padding:16px;border-radius:8px;box-shadow:0 6px 18px rgba(15,15,80,0.04)}
.contact-card p,.contact-card li{color:#444}
.contact-grid-full .contact-card{display:flex;flex-direction:column;height:100%}
.contact-embed{flex:1;display:flex;flex-direction:column}
.contact-embed iframe{flex:1;border:0}
@media(max-width:800px){
  .contact-grid{grid-template-columns:1fr}
}

/* Responsive iframe for events booking embed */
.iframe-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;background:#fff}
.iframe-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* Section frames (alternating colored edge and subtle background) */
.section-frame{padding:22px;border-radius:10px;margin:18px 0;background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(250,250,255,0.96));box-shadow:0 6px 24px rgba(15,15,80,0.04);border-left:8px solid var(--primary)}
.section-frame.frame-1{border-left-color:var(--primary);background:linear-gradient(180deg,rgba(91,46,145,0.03),rgba(255,255,255,0.98))}
.section-frame.frame-2{border-left-color:var(--accent);background:linear-gradient(180deg,rgba(0,184,148,0.03),rgba(255,255,255,0.98))}
.section-frame.frame-3{border-left-color:#e67e22;background:linear-gradient(180deg,rgba(230,126,34,0.03),rgba(255,255,255,0.98))}
.section-frame h2{margin-top:0}

@media(max-width:800px){
  .section-frame{padding:16px;border-radius:8px;margin:12px 0}
}

/* Center framed blocks: keep block centered but content left-aligned */
.section-frame{max-width:920px;margin:18px auto;text-align:left}
.section-frame h2,.section-frame .lead,.section-frame p{max-width:100%;margin:0 0 12px 0}
.section-frame .grid{justify-content:flex-start}
.section-frame .grid > *{text-align:left}
.section-frame form{max-width:720px;margin:0 auto;text-align:left}

@media(max-width:800px){
  .section-frame{max-width:100%;padding-left:16px;padding-right:16px}
  .section-frame h2,.section-frame .lead,.section-frame p{max-width:100%}
  .section-frame form{max-width:100%}
}