/*
Theme Name: OBS CAN FEED YOU
Theme URI: https://example.org/obs-can-feed-you
Author: Elie Gamala
Author URI: https://eliegamala.github.io/portfolio-2025/
Description: A playful, warm, single-page community kitchen theme for OBS CAN FEED YOU (Observatory, Cape Town). Converted from the static design while keeping the exact layout and styles.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ocfy
Tags: nonprofit, community, one-page, pastel, accessible, responsive
*/
/* --- Original site styles below --- */
/* ====== OBS CAN FEED YOU — Styles (v2) ====== */
:root{
  --ink:#1c1c1c;
  --bg:#FFFCF6;
  --paper:#ffffff;
  --muted:#5f6368;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;

  /* Pastel palette inspired by logo */
  --c-yellow:#F7E27D;
  --c-green:#78C8A7;
  --c-lime:#A7D786;
  --c-purple:#C9A7E8;
  --c-blue:#8FB6FF;
  --c-sky:#A6D8FF;
  --c-orange:#F6A57F;
  --c-pink:#F5B2C1;
  --c-teal:#40B6A6;

  --primary:#40B6A6; /* teal */
  --primary-ink:#0f3d38;

  --container: min(1100px, 92vw);
    --border: 2.5px solid var(--ink);
  --radius: 18px;
  --radius-lg: 28px;
  --border: 2.5px solid var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:"Atkinson Hyperlegible", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.55;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto;}

a{color:var(--primary); text-decoration:none}
a:hover{filter:brightness(0.9)}
.link-underline{background-image:linear-gradient(currentColor,currentColor); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .25s ease}
.link-underline:hover{background-size:100% 2px}

.skip-link{
  position:absolute; left:-999px; top:-999px; background:var(--paper); padding:.5rem .75rem; border-radius:.5rem; box-shadow:var(--shadow);
}
.skip-link:focus{left:1rem; top:1rem; z-index:999}

.container{width:var(--container); margin-inline:auto}
.section{padding: clamp(3rem, 5vw, 5rem) 0; position:relative}
.section.alt{background:linear-gradient(180deg, #fff 0%, #fff 40%, var(--bg) 100%);}
.section-intro{ text-align:center; margin-bottom:2rem}
.section-title{
  font-family:"Fredoka", system-ui, sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin:.25rem 0 .5rem;
}
.eyebrow{
  display:inline-block; margin:0; padding:.25rem .7rem; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  border-radius:100px; background:var(--c-yellow); border:2px solid #00000014;
}
.max-ch{max-width:70ch; margin-inline:auto}

.btn{
  --btn-bg:var(--primary);
  --btn-ink:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.85rem 1.15rem; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-ink); border:2px solid transparent; font-weight:700;
  box-shadow:0 6px 0 rgba(0,0,0,.08); transform:translateY(0); transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 16px rgba(0,0,0,.12)}
.btn:focus-visible{outline:3px solid var(--c-purple); outline-offset:2px}
.btn--ghost{--btn-bg:transparent; --btn-ink:var(--ink); border-color:var(--ink); background:transparent}
.btn--small{padding:.55rem .9rem; font-size:.95rem}
.btn--primary{--btn-bg:var(--primary); --btn-ink:#fff}

.center{text-align:center}
.space-top{margin-top:1rem}

.display{
  font-family:"Fredoka", system-ui, sans-serif;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height:1.1;
}

/* ====== Navigation ====== */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #00000010;
}
.nav-container{display:flex; align-items:center; justify-content:space-between; padding:.3rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.02em; color:inherit}
.brand img{width:44px; height:44px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.1))}
.brand span{font-family:"Fredoka", system-ui, sans-serif; font-size:1.05rem}

.primary-nav ul{list-style:none; display:flex; gap:.8rem; margin:0; padding:0; align-items:center}
.primary-nav a{display:inline-block; padding:.6rem .8rem; border-radius:999px}
.primary-nav a:hover{background:#00000008}

.nav-toggle{display:none; width:40px;height:40px;border:0;background:transparent; position:relative}
.nav-toggle span{position:absolute; left:8px; right:8px; height:2px; background:var(--ink); top:12px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:26px}

@media (max-width: 880px){
  .nav-toggle{display:block}
  .primary-nav{position:absolute; inset: calc(100% + 1px) 0 auto auto; background:#fff; border-bottom:1px solid #00000010; display:none}
  .primary-nav.open{display:block}
  .primary-nav ul{flex-direction:column; align-items:flex-start; padding: .5rem .75rem}
}

/* ====== Hero ====== */
.hero{
  isolation:isolate;
  background: radial-gradient(1100px 500px at 75% 10%, #fff 30%, var(--bg) 100%);
  overflow:hidden;
}
.grid-2{display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1rem, 4vw, 3rem); align-items:center}
.hero-copy .lead{font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--muted)}
.cta-group{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem}
.hero-art{ position:relative; min-height:280px}
.hero-logo{width:min(360px, 60vw); display:block; margin-inline:auto; filter:drop-shadow(0 14px 28px rgba(0,0,0,.12))}

.veg{position:absolute; opacity:.9; filter: drop-shadow(0 10px 14px rgba(0,0,0,.08))}
.v1{width:90px; left:4%; top:8%}
.v2{width:80px; right:8%; top:12%}
.v3{width:80px; right:2%; bottom:16%}
.v4{width:80px; left:6%; bottom:12%}
.v5{width:120px; left:38%; top:-10%}

.float{animation: float 7s ease-in-out infinite}
.v2{animation-duration:8.6s}
.v3{animation-duration:6.8s}
.v4{animation-duration:7.4s}
.v5{animation-duration:9s}
@keyframes float{0%,100%{transform: translateY(0)}50%{transform: translateY(-10px)}}

.hero-bg{position:absolute; inset:0; z-index:-1; background:
  radial-gradient(300px 200px at 12% 18%, var(--c-yellow) 0%, transparent 60%),
  radial-gradient(250px 200px at 88% 24%, var(--c-purple) 0%, transparent 60%),
  radial-gradient(350px 200px at 12% 78%, var(--c-sky) 0%, transparent 60%),
  radial-gradient(250px 200px at 92% 78%, var(--c-orange) 0%, transparent 60%);
  opacity:.25;
}

@media (max-width: 880px){
  .grid-2{grid-template-columns: 1fr}
  .hero-art{ order:-1}
}

/* ====== Cards / About ====== */
.about-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem;
}
.card{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; border:2px solid #00000010}
.card-media{min-height:120px; background: conic-gradient(from 90deg at 50% 50%, var(--c-yellow), var(--c-blue), var(--c-green), var(--c-orange), var(--c-purple)); opacity:.18}
.card-media.blob{ border-bottom-left-radius: 40% 30%; border-bottom-right-radius: 60% 40%}
.card-body{padding:1rem}
.card h4{margin:.25rem 0 .4rem 0; font-family:"Fredoka", system-ui, sans-serif}
@media (max-width: 1080px){ .about-grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width: 560px){ .about-grid{grid-template-columns:1fr} }


/* ====== What We Do (alternating rows) ====== */
.wwd {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.wwd .sprinkles {
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  opacity: 0.5;
  pointer-events: none;
}
.wwd-grid {
  display: grid;
  gap: 1.25rem;
}
.wwd-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* Default: Image on left, text on right */
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 2px solid #00000010;
  box-shadow: var(--shadow);
}
.wwd-row .media {
  position: relative;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  border: 2px dashed #00000020;
  background: #fff;
}
.wwd-row .media .ph {
  height: clamp(220px, 34vw, 320px);
  background: linear-gradient(135deg, var(--c-yellow), var(--c-blue));
}
.wwd-row .media .sticker {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.12));
  animation: float 8s ease-in-out infinite;
}
.wwd-row .wwd-text h4 {
  font-family: "Fredoka", system-ui, sans-serif;
  margin: 0.25rem 0 0.5rem 0;
  font-size: 1.4rem;
}
.wwd-row .wwd-text p {
  margin: 0.2rem 0 0.6rem 0;
}
.tick {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
}
.tick li {
  position: relative;
  padding-left: 1.4rem;
}
.tick li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  background: var(--c-green);
  border: 2px solid #00000020;
  width: 1.1rem;
  height: 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* Row inversion (text ↔ image) — desktop only */
@media (min-width: 921px) {
  .wwd-row.invert {
    grid-template-areas: "text image";
  }
  .wwd-row.invert .media {
    grid-area: image;
  }
  .wwd-row.invert .wwd-text {
    grid-area: text;
  }
}


@media (max-width: 920px) {
  .wwd-row {
    grid-template-columns: 1fr; /* Stack columns on smaller screens */
    grid-template-areas: unset; /* Remove named grid areas for stacking */
  }
  .wwd-row .media,
  .wwd-row .wwd-text {
    grid-column: auto; /* Reset grid-column for stacking */
    grid-area: unset; /* Reset grid-area for stacking */
  }
  /* On small screens, ensure the image is always above the text for inverted rows as well */
  .wwd-row.invert .media { order: -1; } /* Place image first in source order */
}

/* Keyframe for the sticker animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Basic reveal animation (assuming JavaScript adds 'in-view' class) */
.wwd-row.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.wwd-row.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 920px){
  .wwd-row{grid-template-columns:1fr}
  .wwd-row.invert .media, .wwd-row.invert .wwd-text{grid-column:auto}
}

/* Distinct placeholder palettes */
.wwd .phA{background:linear-gradient(135deg, var(--c-yellow), var(--c-sky))}
.wwd .phB{background:linear-gradient(135deg, var(--c-green), var(--c-blue))}
.wwd .phC{background:linear-gradient(135deg, var(--c-orange), var(--c-purple))}
.wwd .phD{background:linear-gradient(135deg, var(--c-pink), var(--c-teal))}

/* Extra visuals polish */
.card-media.blob::after,
.wwd-row .media::after{
  content:""; position:absolute; inset:auto 0 -16px 0; height:30px;
  background:linear-gradient(180deg, transparent, #0000000a);
  pointer-events:none;
}

/* Layout helpers */
.grid.two{ display: grid; gap: 28px; }
@media (min-width: 900px){
  .grid.two{ grid-template-columns: 1.14fr 1fr; align-items: start; }
}

.stack{ display: grid; gap: 12px; }

/* Values list */
.values{ list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.value-icon{ font-size: 1.2rem; margin-right: 6px; }

/* Polaroid collage */
.media-collage{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.polaroid{ background: #fff; border: var(--border); border-radius: var(--radius); padding: 12px 12px 8px; box-shadow: 0 8px 0 var(--ink), 0 12px 25px var(--shadow); }
.polaroid img{ border-radius: 12px; aspect-ratio: 4/3; object-fit: cover; }
.polaroid figcaption{ text-align: center; font-weight: 700; margin-top: 8px; }
.tilt-l{ transform: rotate(-1.2deg); }
.tilt-r{ transform: rotate(1.4deg); }

/* ====== Timeline ====== */
.timeline{display:grid; gap:1rem}
.time-item{display:grid; grid-template-columns: 80px 1fr; gap:1rem; align-items:center; background:var(--paper); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); border:2px solid #00000010}
.time-icon svg{width:70px; height:70px}
.time-content h4{margin:.3rem 0 .2rem 0; font-family:"Fredoka", system-ui, sans-serif}

/* ====== Steps ====== */
.steps{display:flex; gap:1rem; list-style:none; justify-content:center; padding:0; margin:0 0 1rem 0}
.steps li{background:var(--paper); border-radius:999px; padding:.75rem 1rem; border:2px dashed #00000020; box-shadow:var(--shadow); font-weight:700}
.steps li span{display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; margin-right:.35rem; border-radius:50%; background:var(--c-yellow); border:2px solid #00000020}
@media (max-width: 700px){ .steps{flex-wrap:wrap} }

/* ====== Donate ====== */
.donation-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem}
.donation{background:var(--paper); text-align:center; padding:1.25rem; border-radius:var(--radius); border:2px solid #00000010; box-shadow:var(--shadow)}
.donation h4{margin:0 0 .25rem 0; font-size:1.6rem; font-family:"Fredoka", system-ui, sans-serif}
.muted{color:var(--muted)}
@media (max-width: 960px){ .donation-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 540px){ .donation-grid{grid-template-columns: 1fr} }

/* ====== Partners ====== */
.partner-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap:1rem; align-items:center}
.partner{background:var(--paper); border-radius:1000px; padding:1rem; text-align:center; border:2px solid #00000010; box-shadow:var(--shadow); position:relative}
.partner::before{
  content:""; position:absolute; inset:-2px; border-radius:1000px; border:2px dashed #0000001a; pointer-events:none;
}
.partner span{font-weight:800; font-family:"Fredoka", system-ui, sans-serif}
.partner:hover{transform:translateY(-2px) rotate(-.5deg); box-shadow:0 14px 24px rgba(0,0,0,.12)}
@media (max-width: 1080px){ .partner-grid{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 560px){ .partner-grid{grid-template-columns: repeat(2, 1fr)} }

/* ====== Gallery (masonry) ====== */
.filter-group{display:flex; gap:.5rem; justify-content:center; margin-bottom:1rem; flex-wrap:wrap}
.chip{border:2px solid var(--ink); background:transparent; border-radius:999px; padding:.45rem .9rem; font-weight:700; cursor:pointer}
.chip.active{background:var(--ink); color:#fff}
.masonry{column-count:3; column-gap:1rem}
.tile{break-inside:avoid; margin:0 0 1rem 0; background:var(--paper); border-radius:var(--radius); overflow:hidden; border:2px solid #00000010; box-shadow:var(--shadow)}
.tile figcaption{padding:.6rem .8rem; font-weight:600}
.tile .ph{display:block; width:100%; height:220px; background: linear-gradient(135deg, var(--c-yellow), var(--c-sky));}
.ph2{background: linear-gradient(135deg, var(--c-pink), var(--c-yellow));}
.ph3{background: linear-gradient(135deg, var(--c-green), var(--c-blue));}
.ph4{background: linear-gradient(135deg, var(--c-orange), var(--c-purple));}
.ph5{background: linear-gradient(135deg, var(--c-teal), var(--c-yellow));}
.ph6{background: linear-gradient(135deg, var(--c-blue), var(--c-pink));}
.ph7{background: linear-gradient(135deg, var(--c-purple), var(--c-green));}
.ph8{background: linear-gradient(135deg, var(--c-yellow), var(--c-teal));}
.ph9{background: linear-gradient(135deg, var(--c-sky), var(--c-orange));}
@media (max-width: 980px){ .masonry{column-count:2} }
@media (max-width: 600px){ .masonry{column-count:1} }

/* ====== Contact ====== */
.contact-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:1.25rem; align-items:start}
.contact-form, .contact-details{
  background:var(--paper); border-radius:var(--radius); padding:1rem; border:2px solid #00000010; box-shadow:var(--shadow)
}
.field{display:grid; gap:.4rem; margin-bottom:.8rem}
input, textarea{
  font: inherit; padding:.65rem .75rem; border-radius:.8rem; border:2px solid #00000020; background:#fff;
}
input:focus-visible, textarea:focus-visible{outline:3px solid var(--c-blue); outline-offset:2px}
.list{margin:0; padding-left:1.2rem}
.callouts{display:grid; gap:.6rem; margin-top:1rem}
.callout{display:grid; grid-template-columns:60px 1fr; gap:.6rem; align-items:center; background: linear-gradient(180deg, #fff 0%, #fff 70%, #faf6ff 100%); border:2px dashed #00000015; border-radius:var(--radius); padding:.6rem}
.callout svg{width:56px; height:56px}
@media (max-width: 880px){ .contact-grid{grid-template-columns: 1fr} }

/* ====== Footer ====== */
.site-footer{margin-top:4rem; background:#fff; border-top:1px solid #00000010}
.veggie-border svg{display:block; width:100%; height:auto}
.footer-content{display:grid; gap:.5rem; text-align:center; padding:1rem 0}
.site-footer nav{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.copyright{color:var(--muted); font-size:.95rem}

/* ====== Reveal on scroll ====== */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease}
.reveal.in-view{opacity:1; transform:none}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce){
  .float{animation:none}
  .reveal{transition:none}
}


/* ====== Blog ====== */
.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
@media (max-width: 980px){ .blog-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .blog-grid{grid-template-columns: 1fr} }

.post-card{
  background:var(--paper);
  border-radius:var(--radius);
  border:2px solid #00000010;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.post-thumb img{ display:block; width:100%; height:auto; aspect-ratio: 16/10; object-fit: cover; }
.post-thumb .post-ph{ width:100%; height:220px; background:linear-gradient(135deg, var(--c-yellow), var(--c-sky)); }
.post-body{ padding:1rem; display:grid; gap:.5rem; }
.post-title{ margin:.2rem 0; font-family:"Fredoka", system-ui, sans-serif; font-size:1.3rem; }
.post-meta{ color:var(--muted); font-size:.95rem; }
.post-excerpt{ margin:0 0 .4rem 0; }

.post-single .post-header{ display:grid; gap:.5rem; margin-bottom:1rem; }
.post-single .post-hero img{ width:100%; border-radius:var(--radius); border:2px solid #00000010; box-shadow:var(--shadow); }
.post-content{ background:var(--paper); border:2px solid #00000010; box-shadow:var(--shadow); border-radius:var(--radius); padding:1rem; }
.post-nav{ display:flex; justify-content:space-between; gap:1rem; }
.post-tags .eyebrow{ margin-right:.5rem; }