/*
 * Popup styles.
 *
 * These live in an external stylesheet on purpose: the site CSP sets
 * `style-src 'self' 'nonce-…'` with no 'unsafe-inline'. Because a nonce is
 * present, browsers block inline `style="…"` attributes, so popup styling must
 * come from a 'self' stylesheet (same pattern as utilities.css / dropdown.css).
 *
 * Visibility is class-driven: popups default to hidden and popups.js adds
 * `.is-visible` once it decides a popup should show (frequency rules).
 */

.popup {
  display: none;
}

/* ---- Top / bottom banners ---- */
.popup-banner {
  background: #4A56BD;
  color: #ffffff;
}

.popup-banner.is-visible {
  display: block;
}

/* Top banner sits in normal flow above the site header (it is rendered as the
   first element of the page's flex column), so it pushes the header down
   instead of overlapping it. */
.popup-banner--top {
  position: relative;
  z-index: 60;
}

/* Bottom banner floats fixed at the bottom of the viewport. */
.popup-banner--bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
}

.popup-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.popup-banner__text {
  flex: 1 1 auto;
  min-width: 0; /* let long text wrap/shrink instead of overflowing on mobile */
  font-size: 0.875rem;
}

.popup-banner__title {
  margin-right: 0.5rem;
}

.popup-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.popup-banner__link {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.popup-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- Image modal ---- */
.popup-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
}

.popup-modal.is-visible {
  display: flex;
}

.popup-modal__inner {
  position: relative;
  max-width: 90vw;
}

.popup-modal__img {
  display: block;
  width: auto;
  height: auto;
  /* Fluidly responsive: up to 840px on desktop, never wider than 90vw on
     smaller screens, and never taller than the viewport. */
  max-width: min(90vw, 840px);
  max-height: 85vh;
  border-radius: 8px;
}

.popup-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 9999px;
  background: #ffffff;
  color: #111111;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.popup-bottom-offset {
  transition: padding-bottom 160ms ease;
}

@media (max-width: 640px) {
  .popup-banner__inner {
    padding: 0.75rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.625rem;
  }

  .popup-banner__text {
    width: 100%;
  }

  .popup-banner__title {
    display: block;
    margin-right: 0;
    margin-bottom: 0.25rem;
  }

  .popup-banner__actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .popup-banner__link {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .popup-close {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .popup-modal {
    padding: 0.75rem;
  }

  .popup-modal__inner,
  .popup-modal__img {
    max-width: calc(100vw - 1.5rem);
  }

  .popup-modal__img {
    max-height: 90vh;
  }

  .popup-modal__close {
    top: 8px;
    right: 8px;
  }
}

@media (min-width: 768px) {
  .popup-banner__text {
    font-size: 1rem;
  }
}