/* ===== Keti Koti Amersfoort — main stylesheet ===== */

/* ---- Fonts ---- */
@font-face { font-family:'Baloo 2'; src:url('../fonts/baloo-2-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Baloo 2'; src:url('../fonts/baloo-2-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Baloo 2'; src:url('../fonts/baloo-2-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Baloo 2'; src:url('../fonts/baloo-2-latin-800-normal.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-300-normal.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/quicksand-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/quicksand-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/quicksand-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/quicksand-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }

/* ---- Variables ---- */
:root {
  --purple: #5d1567;
  --purple-mid: #7d4095;
  --lilac: #cf9ad9;
  --coral: #e85a64;
  --coral-soft: #f0757d;
  --teal: #018b8b;
  --teal-dark: #006d6f;
  --teal-mid: #069084;
  --yellow: #ffc701;
  --gray-bg: #c9c9cb;
  --gray-hero: #cecfd1;
  --gray-footer: #a6a6a6;
  --black: #0d0d0d;
  --display: 'Baloo 2', system-ui, sans-serif;
  --body: 'Poppins', system-ui, sans-serif;
  --round: 'Quicksand', system-ui, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
section[id] { scroll-margin-top:96px; }
body { font-family:var(--body); color:#1a1a1a; background:#fff; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
.wrap { max-width:1440px; margin:0 auto; padding:0 4.4vw; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- Header / nav ---- */
.site-header { padding:0; height:88px; position:fixed; top:0; left:0; right:0; z-index:50; background:var(--gray-hero); transition:background .25s ease, box-shadow .25s ease; }
.site-header.scrolled { background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.10); }
body { padding-top:88px; }
body.home { background:var(--gray-hero); }
body.page-id-5, body.page-id-6 { background:var(--gray-bg); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:2vw; height:100%; }
.brand { font-family:var(--display); font-weight:800; font-size:34px; color:var(--purple); letter-spacing:.5px; }
.main-nav { display:flex; gap:4.4vw; align-items:center; margin:0 auto; }
.main-nav a { font-family:var(--body); font-weight:600; font-size:21px; color:#111; padding:4px 0; position:relative; }
.main-nav a.active::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:5px; border-radius:3px; background:#c44df0; }
.btn-donate { background:var(--teal); color:var(--yellow); font-family:var(--display); font-weight:700; font-size:22px; padding:8px 30px; border-radius:12px; }

/* headers over gray pages */
.page-gray { background:var(--gray-bg); }
.page-hero-gray { background:var(--gray-hero); }

/* ---- Buttons ---- */
.btn-black { display:inline-block; background:#000; color:#fff; text-align:center; font-family:var(--round); font-weight:700; font-size:22px; padding:14px 30px; border-radius:14px; }
.btn-pill-black { display:inline-block; background:#000; color:#fff; text-align:center; font-family:var(--round); font-weight:700; font-size:20px; padding:12px 26px; border-radius:12px; }

/* ---- HERO (home) ---- */
.hero { background:var(--gray-hero); }
.hero img.hero-img { width:100%; height:auto; }

/* ---- Donate modal ---- */
.modal-overlay { position:fixed; inset:0; background:rgba(90,90,90,.55); display:none; z-index:100; }
.modal-overlay.open { display:block; }
.donate-modal { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(1160px,92vw); max-height:92vh; overflow:auto; background:#fff; border-radius:26px; padding:44px 46px; display:grid; grid-template-columns:1.05fr 1fr; gap:44px; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.donate-modal .video-thumb { position:relative; border-radius:18px; overflow:hidden; }
.donate-modal .video-thumb img { width:100%; }
.donate-modal h3.modal-tag { font-family:var(--display); font-weight:800; font-size:40px; line-height:1.2; color:#0e7d70; margin-top:34px; }
.donate-modal .modal-brand { font-family:var(--display); font-weight:800; font-size:44px; color:var(--purple); }
.donate-modal .modal-intro { font-family:var(--round); font-weight:600; font-size:21px; line-height:1.45; color:#d5445e; margin:14px 0 22px; }
.donate-modal .choose { font-family:var(--round); font-weight:600; font-size:24px; color:#222; margin-bottom:18px; }
.donate-modal label.amount { display:flex; align-items:center; gap:18px; font-family:var(--round); font-weight:600; font-size:26px; margin:16px 0; cursor:pointer; }
.donate-modal input[type=radio] { width:24px; height:24px; accent-color:#a855c8; }
.donate-modal .custom-link { display:inline-block; font-family:var(--round); font-weight:600; font-size:19px; color:#333; text-decoration:underline; margin:10px 0 26px; }
.donate-modal .modal-actions { display:flex; gap:22px; }
.btn-cancel { flex:1; background:#fff; border:2px solid var(--teal); color:var(--teal); font-family:var(--round); font-weight:700; font-size:26px; padding:14px 10px; border-radius:16px; }
.btn-checkout { flex:1.3; background:var(--teal); color:var(--yellow); font-family:var(--round); font-weight:700; font-size:26px; padding:14px 10px; border-radius:16px; }

/* ---- Gallery (home) ---- */
.gallery { background:#fff; padding:56px 0 40px; }
.gallery h2 { text-align:center; font-family:var(--display); font-weight:800; font-size:56px; color:var(--purple); margin-bottom:40px; }
.gallery-row { display:flex; align-items:center; justify-content:center; gap:2.4vw; padding:0 3vw; }
.gallery-row img { border:3px solid var(--purple-mid); }
.gallery-row .g-side { width:25.2%; }
.gallery-row .g-center { width:36.6%; }
.gallery-nav { display:flex; justify-content:center; gap:14px; margin-top:34px; }
.gallery-nav button { width:46px; height:46px; border-radius:50%; border:2px solid var(--purple-mid); color:var(--purple-mid); font-size:20px; background:#fff; display:flex; align-items:center; justify-content:center; }

/* ---- Program page ---- */
.program-hero { background:var(--gray-bg); padding:44px 0 70px; }
.program-grid { display:grid; grid-template-columns:1.03fr 1fr; gap:4vw; align-items:stretch; padding:0 2.6vw; }
.program-grid .photo img { border-radius:26px; width:100%; height:100%; object-fit:cover; }
.agenda-card { background:#fff; border-radius:30px; padding:46px 48px 42px; display:flex; flex-direction:column; }
.agenda-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px; }
.agenda-head h2 { font-family:Verdana, Geneva, sans-serif; font-weight:700; font-size:44px; color:#111; }
.agenda-head a { font-family:Verdana, Geneva, sans-serif; font-weight:700; font-size:20px; color:#111; }
.agenda-pill { background:var(--purple-mid); color:#fff; font-family:Verdana, Geneva, sans-serif; font-weight:700; font-size:23px; padding:16px 30px; border-radius:26px; margin-bottom:20px; }
.agenda-actions { display:flex; gap:26px; margin-top:auto; padding-top:36px; }
.agenda-actions .btn-black { flex:1; font-family:Verdana, Geneva, sans-serif; font-weight:700; }

/* join events band */
.join-band { background:#fff; padding:56px 0 90px; }
.join-flex { display:flex; margin:0 1.4% 0 5.5%; }
.join-flex .photo { width:49%; flex-shrink:0; }
.join-flex .photo img { width:100%; height:100%; object-fit:cover; }
.join-panel { position:relative; background:var(--teal-dark); color:#fff; flex:1; clip-path:polygon(0 0, 78% 6%, 100% 24%, 100% 76%, 78% 94%, 0 100%); display:flex; flex-direction:column; justify-content:center; padding:60px 8% 60px 6%; }
.join-panel h2 { font-family:var(--display); font-weight:800; font-size:44px; margin-bottom:22px; }
.join-panel p { font-family:var(--round); font-weight:500; font-size:27px; line-height:1.4; max-width:560px; }
.join-panel .btn-black { margin-top:44px; align-self:center; font-size:22px; padding:14px 44px; }

/* support us */
.support { background:var(--lilac); padding:50px 0 70px; }
.support h1 { font-family:var(--display); font-weight:800; font-size:clamp(28px,4.25vw,61px); color:var(--purple); margin:10px 0 46px; padding-left:1vw; white-space:nowrap; }
.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px 6vw; padding:0 1vw; }
.support-item { display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:34px; }
.support-item .photo img { border:3px solid var(--yellow); width:100%; aspect-ratio:1; object-fit:cover; }
.support-item h3 { font-family:var(--display); font-weight:700; font-size:31px; color:#fff; margin-bottom:10px; }
.support-item p { font-family:var(--round); font-weight:500; font-size:21px; color:#fff; line-height:1.4; }
.support-item .btn-black { margin-top:20px; font-family:var(--round); width:100%; }

/* ---- News page ---- */
.news-page { background:#fff; padding-bottom:80px; }
.news-page .intro { text-align:center; }
.news-page h1 { font-family:var(--display); font-weight:800; font-size:64px; color:var(--coral); line-height:1.05; }
.news-page .sub { font-family:var(--round); font-weight:600; font-size:28px; color:var(--purple); margin:6px 0 40px; }
.edu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4.4vw; padding:0 1vw; }
.edu-card { border-radius:22px; padding:22px 22px 26px; display:flex; flex-direction:column; }
.edu-card.lilac { background:var(--lilac); }
.edu-card.teal { background:#26a596; }
.edu-card.coral { background:#e85a64; }
.edu-card .photo img { width:100%; aspect-ratio:1080/620; object-fit:cover; }
.edu-card h3 { font-family:var(--round); font-weight:700; font-size:27px; margin:18px 0 10px; }
.edu-card.lilac h3 { color:#111; }
.edu-card.teal h3 { color:var(--yellow); }
.edu-card.coral h3 { color:#fff; }
.edu-card p { font-family:var(--round); font-weight:500; font-size:18.5px; line-height:1.45; }
.edu-card.lilac p { color:#222; }
.edu-card.teal p { color:var(--yellow); }
.edu-card.coral p { color:#fff; }
.edu-card .btn-black { margin-top:auto; margin-top:22px; width:100%; font-size:19px; }

/* ---- About page ---- */
.about-collab { background:var(--gray-bg); padding:30px 0 60px; }
.about-collab h1 { text-align:center; font-family:var(--display); font-weight:800; font-size:74px; color:var(--coral); margin-bottom:50px; }
.collab-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5vw; padding:0 6vw; }
.collab-item { text-align:center; }
.collab-item .circ { width:min(340px,100%); margin:0 auto; border-radius:50%; border:3px solid var(--purple); overflow:hidden; aspect-ratio:1; }
.collab-item .circ img { width:100%; height:100%; object-fit:cover; }
.collab-item h3 { font-family:var(--display); font-weight:700; font-size:38px; color:var(--purple); margin-top:26px; }
.collab-item p { font-family:var(--body); font-weight:400; font-size:19px; color:var(--purple); line-height:1.4; max-width:380px; margin:8px auto 0; }
.collab-cta { text-align:center; margin-top:44px; }
.collab-cta h3 { font-family:var(--display); font-weight:800; font-size:40px; color:var(--coral); margin-bottom:26px; }
.collab-cta .btn-black { font-size:26px; padding:14px 54px; border-radius:18px; }

.about-contact { background:#fff; padding:40px 0 0; }
.about-contact h1 { text-align:center; font-family:var(--display); font-weight:800; font-size:74px; color:var(--coral); }
.about-contact .lede { text-align:center; font-family:var(--round); font-weight:700; font-size:24.5px; color:var(--coral); line-height:1.5; max-width:1120px; margin:24px auto 60px; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5vw; padding:0 10vw; }
.team-member { text-align:center; }
.team-member .circ { width:min(250px,80%); margin:0 auto; border-radius:50%; border:4px solid var(--yellow); overflow:hidden; aspect-ratio:1; }
.team-member .circ img { width:100%; height:100%; object-fit:cover; }
.team-member h4 { font-family:var(--round); font-weight:700; font-size:22px; margin-top:22px; }
.team-member span { display:block; font-family:var(--round); font-weight:500; font-size:18px; margin-top:6px; }
.newsletter { text-align:center; margin:60px auto 46px; max-width:460px; }
.newsletter .join-btn { display:block; width:100%; background:var(--teal-mid); color:var(--yellow); font-family:var(--display); font-weight:700; font-size:27px; padding:14px; border-radius:14px; }
.newsletter input { display:block; width:100%; margin-top:22px; border:2px solid var(--teal-mid); border-radius:14px; padding:16px 22px; font-family:var(--round); font-size:20px; color:#0e7d70; outline:none; }
.newsletter input::placeholder { color:#0e7d70; }
.newsletter .signup { margin-top:22px; background:var(--coral-soft); color:var(--yellow); font-family:var(--display); font-weight:700; font-size:24px; padding:10px 26px; border-radius:12px; }

/* ---- Shop page ---- */
.shop-page { background:#fff; padding-bottom:80px; }
.shop-page .shop-head { display:flex; justify-content:space-between; align-items:flex-start; padding:34px 0 10px; }
.shop-page h1 { font-family:var(--display); font-weight:800; font-size:74px; color:var(--purple); line-height:1; }
.shop-layout { display:grid; grid-template-columns:1fr 1fr 1.06fr; gap:4vw; align-items:start; margin-top:30px; }
.prod { margin-bottom:44px; }
.prod .ph { border:2.5px solid var(--coral-soft); }
.prod .ph img { width:100%; aspect-ratio:317/257; object-fit:cover; }
.prod figcaption { text-align:center; font-family:var(--round); font-weight:600; font-size:23px; color:var(--purple); margin-top:16px; line-height:1.35; }
.shop-feature .ph { border:2.5px solid var(--coral-soft); margin-top:60px; }
.shop-feature .ph img { width:100%; }
.shop-feature .btn-black { display:block; margin:56px auto 0; width:70%; font-family:Verdana, Geneva, sans-serif; font-size:26px; letter-spacing:1px; }

/* ---- Footer ---- */
.site-footer { background:var(--gray-footer); text-align:center; padding:26px 0 20px; margin-top:0; }
.site-footer p { font-family:var(--body); font-weight:500; font-size:22px; color:#222; }
.site-footer .socials { display:flex; justify-content:center; gap:26px; margin-top:16px; }
.site-footer .socials a { width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.site-footer .socials svg { width:30px; height:30px; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .main-nav { gap:5vw; padding-left:0; }
  .program-grid, .support-grid, .edu-grid, .collab-grid, .team-grid { grid-template-columns:1fr; }
  .donate-modal { grid-template-columns:1fr; }
  .join-flex { flex-direction:column; }
  .join-flex .photo { width:100%; }
  .join-panel { clip-path:none; }
  .shop-layout { grid-template-columns:1fr; }
  .gallery-row { flex-wrap:wrap; }
  .gallery-row .g-side, .gallery-row .g-center { width:80%; }
}
@media (max-width: 640px) {
  .main-nav { display:none; }
  .news-page h1, .about-collab h1, .about-contact h1, .shop-page h1 { font-size:44px; }
  .support h1 { font-size:38px; }
  .support-item { grid-template-columns:1fr; }
}

/* ---- Video lightbox ---- */
.video-lightbox { position:fixed; inset:0; background:rgba(10,10,10,.88); display:none; z-index:200; }
.video-lightbox.open { display:flex; align-items:center; justify-content:center; }
.video-frame { width:min(1200px,92vw); aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; }
.video-frame iframe, .video-frame video { width:100%; height:100%; border:0; display:block; }
.video-close { position:absolute; top:22px; right:34px; color:#fff; font-size:52px; line-height:1; z-index:201; }
.donate-modal .video-thumb { display:block; width:100%; padding:0; cursor:pointer; }
.hero { position:relative; }
.hero-play { position:absolute; left:88.6%; top:71.2%; width:6.5%; aspect-ratio:1; border-radius:50%; cursor:pointer; background:transparent; }

/* ---- Logged-in admin bar offset ---- */
body.admin-bar .site-header { top:32px; }
body.admin-bar section[id] { scroll-margin-top:128px; }
@media (max-width:782px) {
  body.admin-bar .site-header { top:46px; }
  body.admin-bar section[id] { scroll-margin-top:142px; }
}

/* ---- Hero video banner ---- */
.hero-video-wrap { position:relative; background:var(--gray-hero); overflow:hidden; }
.hero-video { width:100%; aspect-ratio:1973/1000; object-fit:cover; display:block; }
.hero-word { position:absolute; font-family:var(--display); font-weight:800; color:#ef7078; opacity:.9; letter-spacing:2px; line-height:1; pointer-events:none; text-transform:uppercase; }
.hero-word-top { top:2.5%; left:1.3%; font-size:clamp(44px,8.6vw,124px); }
.hero-word-bottom { bottom:2%; right:1.3%; font-size:clamp(44px,8.6vw,124px); }