/**
 * RFID News newsletter sign-up.
 *
 * Three variants share one look: `card` for the sidebar, `inline` for the strip
 * at the foot of posts and category pages, and `page` for the standalone
 * /newsletter/ page. Colours follow the site, not the emails: accent red
 * #C70909 on neutral greys.
 */

.rfid-nl {
    /*
     * Matched to the site rather than to the emails. The theme's accent is
     * #c70909 and its body copy is a neutral #666, so the blue-grey palette the
     * emails use would read as a foreign element dropped onto the page.
     */
    --rfid-nl-heading: #222222;
    --rfid-nl-accent: #c70909;
    --rfid-nl-accent-dark: #9c0707;
    --rfid-nl-panel: #f7f7f7;
    --rfid-nl-border: #e2e2e2;
    --rfid-nl-text: #666666;
    --rfid-nl-muted: #8a8a8a;

    background: var(--rfid-nl-panel);
    border: 1px solid var(--rfid-nl-border);
    border-top: 3px solid var(--rfid-nl-accent);
    margin-bottom: 30px;
}

.rfid-nl__inner {
    padding: 22px 22px 20px;
}

.rfid-nl__eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--rfid-nl-accent);
}

.rfid-nl__title {
    margin: 0 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 27px;
    font-weight: 400;
    color: var(--rfid-nl-heading);
}

.rfid-nl__blurb {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 22px;
    color: var(--rfid-nl-text);
}

.rfid-nl__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
}

/*
 * Field and button are pinned to one explicit height rather than being left to
 * derive it from padding. The theme styles inputs globally with a 40px
 * line-height and a 2px border, which made the field 56px against a 44px
 * button. The doubled `.rfid-nl` class is what carries enough specificity to
 * win against those theme rules without resorting to !important.
 */
.rfid-nl .rfid-nl__input,
.rfid-nl .rfid-nl__button {
    box-sizing: border-box;
    height: 52px;
    min-height: 52px;
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
}

.rfid-nl .rfid-nl__input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 0 14px;
    color: var(--rfid-nl-text);
    background: #fff;
    border-color: var(--rfid-nl-border);
    -webkit-appearance: none;
    appearance: none;
}

.rfid-nl .rfid-nl__input:focus {
    outline: 2px solid var(--rfid-nl-accent);
    outline-offset: -2px;
    border-color: var(--rfid-nl-accent);
}

.rfid-nl .rfid-nl__button {
    flex: 0 0 auto;
    padding: 0 24px;
    font-weight: 700;
    color: #fff;
    background: var(--rfid-nl-accent);
    border-color: var(--rfid-nl-accent);
    cursor: pointer;
    transition: background-color .15s ease;
}

.rfid-nl .rfid-nl__button:hover,
.rfid-nl .rfid-nl__button:focus {
    background: var(--rfid-nl-accent-dark);
    border-color: var(--rfid-nl-accent-dark);
    color: #fff;
}

.rfid-nl__button[disabled] {
    opacity: .6;
    cursor: default;
}

.rfid-nl__small {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--rfid-nl-muted);
}

.rfid-nl__small a {
    color: var(--rfid-nl-muted);
    text-decoration: underline;
}

.rfid-nl__notice {
    margin: 0 0 14px;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 21px;
    background: #fff;
    border-left: 3px solid var(--rfid-nl-accent);
}

.rfid-nl__notice--error {
    border-left-color: #c0392b;
    color: #922b21;
}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.rfid-nl__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Inline strip: post and category page footers. Wider, so it can go two-up. */
.rfid-nl--inline {
    margin: 30px 0;
}

.rfid-nl--inline .rfid-nl__inner {
    padding: 26px 28px 24px;
}

.rfid-nl--inline .rfid-nl__title {
    font-size: 22px;
    line-height: 29px;
}

.rfid-nl--inline .rfid-nl__form {
    max-width: 560px;
}

/* Standalone /newsletter/ page. */
.rfid-nl--page {
    margin: 0 0 30px;
}

.rfid-nl--page .rfid-nl__inner {
    padding: 30px 30px 28px;
}

.rfid-nl--page .rfid-nl__title {
    font-size: 26px;
    line-height: 34px;
}

.rfid-nl--page .rfid-nl__row--name {
    max-width: 100%;
}

/*
 * Sidebar card. The column is only ~284px inside its padding, so the field is
 * allowed to shrink well below the default basis and the button is given
 * tighter side padding. Without this the button wraps onto its own line, which
 * looks wrong directly beneath the Search widget, where the field and button
 * sit side by side.
 */
.rfid-nl--card .rfid-nl__input {
    flex: 1 1 90px;
}

.rfid-nl.rfid-nl--card .rfid-nl__button {
    padding: 0 18px;
}

/* Sidebar card sits flush with the other widgets. */
.rfid-nl-widget .rfid-nl {
    margin-bottom: 0;
}

.rfid-nl-widget {
    margin-bottom: 30px;
}

/* Confirm and unsubscribe landing pages. */
.rfid-nl-notice-page {
    padding: 40px 0 60px;
}

.rfid-nl-notice-page h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 38px;
    color: #222222;
    margin-bottom: 16px;
}

.rfid-nl-notice-page p {
    font-size: 16px;
    line-height: 26px;
    color: #666666;
    margin-bottom: 18px;
}

@media (max-width: 575px) {
    .rfid-nl__row {
        display: block;
    }

    .rfid-nl .rfid-nl__input,
    .rfid-nl .rfid-nl__button {
        width: 100%;
        display: block;
    }

    .rfid-nl .rfid-nl__input {
        margin-bottom: 8px;
    }
}