/*
 * 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 footer-ul public (Figma 189:4346): pe fundalul indigo, câmp și buton-pastilă. */
.site-footer .newsletter { max-width: none; margin: 0; }
.site-footer .newsletter__title { margin: 0 0 9px; font-size: 1.75rem; line-height: 1.2857; color: var(--liliac); }
.site-footer .newsletter__text { margin: 0; color: var(--fundal); }
.site-footer .newsletter__row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 18px; }
.site-footer .newsletter__input {
    flex: 0 1 238px;
    padding: 10px 18px 10px 51px;
    border: 1px solid #dedede;
    border-radius: 35px;
    background: transparent url("../images/icons/at-sign-input-sgUJht6.svg") 18px center / 24px no-repeat;
    color: #fff;
    font-size: .875rem;
}
.site-footer .newsletter__input::placeholder { color: var(--indigo-light); }
.site-footer .newsletter__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 18px;
    border: 0;
    border-radius: 108px;
    background: var(--liliac);
    color: var(--indigo);
    font: inherit;
    font-size: .75rem;
    line-height: 1.45;
    box-shadow: none;
}
.site-footer .newsletter__button { font-weight: 500; }
.site-footer .newsletter__button:hover { background: #fff; }
.site-footer .newsletter__arrow { display: inline-flex; padding: 9px 9.5px; border-radius: 67px; background: var(--fundal); }
.site-footer .newsletter__legal, .site-footer .newsletter__noscript { color: var(--lavanda); font-size: .75rem; }
.site-footer .newsletter__legal-link { color: #fff; }
.site-footer .newsletter__error { color: #fff; }

/* 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; }
}