/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  background-color: #ffffff;
  color: #333333;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  color: #0059b2;
}

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.logo {
  height: 56px;
  width: auto;
}

.site-nav ul {
  display: flex;
  list-style: none;
  gap: 1.5rem;
}

.site-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333333;
}

/* Home icon link styling */
.site-nav .home-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  height: 100%;
  padding: 0.25rem 0;
}

.site-nav .home-link svg {
  width: 18px;
  height: 18px;
  display: block;
  transition: fill 0.3s ease;
  fill: currentColor;
}

.site-nav .home-link:hover svg {
  color: #0059b2;
}

.donate-button {
  margin-left: 1.5rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.primary-btn {
  background-color: #0059b2;
  color: #ffffff;
}

.primary-btn:hover,
.primary-btn:focus {
  background-color: #004391;
}

.secondary-btn {
  background-color: #f2f2f2;
  color: #0059b2;
  border: 1px solid #0059b2;
}

.secondary-btn:hover,
.secondary-btn:focus {
  background-color: #e6f0ff;
}

.btn-lg {
  font-size: 1.1rem;
  padding: 0.9rem 2rem;
}

/* Hero */
/*
  The hero section uses a full‑bleed background image with a dark overlay for
  readability. The text colour is set to white and a relative z‑index
  ensures it appears above the overlay. See index.html for the
  corresponding background image declaration.
*/
.hero {
  padding: 6rem 0 4rem;
  text-align: center;
  background: url("../assets/HomePage_Background.jpg") center/cover no-repeat;
  color: #ffffff;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #ffffff;
  font-weight: 700;
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: #ffffff;
}

/* Sections */
section {
  padding: 4rem 0;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #002b5b;
  text-align: center;
}

/* About */
.about p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Programs / Showcase */
.programs {
  background-color: #ffffff;
}

.program-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.program-item {
  /* Make program cards fully clickable when wrapped in an <a> tag. */
  text-align: center;
  display: block;
}

.program-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 0.8rem;
  /* Set a white background behind the image to mask any rounded
     corners or transparency and remove inline gaps by forcing the
     element to be a block. */
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: block;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.program-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #0059b2;
}

.program-item p {
  font-size: 0.95rem;
  color: #555555;
}

/* Impact */
.impact {
  background-color: #f7f9fc;
}

.impact p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 2rem;
}

.impact-graphics {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center; 
}

/*
  Impact graphics should maintain their natural aspect ratio and avoid being
  stretched horizontally. By removing the fixed width and allowing the
  images to size themselves up to the available space (capped at 100%),
  they preserve their proportions within the flex container. The
  border‑radius and shadow remain for a polished look.
*/
.impact-graphics img {
  max-width: 420px;
  width: auto;
  height: auto;
  flex: 0 1 auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  object-fit: contain;
}

/* Donate */
.donate {
  background-color: #ffffff;
}

.donate-container {
  text-align: center;
  max-width: 800px;
}

.donate-container p {
  margin-bottom: 2rem;
  font-size: 1rem;
  color: #555555;
}

/* Footer */
.site-footer {
  background-color: #f2f2f2;
  padding-top: 3rem;
  padding-bottom: 2rem;
  margin-top: 4rem;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: space-between;
}

.footer-left,
.footer-right {
  flex: 1 1 250px;
}

.footer-left p,
.footer-right p {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.footer-bottom {
  margin-top: 2rem;
  border-top: 1px solid #e0e0e0;
  padding-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #666666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-nav ul {
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .donate-button {
    margin-left: 0;
  }
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .program-item h3 {
    font-size: 1.2rem;
  }
}