/*
 * CMS-only styles that have no counterpart in the delivered design.
 *
 * Deliberately NOT in public/assets/scss: that folder is the signed-off design
 * artefact, and editing it would mean rebuilding main.css. Keeping this outside
 * public/assets/ also means re-copying the delivered assets cannot wipe it.
 *
 * Values are taken from the design rather than invented:
 *   #e40f0f  $error-color        (scss/abstract/_variables.scss:26)
 *   #07aa63  $success-color      (scss/abstract/_variables.scss:28)
 *   type scale mirrors .footerMain__about so the message sits with the footer text.
 */

.newsletter__message {
  font-weight: 500;
  line-height: 1.5;
  margin-block-start: 8px;
  margin-block-end: 0;
}

@media (min-width: 991px) {
  .newsletter__message { font-size: 0.8333333333vw; }
}
@media (max-width: 992px) {
  .newsletter__message { font-size: 12px; }
}
@media (max-width: 575px) {
  .newsletter__message { font-size: 10.4px; }
}

.newsletter__message--success { color: #07aa63; }
.newsletter__message--error   { color: #e40f0f; }

/* Mirrors the design's own invalid-field treatment (.calculator__input.is-invalid). */
.footerMain__subscribe-input.is-invalid { border-color: #e40f0f; }

/* While the request is in flight. */
.newsletter.is-busy .footerMain__subscribe-btn {
  opacity: 0.6;
  pointer-events: none;
}

/*
 * Rich-text inside the legal pages.
 *
 * The delivered design puts a single <p class="legalContent__text"> in each clause. The
 * CMS renders a WYSIWYG there instead, so once an editor splits a clause the text arrives
 * wrapped in its own <p> elements — which pick up Bootstrap's 1rem bottom margin and push
 * the section taller than the design. Collapsing the outer margins keeps a one-paragraph
 * clause pixel-identical to the delivered markup while still spacing multiple paragraphs.
 */
.legalContent__text > p:first-child { margin-top: 0; }
.legalContent__text > p:last-child { margin-bottom: 0; }

/*
 * News cards are links.
 *
 * The delivered design draws each card as a plain <article> with no link, which left the
 * article detail pages unreachable. The card is now wrapped in an <a>; these rules strip
 * the anchor's own colour and underline so the card looks exactly as designed, and make
 * it a block so it does not become an inline box inside the grid column.
 */
.news__card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.news__card-link:hover, .news__card-link:focus-visible { color: inherit; text-decoration: none; }

/*
 * Consultation form validation.
 *
 * The design ships an invalid treatment for the ROI calculator only
 * (.calculator__input.is-invalid + .calculator__error), so these mirror those exact
 * values for the contact form, which the design left unstyled because it had no endpoint
 * to validate against.
 */
.consultForm__input.is-invalid,
.consultForm__textarea.is-invalid,
.consultForm__table-input.is-invalid { border-color: #e40f0f; }

.consultForm__error {
  font-weight: 500;
  line-height: 1.5;
  color: #e40f0f;
  margin-block: 4px 0;
  font-size: max(0.625vw, 12px);
}

/*
 * The variant used when the message sits after a whole row or checkbox group instead of
 * after a single input (see CONTAINERS in static/js/consultation.js). Inside the gas table
 * it is a sibling of .consultForm__table-row, which is the element that carries the
 * table's horizontal padding — so it repeats those exact values, per breakpoint, to line
 * the message up with the label above it. The bottom margin keeps it off the next row's
 * divider.
 */
.consultForm__error--block {
  padding-inline: 0.8333333333vw;
  margin-block: 0 8px;
}

.consultForm__checks + .consultForm__error--block { padding-inline: 0; }

@media (max-width: 992px) {
  .consultForm__error--block { padding-inline: 12px; }
  .consultForm__checks + .consultForm__error--block { padding-inline: 0; }
}

@media (max-width: 575px) {
  .consultForm__error--block { padding-inline: 10.4px; }
  .consultForm__checks + .consultForm__error--block { padding-inline: 0; }
}