/*
 * FP Newsletter Form — frontend + editor styles.
 *
 * Every colour, radius and font size resolves to a theme.json token via the
 * CSS variables WordPress emits (--wp--preset--*, --wp--custom--*). There are
 * no hard-coded brand values here; theme.json stays the single source of truth.
 *
 * Geometry lives here rather than in Tailwind utilities on purpose: block.json
 * enqueues this file whenever the block is present, so the field is correctly
 * sized even if the theme's Vite/Tailwind bundle hasn't been rebuilt. Only the
 * button's colour variants come from Tailwind (fp-button already ships them).
 *
 * Layout:
 *   - --inline:  field grows, button hugs its content, wraps on narrow screens
 *   - --stacked: field and button full width, button below
 */

.fpr-newsletter {
    width: 100%;

    /* Defaults match the "large" size — see the size modifiers below. */
    --fpr-nl-height: 3rem;
    --fpr-nl-font: var(--wp--preset--font-size--body, 1.0625rem);
    --fpr-nl-padding-x: 1.125rem;
    --fpr-nl-gap: 0.625rem;

    /* 8px — the same token the FP button uses. */
    --fpr-nl-radius: var(--wp--custom--button--border-radius, 8px);

    --fpr-nl-bg: var(--wp--preset--color--background, #fff);
    --fpr-nl-text: var(--wp--preset--color--foreground);
    --fpr-nl-border: var(--wp--preset--color--muted);
    --fpr-nl-placeholder: var(--wp--preset--color--secondary);
    --fpr-nl-focus: var(--wp--preset--color--primary);
}

/* ── Size modifiers ────────────────────────────────────────────────
 *
 * Heights deliberately mirror fp-button's Tailwind h-* steps (h-6/h-8/h-10/
 * h-12/h-14) so the field and button are always the same height in an inline
 * row. Font sizes step up faster than Tailwind's default scale did — at the
 * old text-sm the input read as noticeably smaller than surrounding body copy.
 */
.fpr-newsletter--size-xsmall {
    --fpr-nl-height: 1.5rem;
    --fpr-nl-font: 0.8125rem;
    --fpr-nl-padding-x: 0.625rem;
    --fpr-nl-gap: 0.375rem;
}

.fpr-newsletter--size-small {
    --fpr-nl-height: 2rem;
    --fpr-nl-font: 0.9375rem;
    --fpr-nl-padding-x: 0.875rem;
    --fpr-nl-gap: 0.5rem;
}

.fpr-newsletter--size-default {
    --fpr-nl-height: 2.5rem;
    --fpr-nl-font: 1rem;
    --fpr-nl-padding-x: 1rem;
    --fpr-nl-gap: 0.5rem;
}

.fpr-newsletter--size-large {
    --fpr-nl-height: 3rem;
    --fpr-nl-font: var(--wp--preset--font-size--body, 1.0625rem);
    --fpr-nl-padding-x: 1.125rem;
    --fpr-nl-gap: 0.625rem;
}

.fpr-newsletter--size-xlarge {
    --fpr-nl-height: 3.5rem;
    --fpr-nl-font: 1.125rem;
    --fpr-nl-padding-x: 1.375rem;
    --fpr-nl-gap: 0.75rem;
}

/* Pill shares one radius token across field and button. */
.fpr-newsletter--pill {
    --fpr-nl-radius: 9999px;
}

/* ── Field ─────────────────────────────────────────────────────────── */
.fpr-newsletter__input {
    box-sizing: border-box;
    width: 100%;
    height: var(--fpr-nl-height);
    padding: 0 var(--fpr-nl-padding-x);
    font-family: inherit;
    font-size: var(--fpr-nl-font);
    line-height: 1.2;
    color: var(--fpr-nl-text);
    background-color: var(--fpr-nl-bg);
    border: 1px solid var(--fpr-nl-border);
    border-radius: var(--fpr-nl-radius);
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fpr-newsletter__input::placeholder {
    color: var(--fpr-nl-placeholder);
    opacity: 1; /* Firefox dims placeholders by default. */
}

.fpr-newsletter__input:focus {
    outline: none;
    border-color: var(--fpr-nl-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fpr-nl-focus) 20%, transparent);
}

.fpr-newsletter__input:disabled {
    opacity: 0.6;
}

/* ── Button geometry ───────────────────────────────────────────────
 *
 * Colours still come from fpr_button_compute_class(). These rules only pin the
 * measurements so the button matches the field height and shares its radius,
 * including when Tailwind's height and padding utilities are unavailable.
 */
.fpr-newsletter__button {
    height: var(--fpr-nl-height);
    padding-inline: calc(var(--fpr-nl-padding-x) * 1.5);
    font-size: var(--fpr-nl-font);
    border-radius: var(--fpr-nl-radius);
    white-space: nowrap;
}

/* Optional width caps, chosen in the inspector. */
.fpr-newsletter--max-sm { max-width: 24rem; }
.fpr-newsletter--max-md { max-width: 32rem; }
.fpr-newsletter--max-lg { max-width: 40rem; }

/* Respect the block's align setting when a max-width is also set. */
.fpr-newsletter.aligncenter { margin-inline: auto; }
.fpr-newsletter.alignright  { margin-inline-start: auto; }

/* ── Form ──────────────────────────────────────────────────────── */
/* view.js sets `hidden` on success; the class's display:flex would otherwise
   outrank the UA [hidden] rule and keep the form on screen. */
.fpr-newsletter__form[hidden] {
    display: none;
}

.fpr-newsletter__form {
    display: flex;
    gap: var(--fpr-nl-gap);
    width: 100%;
    margin: 0;
}

.fpr-newsletter__field {
    flex: 1 1 auto;
    min-width: 0; /* Let the input shrink inside the flex row. */
}

/*
 * Visually hidden but announced by screen readers. Defined locally rather than
 * relying on core's .screen-reader-text, so the block keeps its accessible
 * label even if wp-block-library's stylesheet is ever dropped.
 */
.fpr-newsletter__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.fpr-newsletter--inline .fpr-newsletter__form {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

/* Below ~30rem an inline form has no room for a side-by-side button. */
@media (max-width: 30rem) {
    .fpr-newsletter--inline .fpr-newsletter__form {
        flex-direction: column;
        align-items: stretch;
    }

    .fpr-newsletter--inline .fpr-newsletter__button {
        width: 100%;
    }
}

.fpr-newsletter--stacked .fpr-newsletter__form {
    flex-direction: column;
    align-items: stretch;
}

.fpr-newsletter--stacked .fpr-newsletter__button {
    width: 100%;
}

/* ── Busy state ────────────────────────────────────────────────── */
.fpr-newsletter__spinner {
    display: none;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: fpr-newsletter-spin 0.6s linear infinite;
}

.fpr-newsletter.is-busy .fpr-newsletter__spinner {
    display: inline-block;
}

.fpr-newsletter.is-busy .fpr-newsletter__button {
    cursor: progress;
}

@keyframes fpr-newsletter-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fpr-newsletter__spinner {
        animation-duration: 2s;
    }
}

/* ── Status message ────────────────────────────────────────────── */
.fpr-newsletter__status {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    min-height: 0;
}

/* Only take up vertical space once there is something to say. */
.fpr-newsletter__status:not(:empty) {
    margin-top: 0.625rem;
}

.fpr-newsletter__status.is-error {
    color: var(--wp--preset--color--danger);
}

.fpr-newsletter__status.is-success {
    color: var(--wp--preset--color--success);
}

/*
 * "Manage cookies" control shown when the visitor has not granted the
 * consent category reCAPTCHA is gated behind (see view.js). A <button> styled
 * as an inline link so it is keyboard-reachable and carries no href.
 */
.fpr-newsletter__consent-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.fpr-newsletter__consent-link:hover,
.fpr-newsletter__consent-link:focus-visible {
    text-decoration-thickness: 2px;
}

/* ── reCAPTCHA badge ───────────────────────────────────────────────
 *
 * Deliberately NOT hidden. Google only permits hiding the floating badge if
 * the reCAPTCHA branding text is shown somewhere in the user flow, and we
 * removed that text — so the badge is what satisfies the attribution term.
 * https://developers.google.com/recaptcha/docs/faq
 *
 * Google's script is printed consent-gated by inc/newsletter.php, so the
 * badge only appears for visitors who have accepted that CookieYes category.
 * Do not add `.grecaptcha-badge { visibility: hidden; }` here without also
 * restoring the attribution line in render.php.
 */

/* ── Editor preview ────────────────────────────────────────────── */

/*
 * The canvas preview is inert (see src/edit.js), so the button is a <span>
 * that borrows the real button's look without being focusable.
 */
.fpr-newsletter__button-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--fpr-nl-height);
    padding-inline: calc(var(--fpr-nl-padding-x) * 1.5);
    border-radius: var(--fpr-nl-radius);
    background: var(--wp--preset--color--primary-active);
    color: #fff;
    font-size: var(--fpr-nl-font);
    font-weight: 700;
    white-space: nowrap;
}

.editor-styles-wrapper .fpr-newsletter__input {
    /*
     * wp-components Flex and the editor reset both touch inputs; re-assert the
     * frontend geometry so the canvas preview matches what visitors see.
     */
    width: 100%;
    height: var(--fpr-nl-height);
    padding-inline: var(--fpr-nl-padding-x);
    font-size: var(--fpr-nl-font);
    border: 1px solid var(--fpr-nl-border);
    border-radius: var(--fpr-nl-radius);
    background: var(--fpr-nl-bg);
}