/* ==========================================================================
   Popups.

   Built on the native <dialog> element rather than a hand-rolled overlay.
   That is not a stylistic preference: showModal() gives us the focus trap,
   the inert background, the Escape key and the top-layer stacking for free,
   and those are exactly the four things hand-rolled modals get wrong. The
   only job left for CSS is to make it look like Jump!.

   Loaded on every page that has at least one popup on it, and on no others.
   ========================================================================== */

.popup{
  width:min(30rem, calc(100vw - 2rem));
  max-height:calc(100dvh - 2rem);
  padding:0;
  border:0;
  border-radius:22px;
  background:var(--cream);
  color:var(--ink);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  overflow:hidden;
}

.popup::backdrop{
  background:rgba(53,81,163,.55);   /* --navy, which cannot be read inside ::backdrop */
}

/* The dialog animates in from slightly low and small. @starting-style is
   ignored by browsers that do not know it, which degrades to "it is just
   there" — the correct failure. */
@media (prefers-reduced-motion: no-preference){
  .popup{
    transition:opacity .25s ease, transform .25s ease, overlay .25s allow-discrete, display .25s allow-discrete;
    opacity:1;
    transform:translateY(0) scale(1);
  }
  .popup::backdrop{
    transition:opacity .25s ease, overlay .25s allow-discrete, display .25s allow-discrete;
    opacity:1;
  }
  @starting-style{
    .popup{opacity:0;transform:translateY(14px) scale(.97)}
    .popup::backdrop{opacity:0}
  }
}

.popup__media{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  background:var(--paper);
}

.popup__body{
  padding:1.75rem 1.75rem 1.5rem;
  text-align:center;
}

.popup__body h2{
  font-family:var(--display);
  color:var(--navy);
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height:1.15;
  margin:0 0 .6rem;
}

.popup__body p{
  margin:0 0 1.25rem;
  font-size:1.0625rem;
  line-height:1.55;
}

.popup__actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}

/* A text button, not a second pill. Two pills of equal weight make the
   visitor choose; one pill and one quiet link does not. */
.popup__dismiss{
  border:0;
  background:none;
  padding:.35rem .5rem;
  font-family:inherit;
  font-size:.9375rem;
  font-weight:600;
  color:var(--ink);
  opacity:.72;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.popup__dismiss:hover{opacity:1;color:var(--navy)}
.popup__dismiss:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:6px;opacity:1}

/* The X. Sits over the image when there is one, so it carries its own
   ground rather than trusting whatever pixel lands behind it. */
.popup__close{
  position:absolute;
  top:.6rem;
  right:.6rem;
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.popup__close:hover{background:#fff;color:var(--pink)}
.popup__close:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

.popup__closeform{margin:0}

@media (max-width:420px){
  .popup__body{padding:1.4rem 1.15rem 1.25rem}
  .popup__body p{font-size:1rem}
  /* border-box is not decoration. .btn is content-box, so width:100% resolves
     to the content box and the button's own padding then pushes it 4px past
     each edge of the card, where overflow:hidden slices its rounded ends off
     square. Measured at 390px: a 360px button in a 352px card. */
  .popup .btn{width:100%;box-sizing:border-box}
}