/* components/organisms/webform/webform.css */
.c-webform-section {
  border-top: 1px solid #e5e5e5;
}

.c-webform-module {
  max-width: 1110px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 60px 20px;
}

.c-webform-module__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.c-webform-module__content {
  flex: 1;
  max-width: 500px;
}

.c-webform-module__title {
  font-family: var(--font-family);
  font-size: 28px;
  line-height: 40px;
  color: #003865;
  font-weight: 400;
  margin: 0 0 20px;
}

.c-webform-module h1.c-webform-module__title {
  font-size: 48px;
  line-height: 58px;
 
}

.c-webform-module h2.c-webform-module__title {
  font-size: 28px;
  line-height: 36px;
 
}

.c-webform-module h3.c-webform-module__title {
  font-size: 28px;
  line-height: 38px;
 
}

.c-webform-module h4.c-webform-module__title {
  font-size: 22px;
  line-height: 32px;
 
}

.c-webform-module h5.c-webform-module__title {
  font-size: 18px;
  line-height: 28px;
 
}

.c-webform-module h6.c-webform-module__title {
  font-size: 16px;
  line-height: 24px;
 
}

.c-webform-module__subtitle {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 20px;
  color: #868d95;
  font-weight: 400;
  margin: 0;
}

.c-webform-module__form-wrapper {
  flex: 1;
  max-width: 550px;
  display: flex;
  flex-direction: column;
}

.c-webform-module__form {
  position: relative;
}

/* Hide the default Drupal AJAX throbber next to the submit button. */
.c-webform-module__form-wrapper .ajax-progress {
  display: none;
}

/*
  Targeting standard Drupal Webform markup to create the inline layout.
  Webform typically wraps inputs in .js-form-item and buttons in .form-actions.
*/
.c-webform-module__form-wrapper form.webform-submission-form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: stretch;
}

.c-webform-module__form-wrapper .form-item,
.c-webform-module__form-wrapper .js-form-item {
  flex: 1;
  margin: 0;
}

/* Validation error banner: Drupal renders this as a direct sibling of the
   input/button inside the same flex row, so without this it lands to the
   left of the input instead of below it. Forcing it to full width with
   flex-wrap above, plus an order after the input (0) and button (0), drops
   it onto its own line below both. */
.c-webform-module__form-wrapper [data-drupal-messages] {
  flex: 1 0 100%;
  order: 1;
  margin-top: 10px;
}

.c-webform-module__form-wrapper [data-drupal-messages] [role="alert"] {
  color: #c0392b;
  font-family: var(--font-family, "Noto Sans", sans-serif);
  font-size: 13px;
}

.c-webform-module__inline-error {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 1px;
  color: red;
  font-family: var(--font-family, "Noto Sans", sans-serif);
  font-size: 14px;
  white-space: nowrap;
}

.c-webform-module__form-wrapper input.error {
  border-color: red;
}

.c-webform-module__form-wrapper input[type="email"],
.c-webform-module__form-wrapper input[type="text"] {
  width: 100%;
  padding: 15px 20px 15px 45px;
  border: 1px solid #cfcfcf;
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-family: var(--font-family, "Noto Sans", sans-serif);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  height: 50px;

  /* Envelope icon */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2300ac41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 20px;
  color: #333;
}

.c-webform-module__form-wrapper input::placeholder {
  color: #858c94;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.c-webform-module__form-wrapper .form-actions {
  margin: 0;
  display: flex;
}

.c-webform-module__form-wrapper input[type="submit"],
.c-webform-module__form-wrapper button.webform-button--submit {
  background-color: #00ac41;
  color: #fff;
  font-family: var(--font-family, "Noto Sans", sans-serif);
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 0 30px;
  height: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

.c-webform-module__form-wrapper input[type="submit"]:hover,
.c-webform-module__form-wrapper button.webform-button--submit:hover {
  background-color: #008733;
}

.c-webform-module__disclaimer {
  font-family: var(--font-family, "Noto Sans", sans-serif);
  font-size: 10px;
  line-height: 16px;
  color: #868d95;

  /* The inline validation error is absolutely positioned (so it never
     shifts the form/submit button when it appears) — this reserves enough
     space to clear it so the two never visually overlap. */
  margin: 34px 0 0;
}

/* The disclaimer only applies to the act of submitting the form — once the
   AJAX confirmation message has replaced the form, hide it. */
.c-webform-module__form-wrapper:has(.c-webform-module__success-msg) .c-webform-module__disclaimer {
  display: none;
}

/* Responsive adjustments */
@media (width <= 900px) {
  .c-webform-module__inner {
    flex-direction: column;
    gap: 30px;
 
}

  .c-webform-module__content,
  .c-webform-module__form-wrapper {
    max-width: 100%;
 
}
}

@media (width <= 600px) {
  .c-webform-module__form-wrapper form.webform-submission-form {
    flex-direction: column;
 
}

  .c-webform-module__form-wrapper input[type="email"],
  .c-webform-module__form-wrapper input[type="text"] {
    border-right: 1px solid #cfcfcf;
    margin-bottom: 15px;
 
}

  .c-webform-module__form-wrapper input[type="submit"],
  .c-webform-module__form-wrapper button.webform-button--submit {
    width: 100%;
 
}
}

/* Webform Confirmation / Success State */
.c-webform-module__success-msg {
  color: #00ac41;
  font-family: var(--font-family, "Noto Sans", sans-serif);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 20px;
}

.c-webform-module__demo-btn {
  display: inline-block;
  background-color: #00ac41;
  color: #fff;
  font-family: var(--font-family, "Noto Sans", sans-serif);
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 15px 30px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  letter-spacing: 0.05em;
}

.c-webform-module__demo-btn:hover {
  background-color: #008733;
}