/* ===========================
   MAIN DONATE BUTTON (HIJACKED)
   =========================== */
.zpc-header-donate {
  background: #ffcc18; 
  color: #071D49; 
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 16px;
  line-height: 14px;
  height: 44px;
  text-decoration: none;
  margin-left: 8px; /* space between this and previous button */
  border: none;
  cursor: pointer;
  border-radius: 0; /* match other header buttons */
}

.zpc-header-donate:hover,
.zpc-header-donate:focus {
  background: #FFD100; /* slight darken on hover/focus */
  text-decoration: none;
}

/* add the heart icon before text */
.zpc-header-donate::before {
  content: "❤";
  font-size: 16px;
  display: inline-block;
  margin-right: 6px;
  color: #000;
  transform: translateY(-1px);
}

/* ===========================
   DROPDOWN WRAPPER
   =========================== */
.zpc-donate-wrap {
  position: relative;
  display: inline-block;
}

/* Dropdown menu container */
.zpc-donate-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  min-width: 180px;
  display: none;
  z-index: 9999;
}

/* Show dropdown when open */
.zpc-donate-dropdown.is-open {
  display: block;
}

/* Dropdown link items */
.zpc-donate-dropdown li a {
  display: block;
  padding: 8px 16px;
  color: #071D49;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  transition: background 0.15s ease-in-out;
}

.zpc-donate-dropdown li a:hover {
  background: rgba(0, 119, 200, 0.08);
}

/* ===========================
   DAF / DONATE OVERLAY BASE
   =========================== */
.zpc-overlay[aria-hidden="true"] {
  display: none;
}

.zpc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(33, 37, 41, 0.65); 
  backdrop-filter: blur(2px);         
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 12000;
  animation: zpc-fade-in 0.25s ease-in-out;
}

/* subtle fade effect */
@keyframes zpc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* modal content box */
.zpc-overlay__dialog {
  background: #fff;
  border-radius: 12px;
  max-width: 500px;
  width: 95%;
  padding: 20px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* close button */
.zpc-overlay__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: #0077C8;
  transition: color 0.2s ease-in-out;
}

.zpc-overlay__close:hover {
  color: #004d7a;
}

/* iframe or chariot component */
.zpc-overlay__iframe {
  width: 100%;
  height: 70vh;
  border: 0;
  border-radius: 8px;
}

.wysiwyg-content.js-text-block.chariot {
  display: flex;
  justify-content: center;
}


/* ===========================
   CHARIOT COMPONENT
   =========================== */
.wysiwyg-content.js-text-block.chariot {
  display: flex;
  justify-content: center;
}


/* ===========================
   DROPDOWN TRIANGLE STYLE
   =========================== */

/* dropdown container */
.zpc-donate-dropdown {
  position: absolute;
  top: calc(100% + 10px); /* adds a little breathing room for the arrow */
  right: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-width: 190px;
  display: none;
  z-index: 9999;
}

/* the small white triangle “pointer” above the dropdown */
.zpc-donate-dropdown::before {
  content: "";
  position: absolute;
  top: -8px; /* sits right above dropdown */
  right: 20px; /* move horizontally to align with button center */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.08)); /* subtle shadow */
}

/* show dropdown */
.zpc-donate-dropdown.is-open {
  display: block;
}

/* dropdown links */
.zpc-donate-dropdown li a {
  display: block;
  padding: 8px 16px;
  color: #071D49;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  transition: background 0.15s ease-in-out;
}
.zpc-donate-dropdown li a:hover {
  background: rgba(0, 119, 200, 0.08);
}








/* ===========================
   SMALL SCREEN SUPPORT
   =========================== */
@media (max-width: 767px) {
  .zpc-header-donate {
    margin-top: 12px; 
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .zpc-donate-dropdown {
    right: auto;
    left: 0;
    min-width: 100%;
  }

  .site-header,
  .site-header-inner,
  .site-header__top {
    padding-bottom: 20px !important;
  }
}
/* mobile: create space UNDER the header, not on the button */
@media (max-width: 767px) {
  /* 1. try the header itself */
  .site-header,
  header.site-header {
    margin-bottom: 20px !important;
  }

  /* 2. if the header is fixed/sticky, push the next element down */
  .site-header + * ,
  header.site-header + * ,
  .site-header + .layout-container,
  .site-header + main,
  .site-header + .page,
  .site-header + .page-wrapper {
    margin-top: 10px !important;
  }
}