/**
 * Above-form regional-guidance text (KSGW-421).
 *
 * Inherits the site font; renders full width above the fields and reads
 * consistently across desktop / tablet / mobile.
 */

/* The webform section lays its children out in a 2-column flex grid
 * (.webform-section-wrapper > * { width: 50% }). Force the guidance to span the
 * full row so it sits above the fields, not beside the first one. */
.webform-section-wrapper > .ksg-form-intro {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-right: 0 !important;
}

/* The full-width guidance takes the first grid cell, which flips the fields'
 * nth-child parity and drops the 25px column gutter the theme applies to the
 * left column. Restore it for the fields that follow (desktop 2-column only). */
@media (min-width: 767px) {
  .webform-section-wrapper > .ksg-form-intro ~ *:nth-child(even) {
    padding-right: 25px !important;
  }

  .webform-section-wrapper > .ksg-form-intro ~ *:nth-child(odd) {
    padding-right: 0 !important;
  }
}

.ksg-form-intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.ksg-form-intro p {
  margin: 0;
}

.ksg-form-intro h2 {
  margin: 0 0 8px;
}

.ksg-form-intro a {
  text-decoration: underline;
  font-weight: 700;
}

@media (max-width: 767px) {
  .ksg-form-intro {
    font-size: 15px;
  }

  /* The mobile left/right margin for the guidance AND the fields is owned by the
   * theme (.paragraph-webform__container in pages/webform/webform.scss), so they
   * stay aligned. Here we only keep the guidance flush to that shared inset (no
   * extra horizontal padding) and add a small gap above the first field (Name). */
  .webform-section-wrapper > .ksg-form-intro {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
  }
}