/**
 * NORDticker Newsletter Signup (Brevo)
 *
 * Styling für die Newsletter-Sektion aus inc/newsletter.php.
 * Überschreibt die Brevo-Basisstyles (sib-styles.css) und stylt das Formular
 * vollständig über die Design-System-Tokens aus nordticker-variables.css.
 *
 * @package NORDticker
 */

/* ========================================================================
   SEKTION
   ======================================================================== */

.nordticker-newsletter {
    position: relative;
    overflow: hidden;
    margin: var(--nt-space-12) 0 var(--nt-space-6);
    padding: clamp(var(--nt-space-6), 4vw, var(--nt-space-10));
    background: var(--nt-gradient-primary);
    border-radius: var(--nt-radius-xl);
    color: var(--nt-text-inverse);
    box-shadow: var(--nt-shadow-lg);
}

/* Dezenter Akzent-Schein oben rechts */
.nordticker-newsletter::before {
    content: "";
    position: absolute;
    top: -45%;
    right: -8%;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(var(--nt-accent-rgb), 0.4), transparent 70%);
    pointer-events: none;
}

.nordticker-newsletter__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(var(--nt-space-6), 4vw, var(--nt-space-12));
    align-items: center;
}

@media (max-width: 860px) {
    .nordticker-newsletter__inner {
        grid-template-columns: 1fr;
        gap: var(--nt-space-6);
    }
}

/* ========================================================================
   COPY
   ======================================================================== */

.nordticker-newsletter__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--nt-space-2);
    margin-bottom: var(--nt-space-4);
    padding: var(--nt-space-1) var(--nt-space-3);
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--nt-radius-pill);
    font-size: var(--nt-text-xs);
    font-weight: var(--nt-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nordticker-newsletter__title {
    margin: 0 0 var(--nt-space-3);
    font-family: var(--nt-font-display);
    font-size: clamp(var(--nt-text-2xl), 3.4vw, var(--nt-text-4xl));
    font-weight: var(--nt-weight-bold);
    line-height: var(--nt-leading-tight);
    color: var(--nt-text-inverse);
}

.nordticker-newsletter__text {
    margin: 0;
    max-width: 52ch;
    font-size: var(--nt-text-base);
    line-height: var(--nt-leading-normal);
    color: rgba(255, 255, 255, 0.85);
}

/* ========================================================================
   BREVO-CONTAINER NEUTRALISIEREN
   ======================================================================== */

.nordticker-newsletter .sib-form-container,
.nordticker-newsletter #sib-container {
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    font-family: var(--nt-font-primary);
    direction: ltr;
}

.nordticker-newsletter .sib-form-block {
    padding: 0;
}

.nordticker-newsletter .form__entry,
.nordticker-newsletter .form__label-row {
    margin: 0;
}

/* ========================================================================
   FORMULAR-LAYOUT: Eingabefeld + Button in einer Zeile, Hinweis darunter
   ======================================================================== */

.nordticker-newsletter #sib-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--nt-space-3);
}

.nordticker-newsletter__input-block {
    flex: 1 1 220px;
    min-width: 0;
}

.nordticker-newsletter__submit-block {
    flex: 0 0 auto;
}

.nordticker-newsletter__privacy {
    flex-basis: 100%;
    margin: var(--nt-space-1) 0 0;
    font-size: var(--nt-text-xs);
    line-height: var(--nt-leading-normal);
    color: rgba(255, 255, 255, 0.7);
}

.nordticker-newsletter__privacy a {
    color: var(--nt-text-inverse);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .nordticker-newsletter__submit-block {
        flex: 1 1 100%;
    }

    .nordticker-newsletter__button {
        width: 100%;
    }
}

/* ========================================================================
   EINGABEFELD
   ======================================================================== */

/* Label nur für Screenreader */
.nordticker-newsletter__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nordticker-newsletter .entry__field {
    margin: 0;
    background: var(--nt-bg-primary);
    border: 1px solid transparent;
    border-radius: var(--nt-input-radius);
    transition: box-shadow var(--nt-transition-base);
}

.nordticker-newsletter .entry__field:focus-within {
    box-shadow: var(--nt-focus-ring);
}

.nordticker-newsletter input.input {
    width: 100%;
    min-height: var(--nt-input-min-height);
    padding: var(--nt-input-padding-y) var(--nt-input-padding-x);
    background: transparent;
    border: 0;
    /* 16px verhindert Auto-Zoom auf iOS */
    font-size: var(--nt-input-font-size);
    font-family: var(--nt-font-primary);
    color: var(--nt-text-primary);
}

.nordticker-newsletter input.input:focus {
    outline: none;
}

.nordticker-newsletter input.input::placeholder {
    color: var(--nt-text-muted);
    font-family: var(--nt-font-primary);
    opacity: 1;
}

/* Feldbezogene Fehlermeldung (wird vom Brevo-Script befüllt) */
.nordticker-newsletter .entry__error {
    display: block;
    margin-top: var(--nt-space-2);
    padding: 0;
    background: transparent;
    border: 0;
    font-size: var(--nt-text-sm);
    color: #fca5a5;
    text-align: left;
}

.nordticker-newsletter .entry__error:empty {
    display: none;
}

/* ========================================================================
   BUTTON
   ======================================================================== */

.nordticker-newsletter__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nt-space-2);
    min-height: var(--nt-btn-min-height);
    padding: var(--nt-btn-padding-y) var(--nt-btn-padding-x);
    background: var(--nt-accent);
    border: 0;
    border-radius: var(--nt-btn-radius);
    box-shadow: var(--nt-shadow-accent);
    font-family: var(--nt-font-primary);
    font-size: var(--nt-text-base);
    font-weight: var(--nt-btn-font-weight);
    color: var(--nt-text-inverse);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--nt-transition-base), transform var(--nt-transition-base);
}

.nordticker-newsletter__button:hover {
    background: var(--nt-accent-light);
    transform: translateY(-1px);
}

.nordticker-newsletter__button:focus-visible {
    outline: none;
    box-shadow: var(--nt-focus-ring);
}

.nordticker-newsletter__button svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Lade-Spinner erst beim Absenden zeigen (Fallback, falls sib-styles.css
   nicht lädt; das Brevo-Script entfernt die Klasse während des Requests) */
.nordticker-newsletter .sib-hide-loader-icon {
    display: none;
}

/* ========================================================================
   STATUS-MELDUNGEN (Erfolg / Fehler)
   Sichtbarkeit steuert das Brevo-Script; :where() hält die Spezifität bei 0,
   damit das Einblenden nicht überschrieben wird (wie im Original-Embed).
   ======================================================================== */

:where(.sib-form-message-panel) {
    display: none;
}

.nordticker-newsletter .sib-form-message-panel {
    max-width: none;
    margin: 0 0 var(--nt-space-4);
    padding: var(--nt-space-3) var(--nt-space-4);
    border: 1px solid transparent;
    border-radius: var(--nt-radius-md);
    font-family: var(--nt-font-primary);
    font-size: var(--nt-text-sm);
    text-align: left;
}

.nordticker-newsletter .sib-form-message-panel__text {
    display: flex;
    align-items: flex-start;
    gap: var(--nt-space-2);
}

.nordticker-newsletter .sib-notification__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.nordticker-newsletter #error-message {
    background: var(--nt-error-soft);
    border-color: var(--nt-error);
    color: var(--nt-error-strong);
}

.nordticker-newsletter #success-message {
    background: var(--nt-success-soft);
    border-color: var(--nt-success);
    color: var(--nt-success-strong);
}

/* Honeypot */
.nordticker-newsletter .input--hidden {
    display: none;
}