/* For all newsletter forms */
div.mce_inline_error {
  color: #B12E15 !important;
  display: inline-block !important;
}

/* Only for form on footer */

footer #mc_embed_signup form .mc-field-group {
  padding-bottom: 0;
  width: 100%;
}

footer #mc_embed_signup .mc-field-group input {
  width: 100% !important;
  margin-bottom: 0;
}

/* Only for forms on page content */

.entry-content #mc_embed_signup {
  max-width: 500px;
  margin: 0 auto;
}

.entry-content #mc_embed_signup form {
  border-bottom: none;
  padding: 20px 30px 30px !important;
}

.entry-content #mc_embed_signup form .mc-field-group:has(.knomo-newsletter) {
  padding-bottom: 0;
  width: 100%;
}

.entry-content #mc_embed_signup .mc-field-group input {
  width: 100% !important;
}

.entry-content #mc_embed_signup p {
  margin-left: 0;
}

.entry-content #mc_embed_signup .knomo-newsletter {
  top: -52px;
}

.entry-content #mc_embed_signup .knomo-newsletter img {
  border: none;
}

@media screen and (max-width: 680px) {
  .entry-content #mc_embed_signup p {
    max-width: 240px;
  }
}

@media screen and (max-width: 480px) {
  .entry-content #mc_embed_signup p {
    max-width: 240px;
    margin-bottom: 46px;
  }

  .entry-content #mc_embed_signup form .round-btn-container {
    margin: 0 auto;
  }
  
  .entry-content #mc_embed_signup .knomo-newsletter > img {
    height: 46px;
  }

  .entry-content #mc_embed_signup .knomo-newsletter {
    top: -40px;
  }
  
  .entry-content #mc_embed_signup #newslettersignup_RuD {
    max-width: 125px;
    margin-left: 0;
  }


}

/* Server-side error from /api/newsletter, inserted by _show_error() in
   newsletter-form.njk as #form-error-message > ._error-inner._form_error, just
   above the Subscribe button. The include's inline <style> only colors the
   field tooltip (#ac_email-error), so this one inherited the page's dark text
   on the blue footer and failed axe color-contrast: Meryl's review, issue #31
   item 8 ("generic and low color contrast"). White on --ee-blue is 9.8:1; the
   yellow bar marks it as an error without relying on color alone, since the
   wrapper already has role="alert". */
#mc_embed_signup ._form_error {
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  border-left: 4px solid var(--bright-yellow);
  padding: 8px 12px;
  margin: 0 0 16px;
}

/* The Turnstile check renders after Subscribe on the first typed character
   (newsletter-form.njk). Space it from the button only once it exists. */
.ee-nl-turnstile:not(:empty) {
  margin-top: 16px;
}

/* ---- Newsletter band (components/newsletter-band.njk, 2026-10-20) --------

   The signup as a section of its own: a light gray band above the footer on
   every page (mid-page on the home page), separate from the blue footer it
   used to sit in. Its edges use the header's side inset, like the footer.
   Two columns from 961px: heading and description on the left, the field,
   button and messages on the right; the form's children are placed one by
   one because the markup gives them no shared wrapper. The colors below
   replace the white-on-blue ones in style.css and the include's inline
   <style> only inside the band, so /newsletter/, which has the form in its
   own content, looks as it did. #A30000 on the band's gray is 6.6:1. */
.ee-newsletter-band {
    background-color: var(--bg-light-gray);
    padding: 56px var(--ee-header-inset);
}

/* First page of a visit only: on every later page the band is hidden
   (assets/js/ee-first-page.js sets the class before the body draws). The
   home page's band is always shown. */
.ee-not-first-page .ee-newsletter-band:not(.ee-newsletter-band--always) {
    display: none;
}

.ee-newsletter-band #mc_embed_signup {
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.ee-newsletter-band #_form_3_ {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 64px;
    align-items: start;
    padding: 0;
    border: 0;
}

.ee-newsletter-band #_form_3_ > * {
    grid-column: 2;
}

.ee-newsletter-band #_form_3_ > .footer-form-label {
    grid-column: 1;
    grid-row: 1;
}

.ee-newsletter-band #_form_3_ > p:first-of-type {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

/* The field spans the heading's two rows and sits at their bottom, level
   with the end of the description, leaving room above for Knomo, who peeks
   over its right end. The button and messages follow below it. */
.ee-newsletter-band #_form_3_ > .footer-form-input {
    grid-row: 1 / 3;
    align-self: end;
    margin-top: 56px;
}

.ee-newsletter-band #_form_3_ > .round-btn-container {
    grid-row: 3;
    margin-top: 16px;
}

/* The field fills its column, and Knomo peeks over its right end, as in the
   footer, whose versions of these rules (style.css) are scoped to footer. */
.ee-newsletter-band #mc_embed_signup .mc-field-group {
    width: 100%;
    padding-bottom: 0;
}

/* style.css fixes the field at 35rem on wide screens. */
.ee-newsletter-band #mc_embed_signup .mc-field-group input {
    width: 100%;
}

/* Knomo sits on the field, as on the WordPress site (Thomas, 2026-10-20):
   anchored to the field's own wrapper, his lower part tucked behind the
   field's top edge, toward its right end. The field is stacked above him,
   so its white fill hides what is behind it. */
.ee-newsletter-band .footer-form-input > div {
    position: relative;
}

.ee-newsletter-band #_form_3_ .knomo-newsletter {
    top: auto;
    bottom: calc(100% - 22px);
    right: 32px;
    z-index: 0;
    line-height: 0;
}

.ee-newsletter-band #_form_3_ .knomo-newsletter > img {
    height: 76px;
    width: auto;
}

.ee-newsletter-band #mc_embed_signup .mc-field-group {
    position: relative;
    z-index: 1;
}

.ee-newsletter-band .footer-form-label > label,
.ee-newsletter-band #mc_embed_signup h2 {
    color: var(--ee-blue);
}

.ee-newsletter-band #mc_embed_signup p,
.ee-newsletter-band #mc_embed_signup ._form-thank-you {
    color: var(--ee-black);
}

/* Sizes in px, as the footer set them: the band sits inside pages whose own
   text size would otherwise carry in (the Learn pages' 18px, body's 28.8px). */
.ee-newsletter-band #mc_embed_signup h2 {
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    line-height: 1.25;
}

.ee-newsletter-band #mc_embed_signup p,
.ee-newsletter-band #mc_embed_signup ._form-thank-you {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

.ee-newsletter-band #mc_embed_signup a {
    color: var(--ee-blue);
}

/* The white field needs its own edge on the gray (WCAG 1.4.11); focus keeps
   the shared three-band ring (components/ee-btn.css). */
.ee-newsletter-band #mc_embed_signup input#ac_email {
    border: 2px solid var(--ee-blue);
}

.ee-newsletter-band #mc_embed_signup ._form_error {
    color: #A30000;
    border-left-color: #A30000;
}

.ee-newsletter-band #ac_email-error ._error-inner {
    color: #A30000;
}

/* components/ee-regions.css draws this outline white for the blue footer. */
.ee-newsletter-band #mc_embed_signup [tabindex="-1"]:focus-visible {
    outline-color: var(--ee-blue);
}

@media screen and (max-width: 960px) {
    .ee-newsletter-band {
        padding-block: 40px;
    }

    .ee-newsletter-band #_form_3_ {
        display: block;
    }

    .ee-newsletter-band #_form_3_ > .footer-form-input {
        margin-top: 40px;
    }
}