/* Yumatters — styles.css */
/* Colors from provided image (no greens): #f6c522, #02a3db, #d72229, #dd542a */
:root{
  --bg: #0b0d10;
  --card: #101418;
  --ink: #e9eef3;
  --muted: #b6c2cf;
  --brand: #dd542a;
  --brand-2:#02a3db;
  --accent:#f6c522;
  --accent-2:#d72229;
  --maxw: 1100px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji",sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg,#0a0e12,#0a0e12 30%, #0e1318 100%);
  line-height:1.5;
}
.container{width:100%;max-width:var(--maxw);padding:0 20px;margin:0 auto}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;background:#000;color:#fff;padding:.5rem 1rem}

/* Header */
.site-header{
  position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);
  background: rgba(10,14,18,.6); border-bottom:1px solid rgba(255,255,255,.06); z-index: 50;
}

.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;gap:.6rem;align-items:center}
.brand-mark{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--brand),var(--accent-2));box-shadow:var(--shadow)}
.brand-name{font-weight:800;letter-spacing:.2px}
.nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:.35rem .6rem;border-radius:8px}
.nav a:hover{background:rgba(255,255,255,.06)}
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:12px;font-weight:700;background:var(--brand);color:#0b0d10;text-decoration:none;box-shadow:var(--shadow)}
.btn--outline{background:transparent;border:2px solid var(--brand);color:var(--ink)}
.btn--small{padding:.5rem .8rem;border-radius:10px;font-weight:700}

/* Mobile nav */
.nav-toggle{display:none;background:none;border:0;color:var(--ink);font-size:1.3rem}
@media (max-width: 800px){
  .nav-toggle{display:block}
  .nav{position:absolute;right:12px;top:64px;background:#0c1014;border:1px solid rgba(255,255,255,.06);border-radius:12px;display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch}
  .nav a{padding:.8rem 1rem}
}

/* Hero */
.hero{
  padding:64px 0 40px;
  background:
   radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,.04), transparent 50%),
   radial-gradient(900px 300px at 90% 0%, rgba(255,255,255,.03), transparent 60%)
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-text h1{font-size: clamp(2rem, 3.5vw, 3rem); line-height:1.1; margin:0 0 .5rem}
.hero-text p{max-width:60ch;color:var(--muted);margin:0 0 1rem}
.cta-row{display:flex;gap:.8rem;margin:.5rem 0 1rem}
.micro-note{font-size:.85rem;color:var(--muted)}

/* HERO LOGO CARD (no background image) */
.hero-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.hero-card img.hero-logo {
  max-height: 180px;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-card{order:-1;height:220px}
  .hero-card img.hero-logo{max-height: 140px;}
}

/* Sections */
.section{padding:64px 0}
.section--alt{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015))}
.section-head h2{margin:0 0 .3rem}
.section-head p{margin:0 0 1.2rem;color:var(--muted)}

.donate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.donate-card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:1rem}
.donate-card .hint{color:var(--muted);font-size:.9rem}
@media (max-width: 900px){.donate-grid{grid-template-columns:1fr}}

.vol-form{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:1rem;border-radius:var(--radius)}
.vol-form label{display:block;margin: .6rem 0}
.vol-form label span{display:block;margin-bottom:.35rem;font-weight:600}
.vol-form input,.vol-form select,.vol-form textarea{
  width:100%;padding:.75rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0b0f13;color:var(--ink)
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width: 800px){.grid-2{grid-template-columns:1fr}}
.form-actions{display:flex;gap:.8rem;align-items:center;margin-top:.6rem}
.hint{color:var(--muted)}

.events{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.event{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:1rem;border-radius:var(--radius)}
.event-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);margin-bottom:.4rem}
.pill{display:inline-block;padding:.25rem .55rem;border-radius:999px;background: color-mix(in srgb, var(--brand) 20%, rgba(255,255,255,.08))}
.pill--alt{background: color-mix(in srgb, var(--brand-2) 25%, rgba(255,255,255,.08))}
.pill--accent{background: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.08))}
@media (max-width: 900px){.events{grid-template-columns:1fr}}

.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:1rem;border-radius:var(--radius)}
.checklist{padding-left:1.2rem}
.checklist li{margin:.25rem 0}
@media (max-width: 900px){.about-grid{grid-template-columns:1fr}}

.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;margin-top:30px}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.to-top{color:var(--muted);text-decoration:none}
.to-top:hover{text-decoration:underline}