/* =========================================================
   MAIN DONATE BUTTON
   ========================================================= */

.zpc-header-donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  height: 44px;
  margin-left: 8px;
  padding: 12px 16px;

  background: #ffcc18;
  border: none;
  border-radius: 0;
  color: #071d49;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 14px;
  text-decoration: none;
  text-transform: uppercase;

  cursor: pointer;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.zpc-header-donate:hover,
.zpc-header-donate:focus {
  background: #ffd100;
  color: #071d49;
  text-decoration: none;
}

.zpc-header-donate:focus-visible {
  outline: 3px solid #0077c8;
  outline-offset: 3px;
}


/* Heart icon before Donate text */
.zpc-header-donate::before {
  content: "❤";
  display: inline-block;
  margin-right: 6px;

  color: #000;
  font-size: 16px;
  line-height: 1;

  transform: translateY(-1px);
}


/* =========================================================
   DONATE DROPDOWN WRAPPER
   ========================================================= */

.zpc-donate-wrap {
  position: relative;
  display: inline-block;
}


/* =========================================================
   DONATE DROPDOWN
   ========================================================= */

.zpc-donate-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 9999;

  display: none;
  min-width: 190px;
  margin: 0;
  padding: 6px 0;

  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);

  list-style: none;
}


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


/* White triangle above dropdown */
.zpc-donate-dropdown::before {
  content: "";

  position: absolute;
  top: -8px;
  right: 20px;

  width: 0;
  height: 0;

  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;

  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.08));
}


/* =========================================================
   DROPDOWN LINKS
   ========================================================= */

.zpc-donate-dropdown li {
  margin: 0;
  padding: 0;
}

.zpc-donate-dropdown li a {
  display: block;
  padding: 9px 16px;

  color: #071d49;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.zpc-donate-dropdown li a:hover,
.zpc-donate-dropdown li a:focus {
  background: rgba(0, 119, 200, 0.08);
  color: #071d49;
  text-decoration: none;
}

.zpc-donate-dropdown li a:focus-visible {
  outline: 2px solid #0077c8;
  outline-offset: -2px;
}


/* =========================================================
   SMALL-SCREEN SUPPORT
   ========================================================= */

@media (max-width: 767px) {
  .zpc-donate-wrap {
    display: block;
    width: 100%;
  }

  .zpc-header-donate {
    width: 100%;
    margin-top: 12px;
    margin-left: 0;
  }

  .zpc-donate-dropdown {
    right: auto;
    left: 0;

    width: 100%;
    min-width: 100%;
  }

  /* Reposition triangle for full-width mobile dropdown */
  .zpc-donate-dropdown::before {
    right: 20px;
  }

  .site-header,
  .site-header-inner,
  .site-header__top {
    padding-bottom: 20px !important;
  }

  /* Create spacing below the mobile header */
  .site-header,
  header.site-header {
    margin-bottom: 20px !important;
  }

  .site-header + *,
  header.site-header + *,
  .site-header + .layout-container,
  .site-header + main,
  .site-header + .page,
  .site-header + .page-wrapper {
    margin-top: 10px !important;
  }
}


/* =========================================================
   REDUCED-MOTION SUPPORT
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .zpc-header-donate,
  .zpc-donate-dropdown li a {
    transition: none;
  }
}