/*
 * FHS Pop-ups. Themes restyle through the custom properties on .fhs-popup.
 */
.fhs-popup {
  --fhs-popup-overlay: rgba(0, 0, 0, 0.6);
  --fhs-popup-bg: #111;
  --fhs-popup-text: #fff;
  --fhs-popup-line: rgba(255, 255, 255, 0.2);
  --fhs-popup-radius: 4px;
  --fhs-popup-padding: clamp(1.5rem, 5vw, 2.5rem);

  position: fixed;
  inset: 0;
  z-index: 99990;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.fhs-popup[hidden] { display: none; }

.fhs-popup__overlay {
  position: absolute;
  inset: 0;
  background: var(--fhs-popup-overlay);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.fhs-popup__dialog {
  position: relative;
  width: min(100%, var(--fhs-popup-width, 36rem));
  max-height: calc(100dvh - 4rem);
  overflow: auto;
  border: 1px solid var(--fhs-popup-line);
  border-radius: var(--fhs-popup-radius);
  background: var(--fhs-popup-bg);
  color: var(--fhs-popup-text);
  opacity: 0;
  transform: translateY(0.75rem) scale(0.98);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fhs-popup--sm { --fhs-popup-width: 28rem; }
.fhs-popup--lg { --fhs-popup-width: 52rem; }

.fhs-popup.is-visible .fhs-popup__overlay,
.fhs-popup.is-visible .fhs-popup__dialog { opacity: 1; transform: none; }

.fhs-popup__dialog:focus { outline: none; }

.fhs-popup__content { padding: var(--fhs-popup-padding); text-align: center; }
.fhs-popup__content > :first-child { margin-top: 0; }
.fhs-popup__content > :last-child { margin-bottom: 0; }
.fhs-popup__content img { display: block; max-width: 100%; height: auto; }

/* Full-bleed image when it is the first block. */
.fhs-popup__content > .wp-block-image:first-child,
.fhs-popup__content > figure:first-child {
  margin: calc(-1 * var(--fhs-popup-padding)) calc(-1 * var(--fhs-popup-padding)) var(--fhs-popup-padding);
}

/* Keep the pop-up compact and centered on screen: the lead image is cropped to at most 32% of the viewport. */
.fhs-popup__content > .wp-block-image:first-child img,
.fhs-popup__content > figure:first-child img {
  width: 100%;
  max-height: 32dvh;
  object-fit: cover;
}

.fhs-popup__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--fhs-popup-line);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--fhs-popup-text);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.fhs-popup__close:hover,
.fhs-popup__close:focus-visible { background: var(--fhs-popup-text); color: var(--fhs-popup-bg); }

html.fhs-popup-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fhs-popup__overlay,
  .fhs-popup__dialog { transition: none; transform: none; }
}