/* [Article] Email Subscription widget styles.
   Ports the `.newsletter-section` block from
   prototype/src/components/NewsletterSection.astro (rules live in
   prototype/src/styles/global.css). Scoped under
   `.mnny-article-email-subscription` so the widget is self-contained. */

.mnny-article-email-subscription {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.mnny-article-email-subscription .newsletter-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--color-accent-light) 0%, var(--color-neutral-100) 100%);
    border-block: 1px solid var(--color-border);
    /* The global `section { padding-block }` rule applies because the
       element is a <section> — no local padding needed. */
}

.mnny-article-email-subscription .page-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Background animation toggle — `mnny-ns--anim-` class (empty suffix) is
   applied to the widget wrapper when the switcher is off. The PHP render
   also skips the <canvas> element on save, but this CSS rule ensures the
   editor hides it instantly even before Elementor re-renders. */
.mnny-ns--anim- .mnny-article-email-subscription .page-hero__canvas {
    display: none;
}

/* Background presets — `mnny-ns--bg-<value>` class is applied by Elementor
   to the widget wrapper, live in editor and on the saved frontend. Each
   preset maps to a design-system token. `!important` is used because the
   `.newsletter-section` default declares a `background: linear-gradient(…)`
   shorthand, and we need the preset to win unconditionally — including on
   the frontend where selector order may place the default later in the
   cascade. The `default` preset emits no rule so the gradient shows. */
.mnny-ns--bg-white        .mnny-article-email-subscription .newsletter-section { background: white !important; }
.mnny-ns--bg-accent-light .mnny-article-email-subscription .newsletter-section { background: var(--color-accent-light) !important; }
.mnny-ns--bg-sage         .mnny-article-email-subscription .newsletter-section { background: var(--color-sage-surface) !important; }

.mnny-article-email-subscription .newsletter-section > .container-narrow {
    position: relative;
    z-index: 1;
}

.mnny-article-email-subscription .newsletter-inner {
    text-align: center;
    max-width: 560px;
    margin-inline: auto;
}
.mnny-article-email-subscription .newsletter-inner .label {
    display: block;
    margin-bottom: var(--space-3);
}
.mnny-article-email-subscription .newsletter-inner h2 {
    font-size: clamp(1.75rem, 4vw, var(--text-4xl));
    margin-bottom: var(--space-4);
}
.mnny-article-email-subscription .newsletter-inner > p {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
}

.mnny-article-email-subscription .newsletter-form {
    display: flex;
    gap: var(--space-3);
    flex-direction: column;
    max-width: 480px;
    margin-inline: auto;
}
@media (min-width: 560px) {
    .mnny-article-email-subscription .newsletter-form {
        flex-direction: row;
    }
}
.mnny-article-email-subscription .newsletter-input {
    flex: 1;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-base) var(--ease-zen),
                box-shadow var(--duration-base) var(--ease-zen);
}
.mnny-article-email-subscription .newsletter-input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}
.mnny-article-email-subscription .newsletter-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}
.mnny-article-email-subscription .newsletter-submit {
    white-space: nowrap;
}
.mnny-article-email-subscription .newsletter-note {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
}

/* Screen-reader-only label */
.mnny-article-email-subscription .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Break out of Elementor's constrained container so the section is full-bleed. */
.elementor-widget-mnny_article_email_subscription > .elementor-widget-container {
    padding: 0 !important;
}