/* 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 */
  /* Brand accents (page 13) */
  --accent-1: #dc3d3f;
  --accent-2: #e5a361;
  --accent-3: #f6e079;
  --accent-4: #6da76a;
  --accent-5: #3467a9;
  --accent-6: #a274a4;
  /* fallback/default accent used across existing rules */
  --accent: var(--accent-1);
  --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 */
  --service-banner-height:128px;
  --gap:24px;
}
*{box-sizing:border-box}
body{font-family:'Poppins', 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)}

/* Updated topbar style to match the new brand banner look: subtle horizontal gradient, compact height */
.topbar{background:linear-gradient(90deg,var(--accent-5),var(--primary));height:44px;font-size:0.95rem;line-height:44px}
.topbar a{color:#fff}

/* Services banner under the header: quick links to main service areas using the rainbow colours */
.service-banner{background:transparent}

/* Full-bleed banner: spans the full viewport with an inner constrained row */
.service-banner.full-bleed{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--service-banner-height);padding:0;background:transparent;z-index:60}

/* Anchor the banner to the hero element and reserve space so it sits at the hero base */
.hero{position:relative;padding-bottom:calc(var(--service-banner-height,84px) + 12px)}

/* Increase gap between hero CTAs and the service tiles (~120px) */
.hero .hero-ctas{margin-bottom:120px}

/* Make the hero inner graphic box taller so it visually reaches the base of the tiles */
.hero-inner{padding-bottom:calc(48px + 120px)}
.service-banner.full-bleed .service-inner{max-width:none;width:100%;margin:0;display:flex;gap:0;align-items:stretch}
.service-banner.full-bleed .service-item{flex:1 1 0;min-width:160px;text-decoration:none;border-radius:0;box-shadow:none;display:flex;gap:12px;align-items:center;padding:18px;color:#fff;position:relative;overflow:hidden}
.service-banner.full-bleed .service-item, .service-banner.full-bleed .service-item *{box-sizing:border-box}
.service-banner.full-bleed .service-item .service-icon{width:56px;height:56px;flex:0 0 56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;margin-right:12px}
.service-banner.full-bleed .service-item .service-icon svg{width:26px;height:26px;display:block}
.service-banner.full-bleed .service-item .service-text{display:flex;flex-direction:column;align-items:flex-start}
.service-banner.full-bleed .service-item h4{margin:0;font-size:1rem;color:#fff}
.service-banner.full-bleed .service-item p{margin:4px 0 0;font-size:0.92rem;color:rgba(255,255,255,0.95)}
.service-banner.full-bleed .service-item:hover{filter:none;transform:none}
.service-banner.full-bleed .service-item::after{content:'';position:absolute;inset:0;left:0;top:0;right:0;bottom:0;pointer-events:none}
.service-banner.full-bleed .service-item{cursor:pointer}

/* Make tiles slightly transparent using rgba backgrounds per accent */
.service-banner.full-bleed .service-1{background:rgba(220,61,63,0.8)}
.service-banner.full-bleed .service-2{background:rgba(229,163,97,0.8)}
.service-banner.full-bleed .service-3{background:rgba(246,224,121,0.8)}
.service-banner.full-bleed .service-4{background:rgba(109,167,106,0.8)}

/* Icon colour: fill with the accent colour so icons appear in brand colour on white circular badge */
.service-banner.full-bleed .service-1 .service-icon svg{fill:var(--accent-1)}
.service-banner.full-bleed .service-2 .service-icon svg{fill:var(--accent-2)}
.service-banner.full-bleed .service-3 .service-icon svg{fill:var(--accent-3)}
.service-banner.full-bleed .service-4 .service-icon svg{fill:var(--accent-4)}
.service-banner.full-bleed .service-3{color:#222}
.service-banner.full-bleed .service-3 p{color:rgba(0,0,0,0.85)}

@media(max-width:900px){
  .service-banner.full-bleed{padding:0}
  .service-banner.full-bleed .service-inner{flex-direction:column}
  .service-banner.full-bleed .service-item{flex:0 0 auto;width:100%;display:flex;align-items:center;gap:12px;padding:14px 18px}
  .service-banner.full-bleed .service-item .service-text{align-items:flex-start}
  .service-banner.full-bleed .service-item h4{font-size:1.05rem}
  /* On small screens show only the title across full width and hide the description */
  .service-banner.full-bleed .service-item p{display:none}
}

/* Prevent the following content from sitting under the banner when the banner is pulled up */
/* removed sibling padding; hero bottom padding now reserves space for banner */

@media(max-width:900px){
  .service-banner{flex-wrap:wrap;padding:6px}
  .service-banner .service-item{flex:1 1 45%;min-width:140px;margin:4px}
}

/* Mobile-specific fixes to avoid layout/overflow issues and improve usability */
@media(max-width:800px){
  /* remove the social topbar on small screens */
  .topbar{display:none!important;height:0;visibility:hidden}

  /* prevent horizontal scrolling caused by full-bleed elements */
  html,body{overflow-x:hidden}

  /* ensure header and nav appear above content and dropdowns are visible */
  .site-header{position:relative;z-index:100}
  .nav-wrap{position:relative;z-index:100}
  .dropdown-menu{z-index:1100}

  /* make the full-bleed service banner use normal flow width on mobile to avoid negative margins */
  .service-banner.full-bleed{position:relative;left:0;right:0;margin-left:0;width:100%;margin-top:0}

  /* ensure section titles stack normally and do not overlap other content */
  .section-frame, .section-frame h2{position:relative;z-index:1}

  /* dropdown behavior on mobile: keep menus hidden until opened, position above other header elements */
  .nav-item .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:1200
  }
  .nav-item.open .dropdown-menu{display:block}

  /* small-screen nav: ensure full-width stacking and avoid overflow */
  .main-nav{flex-direction:column;gap:0}
  .main-nav a{padding:12px 16px}
}
.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}
.nav-wrap{display:flex;align-items:center;gap:12px}
.main-nav{display:flex;gap:8px;align-items:center;flex:1 1 auto;justify-content:flex-start;white-space:nowrap;margin-left:24px}
.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(52,103,169,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(--accent);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(220,61,63,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(--accent);color:#fff}
.donate-btn{background:var(--accent);color:#fff}

/* Rainbow animated gradient for buttons: cycle through brand accents */
:root{
  --rainbow-gradient: linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3),var(--accent-4),var(--accent-5),var(--accent-6));
}

@keyframes rainbow {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Apply animated gradient to primary/CTA buttons */
.btn, .btn-primary, .btn-book {
  /* Static fade from red to orange for regular buttons */
  background-image: linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color: #fff !important;
  border: 0;
}

/* Keep animated rainbow only for donate CTA and buttons explicitly marked to use the rainbow */
.donate-cta, .donate-btn, .btn-rainbow {
  background-image: var(--rainbow-gradient);
  background-size: 400% 100%;
  animation: rainbow 8s linear infinite;
  color: #fff !important;
  border: 0;
}

/* Make outline buttons use the animated gradient as border and keep transparent background */
.btn-outline{background:transparent;color:var(--muted);border:1px solid transparent;position:relative;z-index:0}
.btn-outline::before{content:'';position:absolute;inset:-1px;border-radius:6px;background-image:var(--rainbow-gradient);background-size:400% 100%;z-index:-1;filter:blur(0);animation:rainbow 8s linear infinite}
.btn-outline{padding:9px 13px}
.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;min-height:800px}
.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(.75) 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(52,103,169,0.12),rgba(162,116,164,0.06));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(52,103,169,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(52,103,169,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(--accent-1);background:linear-gradient(180deg,rgba(220,61,63,0.03),rgba(255,255,255,0.98))}
.section-frame.frame-2{border-left-color:var(--accent-2);background:linear-gradient(180deg,rgba(229,163,97,0.03),rgba(255,255,255,0.98))}
.section-frame.frame-3{border-left-color:var(--accent-3);background:linear-gradient(180deg,rgba(246,224,121,0.03),rgba(255,255,255,0.98))}
.section-frame.frame-4{border-left-color:var(--accent-4);background:linear-gradient(180deg,rgba(109,167,106,0.03),rgba(255,255,255,0.98))}
.section-frame.frame-5{border-left-color:var(--accent-5);background:linear-gradient(180deg,rgba(52,103,169,0.03),rgba(255,255,255,0.98))}
.section-frame.frame-6{border-left-color:var(--accent-6);background:linear-gradient(180deg,rgba(162,116,164,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}

/* Full-bleed coloured background with interior white card for legibility
   Use by adding class `full-bleed` to a .section-frame element. The
   section will span the viewport width and the inner .section-inner will
   constrain content to the normal container width with a white background. */
.section-frame.full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:48px 0;border-left:0;border-radius:0;background-color:transparent}
.section-frame.full-bleed .section-inner{max-width:var(--max-width);margin:0 auto;padding:28px;border-radius:10px;background:#fff;box-shadow:0 6px 24px rgba(15,15,80,0.04)}

/* Colour backplates for full-bleed sections (use frame-{n}.full-bleed) */
.section-frame.frame-1.full-bleed{background:linear-gradient(180deg,var(--accent-1),rgba(255,255,255,0.95))}
.section-frame.frame-2.full-bleed{background:linear-gradient(180deg,var(--accent-2),rgba(255,255,255,0.95))}
.section-frame.frame-3.full-bleed{background:linear-gradient(180deg,var(--accent-3),rgba(255,255,255,0.95))}
.section-frame.frame-4.full-bleed{background:linear-gradient(180deg,var(--accent-4),rgba(255,255,255,0.95))}
.section-frame.frame-5.full-bleed{background:linear-gradient(180deg,var(--accent-5),rgba(255,255,255,0.95))}
.section-frame.frame-6.full-bleed{background:linear-gradient(180deg,var(--accent-6),rgba(255,255,255,0.95))}

/* Ensure headings inside the white card inherit normal colour for readability */
.section-frame.full-bleed .section-inner h2{color:var(--muted)}

@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%}
}