/* BWA Newsletter Signup Module */

/* ========== Base Styles ========== */
/* Brand wiring. Each role resolves into a distinct local var (--nl-*) so
   there is NO self-reference cycle. Resolution order:
   1. recolor token (--bg/--text/--accent/...) injected by the stan AI Assist
      agent on this root class — wins when an editor recolors.
   2. inherited --bwa-newsletter-signup-* emitted at :root by
      BrandCorpusController from this plugin's manifest brandInheritance
      (folder slug = "newsletter-signup") — the live BrandCorpus value.
   3. the literal fallback — the module's original default.
   Derived tones (muted/faint/border/surface) track --nl-text/--nl-bg so a
   dark recolor stays legible. The popup overlay/popup render inside the
   single .bwa-newsletter container, so no sibling selector is needed.
   Per-instance inline background/text styles set on the .ascx still win
   over these var-driven defaults. */
.bwa-newsletter {
    --nl-bg:         var(--bg,         var(--bwa-newsletter-signup-bg, #ffffff));
    --nl-text:       var(--text,       var(--bwa-newsletter-signup-text, #222222));
    /* Then the corpus palette's own button order (accent, primary) before the literal: inside an AI
       Block's iframe only the palette reaches the form, and the Subscribe button fell to #0066cc
       (BWA-Clean domain 3 home, 2026-09-27). */
    --nl-accent:     var(--accent,     var(--bwa-newsletter-signup-accent, var(--bwa-color-accent, var(--bwa-color-primary, #0066cc))));
    --nl-link:       var(--link,       var(--bwa-newsletter-signup-link, var(--nl-accent)));
    --nl-link-hover: var(--link-hover, var(--bwa-newsletter-signup-link-hover, color-mix(in srgb, var(--nl-accent) 82%, #000)));
    --nl-accent-ink: #ffffff;
    --nl-muted:      color-mix(in srgb, var(--nl-text) 62%, transparent);
    --nl-faint:      color-mix(in srgb, var(--nl-text) 45%, transparent);
    --nl-border:     color-mix(in srgb, var(--nl-text) 14%, transparent);
    --nl-surface-2:  color-mix(in srgb, var(--nl-text) 6%, var(--nl-bg));
    /* Subscribe button (newsletter CTA) follows brand BUTTON tokens. */
    --nl-btn-bg:         var(--btn-bg,         var(--bwa-color-btn-bg,         var(--nl-accent)));
    --nl-btn-text:       var(--btn-text,       var(--bwa-color-btn-text,       var(--nl-accent-ink)));
    --nl-btn-border:     var(--btn-border,     var(--bwa-color-btn-border,     var(--nl-btn-bg)));
    --nl-btn-hover-bg:   var(--btn-hover-bg,   var(--bwa-color-btn-hover-bg,   var(--nl-link-hover)));
    --nl-btn-hover-text: var(--btn-hover-text, var(--bwa-color-btn-hover-text, var(--nl-btn-text)));
    font-family: var(--bwa-font-body, inherit);
}

.bwa-newsletter h1, .bwa-newsletter h2, .bwa-newsletter h3,
.bwa-newsletter h4, .bwa-newsletter h5, .bwa-newsletter h6,
.bwa-newsletter__title {
    font-family: var(--bwa-font-heading, var(--bwa-font-body, inherit));
}

.bwa-newsletter {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--bwa-space-5, 32px) var(--bwa-space-4, 24px);
    border-radius: var(--bwa-radius-md, 8px);
}

.bwa-newsletter__content {
    text-align: center;
}

.bwa-newsletter__heading {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--nl-text);
}

.bwa-newsletter__subheading {
    margin: 0 0 20px 0;
    font-size: 15px;
    color: var(--nl-muted);
    line-height: 1.5;
}

/* In-page copy takes the colour of what it sits in: the band's ink on a dark ground
   (--bwa-band-ink / -muted, BWA/css/bwa-site-framework.css), otherwise the surrounding text
   colour when the brand corpus has not set the newsletter ink (--bwa-newsletter-signup-text).
   It rendered the plugin's own #222 on a #201f1d band - inside an AI Block the band is
   the design's `text-white` section - and could not be seen. On a light page the surrounding
   colour is the page ink, as before. An editor recolor (--text) still wins, the per-instance
   TextColor inline style still wins over both, and the popup keeps its own panel colours.
   (0,3,0) over the base rules. */
.bwa-newsletter:not(.bwa-newsletter--popup) .bwa-newsletter__heading {
    color: var(--text, var(--bwa-band-ink, var(--bwa-newsletter-signup-text, currentColor)));
}

.bwa-newsletter:not(.bwa-newsletter--popup) .bwa-newsletter__subheading {
    color: var(--bwa-band-ink-muted, color-mix(in srgb, var(--text, var(--bwa-newsletter-signup-text, currentColor)) 62%, transparent));
}

/* ========== Form ========== */
.bwa-newsletter__form {
    max-width: 500px;
    margin: 0 auto;
}

.bwa-newsletter__input-group {
    display: flex;
    gap: 0;
}

.bwa-newsletter__input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: var(--bwa-border-width, 1px) solid var(--nl-border);
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease;
}

.bwa-newsletter__input:focus {
    border-color: var(--nl-accent);
}

.bwa-newsletter__button {
    padding: 12px 24px;
    background-color: var(--nl-btn-bg);
    color: var(--nl-btn-text);
    border: var(--bwa-border-width, 1px) solid var(--nl-btn-border);
    border-radius: 0 4px 4px 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    clip-path: var(--bwa-notch-clip, none);
}

.bwa-newsletter__button:hover {
    background-color: var(--nl-btn-hover-bg);
    color: var(--nl-btn-hover-text);
    border-color: var(--nl-btn-hover-bg);
}

.bwa-newsletter__button:disabled {
    background-color: var(--nl-faint);
    border-color: var(--nl-faint);
    cursor: not-allowed;
}

/* On a dark band (bwa-ground-brand / -inverse, BWA/css/bwa-site-framework.css) the button takes
   the band's ink as its fill and the page ink on it, the way the design draws a button on its
   brand band. The brand button fill IS the band's colour there: "Book a test drive" read as plain
   text on the locations and specials CTAs (BWA-Clean domain 3, 2026-09-28). An editor's button
   colours (--btn-*) still win. (0,3,0) over the defaults on .bwa-newsletter. */
:is(.bwa-ground-brand, .bwa-ground-inverse) .bwa-newsletter:not(.bwa-newsletter--popup) {
    --nl-btn-bg:         var(--btn-bg,         var(--bwa-band-ink, #ffffff));
    --nl-btn-text:       var(--btn-text,       var(--bwa-color-ink-1, #201f1d));
    --nl-btn-border:     var(--btn-border,     var(--nl-btn-bg));
    --nl-btn-hover-bg:   var(--btn-hover-bg,   color-mix(in srgb, var(--bwa-band-ink, #ffffff) 86%, #000000));
    --nl-btn-hover-text: var(--btn-hover-text, var(--nl-btn-text));
}

/* ========== Message ========== */
.bwa-newsletter__message {
    margin-top: 12px;
    font-size: 14px;
    min-height: 20px;
}

.bwa-newsletter__message--success {
    color: #2e7d32;
}

.bwa-newsletter__message--error {
    color: #c62828;
}

/* ========== Inline Layout ========== */
.bwa-newsletter--inline .bwa-newsletter__input-group {
    display: flex;
    flex-direction: row;
}

/* ========== Stacked Layout ========== */
.bwa-newsletter--stacked .bwa-newsletter__input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bwa-newsletter--stacked .bwa-newsletter__input {
    border-right: var(--bwa-border-width, 1px) solid var(--nl-border);
    border-radius: var(--bwa-radius-sm, 4px);
}

.bwa-newsletter--stacked .bwa-newsletter__input:focus {
    border-color: var(--nl-accent);
}

.bwa-newsletter--stacked .bwa-newsletter__button {
    border-radius: var(--bwa-radius-sm, 4px);
    width: 100%;
}

/* ========== Popup Layout ========== */
.bwa-newsletter__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.bwa-newsletter__overlay--visible {
    display: flex;
}

.bwa-newsletter__popup {
    position: relative;
    background: var(--nl-bg);
    border-radius: var(--bwa-radius-md, 12px);
    padding: 40px 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: var(--bwa-shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.3));
}

.bwa-newsletter__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--nl-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bwa-newsletter__close:hover {
    color: var(--nl-text);
}

.bwa-newsletter--popup {
    padding: 0;
    max-width: none;
}

/* ========== Responsive ========== */
@media (max-width: 480px) {
    .bwa-newsletter--inline .bwa-newsletter__input-group {
        flex-direction: column;
        gap: 12px;
    }

    .bwa-newsletter--inline .bwa-newsletter__input {
        border-right: var(--bwa-border-width, 1px) solid var(--nl-border);
        border-radius: var(--bwa-radius-sm, 4px);
    }

    .bwa-newsletter--inline .bwa-newsletter__input:focus {
        border-color: var(--nl-accent);
    }

    .bwa-newsletter--inline .bwa-newsletter__button {
        border-radius: var(--bwa-radius-sm, 4px);
        width: 100%;
    }

    .bwa-newsletter__heading {
        font-size: 20px;
    }

    .bwa-newsletter__popup {
        padding: 32px 20px;
    }
}