/*
 * Contact Form 7, restyled onto the footer newsletter design.
 *
 * assets/css/footer.css describes the prototype's markup — a bare <input> and <button> as the two
 * children of <form class="footer-newsletter-form">. CF7 renders something else: an outer
 * <div class="wpcf7">, a hidden <fieldset>, a <span class="wpcf7-form-control-wrap"> around the
 * input, and a <div class="wpcf7-response-output"> after the button. footer.css is the UI team's
 * file and is not edited, so the overrides live here, enqueued straight after it — the same
 * arrangement as mini-cart.css and search.css in the header.
 *
 * CF7's own stylesheet does more than expected, and these rules deliberately do not repeat it: it
 * hides .hidden-fields-container and the empty .wpcf7-response-output, and makes
 * .wpcf7-form-control-wrap a block. That is why the form column already measures the design's
 * 55 + 16 + 52 = 123px without help here.
 *
 * SPECIFICITY: CF7 writes `.wpcf7 form .wpcf7-response-output` (0,3,1 with its status class), so a
 * plain `.footer-newsletter-form .wpcf7-response-output` (0,2,0) silently loses — measured, not
 * assumed. The rules below therefore lead with `.wpcf7 form` to match it and win on load order,
 * this file being enqueued after CF7's.
 */

/*
 * The one thing that genuinely breaks.
 *
 * CF7 emits size="40" on the email field, which on an inline-block input resolves to about 404px —
 * 121px wider than the 283px column, so it overflowed. In the prototype the input was itself the
 * flex child and stretched to the column; here the .wpcf7-form-control-wrap is, and the input
 * inside it has no width of its own. border-box matters because footer.css gives the field 20px of
 * horizontal padding and a 1px border on top of that width.
 */
.footer-newsletter-form .wpcf7-form-control-wrap input[type="email"] {
  box-sizing: border-box;
  width: 100%;
}

/*
 * The response message.
 *
 * CF7 gives it `margin: 2em 0.5em 1em`, which would drop it 28px below the button instead of
 * letting the form's own 16px flex gap place it, and inherits dark text that is close to invisible
 * on the footer's #272c33.
 *
 * The border colour is left to CF7 on purpose: green when sent, amber when a field is invalid, red
 * when the send fails. That traffic light is conventional, and all three were checked against this
 * background rather than assumed legible.
 */
.wpcf7 form.footer-newsletter-form .wpcf7-response-output {
  margin: 0;
  border-width: 1px;
  border-radius: var(--radius-md);
  font-size: 14px;
}

/* CF7's #dc3232 is too dark to read against the footer; this is the same red lightened. */

/* The spinner sits inline after the button and carries a light-page background of its own. */
.footer-newsletter-form .wpcf7-spinner {
  background-color: #494e56;
  position: absolute;
  right: 0;
}