/* =================================================================================================
   SAVE THIS — its own stylesheet (v0.3.888)

   SPLIT OUT OF frontend.css BECAUSE IT RENDERS ON 816 POSTS THAT HAVE NO PATTERN. Those posts were
   loading the whole bundle -- 36.5 KB of CSS and 20.3 KB of JS gzipped -- to show one sign-up form
   worth about 1.1 KB. The size filter, the print clone and the heading preloads cannot help a post
   with no pattern in it. Core Constraint 2b was written when nothing of ours rendered off a pattern
   page; this is that rule catching up.

   A PATTERN PAGE STILL GETS THIS FILE, because `jcp-frontend` depends on it. That is deliberate:
   the day Save This went live, 816 posts served it with no CSS and no JavaScript at all, and a
   dependency cannot be forgotten at a call site the way an enqueue can.

   The colour variables are NOT here -- they are on `jcp-vars`, which both stylesheets depend on,
   so there is exactly one copy of that list.
   ============================================================================================== */

.jcp-save-this {
    margin: 2rem 0;
}
/* THE SUBSCRIBER GATE'S BOX, deliberately — her call: "i like the style of that better. Could you
   make the save this more that style." Same peach ground, same peach border, same lift, same
   30/40 padding and the same 34rem cap, so the two sign-up boxes on this site read as one thing
   rather than two designs. They share the CSS VARIABLES as well as the values, which is what keeps
   them together when Settings -> Colors changes one. */
.jcp-save-this-box {
    background: var(--jcp-coral-bg, #fff4ef);
    border: 1px solid var(--jcp-peach, #fec9b0);
    box-shadow: 0 6px 28px rgba(85, 85, 87, 0.18);
    padding: 30px 40px;
    margin: 0 auto;
    max-width: 34rem;
    text-align: center;
    /* The spotlight fades in and out rather than snapping. 0.7s is Hubbub's own timing. */
    transition: box-shadow 0.7s;
}

/* THE SPOTLIGHT — "takeover" is what it looks like, and it is one box-shadow.
   A spread wider than the screen in 30% black darkens everything except this box, which is why
   Hubbub uses a SHADOW rather than an overlay element: a shadow cannot be clicked, so the page
   underneath stays readable and usable while it is dimmed, and nothing traps focus. The lift is
   repeated here so the box keeps it while lit.
   `position: relative` and the z-index are what put the box above the dimming it casts. */
.jcp-save-this.is-spotlit .jcp-save-this-box {
    box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, 0.3),
                0 6px 28px rgba(85, 85, 87, 0.18);
    position: relative;
    z-index: 99999;
}
/* A full-screen brightness change is exactly what this setting is about, so honour the request to
   stop moving: the dimming still happens, it simply arrives without the fade. */
@media (prefers-reduced-motion: reduce) {
    .jcp-save-this-box,
    .jcp-save-this { transition: none; }
}

/* ONCE SAVED, IT GOES. Her report: "after signing up its stuck on one moment and doesnt close".
   The confirmation is shown, the dimming released at once, and a few seconds later the whole box
   fades away — there is nothing left to ask for, and a spent form sitting in the middle of a
   pattern is just something to scroll past. `max-height` rather than `height` so the collapse
   works without anyone having to know how tall the box was. */
/* `overflow: hidden` BELONGS ONLY ON THE WAY OUT, and putting it here in the base rule is what
   broke the spotlight in v0.3.844: the dimming is a box-shadow cast by .jcp-save-this-box INSIDE
   this element, so clipping this element clipped the shadow to the width of the content column —
   a grey band beside the box instead of the whole screen going dark. Her report: "on desktop it
   doesn't popup / take over the screen".
   The clip is only needed while the box collapses, and by then the spotlight is already released. */
.jcp-save-this {
    transition: opacity 0.6s, max-height 0.6s, margin 0.6s;
    max-height: 100rem;
}
.jcp-save-this.is-done {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}
.jcp-save-this-heading {
    font-size: 1.3em;               /* ≈ her H2 at the theme's 20px body */
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    color: var(--jcp-text, #555557);
}
.jcp-save-this-text {
    line-height: 1.7;
    margin: 0 0 1.25rem;
    color: var(--jcp-text, #555557);
}
.jcp-save-this-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: stretch;
    max-width: 26rem;
    margin: 0 auto;
}
/* Stacked — name, then email, then the tick, then the button. Two fields side by side leave each
   one too narrow to read a typed address back in, which is the same call made for the gate. */
/* TWO CLASSES, for the reason spelled out above .jcp-gate-form .jcp-gate-input (v0.3.884): the
   theme's `input[type=email], input[type=text], ...` outranks a single class, and this stylesheet
   is linked BEFORE the theme's, so a tie loses as well. As one class this whole rule did nothing
   on any of the 818 posts Save This renders on -- the fields have always been the theme's grey on
   #fafafa at 10px 15px. Her call to match it to the gate, v0.3.885. */
.jcp-save-this-form .jcp-save-this-input {
    flex: 1 1 100%;
    min-width: 0;                 /* a flex item will not shrink below its content without this */
    padding: 0.75rem 1rem;
    font-family: inherit;         /* form controls inherit neither of these on their own */
    font-size: inherit;
    border: 1px solid var(--jcp-peach, #fec9b0);
    background: #ffffff;
    color: var(--jcp-text, #555557);
    border-radius: 0;
}
/* Centred as a unit, not left-aligned: everything else in this box is centred, and the gate has no
   consent row at all, so a left edge here was the only thing breaking the line. The tick and its
   words still sit together — `text-align: left` inside keeps a long label from centring raggedly. */
.jcp-save-this-consent-row {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    text-align: left;
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--jcp-text, #555557);
}
.jcp-save-this-consent-box {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    margin: 0.2em 0 0;
}
/* Its own row, sized to its words rather than stretched across the box — you type into the inputs,
   you aim at the button. */
.jcp-save-this-form .jcp-save-this-button {
    flex: 0 0 auto;
    margin: 0.25rem auto 0;
    font-family: inherit;
    font-weight: bold !important;
    font-size: 0.875rem !important;
    background: var(--jcp-btn-bg, #ffb197) !important;
    color: var(--jcp-btn-text, #555557) !important;
    border: none;
    border-radius: 0;
    padding: 0.85rem 2rem;
    cursor: pointer;
    text-transform: none;
}
.jcp-save-this-form .jcp-save-this-button:hover,
.jcp-save-this-form .jcp-save-this-button:focus {
    opacity: 0.8;
    color: var(--jcp-btn-text-hover, #555557) !important;
}
.jcp-save-this-form .jcp-save-this-button[disabled] {
    opacity: 0.6;
    cursor: default;
}
/* The honeypot. Off-screen rather than display:none — some bots skip anything display:none, and a
   real person never reaches it because of the negative tabindex on the input. */
.jcp-save-this-hp {
    position: absolute !important;
    left: -99999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.jcp-save-this-error {
    color: #b32d2e;
    font-size: 0.9em;
    margin: 0.85rem 0 0;
}
.jcp-save-this-done {
    font-weight: bold;
    margin: 0.85rem 0 0;
    color: var(--jcp-text, #555557);
    /* The preview adds a second line saying what it did and did not do, and the message is set with
       textContent, so the break only survives if the white-space rule keeps it. */
    white-space: pre-line;
}
.jcp-save-this-privacy {
    font-size: 0.7em;
    line-height: 1.5;
    margin: 1rem auto 0;
    max-width: 30rem;
    color: var(--jcp-text, #555557);
}
.jcp-save-this-privacy a { color: var(--jcp-link, #4f857b); }
/* The typo rescue. NOT styled like the error above it — it is an offer. Same treatment as the
   gate's, down to the variables: a pale yellow note on its own row inside the form. */
.jcp-save-this-suggest {
    flex: 1 1 100%;
    font-size: 1em;
    margin: 0;
    color: var(--jcp-text, #555557);
    background: var(--jcp-yellow-pale, #fcf3cf);
    border: 1px solid var(--jcp-yellow-soft, #f8e38d);
    padding: 0.55rem 0.8rem;
    text-align: center;
}
/* !important on the size for the same reason as the submit button: GeneratePress styles `button`
   directly, so a <button> loses an inherited size while every <a> keeps it. */
.jcp-save-this-suggest-fix {
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: 700;
    line-height: inherit;
    color: var(--jcp-text, #555557);
    background: none;
    border: none;
    border-bottom: 2px solid var(--jcp-coral, #ff8d69);
    padding: 0;
    cursor: pointer;
}
.jcp-save-this-suggest-fix:hover,
.jcp-save-this-suggest-fix:focus { border-bottom-width: 3px; }
/* The gate has this line and Save This did not — "Free, and you can unsubscribe any time." It is
   the reassurance that sits between the button and the legal footnote. */
.jcp-save-this-fine-print {
    font-size: 0.9em;
    color: var(--jcp-muted, #9b9b9d);
    margin: 0.75rem 0 0;
    line-height: 1.5;
}
@media (max-width: 782px) {
    .jcp-save-this-box { padding: 1.5rem 1rem; }
    /* MEASURED AT A REAL 390px, INSIDE AN IFRAME, not by resizing a headless window — which reports
       504px and crops, and would have said this was fine (v0.3.787). The tick box came out 15×15,
       and it is REQUIRED to submit: the same shape of problem as the table she could not delete on
       her phone. The <label> wraps it, so the words are a tap target too; this makes the box itself
       one. The button already measures 44px, which is the minimum. */
    .jcp-save-this-consent-box { width: 1.4em; height: 1.4em; margin-top: 0.1em; }
    .jcp-save-this-consent-row { padding: 0.35rem 0; gap: 0.6rem; }
}
/* Never printed — a sign-up form on paper is nothing but wasted ink. */
@media print {
    .jcp-save-this { display: none !important; }
}