/* Colors sampled from the foundation logo. White remains the main canvas. */
:root {
  --saf-logo-blue: #244594;
  --saf-logo-blue-dark: #153574;
  --saf-logo-red: #ed1b24;
  --saf-logo-red-text: #bb1723;
  --ink: #142d56;
  --muted: #5b687c;
  --purple: var(--saf-logo-blue);
  --purple-dark: var(--saf-logo-blue-dark);
  --lilac: #f4f7fd;
  --mint: var(--saf-logo-red);
  --border: #e3e9f2;
}

body,
.site-header,
.site-footer,
.saf-reference-page {
  background: #fff;
}

::selection { background: #dce6f8; }
:focus-visible { outline-color: var(--saf-logo-blue); }

.button-primary { box-shadow: 0 5px 14px #24459424; }
.button-primary:hover { box-shadow: 0 8px 20px #24459436; }
.button-outline { border-color: #8da8d6; background: #fff; }
.button-outline:hover,
.button-soft,
.circle-button:hover { background: #eef3fc; }
.text-link { border-bottom-color: #9bb2da; }
.site-header .header-donate,
.mobile-actions [data-donate] {
  background: var(--saf-logo-red-text);
  color: #fff;
  box-shadow: 0 5px 14px #bb172324;
}
.site-header .header-donate:hover,
.mobile-actions [data-donate]:hover { background: #9e1320; }

.hero { background: linear-gradient(116deg, #fff 0%, #fff 54%, #f5f8fe 100%); }
.hero .eyebrow,
.eyebrow { color: var(--saf-logo-blue); }
.tiny-leaf { color: var(--saf-logo-red); }
.floating-label > span { background: #eaf0fa; }
.orbit { border-top-color: #7898cf; border-right-color: #7898cf; }
.orbit:before,
.orbit span { background: var(--saf-logo-red); }
.ambient-one { background: radial-gradient(circle, #e6eefb, transparent 72%); }
.ambient-two { background: radial-gradient(circle, #eef3fc, transparent 65%); }
.pillars { background: #fff; border-bottom-color: #e6eaf1; }
.mint { background: #e8eef9; color: var(--saf-logo-blue); }
.lilac { background: #fde7e9; color: var(--saf-logo-red-text); }
.projects-section,
.testimonials-section,
.testimonials-page-list { background: #f8fafd; }
.gallery-section { background: linear-gradient(120deg, #f9fbff, #f1f5fc); }
.involvement-banner { background: linear-gradient(120deg, #eef3fc, #fafcff); border-color: #e0e9f7; }
.reference-about-section { background: linear-gradient(115deg, #fff 0%, #fff 68%, #f3f7fd 100%); border-bottom-color: #e7ecf4; }
.reference-about-action.text-link { background: #e9effa; }
.reference-about-media:before { border-top-color: #9bb2db; border-right-color: #9bb2db; }
.reference-programs,
.reference-bottom-section { background: #fff; }
.reference-program-card { border-color: #e4eaf3; box-shadow: 0 4px 16px #2445940b; }
.reference-program-image { background: #e9eff9; }
.reference-gallery-card { background: linear-gradient(120deg, #eef3fc, #f9fbff); }
.reference-involvement-card { background: linear-gradient(120deg, #edf3fc, #fbfcff); border-color: #e0e9f7; }
.reference-involvement-mark { background: #dce8f8; color: var(--saf-logo-blue); }
.saf-profile-hero,
.saf-donation-hero { background: linear-gradient(120deg, #fff, #f4f7fd); }
.saf-values-section,
.partners-section { background: #fff; }
.about-page-values article:nth-child(2) { background: #f3f7fd; border-color: #e0e9f7; }
.about-page-values article:nth-child(3) { background: #fff6f6; border-color: #f8dfe2; }
.saf-us-tax-identity,
.saf-bank-transfer { background: linear-gradient(120deg, #fff, #f5f8fd); }
.saf-medical-observations { background: linear-gradient(120deg, #f5f8fd, #fff); }
.saf-medical-resources { background: linear-gradient(120deg, #fff7f7, #fff); }
.tag,
.tag.education,
.tag.community { background: #e8effa; color: var(--saf-logo-blue-dark); }
.site-footer .footer-main nav a { color: #2f4770; }
.site-footer .footer-main nav a:hover,
.site-footer .footer-main nav a:focus-visible { color: var(--saf-logo-blue); }
.footer-socials a { border-color: #d8e2f3; color: var(--saf-logo-blue); }
.footer-socials a:hover,
.footer-socials a:focus-visible { border-color: var(--saf-logo-blue); background: var(--saf-logo-blue); }

/* Published media keeps the colors present in the uploaded file. */
.board-grid .board-photo img,
.partner-logo img {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Board cards follow the supplied portrait, accent bar, name, role and bio layout. */
.team-showcase {
  background: radial-gradient(circle at 8% 14%, #f0f4fc 0, transparent 23%),
              radial-gradient(circle at 94% 75%, #fff1f2 0, transparent 18%),
              #fff;
}
.team-showcase:after { background: #eaf0fa; opacity: .45; }
.team-line:before,
.team-line:after { border-top-color: #8ea8d2; }
.team-showcase-heading .eyebrow { color: var(--saf-logo-red-text); }
.team-showcase-heading h1 { color: var(--saf-logo-blue-dark); }
.team-showcase-heading > p:not(.eyebrow) { color: var(--muted); }

.board-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}
.saf-team-reference .board-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.board-card,
.saf-team-reference .board-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 18px 20px 26px;
  overflow: hidden;
  border: 1px solid #e4eaf3;
  border-radius: 16px;
  background: linear-gradient(to bottom, #fff 0 35%, #f5f7fb 35% 100%);
  box-shadow: 0 10px 28px #1639760d;
  text-align: center;
}
.board-photo,
.saf-team-reference .board-photo {
  position: relative;
  display: grid;
  width: min(100%, 230px);
  height: 220px;
  aspect-ratio: auto;
  flex: 0 0 auto;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(135deg, #e6edfa, #f9e8ea);
  color: var(--saf-logo-blue);
}
.board-photo::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  background: var(--saf-logo-red);
  content: '';
  pointer-events: none;
}
.board-grid .board-photo img,
.saf-team-reference .board-photo img,
.team-showcase .board-photo img {
  box-sizing: border-box !important;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center 18%;
}
.board-copy,
.saf-team-reference .board-copy {
  width: 100%;
  max-width: 270px;
  padding: 18px 0 0;
}
.board-copy h2,
.saf-team-reference .board-copy h2 {
  margin: 0;
  color: var(--saf-logo-blue-dark);
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
}
.board-copy .board-role,
.saf-team-reference .board-copy .board-role {
  margin: 4px 0 0;
  color: var(--saf-logo-red-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.board-description {
  max-width: none;
  margin: 14px 0 0;
  color: #4f5d73;
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
}
.saf-team-reference .board-description {
  max-width: none;
  margin: 14px 0 0 !important;
  color: #4f5d73 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  text-align: left;
}
.team-socials { margin-top: 14px; }
.team-socials a { color: var(--saf-logo-blue); }
.team-socials a:hover,
.team-socials a:focus-visible { color: var(--saf-logo-red-text); }

@media (max-width: 920px) {
  .board-grid,
  .saf-team-reference .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .board-grid,
  .saf-team-reference .board-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .board-card,
  .saf-team-reference .board-card { padding: 18px 20px 24px; }
  .board-photo,
  .saf-team-reference .board-photo { width: min(100%, 240px); height: 230px; }
}