/* 360 Girls Foundation : modern layer
   Loaded last on every public page. Typography, logo, depth and motion polish.
   Fonts: Fraunces (headlines, warm and human) + Plus Jakarta Sans (body and UI,
   clean and highly readable on small screens). */

:root {
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-sm: 0 1px 2px rgba(13, 27, 15, .06), 0 4px 14px rgba(13, 27, 15, .06);
  --shadow-md: 0 2px 4px rgba(13, 27, 15, .05), 0 14px 36px rgba(13, 27, 15, .12);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--lime, #74C69D); color: #0D1B0F; }
:focus-visible { outline: 3px solid var(--lime, #74C69D); outline-offset: 3px; border-radius: 8px; }

/* ---------- Logo: white badge so the purple emblem pops on the dark nav ---------- */
.nav-logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.nav-logo .logo-badge {
  width: 60px; height: 60px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35), 0 0 0 3px rgba(116, 198, 157, .4);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-logo .logo-badge img {
  width: 44px; height: 44px; object-fit: contain;
  filter: none; transform: none;
}
.nav-logo:hover .logo-badge { transform: rotate(-6deg) scale(1.06); box-shadow: 0 10px 26px rgba(0, 0, 0, .4), 0 0 0 3px rgba(116, 198, 157, .7); }
.nav-logo:hover .logo-badge img { transform: none; }
.nav-logo .logo-text { display: flex; flex-direction: column; line-height: 1.05; color: #fff; white-space: nowrap; }
.nav-logo .logo-text strong { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.12rem; letter-spacing: -.2px; }
.nav-logo .logo-text small { margin-top: 3px; font-size: .62rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--lime, #74C69D); }

@media (max-width: 640px) {
  .nav-logo { gap: .55rem; }
  .nav-logo .logo-badge { width: 52px; height: 52px; }
  .nav-logo .logo-badge img { width: 38px; height: 38px; }
  .nav-logo .logo-text strong { font-size: 1rem; }
}
@media (max-width: 420px) {
  .nav-logo .logo-text small { display: none; }
}

/* Footer logo: white card with the full lettered logo */
.footer-brand .footer-logo {
  display: inline-grid; place-items: center;
  background: #fff; border-radius: 24px; padding: .8rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .28);
}
.footer-brand .footer-logo img { width: 104px; height: 104px; margin: 0; object-fit: contain; }

/* ---------- Navigation: glassier, a touch taller ---------- */
nav { backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); }

/* ---------- Depth and motion ---------- */
.cta-main, .nav-btn.solid { box-shadow: 0 12px 30px -10px rgba(197, 112, 58, .6); }
.cta-main:hover, .nav-btn.solid:hover { transform: translateY(-2px); }
.team-card, .why-card, .role-card, .story-card, .project-card, .obj-card, .init-card {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover: hover) {
  .team-card:hover, .why-card:hover, .role-card:hover, .story-card:hover, .project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}

/* Scroll progress bar (Chromium and Safari 26+; ignored elsewhere) */
@supports (animation-timeline: scroll()) {
  body::before {
    content: ''; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 2000;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--lime, #74C69D), var(--earth, #C5703A));
    animation: scrollGrow linear both; animation-timeline: scroll(root);
    pointer-events: none;
  }
  @keyframes scrollGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Consent checkbox (newsletter, donate, volunteer) ---------- */
.consent-check{display:flex;gap:.65rem;align-items:flex-start;margin-top:.9rem;font-size:.8rem;line-height:1.55;color:var(--muted);cursor:pointer}
.consent-check input[type="checkbox"]{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--green);cursor:pointer}
.consent-check a{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.consent-check.on-dark{color:rgba(255,255,255,.75)}
.consent-check.on-dark input[type="checkbox"]{accent-color:var(--earth)}
.consent-check.on-dark a{color:var(--lime)}
.newsletter-form{position:relative}

.consent-error{color:#b3412a;font-size:.8rem;font-weight:700;margin-top:.45rem}
.consent-error[hidden]{display:none}