/*
 * Form popups (includes/form-popups.php): a Gravity Forms form in a <dialog>.
 * Loaded only on pages that have a popup. The form's own styles are Gravity
 * Forms' and the theme's; the box around it is the theme's bordered panel
 * (square, thin border, soft sand), as on the quote page.
 *
 * The dialog itself covers the viewport and is what scrolls, so a form taller
 * than the screen scrolls at the viewport's edge with the panel shown whole,
 * not inside the panel with a scrollbar of its own. A click on the dialog
 * outside the panel is a click on the backdrop (form-popups.js). The panel
 * centres itself with auto margins, which give way when it's taller than the
 * screen so its top stays reachable.
 */

.freida-form-popup {
    background: transparent;
    border: 0;
    box-sizing: border-box;
    color: var(--color-text, inherit);
    height: 100vh;
    height: 100dvh;
    inset: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2rem 1rem;
    position: fixed;
    width: 100vw;
}

.freida-form-popup[open] {
    display: flex;
    flex-direction: column;
}

.freida-form-popup::backdrop {
    background: rgba(28, 28, 28, 0.55);
}

.freida-form-popup__panel {
    background: var(--color-brand-soft-sand, #f5f2ee);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    flex: 0 0 auto;
    margin: auto;
    max-width: 40rem;
    padding: 2rem;
    width: 100%;
}

/* The close button stays at the top right of the panel while it scrolls: a
   zero-height sticky bar holds it. The bar sticks at the dialog's padding
   edge, and the button's negative margin pulls it into the panel's padding;
   together they keep it 0.5rem from the top of the screen while scrolling. */
.freida-form-popup__bar {
    display: flex;
    height: 0;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    z-index: 1;
}

.freida-form-popup__close {
    align-items: center;
    appearance: none;
    background: var(--color-brand-soft-sand, #f5f2ee);
    border: 0;
    border-radius: 50%;
    color: var(--color-heading, inherit);
    cursor: pointer;
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    margin: -1.5rem -1.5rem 0 0;
    padding: 0;
    width: 2.75rem;
}

.freida-form-popup__close:hover,
.freida-form-popup__close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
}

.freida-form-popup__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* The popup's own heading (set per language on the Form popups tab), in
   place of the form's title: the site's h3. */
.freida-form-popup .freida-form-popup__heading {
    font-family: var(--font-family-serif, inherit);
    font-size: var(--font-size-h3, 2rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.15;
    margin: 0 0 1rem;
    padding-right: 2rem;
}

.freida-form-popup .gform_wrapper {
    margin: 0;
}

/* Room for the close button beside the form's title. */
.freida-form-popup .gform_heading {
    padding-right: 2rem;
}

.freida-form-popup .gform_title {
    margin-top: 0;
}

/* Gravity Forms gives a textarea ten rows; in a popup that pushes the button
   below the fold. About five rows is enough for a message. */
.freida-form-popup .gform_wrapper.gravity-theme .gfield textarea,
.freida-form-popup .gform_wrapper.gravity-theme .gfield textarea.large,
.freida-form-popup .gform_wrapper .gfield textarea {
    height: 9.5rem;
    min-height: 0;
}

/* The page behind stays put while the popup is open. */
html.freida-form-popup-open {
    overflow: hidden;
}

/* Phones: a full-width sheet, edge to edge. */
@media (max-width: 600px) {
    .freida-form-popup {
        padding: 0;
    }

    .freida-form-popup__panel {
        border-width: 0;
        margin: 0;
        min-height: 100%;
        padding: 1.25rem;
    }

    .freida-form-popup__bar {
        top: 1.25rem;
    }

    .freida-form-popup__close {
        margin: -0.75rem -0.75rem 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .freida-form-popup[open] {
        animation: freida-form-popup-in 0.2s ease-out;
    }

    @keyframes freida-form-popup-in {
        from {
            opacity: 0;
            transform: translateY(0.5rem);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}