/* Popups (v0.3.946) — its own pair, per her sitewide rule: a feature rendering outside a pattern
 * owns its CSS and JS and asks for nothing else.
 *
 * THE WHOLE REASON THIS EXISTS IS THE CLOSE BUTTON. Her Flodesk popup puts an 887px card in a
 * viewport that may be 700px, and its close button sits INSIDE the scrolling area — so a reader who
 * scrolls down to the interest checkboxes leaves the × 132px above the top of the screen, with no
 * other way out. Measured on her live site, 30 September 2026. Every rule below that looks fussy is
 * there to make that specific failure impossible.
 */

.jcp-popup {
    position: fixed;
    inset: 0;
    z-index: 2147483000;        /* above her theme, her CDN banner and the ad frames */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* The safe-area insets matter on a phone with a notch: without them the card can start under
       the status bar, which is where the close button lives. */
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
    background: rgba(38, 48, 46, 0.55);
    overscroll-behavior: contain;
}

.jcp-popup[hidden] { display: none !important; }

/* THE CARD NEVER EXCEEDS THE SCREEN. `dvh` is the dynamic viewport height, which shrinks as the
   phone's address bar appears — the exact thing that turned a 43px overflow into 187px on her
   popup. `vh` would not: it reports the tallest the viewport can be, which is the flattering
   number and the one that hides this bug. */
.jcp-popup-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* PX ON PURPOSE, and it is the one place in this file that is not em. The house rule is em
       never rem, because rem is 16px against her 20px body and made the gate render smaller than
       she expected. But a card's outer width is a layout dimension, not a text one — tying it to
       the font size means changing her body size changes how wide the popup is, which is a
       surprise in a third place. Everything INSIDE it is still em, so the content scales. */
    max-width: 480px;
    max-height: calc(100dvh - 24px);
    background: var(--jcp-popup-bg, #fff4ef);
    /* no border-radius anywhere in this plugin */
    box-shadow: 0 10px 40px rgba(38, 48, 46, 0.28);
}

/* Older engines that do not know dvh fall back to vh rather than to nothing at all. Declared
   first so dvh wins where it is understood. */
@supports not (max-height: 100dvh) {
    .jcp-popup-card { max-height: calc(100vh - 24px); }
}

/* THE SCROLLING HAPPENS HERE, INSIDE THE CARD — never on the card itself, and never on the
   overlay. That is what keeps the close button still: it is a child of the card, outside this box,
   so no amount of scrolling can move it. */
.jcp-popup-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* TIGHTER TOP AND BOTTOM (v0.3.964). The sides are left alone: taking them in gives the
       interest list more room but makes the heading and consent line wrap more, and measured over
       five settings the total height came out no better. */
    padding: 1.4em 1.6em 1.4em;
}

.jcp-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;                  /* above the body's content, never inside its scroll */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px is the smallest target that is comfortable on a phone, and this is the one control a
       reader must be able to hit first time. */
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--jcp-popup-close-bg, rgba(255, 255, 255, 0.92));
    color: var(--jcp-popup-close-text, #26302e);
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
}

.jcp-popup-close:hover,
.jcp-popup-close:focus-visible {
    box-shadow: inset 0 0 0 999px rgba(38, 48, 46, 0.08);
}

.jcp-popup-close:focus-visible {
    outline: 2px solid var(--jcp-popup-close-text, #26302e);
    outline-offset: -4px;
}

.jcp-popup-image {
    display: block;
    width: 100%;
    height: auto;
    /* Reserve the space before it loads, so the card does not jump under a reader's thumb. */
    /* 5:2, NOT 3:2 (v0.3.964, hers: "make the image smaller to make the whole popup smaller").
       Measured on the real card: 267px tall at 3:2, 160px at 5:2 -- the single biggest saving
       available. The cost is a CROP, not a scale: object-fit is cover, so 40% of the photo's
       height goes. Worth looking at a freebie image with text low in the frame before changing it
       again. */
    aspect-ratio: 5 / 2;
    object-fit: cover;
    background: var(--jcp-popup-image-bg, #daede9);
    /* Hers: the heading was sitting straight on the photo. `em`, so it grows with her body size. */
    margin-bottom: 0.7em;
}

/* CENTRED, HER CALL — and it is what her sixteen have always done. Only these two: the fields, the
   consent line and the tick boxes stay left, because centred form labels are hard to scan down. */
.jcp-popup-heading {
    margin: 0 0 0.4em;
    color: var(--jcp-popup-heading, #ff8d69);
    /* 1.35em = 27px AT HER 20px BODY (v0.3.966, hers). 30px sat a long way above the 20px
       question and field text with nothing in between, and most of her headings are in capitals,
       which widens that gap further: "is the difference between 30 px and 20 on the field text and
       question that makes it feel off". It saves no height -- the heading wraps to two lines either
       way -- so this is about the card reading as one piece. */
    font-size: 1.35em;
    line-height: 1.15;
    text-align: center;
    text-wrap: balance;
}

/* BOLD, HER CALL. Both of these are the line a reader is meant to act on -- the call to action
   and the question above the tick boxes -- and they were the same weight as the small print. */
.jcp-popup-sub { margin: 0 0 0.8em; text-align: center; font-weight: 700; }

.jcp-popup-field { display: block; margin: 0 0 0.7em; }

/* TWO CLASSES, NOT ONE. GeneratePress styles `input[type=email]` directly at (0,1,1), our
   stylesheet is linked before the theme's, and a single class would lose on both counts — the
   mistake that left the subscriber gate's fields unstyled on the live site for weeks. */
.jcp-popup-form .jcp-popup-input {
    display: block;
    width: 100%;
    /* 0.6em IS 12px AT HER 20px BODY, which is what Save This's `0.75rem` renders as -- so the
       three sign-up forms on this site are the same size. Written in `em` because `rem` is 16px
       against her 20px body, the mistake the subscriber gate shipped with. */
    padding: 0.6em 0.8em;
    background: var(--jcp-popup-input-bg, #ffffff);
    color: var(--jcp-popup-input-text, #26302e);
    border: 1px solid var(--jcp-popup-input-border, #fec9b0);
    border-radius: 0;
    font: inherit;
    font-size: 1em;
}

.jcp-popup-form .jcp-popup-input:focus {
    outline: 2px solid var(--jcp-popup-heading, #ff8d69);
    outline-offset: -2px;
}

/* THE PRIVACY LINK TAKES THE TEXT COLOUR. Left alone it is the browser's blue, which is the one
   colour on the card that belongs to nobody -- and this card sits on her peach. Underlined, so
   it still reads as a link. */
.jcp-popup-consent a {
    color: inherit;
    text-decoration: underline;
}

.jcp-popup-consent,
.jcp-popup-interest {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    margin: 0 0 0.5em;
    font-size: 0.9em;
    line-height: 1.4;
}

.jcp-popup-interests {
    margin: 0.8em 0 0.3em;
}

.jcp-popup-interests-label {
    margin: 0 0 0.5em;
    font-weight: 700;
}

/* Two columns where there is room, one where there is not. No media query: the card can be narrow
   inside a wide window, so this reacts to its own width.

   9.5em, NOT 11em (v0.3.964). At 11em two columns needed 460px and the card's content is 416px, so
   it was ALWAYS one column on a real popup -- while the settings preview, which drops the card's
   width cap, showed two. That is what she was comparing against.

   IT STAYS ONE COLUMN ON A PHONE, and that is the measurement rather than a preference. Her six
   labels need about 36 characters across the two widest columns; a 390px card leaves about 300px.
   Equal halves, content-sized columns, uneven columns, re-ordering, five text sizes and three
   padding settings were all tried: every one of them breaks three labels onto two lines and saves
   at most 50px. Shorter labels are the only thing that works -- and the label is the key to the
   Flodesk segment, so renaming one orphans its segment silently. */
.jcp-popup-interest-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5em), 1fr));
    gap: 0.1em 1em;
}

.jcp-popup-submit {
    display: block;
    width: 100%;
    margin-top: 0.8em;
    padding: 0.85em 1em;
    /* THE WORDS WERE SMALL FOR THE BUTTON THEY SAT IN, hers — and they were on the Flodesk one
       too, so this is a fix rather than a match. `em` against her 20px body, never `rem`.
       THIS RULE USED TO SET font-size TWICE, 1em further down winning over whatever was above
       it — so the first attempt at making these words bigger changed nothing at all, and the
       test happily found the declaration it was looking for. Read the LAST match in a rule,
       never the first; that is the editor.css lesson in a second stylesheet. */
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: var(--jcp-popup-btn-bg, #ff8d69);
    color: var(--jcp-popup-btn-text, #ffffff);
    border: 0;
    border-radius: 0;
    /* A <button> inherits neither the face nor the colour, which is why every other button in this
       plugin is an <a> and got them free. */
    font-family: inherit;
    cursor: pointer;
}

.jcp-popup-submit:disabled { opacity: 0.6; cursor: default; }

.jcp-popup-note {
    margin: 0.8em 0 0;
    font-size: 0.85em;
    color: var(--jcp-popup-note, #6d7a78);
}

.jcp-popup-error {
    margin: 0.8em 0 0;
    padding: 0.6em 0.8em;
    background: var(--jcp-popup-error-bg, #fdeeea);
    color: var(--jcp-popup-error-text, #b3392a);
    font-size: 0.9em;
}

.jcp-popup-done {
    margin: 0;
    padding: 0.9em 1em;
    background: var(--jcp-popup-done-bg, #daede9);
    color: var(--jcp-popup-text, #555557);
    font-size: 0.95em;
    text-align: center;
}

/* THE HONEYPOT MUST BE GONE FOR EVERYONE, INCLUDING A SCREEN READER — a field announced as
   "Website" that a person is not supposed to fill in is a trap for exactly the reader least able
   to tell. `display: none` does that; an off-screen position would not. */
.jcp-popup-hp {
    display: none !important;
}

.jcp-popup-suggest {
    margin: 0.5em 0 0;
    font-size: 0.85em;
    color: var(--jcp-popup-note, #6d7a78);
}

/* GENERATEPRESS STYLES `button` DIRECTLY, so a class alone loses on this one — the same trap that
   left the gate's fields rendering the theme's grey for months. The link shape is deliberate: it
   sits inside a sentence, not beside one. */
.jcp-popup-suggest .jcp-popup-suggest-fix {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    color: var(--jcp-popup-btn-bg, #ff8d69) !important;
    font: inherit !important;
    text-decoration: underline;
    cursor: pointer;
}

/* SMALLER ON A PHONE (v0.3.964, hers). A @media query measures the WINDOW rather than the card,
   which is normally the wrong instrument -- but this card is capped at 480px, so a narrow window
   is the only way the card is ever narrow and the two agree. Worth remembering if that cap ever
   goes: the rule would then fire on a wide card inside a narrow window. */
@media (max-width: 600px) {
    .jcp-popup-heading { font-size: 1.25em; }
    .jcp-popup-sub { font-size: 0.92em; }

    /* TWO COLUMNS ON A PHONE, hers (v0.3.965), and only possible because the labels got shorter.
       `max-content 1fr` gives the left column exactly what its three short names need and hands
       the rest to the right, where the long ones live -- 106px against 186px on a 390px card. An
       equal split breaks "Granny Squares" onto two lines; this does not, at 390 or at 360.

       `grid-auto-flow: column` with three rows means THE ORDER IS THE LAYOUT: the first three
       interests fill the left column and the last three the right. Re-ordering them in the
       settings moves them between columns.

       The card drops 843px -> 736px, so the whole popup is visible on a 780px screen. */
    .jcp-popup-interest-list {
        grid-template-columns: max-content 1fr;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        gap: 0.15em 0.9em;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .jcp-popup { animation: jcp-popup-in 0.18s ease-out; }
    @keyframes jcp-popup-in { from { opacity: 0; } to { opacity: 1; } }
}

@media print {
    .jcp-popup { display: none !important; }
}

/* ── The settings-screen preview (v0.3.950) ───────────────────────────────────────────────────
 *
 * A TRUE PREVIEW, HER ASK: "its important that I can see them as a true preview on the popups
 * page." So the card is built by the shipped `build()` and painted by the rules above it — these
 * few lines only take it out of the middle of the screen and stand it on the page, because
 * `.jcp-popup` is `position: fixed` with a backdrop over everything.
 *
 * Nothing above this comment may be restated here. A preview that repeats a value is a preview
 * that stops matching the day the real one changes, which is the Save This preview all over again. */
/* HER BODY TEXT IS 20px AND THE ADMIN'S IS 13, so a preview that inherits the admin's font shows a
   different popup from the one readers get -- two columns of tick boxes where the page gives one,
   and a heading that wraps on two lines instead of three. She spotted it the moment she switched one
   on: "it doesn't look like the preview on desktop". Everything inside the card is sized in `em`, so
   this one declaration is what makes the preview honest. If she ever changes her body size, change
   it here too. */
.jcp-popup-preview {
    font-size: 20px;
}

.jcp-popup-preview .jcp-popup {
    position: static;
    display: block;
    padding: 0;
    background: none;
}

.jcp-popup-preview .jcp-popup-card {
    max-height: none;
    /* THE REAL CAP, NOT none (v0.3.964). Dropping it let the preview render as wide as the admin
       pane, so the interest list found room for two columns that a 480px card never has -- and she
       compared that against her phone and found the plugin wanting. The preview is only honest if
       it is the same width as the thing it previews. */
    max-width: 480px;
    width: 100%;
}

/* The scaled thumbnail in the grid. `transform` rather than a smaller font, so what she sees is the
   real layout at real proportions and not a different one that happens to be small. */
.jcp-popup-thumb {
    width: 100%;
    /* A STARTING HEIGHT ONLY. The script measures the built card and sets the real one, so a
       tile shows the whole popup including its button; this is what the grid holds before
       that happens, so the page does not jump. */
    height: 400px;
    overflow: hidden;
    pointer-events: none;
    position: relative;
}

.jcp-popup-thumb > .jcp-popup-preview {
    width: 480px;
    transform: scale(0.52);
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
}