/* =========================
   Design tokens / defaults
   ========================= */
:root{
  --bg:#ffffff; --fg:#1a1a1a; --muted:#6b7280;
  --card:#f8f8f8; --border:#e5e7eb;
  --accent:#f1d600;     /* yellow  */
  --accent-2:#e6007e;   /* magenta */
  --accent-3:#00a0e3;   /* blue  (DARKER BLUE=  #006699)  */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;background:var(--bg);color:var(--fg)
}
a{color:inherit}
img{max-width:100%;display:block;height:auto}

.container{max-width:1000px;margin:0 auto;padding:0 1rem}
@media (max-width:640px){ .container{ padding:0 2.5rem }}

/* Skip link */
.skip-link{position:absolute;left:-9999px;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 / Nav
   ========================= */
header{
  position:sticky;top:0;z-index:30;background:#fff;color:#000;
  border-bottom:1px solid #e5e7eb;
}

.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;padding:.25rem 0;
}

.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand img{max-height:120px;height:auto;width:auto}
.brand span{font-weight:700;letter-spacing:.2px}

nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.75rem;flex-wrap:wrap}
nav a{
  display:inline-block;padding:.5rem .8rem;border-radius:.5rem;
  text-decoration:none;color:#000;font-weight:700;font-size:1.1rem
}
nav a:hover, nav a:focus{background:#f8f8f8}

/* Mobile: stack logo over nav */
@media (max-width:640px){
  .topbar{flex-direction:column;align-items:center;gap:.5rem}
  .brand img{max-height:80px}
  nav ul{justify-content:center}
}

/* Mobile nav: 3 on first row, 2 centered below */
@media (max-width:640px){
  header nav ul{
    display:grid;
    grid-template-columns:repeat(3,max-content);
    grid-template-rows:auto auto;
    justify-content:center;justify-items:center;
    gap:4px 12px;width:fit-content;margin:0 auto;
  }
  header nav ul li, header nav ul a{white-space:nowrap}
  header nav ul li:nth-child(1),
  header nav ul li:nth-child(2),
  header nav ul li:nth-child(3){grid-row:1}
  header nav ul li:nth-child(4){grid-row:2;grid-column:2}
  header nav ul li:nth-child(5){grid-row:2;grid-column:3}
  header .social-links{margin-top:6px}
  nav a{font-size:1rem}
}

/* Social icons row (works with your current inline SVG) */
.social-links{display:flex;justify-content:center;gap:.75rem;margin-top:.5rem}
/* keep the icon links aligned even if inline styles are removed later */
.social-links a{display:inline-flex}

/* Optional: match current inline colors without editing HTML */
.social-links a[aria-label="Facebook"]{color:#1877F2}
.social-links a[aria-label="Instagram"]{color:#E4405F}
.social-links a[aria-label="X (Twitter)"]{color:#000}

/* =========================
   CTA bar + buttons
   ========================= */
.cta-bar{background:var(--accent);color:#000}
.cta-bar .inner{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:.6rem 1rem;font-weight:600;
}
.cta-buttons{display:flex;gap:.5rem;flex-wrap:wrap}

.btn{
  display:inline-block;padding:.65rem 1rem;border-radius:.6rem;
  text-decoration:none;font-weight:700;border:2px solid transparent
}
.btn.primary{background:#000;color:#fff}
.btn.primary:hover{background:#111}
.btn.yellow{background:var(--accent);color:#000; border: 2px solid #000}
.btn.yellow:hover{filter:brightness(.95)}
.btn.magenta{background:var(--accent-2);color:#fff}
.btn.magenta:hover{filter:brightness(.95)}
.btn.blue{background:var(--accent-3);color:#000} /* AA contrast choice */
.btn.blue:hover{filter:brightness(.95)}
.btn.ghost{background:transparent;border-color:#000;color:#000}

/* Mobile tweaks: slimmer CTAs */
@media (max-width:640px){
  .cta-bar .inner{padding:.5rem 1.25rem}
  .cta-bar .btn{padding:.5rem .9rem;font-size:1rem;border-radius:.55rem}
}

/* CTA bar layout on small screens: 
   [Donate] [Volunteer]
   [Update your details (full width)]
   [Join our newsletter (full width)]
*/
@media (max-width: 640px) {
  .cta-bar .cta-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cta-bar .cta-buttons .btn { width: 100%; }

  /* HTML order is: Donate, Join, Volunteer */
  .cta-bar .cta-buttons .btn:nth-child(1) { /* Donate */
    grid-column: 1; grid-row: 1;
  }
  .cta-bar .cta-buttons .btn:nth-child(4) { /* Volunteer */
    grid-column: 2; grid-row: 1;
  }
  .cta-bar .cta-buttons .btn:nth-child(3) { /* Update your details */
    grid-column: 1 / -1; grid-row: 2;     /* spans both columns */
  }

  .cta-bar .cta-buttons .btn:nth-child(2) { /* Join newsletter */
    grid-column: 1 / -1; grid-row: 3;     /* spans both columns */
  }   
}


/* =========================
   Hero
   ========================= */
.hero{
  background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.45)),url('hero.jpg') center/cover no-repeat;
  color:#fff;
}
.hero .inner{padding:4.5rem 1rem 3.5rem}

.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem;
}
.hero-text{max-width:600px}
.hero h1{font-size:clamp(1.8rem,4vw,2.75rem);margin:0 0 .5rem}
.hero p{max-width:48ch;margin:0 0 1rem;color:#e5e7eb}
.hero-image img{
  width:100%;height:auto;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.15);
  object-fit:cover;
}

/* Mobile: hero */
@media (max-width:768px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-image{margin-top:1rem}
}
/* Make hero tagline more visible on small phones */
@media (max-width:640px){
  .hero .container, .hero .inner{
    min-height:55vh;display:flex;flex-direction:column;justify-content:center;text-align:center;
  }
  .hero h1{font-size:clamp(26px,6vw,36px);line-height:1.2;margin-bottom:.5rem}
  .hero p{font-size:1rem;margin-bottom:1rem}
  .hero .cta-buttons{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:10px;justify-content:center;
  }
  .hero .cta-buttons .btn{padding:.5rem .9rem;font-size:1rem}
}

/* =========================
   Sections / cards / grids
   ========================= */
.section{padding:2.25rem 0}
.grid{display:grid;gap:1rem}
@media (min-width:768px){ .grid.cols-2{grid-template-columns:1fr 1fr} }

.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem}
.card h3{margin:.25rem 0 .5rem;font-size:1.1rem}

.muted{color:var(--muted)}
.small{font-size:.9rem}

.card ul {
  padding-left: 1.25rem; /* adds left indent for bullets */
  margin: 0.5rem 0 1rem; /* adds space above/below list */
}


/* Footer */
footer{background:#fff;color:#000;margin-top:2rem}
footer .inner{padding:1.25rem 1rem}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}
@media (max-width:640px){
  .cta-bar .inner{padding:.6rem 2rem}
  .hero .inner{padding:3rem 2rem 2rem}
  footer .inner{padding:1rem 2rem}
  .container{padding:0 2.5rem}
}

/* =========================
   Accessibility helpers
   ========================= */
:focus{outline:3px solid var(--accent-2);outline-offset:3px}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
main a{text-decoration:underline;text-underline-offset:2px}
main a:hover, main a:focus-visible{ text-decoration-thickness:2px }
nav a, .btn{ text-decoration:none } /* keep nav/buttons un-underlined */

/* =========================
   News list
   ========================= */
.news-item-head{display:flex;align-items:center;gap:.6rem}
.dot{width:14px;height:14px;border-radius:999px;flex:0 0 14px;background:var(--dot,var(--accent))}
.news-item:not(:last-child){border-bottom:1px dashed var(--border);padding-bottom:1rem;margin-bottom:1rem}

/* =========================
   Sign-up (equal height columns)
   ========================= */
#signup .grid.cols-2{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:1.5rem}
#signup .hero-image{display:flex}
#signup .hero-image img{width:100%;height:100%;object-fit:cover;border-radius:1rem}
@media (max-width:768px){
  #signup .grid.cols-2{grid-template-columns:1fr}
  #signup .hero-image img{height:auto}
}

/* Mailchimp messages: bold + coloured */
#mc_embed_signup .response{
  display:block !important;margin-top:1rem;font-weight:700;font-size:1rem;text-align:center;
  transition:opacity .3s ease;
}
#mc_embed_signup #mce-success-response{color:#cc0000}
#mc_embed_signup #mce-error-response{color:#b00020}

/* =========================
   Donate card (moved from inline)
   ========================= */
.donate-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;margin:10px 0 16px;
}
@media (min-width:600px){
  .donate-grid{grid-template-columns:repeat(2,1fr)}
}
#donate .bank-details{list-style:none;padding:0;margin:8px 0 0}
#donate .bank-details li{margin:4px 0}

/* =========================
   Resources card inline styles -> CSS
   ========================= */
#resources .card p:first-of-type{
  display:flex;align-items:center;gap:.75rem;
}
#resources .card p img{
  width:60px;height:auto;border-radius:.25rem;border:1px solid var(--border);
}

/* =========================
   Local news two-column layout
   ========================= */
#news .news-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:1.25rem;align-items:stretch;
}
#news .news-photo{border-radius:12px;overflow:hidden;min-height:320px}
#news .news-photo img{width:100%;height:100%;object-fit:cover;display:block}
#news .news-content h2{margin-top:0}

@media (max-width:768px){
  #news .news-grid{grid-template-columns:1fr}
  #news .news-photo{min-height:0}
  #news .news-photo img{height:auto}
}

/* =========================
   Facebook embed fit
   ========================= */
.fb-wrapper{width:100%;display:flex;justify-content:center}
.fb-page{width:100% !important;max-width:100% !important}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe{width:100% !important}
@media (max-width:640px){ .fb-page{min-height:400px} }