/*
 * GRO Popup
 *
 * The creator's GRO popup (PopupRenderer.php): their POPUP form, printed in
 * the footer of every page its page rules allow and opened over the page by
 * the view script (blocks/src/form/popup.ts) — a card in the middle of a
 * wide screen, a sheet along the bottom of a phone. The HQ preview draws the
 * same markup with these classes; keep the two in step. Enqueued only on a
 * page that prints a popup.
 *
 * .gl-popup               the <dialog>, printed with hidden, which the view
 *                         script removes as it opens it with showModal().
 *                         Its style attribute carries the form's brand
 *                         colours as the form's own --gl-form-* custom
 *                         properties (assets/blocks/form/style.css), so the
 *                         card and the close button wear them. What the
 *                         browser decides on, it carries as data-gl-popup
 *                         (<hash>.<version>), data-gl-audience (everyone |
 *                         not_subscribed), data-gl-trigger (time | scroll),
 *                         data-gl-delay (seconds), data-gl-scroll (percent of
 *                         the page) and data-gl-dismiss-days
 *   --banner              the popup has a banner (the form's
 *                         design.bannerUrl), across the top of the card
 *   --image-avatar | --image-logo | --image-none
 *                         the picture (popup.image, at popup.imageUrl): the
 *                         creator's profile photo, their logo, or none (as
 *                         when the one picked has no URL)
 * .gl-popup__close        the close button, over the card's top right corner;
 *                         a 44px target. Over a banner it wears the card's
 *                         background, so it shows on any banner
 * .gl-popup__card         the card: the form's box, scrolling inside itself
 *                         when the form is taller than the screen allows
 * .gl-popup__image        without a banner, the picture above the form: the
 *                         photo in a 72px circle, the logo at its own shape,
 *                         at most 200 by 48px
 * .gl-popup__header       with a banner, in its place: the banner and the
 *                         picture
 *   .gl-popup__header--banner  it holds a banner (always, on a popup)
 * .gl-popup__banner       the banner, an <img> across the top of the card to
 *                         its edges, taking its top corners, cropped to a 3:1
 *                         strip from its centre
 * .gl-popup__picture      the picture, an <img> after the banner: a 72px
 *                         circle over the banner's bottom left corner, half
 *                         on it, ringed in the card's colour (a logo
 *                         contained in it)
 * html.gl-popup-open      the page while the popup is open: it does not
 *                         scroll behind it. The view script sets the same
 *                         overflow inline, which holds where a CSS optimizer
 *                         has left this rule out
 *
 * The form in the card is a GRO form (.gl-form--popup, stacked and plain),
 * styled by assets/blocks/form/style.css, whose own box gives way to the
 * card's.
 */

dialog.gl-popup {
  box-sizing: border-box;
  inset: 0;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--gl-form-text, var(--wp--preset--color--contrast, #1e1e1e));
}

.gl-popup::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

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

.gl-popup__card {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 24px;
  border-radius: 16px;
  background: var(--gl-form-background, var(--wp--preset--color--base, #fff));
  color: inherit;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 24px 64px -16px rgba(0, 0, 0, 0.45);
  /* The footer it is printed in may be centred by the theme; start, not
     left, for a site written right to left. */
  text-align: start;
}

/* Over the corner of the card, whatever the theme does to buttons. */
.gl-popup .gl-popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
}

.gl-popup .gl-popup__close:hover {
  background: rgba(127, 127, 127, 0.16);
  color: inherit;
}

.gl-popup .gl-popup__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.gl-popup__close svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Whatever the theme puts round its images. */
.gl-popup .gl-popup__image {
  display: block;
  margin: 0 auto 16px;
  padding: 0;
  border: 0;
}

.gl-popup--image-avatar .gl-popup__image {
  width: 72px;
  max-width: none;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.gl-popup--image-logo .gl-popup__image {
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 48px;
}

/* The picture sits in the header, over the banner's edge. */
.gl-popup .gl-popup__header {
  position: relative;
}

/* Over the card's padding (24px) to its edges. */
.gl-popup .gl-popup__header--banner {
  margin: -24px -24px 16px;
}

/* Whatever the theme puts round its images, a shadow included. */
.gl-popup .gl-popup__banner,
.gl-popup .gl-popup__picture {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* Across the card, round its top corners, cropped to a 3:1 strip from its
   centre. */
.gl-popup .gl-popup__banner {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 1;
  border-radius: 16px 16px 0 0;
  object-fit: cover;
}

/* A 72px circle over the banner's bottom left corner, half on it, ringed in
   the card's colour; a logo is contained in its circle, on that colour. The
   copy clears it by 12px. */
.gl-popup .gl-popup__picture {
  position: absolute;
  bottom: -36px;
  left: 16px;
  box-sizing: border-box;
  width: 72px;
  max-width: none;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px
    var(--gl-form-background, var(--wp--preset--color--base, #fff));
  object-fit: cover;
}

.gl-popup--image-logo .gl-popup__picture {
  padding: 8px;
  background: var(--gl-form-background, var(--wp--preset--color--base, #fff));
  object-fit: contain;
}

.gl-popup--image-avatar .gl-popup__header--banner,
.gl-popup--image-logo .gl-popup__header--banner {
  margin-bottom: 48px;
}

/* Over a banner, the close button wears the card's background, hover tint
   and all. */
.gl-popup--banner .gl-popup__close,
.gl-popup--banner .gl-popup__close:hover {
  background-color: var(
    --gl-form-background,
    var(--wp--preset--color--base, #fff)
  );
}

.gl-popup--banner .gl-popup__close:hover {
  background-image: linear-gradient(
    rgba(127, 127, 127, 0.16),
    rgba(127, 127, 127, 0.16)
  );
}

/* The card is the form's box. */
.gl-popup .gl-form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

/* Centred under the picture, and clear of the close button either side. */
.gl-popup .gl-form__copy {
  align-items: center;
  padding: 0 32px;
  text-align: center;
}

.gl-popup .gl-form__title {
  justify-content: center;
}

.gl-popup .gl-form__status {
  text-align: center;
}

/* A field's ring in the card's text colour: the form's own is the field's
   dark text, which a dark brand background swallows. */
.gl-popup .gl-form .gl-form__field input[type='email']:focus-visible,
.gl-popup .gl-form .gl-form__field input[type='text']:focus-visible {
  outline-color: var(
    --gl-form-text,
    var(--wp--preset--color--contrast, #1e1e1e)
  );
}

/* A phone: a sheet along the bottom of the screen, as wide as it is. */
@media (max-width: 639px) {
  dialog.gl-popup {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
  }

  .gl-popup__card {
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gl-popup[open] {
    animation: gl-popup-in 200ms ease-out;
  }

  .gl-popup[open]::backdrop {
    animation: gl-popup-fade 200ms ease-out;
  }

  @keyframes gl-popup-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes gl-popup-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  .gl-popup[open] {
    animation-name: gl-popup-up;
  }

  @keyframes gl-popup-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: none;
    }
  }
}

@media (forced-colors: active) {
  .gl-popup__card {
    border: 1px solid CanvasText;
  }
}