/*
 * Formularul de abonare la newsletter (spec 004 FR-002): în cardul primei
 * pagini, în subsolul blogului și la finalul articolelor. Folosește culorile
 * KidsLife definite atât în public.css, cât și în home.css.
 */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.newsletter {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}

.newsletter__title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--deep);
}

.newsletter__text {
    margin: 0 0 12px;
    color: #6b5a8c; /* --muted are contrast prea mic pe fundalul lila (WCAG AA) */
}

.newsletter__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.newsletter__input {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: 2px solid #e2d3fb;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.newsletter__input::placeholder { color: var(--muted); }

.newsletter__input[aria-invalid="true"] { border-color: #c2185b; }

.newsletter__button {
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--deep);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

.newsletter__button:hover { background: var(--violet); }

.newsletter__input:focus-visible,
.newsletter__button:focus-visible,
.newsletter__legal-link:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 2px;
}

.newsletter__error {
    margin: 8px 0 0;
    padding: 8px 14px;
    border-radius: 12px;
    background: #fde7ef;
    color: #8c0f3f;
    font-weight: 700;
}

/* Câmpul-capcană (FR-010): în afara ecranului, nu display:none, ca roboții să-l vadă. */
.newsletter__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.newsletter__captcha:not(:empty) { margin-top: 10px; }

.newsletter__captcha altcha-widget {
    --altcha-max-width: 100%;
    --altcha-color-text: var(--ink);
    --altcha-color-border: #e2d3fb;
    --altcha-color-border-focus: var(--violet);
    --altcha-border-radius: 14px;
}

.newsletter__noscript {
    margin: 10px 0 0;
    padding: 8px 14px;
    border-radius: 12px;
    background: #fff6db;
    color: #5c4300;
}

.newsletter__legal {
    margin: 10px 0 0;
    font-size: .85rem;
    color: #6b5a8c; /* contrast 5,3:1 pe #f6edff; --muted ar fi 4,2:1 */
}

.newsletter__legal-link { color: var(--deep); }

@media (min-width: 480px) {
    .newsletter__row { flex-direction: row; }
}

/* ---- Variante -------------------------------------------------------------- */

/* În cardul primei pagini: casetă lila, cu plicul ca pictogramă. */
.newsletter--card {
    margin: 18px 0 4px;
    padding: 18px 18px 14px;
    border-radius: 22px;
    background: #f6edff;
    text-align: center;
}

.newsletter--card .newsletter__legal,
.newsletter--card .newsletter__noscript { text-align: center; }

.newsletter__icon { display: inline-block; }

/* La trimitere, plicul „zboară” (clasa o pune assets/newsletter.js). */
.newsletter.is-sending .newsletter__icon {
    animation: newsletter-fly .9s ease-in forwards;
}

@keyframes newsletter-fly {
    40% { transform: translate(-4px, 2px) rotate(-8deg); }
    100% { transform: translate(140px, -60px) rotate(18deg); opacity: 0; }
}

/* În subsolul blogului. */
.site-footer__newsletter {
    max-width: 640px;
    margin: 0 auto 24px;
    padding: 22px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(90, 40, 160, .10);
    text-align: left;
}

/* La finalul articolului. */
.article-newsletter {
    max-width: 760px;
    margin: 32px auto 0;
    padding: 22px;
    border: 2px dashed #e2d3fb;
    border-radius: 22px;
    background: #fbf7ff;
}

/* Paginile de după abonare. */
.newsletter-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 24px;
    text-align: center;
}

.newsletter-page__icon { font-size: 2.5rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .newsletter.is-sending .newsletter__icon { animation: none; }
    .newsletter__button { transition: none; }
}