/*
 * Holub - popup styles.
 *
 * Kept away from the theme's own form styling on purpose. The panel brings
 * its own look, because a modal has no surrounding section to inherit from,
 * but the field row inside is still whatever the theme makes of it.
 */

/* Every colour the panel uses is a variable with a neutral default, so a
   theme matches the popup to its own palette by setting six values and
   never has to fight a specificity war with the rules below. */
.holub-popup {
    --holub-popup-bg: #fff;
    --holub-popup-ink: #2b2b2b;
    --holub-popup-muted: #6b6660;
    --holub-popup-field-bg: #fff;
    --holub-popup-field-ink: #2b2b2b;
    --holub-popup-field-border: #ddd8d0;
    --holub-popup-accent: #2b2b2b;
    --holub-popup-accent-hover: #444;
    --holub-popup-accent-ink: #fff;
}

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

.holub-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Belt and braces: until it is actually open it catches nothing. Without
   this, a popup left un-hidden by a script that stopped halfway would be an
   invisible sheet swallowing every click on the page. */
.holub-popup:not(.is-open) {
    pointer-events: none;
}

.holub-popup.is-open {
    pointer-events: auto;
}

.holub-popup-veil {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 16, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.holub-popup-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--holub-popup-bg);
    border-radius: 14px;
    padding: 36px 34px 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.holub-popup.is-open .holub-popup-veil {
    opacity: 1;
}

.holub-popup.is-open .holub-popup-panel {
    opacity: 1;
    transform: none;
}

/* The close button is the one control here that has to be a circle, and a
   circle is the one shape a theme can take away without touching a single
   Holub selector. Themes style `button` globally, and padding wider than the
   38px box stretches it into an oval no matter what the width says, because
   padding is a floor a box cannot shrink below. So the padding is zeroed, the
   sizing is pinned, and the native control look is switched off. Every other
   button on the page keeps whatever the theme gave it. */
.holub-popup-x {
    position: absolute;
    top: 10px;
    right: 12px;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    min-width: 0;
    min-height: 0;
    max-width: 38px;
    padding: 0;
    margin: 0;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--holub-popup-muted);
    font: inherit;
    font-size: 26px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-indent: 0;
    box-shadow: none;
    cursor: pointer;
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
}

.holub-popup-x:hover {
    background: rgba(127, 127, 127, 0.18);
    color: var(--holub-popup-ink);
}

.holub-popup-x:focus-visible {
    outline: 2px solid var(--holub-popup-accent);
    outline-offset: 2px;
}

/* With a photo behind it the close button has no idea what it is sitting on,
   and a dark grey cross on a dark photo is a button nobody finds. Give it its
   own disc in that case only. */
.holub-popup-panel:has(.holub-popup-photo) .holub-popup-x {
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
}

.holub-popup-panel:has(.holub-popup-photo) .holub-popup-x:hover {
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
}

/* The picture. Pulled out to the panel edges with negative margins so it
   reads as part of the box rather than a stamp floating inside it, and
   given a fixed height so a tall photo cannot push the field off screen. */
.holub-popup-photo {
    display: block;
    /* Nearly every theme carries img{max-width:100%}, which would clamp the
       pull-out back to the text column and leave a strip of panel showing
       down one side. */
    max-width: none;
    width: calc(100% + 68px);
    height: 132px;
    margin: -36px -34px 22px;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
}

.holub-popup-title {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.25;
    color: var(--holub-popup-ink);
}

.holub-popup-text {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--holub-popup-muted);
}

/* The theme usually lays the field row out as one joined control. Inside a
   modal there is no such row to join, so stack it and let it breathe. */
.holub-popup .holub-form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.holub-popup .holub-form-fields p {
    margin: 0;
    display: block;
}

.holub-popup .holub-form-fields label {
    display: none;
}

/* A modal has no surrounding section to borrow styling from, so the controls
   get a plain, presentable default here. A theme that wants its own look
   overrides these two rules and nothing else. */
.holub-popup input[type="email"],
.holub-popup input[type="submit"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    font-family: inherit;
}

.holub-popup input[type="email"] {
    height: 48px;
    padding: 12px 18px;
    border: 1px solid var(--holub-popup-field-border);
    border-radius: 50px;
    background: var(--holub-popup-field-bg);
    color: var(--holub-popup-field-ink);
}

.holub-popup input[type="email"]:focus {
    outline: none;
    border-color: var(--holub-popup-accent);
    box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.25);
}

.holub-popup input[type="submit"] {
    height: 48px;
    border: 0;
    border-radius: 50px;
    background: var(--holub-popup-accent);
    color: var(--holub-popup-accent-ink);
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.holub-popup input[type="submit"]:hover {
    background: var(--holub-popup-accent-hover);
}

.holub-popup input[type="submit"]:focus-visible {
    outline: 2px solid var(--holub-popup-accent);
    outline-offset: 2px;
}

/* The reply after a signup lives on the panel, not on the page, so it has
   to take its colour from the panel too. */
.holub-popup .holub-response {
    color: var(--holub-popup-ink);
}

.holub-popup .holub-challenge label {
    color: var(--holub-popup-muted);
}

.holub-popup .holub-challenge input {
    height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--holub-popup-field-border);
    background: var(--holub-popup-field-bg);
    color: var(--holub-popup-field-ink);
    border-radius: 50px;
    text-align: center;
    font-size: 15px;
    font-family: inherit;
}

.holub-popup .holub-challenge {
    margin-top: 14px;
    justify-content: flex-start;
}

/* The second step, after a signup. Same panel, same picture, everything
   under it swapped for a thank you and, on a site that gives one, the code.
   No colours of its own: it borrows the panel's, so a site that themed the
   popup has themed this too without knowing it existed. */
/* Centred, unlike the first step. There is no form here and nothing to fill
   in, so nothing needs a left edge to line up against. What is left is a
   thank you and a code, and both read better centred under the picture. */
.holub-popup-done {
    text-align: center;
}

.holub-popup-code {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 18px 0 10px;
    padding: 14px 18px;
    border: 1px dashed var(--holub-popup-accent);
    border-radius: 12px;
    text-align: center;
}

.holub-popup-code-label {
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--holub-popup-muted);
}

.holub-popup-code-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--holub-popup-accent);
    /* A code gets copied by hand more often than by clipboard, so it is
       selectable on purpose and spaced wide enough to read one glyph at a
       time. */
    user-select: all;
    word-break: break-all;
}

.holub-popup-code-note {
    margin: 0;
    font-size: 14px;
    color: var(--holub-popup-muted);
}

.holub-popup-done .holub-popup-title:focus {
    outline: none;
}

/* Somebody who asked for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
    .holub-popup-veil,
    .holub-popup-panel {
        transition: none;
    }
}

@media (max-width: 480px) {
    .holub-popup-panel {
        padding: 30px 22px 26px;
    }

    /* The panel's padding changed, so the photo's pull-out has to match it
       or the picture would hang over the rounded corners. */
    .holub-popup-photo {
        width: calc(100% + 44px);
        height: 112px;
        margin: -30px -22px 18px;
    }

    .holub-popup-title {
        font-size: 19px;
    }
}