/* The popups of the public site (HoekEnSteenPopups.razor + js/popup.js), the replacement of the
   Popup Builder plugin, laid out exactly like its theme 3 on the old site (measured with
   getComputedStyle on hoekensteen.com, 28 September 2026): the window in the middle of the screen,
   at most the full screen height, 17 pixels from the sides on a phone, no shadow, and the close image
   of the plugin 4 pixels from the top right corner. The overlay lies UNDER the header of the theme
   (z-index 9999 against 10011), the window above it (999910), as on the old site. That is why the
   container itself has no position and no opacity: either would make it one layer and put the header
   under the overlay. The window width and the overlay colour come from the data attributes of each
   popup, set by js/popup.js as --hs-popup-max-width and --hs-popup-overlay.
   The class names are the ones js/popup.js uses; PopupConventionTests keeps them equal. */

.hs-popup {
    --hs-popup-max-width: 640px;
    --hs-popup-overlay: rgba(0, 0, 0, 0.8);
    --hs-popup-gap: 17px;
}

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

.hs-popup__window,
.hs-popup__overlay {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.hs-popup.hs-popup--open .hs-popup__window,
.hs-popup.hs-popup--open .hs-popup__overlay {
    opacity: 1;
}

.hs-popup__overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--hs-popup-overlay);
}

.hs-popup__window {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999910;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: max-content;
    max-width: min(var(--hs-popup-max-width), calc(100vw - 2 * var(--hs-popup-gap)));
    max-height: 100vh;
    overflow: auto;
    overscroll-behavior: contain;
    background-color: #ffffff;
}

.hs-popup__body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hs-popup__link {
    display: block;
    line-height: 0;
}

/* The whole picture stays visible: it scales down to the width of the window and to the height of
   the screen, and keeps its proportions. */
.hs-popup__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
    margin: 0 auto;
}

.hs-popup__text {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 24px;
}

.hs-popup__text > :last-child {
    margin-bottom: 0;
}

/* The close button: the close image of Popup Builder theme 3 (38 by 19 pixels) 4 pixels from the
   top right corner, above the picture. The invisible ::before widens what a finger can hit to 44
   pixels high without changing what is seen. The selectors carry .hs-popup in front, because the
   theme styles every button with [type=button]:focus and :hover (a coloured border and background)
   at the same weight as a single class. */
.hs-popup .hs-popup__close {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    display: block;
    width: 38px;
    height: 19px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}

.hs-popup .hs-popup__close::before {
    content: "";
    position: absolute;
    inset: -12px -4px -13px -8px;
}

.hs-popup .hs-popup__close:focus,
.hs-popup .hs-popup__close:hover {
    background: transparent;
}

.hs-popup .hs-popup__close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.hs-popup__close-image {
    display: block;
    width: 38px;
    height: 19px;
}

/* The page behind does not scroll while a popup is open. */
html.hs-popup-lock,
html.hs-popup-lock body {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .hs-popup__window,
    .hs-popup__overlay {
        transition: none;
    }
}