:root{
  --primary:#D4A017;           /* mustard yellow for the top strip & accents */
  --accent:#fde428;            /* secondary accent (kept for buttons if needed) */
  --muted:#6b7280;
  --container:1200px;
  --top-strip-height: 8px;     /* thin mustard bar on top */
  --header-height: 86px;       /* header bar height */
  --slider-height-vh: 50vh;    /* hero slider height */
  --slider-border-color: #ffffff;
  --slider-border-width: 6px;
  --slider-border-radius: 10px;
  --slider-max-width: 1100px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  margin:0;
  color:#111;
  background:#fff;
  line-height:1.5;
  /* make room for the fixed header (strip + header) so slider/content not hidden */
  padding-top: calc(var(--top-strip-height) + var(--header-height));
}
.container{max-width:var(--container); margin:0 auto; padding:0 1rem}

/* top thin mustard strip */
.top-strip{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: var(--top-strip-height);
  background: var(--primary);
  z-index: 120;
}

/* Header - fully mustard */
.site-header{
  position: fixed;
  left:0;
  right:0;
  top: var(--top-strip-height);
  height: var(--header-height);
  z-index: 110;
  background: var(--primary);
  display:flex;
  align-items:center;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  transition: box-shadow .22s ease, transform .18s ease;
}
.site-header.scrolled{
  box-shadow:0 6px 22px rgba(2,6,23,0.08);
}

.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%}

/* Brand/Logo */
.brand{display:flex; align-items:center; text-decoration:none; color:inherit}
.logo{height:64px; width:auto; margin-right:0.75rem; object-fit:contain}
.brand-text{font-weight:700; font-size:1.05rem; color:#111}

/* Centered nav */
.nav{
  display:flex;
  gap:1.5rem;
  justify-content:center;
  align-items:center;
  flex:1;
}
.nav-link{
  color: #111;
  text-decoration:none;
  padding:0.5rem 0.25rem;
  font-weight:500;
}
.nav-link:hover{ color:#000; text-decoration:underline; text-underline-offset:4px; }

/* Right side actions */
.header-actions{
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-left: 1rem;
}
.btn-donate{
  background: #111;
  color: #fff;
  padding:0.45rem 0.8rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  border: 2px solid rgba(255,255,255,0.25);
}
.btn-donate:hover{filter:brightness(1.06)}

/* Mobile toggle (hidden on wide screens) */
.mobile-toggle{display:none; background:transparent; border:0; color:#111; font-size:20px}

/* HERO SLIDER */
/* IMPORTANT: prevent any internal scrollbars inside the slider */
.hero-slider{position:relative; overflow:hidden; margin-top:0}
.slider{
  position:relative;
  width:100%;
  height:var(--slider-height-vh);
  max-height:var(--slider-height-vh);
  outline:none;
  display:block;
  overflow:hidden; /* removes the vertical scrollbar within the slider */
}
.slides{
  display:flex;
  height:100%;
  width:100%;
  transition:transform .6s ease;
  will-change:transform;
}
.slide{
  flex:0 0 100%;
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 1rem;
  overflow:hidden;
}

/* Slide image */
.slide-img{
  width:100%;
  max-width:var(--slider-max-width);
  height:calc(var(--slider-height-vh) - (2 * var(--slider-border-width)));
  object-fit:cover;
  display:block;
  border: var(--slider-border-width) solid var(--slider-border-color);
  border-radius: var(--slider-border-radius);
  box-shadow: 0 12px 30px rgba(2,6,23,0.22), 0 4px 12px rgba(2,6,23,0.09);
  background:#ddd;
}

/* controls */
.slider-prev, .slider-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.45); color:#fff; border:0; padding:0.45rem 0.8rem; font-size:1.6rem; border-radius:6px; cursor:pointer;
  z-index:40;
}
.slider-prev{left:12px}
.slider-next{right:12px}
.slider-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px; z-index:40}
.slider-dots .dot{width:12px; height:12px; border-radius:50%; background:rgba(0,0,0,0.12); border:0; cursor:pointer; padding:0}
.slider-dots .dot.active{background:var(--primary); box-shadow:0 0 0 6px rgba(0,0,0,0.04)}

/* page content styling */
main{background:#fff}

/* contents below slider */
.container + .intro{margin-top:1.25rem}
.intro{display:grid; gap:1rem; grid-template-columns:1fr}
.card{background:#fff; border:1px solid #e6e6e6; padding:1rem; border-radius:8px}

/* Home page: free-flow blocks */
.home-block{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
.home-block--small{padding:0.25rem 0}
.home-block h2, .home-block h3{margin-top:0}
.home-block p{margin:0.5rem 0}
.home-block a{color:var(--primary); text-decoration:none; font-weight:600}
.home-block a:hover{text-decoration:underline}
.three-cards{display:grid; gap:1.25rem; margin-top:1.25rem; grid-template-columns:repeat(3, minmax(0, 1fr))}
.small{padding:1rem}
.events-preview{margin-top:1.5rem}
.events-list{list-style:none; padding:0; margin:0; display:grid; gap:0.75rem}
.events-list li{display:flex; gap:1rem; padding:0.8rem; border:1px solid #eee; border-radius:8px}
.events-list time{color:var(--muted); min-width:90px; font-weight:600}

/* Sponsors carousel (last section on home) */
.sponsors{
  margin-top:2.5rem;
  background:#f3f6ff;
  padding:2.25rem 0 1.75rem;
  padding-bottom:1rem;
  /* Override slider sizing just for this section */
  --slider-height-vh: 0px; /* not used here (we override height on the sponsor slider) */
  --slider-max-width: 1100px;
  --slider-border-width: 3px;
}
.sponsors .section-title{margin:0 0 0.75rem 0}
.sponsor-figure{margin:0; width:100%; display:flex; flex-direction:column; align-items:stretch}
.sponsors .slide-img{
  /* Reduce whitespace: let logos fill the slide width */
  width:100%;
  max-width:none;
  height:320px;
  object-fit:cover;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:10px;
  display:block;
}
.sponsor-caption{margin-top:0.25rem; text-align:center; font-weight:600; color:#111; font-size:0.92rem}

/* Sponsor "swiper-style" row: multiple logos visible at once */
.sponsor-slider{ --slides-per-view: 4; --sponsor-gap: 12px; }
.sponsor-slider{ height:auto; max-height:none; padding-bottom:2.25rem }
.sponsor-slider .slides{ height:auto; gap:var(--sponsor-gap); padding:0; }
.sponsor-slider .slide{
  flex: 0 0 calc((100% - (var(--sponsor-gap) * (var(--slides-per-view) - 1))) / var(--slides-per-view));
  padding: 0; /* remove default slide padding */
}

/* Put sponsor dots below the carousel (not over the images) */
.sponsor-slider .slider-dots{
  position:relative;
  left:auto;
  transform:none;
  bottom:auto;
  margin-top:18px;
  justify-content:center;
}
@media (max-width: 999px){
  .sponsor-slider{ --slides-per-view: 3; }
  .sponsors .slide-img{ height:300px; }
}
@media (max-width: 700px){
  .sponsor-slider{ --slides-per-view: 2; }
  .sponsors .slide-img{ height:280px; }
}
@media (max-width: 420px){
  .sponsor-slider{ --slides-per-view: 1; }
}

/* footer */
.site-footer{background:#f3f4f6; padding:1.25rem 0; margin-top:2rem}
.footer-inner{display:flex; gap:2rem; flex-wrap:wrap}
.footer-col{flex:1; min-width:200px}
.muted{color:var(--muted)}
.quick-links{list-style:none;padding:0;margin:0}
.quick-links li{margin-bottom:0.4rem}
.quick-links a{color:var(--primary); text-decoration:none}

/* footer bottom line (copyright) */
.footer-bottom{
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  justify-content: flex-end;
}
.copyright{color: var(--muted)}

/* responsive adjustments */
@media (max-width: 999px){
  :root{ --slider-height-vh: 40vh; }
  .logo{height:52px}
  .brand-text{display:none}
  .nav{display:none}
  .nav.open{display:flex; flex-direction:column; position:fixed; right:0; top: calc(var(--top-strip-height) + var(--header-height)); background:#fff; padding:1rem; box-shadow:0 8px 30px rgba(0,0,0,0.12)}
  .mobile-toggle{display:inline-block}
  .header-actions{gap:0.5rem}
  .slide-inner{padding:1rem}
  .slide-title{font-size:1.4rem}
  .slider-dots{bottom:12px}
  .slider-prev, .slider-next{display:none}

  /* Home blocks stack */
  .three-cards{grid-template-columns:1fr; gap:1rem}
  .three-cards .home-block--small{padding-top:0.75rem}
  .three-cards .home-block--small + .home-block--small{border-top:1px solid rgba(0,0,0,0.08)}

  /* footer */
  .footer-bottom{justify-content:center}
}
@media (min-width:1600px){
  .logo{height:80px}
  :root{ --slider-max-width: 1400px; }
}

/* =========================
   Modern page sections
   ========================= */

.content{background:#fff}

/* Page hero */
.page-hero{
  background: linear-gradient(180deg, rgba(212,160,23,0.16) 0%, rgba(255,255,255,1) 60%);
  padding: 2.25rem 0 1.5rem;
}
.page-hero-compact{ padding: 1.75rem 0 1rem; }
.page-hero-inner{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 1.5rem;
  align-items: center;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.75);
  font-weight:700;
  font-size:.85rem;
}
.page-title{ margin: .5rem 0 0.5rem; font-size: 2.1rem; line-height:1.15; }
.page-lead{ margin: 0; color: #111; max-width: 60ch; }
.kpi-row{
  display:flex;
  gap: .75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.kpi{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  border-radius: 12px;
  padding: .75rem .85rem;
  min-width: 160px;
}
.kpi-num{font-weight:800}
.kpi-label{color:var(--muted); font-size:.92rem; margin-top:.2rem}

.media-frame{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 40px rgba(2,6,23,0.12);
  background: #fff;
}
.media-frame--compact{ max-height: 240px; }
.media-img{
  width:100%;
  height: 360px;
  object-fit: cover;
  display:block;
}
.media-frame--compact .media-img{ height: 240px; }
.media-hint{
  position:absolute;
  left:12px;
  bottom:12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.10);
  padding: .35rem .55rem;
  border-radius: 10px;
  font-size: .82rem;
}

/* Sections */
.section{ padding: 1.75rem 0; }
.section-muted{ background: #f8fafc; border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); }
.section-head{ margin-bottom: 1rem; }
.section-head h2{ margin: 0; }
.section-head p{ margin: .35rem 0 0; }

.section-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.section-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 1.1rem 1.1rem;
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}
.section-card h2{ margin-top:0; }

.clean-list{ margin: .75rem 0 0; padding-left: 1.05rem; }
.clean-list li{ margin: .45rem 0; }

/* Buttons (non-header) */
.btn-primary, .btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .55rem .9rem;
  border-radius: 10px;
  text-decoration:none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.12);
}
.btn-primary{
  background: #111;
  color:#fff;
}
.btn-primary:hover{ filter: brightness(1.06); }
.btn-secondary{
  background: #fff;
  color:#111;
}
.btn-secondary:hover{ background: rgba(0,0,0,0.04); }
.cta-row{ display:flex; gap:.6rem; flex-wrap: wrap; margin-top: .8rem; }

/* People */
.people-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.person-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
  display:flex;
  flex-direction:column;
}
.person-photo{
  position:relative;
  background: rgba(0,0,0,0.04);
}
.person-photo img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}
.photo-hint{
  position:absolute;
  left:10px;
  bottom:10px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.10);
  padding: .25rem .5rem;
  border-radius: 10px;
  font-size: .78rem;
}
.person-body{ padding: 1rem 1.05rem 1.1rem; }
.person-body h3{ margin:0; font-size: 1.05rem; }
.person-role{ margin: .3rem 0 .6rem; font-weight:700; color: rgba(0,0,0,0.78); }

/* Callouts */
.callout{
  margin-top: 1.25rem;
  padding: 1.1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(212,160,23,0.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.callout--thin{ margin-top: 1.5rem; }

/* Events */
.event-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.event-card{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 12px 34px rgba(2,6,23,0.08);
}
.event-media{
  position:relative;
  background: rgba(0,0,0,0.04);
}
.event-media img{
  width:100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display:block;
}
.event-body{ padding: 1.1rem 1.1rem 1.2rem; }
.event-meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom: .5rem; }
.event-date{
  font-weight:800;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
}
.event-tag{
  font-weight:800;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(212,160,23,0.25);
}
.event-details{
  margin: .75rem 0 1rem;
  display:grid;
  gap: .35rem;
  color: #111;
}

/* Responsive */
@media (max-width: 999px){
  .page-hero-inner{ grid-template-columns: 1fr; }
  .media-img{ height: 260px; }
  .section-grid{ grid-template-columns: 1fr; }
  .people-grid{ grid-template-columns: 1fr; }
  .event-card{ grid-template-columns: 1fr; }
  .event-media img{ min-height: 220px; }
  .page-title{ font-size: 1.75rem; }
}


/* =========================
   Contact / Volunteer form
   ========================= */
.contact-form{max-width:860px; margin-top:1rem; display:grid; gap:0.9rem}
.contact-form label{display:block; font-weight:600}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  margin-top:0.35rem;
  padding:0.7rem 0.85rem;
  border:1px solid rgba(0,0,0,0.14);
  border-radius:12px;
  font:inherit;
  background:#fff;
}
.contact-form textarea{resize:vertical}
.form-row{display:grid; gap:0.9rem; grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:700px){.form-row{grid-template-columns:1fr}}
.check-grid{display:grid; gap:0.6rem; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:0.35rem}
@media (max-width:700px){.check-grid{grid-template-columns:1fr}}
.check-item{display:flex; align-items:flex-start; gap:0.55rem; padding:0.6rem 0.75rem; border:1px solid rgba(0,0,0,0.10); border-radius:12px; background:rgba(0,0,0,0.02)}
.check-item input{width:auto; margin-top:0.2rem}
.form-actions{display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; margin-top:0.25rem}
.form-help{font-size:0.95rem; color:rgba(0,0,0,0.68); max-width:860px}
.required{color:#b00020; font-weight:700}
.consent-row{display:flex; align-items:flex-start; gap:.55rem; font-weight:500}
.consent-row input{width:auto; margin-top:.2rem}


/* =========================
   Home page free-flow (unboxed)
   ========================= */
body.home .home-block{
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.home .three-cards .home-block{
  padding-top: 0.25rem !important;
}
body.home .three-cards{
  gap: 2.25rem; /* more airy like screenshot */
}
@media (max-width: 999px){
  body.home .three-cards{gap: 1.25rem;}
}

body.home .intro .card,
body.home .intro .section-card{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}