/* Custom styles for EFA site */

/* Top navigation bar */
nav.site-nav {
  /* Darker green to match updated footer */
  background-color: #137752; /* Tachyons dark-green */
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
nav.site-nav .site-title {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.5px;
  /* Make brand highlight on hover like menu items */
  display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
nav.site-nav a { color: rgba(255,255,255,0.9); }
nav.site-nav a:hover { color: #ffffff; }
/* Hover highlight for menu links */
nav.site-nav ul a {
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
nav.site-nav ul a:hover,
nav.site-nav ul a:focus {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Give the brand (EFA) the same hover background */
nav.site-nav .site-title:hover,
nav.site-nav .site-title:focus {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Social icons: match hover highlight to menu items */
nav.site-nav .ananke-socials a.ananke-social-link {
  color: rgba(255,255,255,0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
nav.site-nav .ananke-socials a.ananke-social-link:hover,
nav.site-nav .ananke-socials a.ananke-social-link:focus {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
/* Ensure SVG icons adopt link color */
nav.site-nav .ananke-socials a.ananke-social-link .icon svg path,
nav.site-nav .ananke-socials a.ananke-social-link .icon svg circle,
nav.site-nav .ananke-socials a.ananke-social-link .icon svg rect,
nav.site-nav .ananke-socials a.ananke-social-link .icon svg polygon {
  fill: currentColor;
  stroke: currentColor;
}

/* Override theme's Instagram brand red on hover */
nav.site-nav .ananke-socials a.ananke-social-link.instagram,
nav.site-nav .ananke-socials a.ananke-social-link.instagram:link {
  color: rgba(255,255,255,0.9) !important;
  filter: none !important;
}
nav.site-nav .ananke-socials a.ananke-social-link.instagram:hover,
nav.site-nav .ananke-socials a.ananke-social-link.instagram:focus,
nav.site-nav .ananke-socials a.ananke-social-link.instagram:active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  filter: none !important;
}
nav.site-nav .ananke-socials a.ananke-social-link.instagram .icon svg *,
nav.site-nav .ananke-socials a.ananke-social-link.instagram .icon svg path,
nav.site-nav .ananke-socials a.ananke-social-link.instagram .icon svg circle,
nav.site-nav .ananke-socials a.ananke-social-link.instagram .icon svg rect,
nav.site-nav .ananke-socials a.ananke-social-link.instagram .icon svg polygon {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Footer (bottom bar) styles to match header */
footer .ananke-socials a.ananke-social-link {
  color: rgba(255,255,255,0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
footer .ananke-socials a.ananke-social-link:hover,
footer .ananke-socials a.ananke-social-link:focus {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
/* Ensure footer SVG icons adopt link color */
footer .ananke-socials a.ananke-social-link .icon svg path,
footer .ananke-socials a.ananke-social-link .icon svg circle,
footer .ananke-socials a.ananke-social-link .icon svg rect,
footer .ananke-socials a.ananke-social-link .icon svg polygon {
  fill: currentColor;
  stroke: currentColor;
}
/* Prevent Instagram red in footer */
footer .ananke-socials a.ananke-social-link.instagram,
footer .ananke-socials a.ananke-social-link.instagram:link {
  color: rgba(255,255,255,0.9) !important;
  filter: none !important;
}
footer .ananke-socials a.ananke-social-link.instagram:hover,
footer .ananke-socials a.ananke-social-link.instagram:focus,
footer .ananke-socials a.ananke-social-link.instagram:active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  filter: none !important;
}
footer .ananke-socials a.ananke-social-link.instagram .icon svg *,
footer .ananke-socials a.ananke-social-link.instagram .icon svg path,
footer .ananke-socials a.ananke-social-link.instagram .icon svg circle,
footer .ananke-socials a.ananke-social-link.instagram .icon svg rect,
footer .ananke-socials a.ananke-social-link.instagram .icon svg polygon {
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* Intro card overlapping the hero image */
.intro-card {
  background: #ffffff;
  width: 100%;
  margin: -1rem 0 2rem; /* overlap the banner slightly and align to left */
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  /* Keep text aligned to container's left edge; add breathing room mostly on the right */
  padding: 1rem 1rem 1rem 0;
}

/* Use the same sans-serif font as the menu bar for all headings */
h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
/* Ensure theme's serif class on headings doesn't override the sans-serif choice */
h1.athelas, h2.athelas, h3.athelas, h4.athelas, h5.athelas, h6.athelas {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
/* Post date to sans-serif */
time.f6,
time.mv4,
time.dib,
time.tracked,
time.post-date,
time {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
/* Summary cards: date div to sans-serif (specific to summary layout) */
.mb3.pa4 .f6,
.relative.w-100.w-30-l.mb4.bg-white .f6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
.intro-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left gutter | content (auto sizes to .intro-container width) | right gutter */
  align-items: center; /* vertically center logo relative to intro card */
}
.intro-container { grid-column: 2; }
.intro-row { display: flex; align-items: center; gap: 1rem; }
.intro-logo-outside {
  grid-column: 1;
  display: flex;
  justify-content: center; /* center between left border and content */
  padding: 0 0.5rem;
}
.intro-logo-outside img {
  width: 120px;
  height: auto;
  filter: invert(27%) sepia(21%) saturate(1012%) hue-rotate(99deg) brightness(85%) contrast(92%);
}
.intro-inner { display: flex; align-items: flex-start; gap: 1.25rem; }
.intro-logo { display: none; } /* internal logo no longer used */
.intro-title { color: #2f6e44; font-weight: 800; margin: 0 0 0.5rem; }
.intro-text { color: #333; font-size: 1.125rem; line-height: 1.7; }

/* Contact page: adjust spacing around the description line */
.contact-desc {
  margin-top: 0.75rem;   /* a little more space above */
  margin-bottom: 0.25rem;/* a little less space below */
}

@media (max-width: 680px) {
  .intro-logo-outside { display: none; }
  .intro-inner { flex-direction: column; align-items: center; text-align: center; }
}

/* Desktop/tablet: align with Recent News heading; match right edge of news text (container right edge) */
@media (min-width: 681px) {
  /* Desktop: extend white box to the left to align with outer container, keep text position */
  .intro-card { width: 100%; max-width: 100%; padding: 1.25rem 2rem 1.5rem 2rem; margin-left: -2rem; }
}