/**
 * acf-contact-form-example-section — grass bg + top/bottom waves + white panel example form
 * (Html-css-components/contact-form-section + contact-form; wave pattern: acf-faq-media-section).
 */

.acf-contact-form-example-section {
  position: relative;
  margin-block-start: -3px; /* styleguide-exception: seam overlap with section above */
  overflow: hidden;
}

.acf-contact-form-example-section.alignfull,
.acf-contact-form-example-section.alignwide {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
}

.acf-contact-form-example-section__wave {
  display: block;
  line-height: 0;
}

.acf-contact-form-example-section__wave--top {
  margin-inline: 0;
  inline-size: 100%;
}

.acf-contact-form-example-section__wave--top svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 50px; /* styleguide-exception: wave decorative min */
  transform: scaleY(-1);
}

.acf-contact-form-example-section__body {
  position: relative;
  padding-inline: var(--block-pad-inline);
  overflow: hidden;
}

.acf-contact-form-example-section__wave--bottom {
  margin-inline: calc(-1 * var(--block-pad-inline));
  inline-size: calc(100% + (2 * var(--block-pad-inline)));
}

.acf-contact-form-example-section__wave--bottom svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 50px; /* styleguide-exception: wave decorative min */
  transform: scaleY(-1);
  margin-block-end: -1px; /* styleguide-exception: cover SVG subpixel fringe */
}

.acf-contact-form-example-section__grass {
  position: absolute;
  inset-inline: calc(-1 * var(--block-pad-inline));
  inset-block: 0;
  z-index: 0;
  inline-size: calc(100% + (2 * var(--block-pad-inline)));
  pointer-events: none;
}

.acf-contact-form-example-section--has-bottom-wave .acf-contact-form-example-section__grass-img {
  clip-path: inset(0 0 2px 0);
}

.acf-contact-form-example-section__grass-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 75%;
}

.acf-contact-form-example-section__container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-block: var(--block-pad-block);
  padding-inline: 0;
}

.acf-contact-form-example-section--has-bottom-wave .acf-contact-form-example-section__container {
  margin-block-end: var(--block-pad-block);
}

.acf-contact-form-example-section:not(.acf-contact-form-example-section--has-bottom-wave) .acf-contact-form-example-section__container {
  margin-block-end: var(--spacing-16);
}

.acf-contact-form-example-section--has-bottom-wave:not(.acf-contact-form-example-section--has-top-wave) .acf-contact-form-example-section__container {
  margin-block-start: var(--block-pad-block);
}

.acf-contact-form-example-section--has-bottom-wave .acf-contact-form-example-section__body {
  padding-block-end: 0;
}

.acf-contact-form-example-section__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  inline-size: 100%;
  max-inline-size: var(--container-main);
  padding-block: var(--spacing-20);
  padding-inline: var(--spacing-10);
  border-radius: var(--radius-button);
  background: var(--color-light);
  box-sizing: border-box;
}

.acf-contact-form-example-section__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  max-inline-size: var(--form-width);
  text-align: center;
}

/* Beat .entry-content h2 from reset.css */
.acf-contact-form-example-section h2.acf-contact-form-example-section__title {
  margin: 0;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
  color: var(--color-brand-forest);
}

.acf-contact-form-example-section__lead {
  margin: 0;
  color: var(--color-black);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
}

.acf-contact-form-example-section__lead p {
  margin: 0;
}

.acf-contact-form-example-section__lead p + p {
  margin-block-start: 1em;
}

/* Form grid — exact port of Html-css-components/contact-form/contact-form.css */
.acf-contact-form-example-section__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--form-field-gutter);
  inline-size: 100%;
  max-inline-size: var(--form-width);
}

.acf-contact-form-example-section__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.acf-contact-form-example-section__field--full {
  grid-column: 1 / -1;
}

/* Field labels — slightly smaller than inputs (prototype body is 1rem; sm reads cleaner in panel) */
.acf-contact-form-example-section__field-label {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--color-black);
}

.acf-contact-form-example-section__form input,
.acf-contact-form-example-section__form select,
.acf-contact-form-example-section__form textarea {
  block-size: 48px; /* styleguide-exception: Figma form control height */
  padding: 12px;
  border: 1px solid rgb(0 0 0 / 0.5);
  border-radius: 0;
  background: var(--color-light);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--color-black);
}

.acf-contact-form-example-section__form textarea {
  block-size: 180px; /* styleguide-exception: Figma message area */
  resize: vertical;
}

.acf-contact-form-example-section__form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2303400f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
  padding-inline-end: 44px;
}

.acf-contact-form-example-section__form input:focus-visible,
.acf-contact-form-example-section__form select:focus-visible,
.acf-contact-form-example-section__form textarea:focus-visible {
  outline: 2px solid var(--color-brand-forest);
  outline-offset: 1px;
}

.acf-contact-form-example-section__checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2);
  padding-block-end: var(--spacing-4);
  cursor: pointer;
}

.acf-contact-form-example-section__checkbox input[type="checkbox"] {
  block-size: 18px;
  inline-size: 18px;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--color-brand-forest);
}

.acf-contact-form-example-section__checkbox .acf-contact-form-example-section__field-label {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-black);
}

.acf-contact-form-example-section__submit {
  grid-column: 1 / -1;
  justify-self: start;
  min-inline-size: 215px; /* styleguide-exception: Figma submit width */
}

/* Keep the iframe at the prototype form width (48rem), centered in the panel. */
.acf-contact-form-example-section .pls-corporate-form,
.acf-contact-form-example-section .pls-corporate-form__iframe {
  inline-size: 100%;
  max-inline-size: var(--form-width);
}

/* contact-form bottom wave → contact-info top wave handoff */
.acf-contact-form-example-section--has-bottom-wave + .acf-contact-info-section.acf-contact-info-section--has-top-wave .acf-contact-info-section__wave--top,
.wp-block-acf-acf-contact-form-example-section:has(.acf-contact-form-example-section--has-bottom-wave) + .wp-block-acf-acf-contact-info-section .acf-contact-info-section--has-top-wave .acf-contact-info-section__wave--top {
  display: none;
}

.acf-contact-form-example-section--has-bottom-wave + .acf-contact-info-section.acf-contact-info-section--has-top-wave,
.wp-block-acf-acf-contact-form-example-section:has(.acf-contact-form-example-section--has-bottom-wave) + .wp-block-acf-acf-contact-info-section .acf-contact-info-section--has-top-wave {
  margin-block-start: -4px;
}

@media (max-width: 639px) {
  .acf-contact-form-example-section__body {
    padding-inline: var(--spacing-4);
  }

  .acf-contact-form-example-section__wave--bottom {
    margin-inline: calc(-1 * var(--spacing-4));
    inline-size: calc(100% + (2 * var(--spacing-4)));
  }

  .acf-contact-form-example-section__grass {
    inset-inline: calc(-1 * var(--spacing-4));
    inline-size: calc(100% + (2 * var(--spacing-4)));
  }

  .acf-contact-form-example-section__container {
    margin-block: var(--spacing-16);
  }

  .acf-contact-form-example-section--has-bottom-wave .acf-contact-form-example-section__container {
    margin-block-end: var(--spacing-16);
  }

  .acf-contact-form-example-section__panel {
    gap: var(--spacing-10);
    padding-block: var(--spacing-10);
    padding-inline: var(--spacing-4);
  }

  .acf-contact-form-example-section h2.acf-contact-form-example-section__title {
    font-size: 2rem; /* styleguide-exception: mobile serif heading */
  }

  .acf-contact-form-example-section__form {
    grid-template-columns: 1fr;
  }

  .acf-contact-form-example-section__submit {
    inline-size: 100%;
    justify-self: stretch;
  }
}