/* ==========================================================================
   Modal Popup Component
   Pair with modal.js. Load AFTER Bootstrap's CSS.
   ========================================================================== */

/* --- Trigger: base (strip native button chrome, keep it focusable) ------- */
.c-modal__trigger {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.c-modal__trigger:focus-visible {
  outline: 3px solid #006341;
  outline-offset: 3px;
}

/* --- Trigger: text-only (no image) -> render as a button ----------------- */
.c-modal__trigger:not(:has(.c-modal__trigger-img)) {
  display: inline-block;
  padding: .5rem 1rem;
  background: #006341;
  color: #fff;
  border-radius: .375rem;
}
.c-modal__trigger:not(:has(.c-modal__trigger-img)):hover {
  background: #003422;   /* a touch darker than #006341 */
}

/* --- Trigger: image + text -> stacked card ------------------------------- */
.c-modal__trigger:has(.c-modal__trigger-img) {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
.c-modal__trigger-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.c-modal__trigger:has(.c-modal__trigger-img):hover .c-modal__trigger-text {
  text-decoration: underline;
}

/* --- Modal body tidy ----------------------------------------------------- */
.c-modal__text:empty {
  display: none;
}