/* =============================================
   MODERN THEME - Newsletter Bar Integration
   Restyles the #lwp-newsletter-bar (rendered by the
   lwp-newsletter-bar plugin on wp_body_open) for modern
   theme mode: a sticky strip fixed to the top of the
   viewport, with the fixed navbar docked below it.

   The bar's visibility + height are driven by
   js/lwp-modern-navigation.js, which adds the class
   .lwp-newsbar-visible to <body> while the bar is showing
   and sets --lwp-newsbar-height (px) from its live height.

   Every color comes from the modern palette (the :root
   --lwp-* variables; fallbacks mirror the current
   palette). The inline background-color the plugin prints
   (classic ACF/customizer setting) is deliberately
   overridden in modern mode — the palette is the single
   source of truth here, and this file never applies in
   classic mode, where that inline color still wins.
   ============================================= */

/* ---- Layout: fixed strip above the navbar ---- */

/* Pre-JS (and no-JS) state in modern mode: the bar stays out of the
   layout flow entirely. The plugin's base CSS leaves it `position:
   relative` in flow, which would push #wrapper down and hide it behind
   the fixed navbar until JS runs. The modern nav JS
   (js/lwp-modern-navigation.js) re-enables it with .lwp-newsbar-visible.
   No-JS users simply get no bar — the signup block still works. */
body.lwp-theme-mode-modern #lwp-newsletter-bar {
    display: none;
}

body.lwp-newsbar-visible {
    padding-top: var(--lwp-newsbar-height, 64px);
}

body.lwp-newsbar-visible .navbar {
    top: var(--lwp-newsbar-height, 64px);
}

/* Base bar (only styled once JS has marked it visible).
   Selector specificity (id + classes) beats the plugin's
   plain `#lwp-newsletter-bar` base rules, so the plugin's
   `position: relative` is safely overridden.
   The background needs !important: the plugin prints an inline
   background-color (the classic-mode ACF/customizer setting) and
   inline styles beat any stylesheet rule — in modern mode the
   palette wins instead. */
body.lwp-newsbar-visible #lwp-newsletter-bar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    padding: 14px 24px;
    overflow: visible;
    background: var(--lwp-bg-secondary, #1a1228) !important;
    border-bottom: 1px solid var(--lwp-border, rgba(166, 140, 200, 0.16));
    font-family: var(--lwp-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--lwp-text-secondary, #b8aac8);
}

/* ---- Container: match the modern page container ---- */
body.lwp-newsbar-visible #lwp-newsletter-bar .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

/* ---- Form ---- */
body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
}

body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form label {
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--lwp-text-primary, #ece6f4);
}

/* Email input — palette surface + border, accent-glow focus ring. */
body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form input[type="email"] {
    flex: 1 1 240px;
    max-width: 340px;
    margin: 0;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--lwp-text-primary, #ece6f4);
    background: var(--lwp-surface, rgba(44, 34, 66, 0.7));
    border: 1px solid var(--lwp-border, rgba(166, 140, 200, 0.16));
    border-radius: var(--lwp-radius-sm, 6px);
    transition: var(--lwp-transition, all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
}

body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form input[type="email"]::placeholder {
    color: var(--lwp-text-muted, #84789c);
    opacity: 1;
}

body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form input[type="email"]:focus {
    outline: none;
    border-color: var(--lwp-accent, #a68cc8);
    box-shadow: 0 0 0 3px var(--lwp-accent-glow, rgba(166, 140, 200, 0.18));
}

body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    color: var(--lwp-text-secondary, #b8aac8);
}

body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form .form-check-input {
    margin: 0 0 0 2px;
    accent-color: var(--lwp-accent, #a68cc8);
}

/* The submit button carries the shared modern button system
   (lwp-btn lwp-btn--primary lwp-btn--sm, added in the plugin
   template) — no per-block button sizing or colors here, per
   the theme's button rules. */

/* ---- Utilities the bar markup expects but modern mode
   (Bootstrap-free) doesn't provide ---- */
body.lwp-newsbar-visible #lwp-newsletter-bar .d-none {
    display: none !important;
}

/* ---- Status message ---- */
body.lwp-newsbar-visible #lwp-newsletter-bar #lwp-message {
    display: none;
    width: 100%;
    margin: 8px 0 0 !important;
    padding: 10px 14px;
    font-weight: 600;
    text-align: center;
    color: var(--lwp-text-secondary, #b8aac8);
    background: var(--lwp-surface, rgba(44, 34, 66, 0.7));
    border-radius: var(--lwp-radius-sm, 6px);
}

body.lwp-newsbar-visible #lwp-newsletter-bar #lwp-message.show {
    display: block;
}

/* ---- Dismiss button ---- */
body.lwp-newsbar-visible #lwp-newsletter-bar .close-button {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--lwp-text-secondary, #b8aac8);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--lwp-transition, all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
}

body.lwp-newsbar-visible #lwp-newsletter-bar .close-button:hover {
    background: var(--lwp-surface-hover, rgba(60, 48, 86, 0.9));
    color: var(--lwp-text-primary, #ece6f4);
}

/* ---- Mobile: stacked rows, room for the dismiss button ---- */
@media (max-width: 768px) {
    body.lwp-newsbar-visible #lwp-newsletter-bar {
        padding: 12px 20px 14px;
    }

    body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form {
        gap: 10px;
    }

    body.lwp-newsbar-visible #lwp-newsletter-bar .close-button {
        top: 8px;
        right: 8px;
        transform: none;
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }

    /* The plugin's own mobile query (lwp-nlb-style.css) stacks input and
       button at calc(100% - 20px) with margin-top: 10px. We take over
       both: full width, and spacing via the flex gap (the plugin's
       margins would double it). */
    body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form input[type="email"],
    body.lwp-newsbar-visible #lwp-newsletter-bar .lwp-form button[type="submit"] {
        flex: 1 1 100%;
        max-width: none;
        width: 100%;
        margin: 0;
    }

    /* The mobile drawer (lwp-modern-nav.css) is fixed at top: 0 and
       slides out from under the navbar; when the bar is visible it
       must start below the bar, or its top row hides behind it. */
    body.lwp-newsbar-visible .nav-links {
        top: var(--lwp-newsbar-height, 0);
        height: calc(100vh - var(--lwp-newsbar-height, 0));
    }
}