/* Single-column grey panel on white. Width-capped and centred so the fields
   stay a comfortable reading width, with #BelieveInPeople brand accents. */
.webform-submission-share-your-story-form {
  background-color: #E8E8E8;
  border-top: 4px solid #EF5BA1;
  border-radius: 8px;
  padding: 1.5em;
  color: #515151;
}
/* The theme caps `section .container .webform-submission-form` at 50%; the
   extra class raises specificity so the panel fills the container and lines up
   with the intro band paragraph above it. */
section .container .webform-submission-form.webform-submission-share-your-story-form {
  max-width: 100%;
}
@media (min-width: 768px) {
  .webform-submission-share-your-story-form {
    padding: 2.5em;
    /* Two-column field grid so the panel is filled rather than left half-empty. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    align-items: start;
  }
  /* Everything spans both columns by default — safe for the text blocks, the
     textarea, consent, the button, hidden inputs and anything unexpected.
     margin:0 also cancels the theme owl selector's auto side-margins. */
  .webform-submission-share-your-story-form > * {
    grid-column: 1 / -1;
    margin: 0 0 1em;
  }
  /* The short fields opt into a single column so they pair up side by side. */
  .webform-submission-share-your-story-form > .form-item-first-name,
  .webform-submission-share-your-story-form > .form-item-last-name,
  .webform-submission-share-your-story-form > .form-item-postcode,
  .webform-submission-share-your-story-form > .form-item-phone,
  .webform-submission-share-your-story-form > .form-item-contact-method,
  .webform-submission-share-your-story-form > .form-item-contact-time {
    grid-column: span 1;
  }
  /* Keep the intro/expectation text a readable line length. */
  .webform-submission-share-your-story-form .share-story-note {
    max-width: 820px;
  }
}
.webform-submission-share-your-story-form .form-item { margin-bottom: 1em; }
.webform-submission-share-your-story-form .form-item label {
  color: #000000;
  font-weight: 600;
}
/* Long checkbox labels (the consent statement) must wrap. */
.webform-submission-share-your-story-form .form-type-checkbox label {
  white-space: normal;
}
.webform-submission-share-your-story-form .privacy-notice {
  font-size: 0.85em;
  color: #555555;
}
/* Expectation-setting blocks ("Before you share", "Not every story"). */
.webform-submission-share-your-story-form .share-story-note {
  margin: 0 0 1.5em;
}
.webform-submission-share-your-story-form .share-story-note h3 {
  margin: 0 0 0.4em;
  color: #5E1B6D;
  font-size: 1.15em;
}
.webform-submission-share-your-story-form .share-story-note ul {
  margin: 0.4em 0 0.8em 1.2em;
  padding-left: 1em;
  list-style: disc;
}
.webform-submission-share-your-story-form .share-story-note li {
  list-style: disc;
  margin-bottom: 0.25em;
}
/* Pink submit button, matching the wall's "Share your story" call to action.
   width:auto keeps it a natural button size rather than a full-width bar in
   the two-column grid. */
.webform-submission-share-your-story-form .webform-button--submit,
.webform-submission-share-your-story-form .form-actions input[type="submit"] {
  background-color: #EF5BA1;
  border-color: #EF5BA1;
  color: #ffffff;
  width: auto;
  justify-self: start;
}
.webform-submission-share-your-story-form .webform-button--submit:hover,
.webform-submission-share-your-story-form .form-actions input[type="submit"]:hover {
  background-color: #5E1B6D;
  border-color: #5E1B6D;
  color: #ffffff;
}