/* Loaded only by the newsletter article layout. Keep the shared accordion and form geometry. */
.newsletter-page {
    --staff-text: var(--staff-blue);
    color: var(--staff-blue);
}

.newsletter-page :is(h1, h2, h3, h4, h5, h6),
.newsletter-page .newsletter-box > :is(p, ul, ol, dl),
.newsletter-page .newsletter-issue,
.newsletter-page a:not(:hover):not(:focus-visible):not(.btn) {
    color: var(--staff-blue);
}

.newsletter-page .newsletter-box > :first-child {
    margin-top: 0;
}

.newsletter-page .newsletter-box > :last-child {
    margin-bottom: 0;
}

.newsletter-page .newsletter-box > p {
    max-width: 75ch;
    overflow-wrap: anywhere;
}

.newsletter-page .newsletter-subscription,
.newsletter-page .newsletter-subscription * {
    box-sizing: border-box;
}

.newsletter-page .newsletter-subscription form[id^="formAcym"] {
    margin-inline: 0;
}

.newsletter-page .newsletter-subscription form[id^="formAcym"] input[type="email"] {
    color: var(--staff-blue) !important;
}

/* The shared form's white border needs contrast on the light article background. */
.newsletter-page .newsletter-subscription form[id^="formAcym"] tr,
.newsletter-page .newsletter-subscription form[id^="formAcym"] td.onefield {
    border-color: var(--staff-border) !important;
}

.newsletter-page .newsletter-subscription form[id^="formAcym"] tr:focus-within,
.newsletter-page .newsletter-subscription form[id^="formAcym"] td.onefield:focus-within {
    border-color: #86adff !important;
}

.newsletter-page .newsletter-issue {
    min-width: 0;
    overflow-wrap: anywhere;
}

.newsletter-page .newsletter-issue:hover,
.newsletter-page .newsletter-issue:focus-within {
    background: var(--staff-blue-light);
}

/* Same mobile padding as .library-content-section; other box values use Bootstrap. */
@media (max-width: 600px) {
    .newsletter-page .newsletter-box {
        padding: 1rem !important;
    }
}