/*
 * V3 section package: contact-form
 *
 * CSS isolation: every selector rooted under
 *   .pd-section--contact-form[data-pd-module^="contact-form--"]
 *
 * Class/attribute selectors only - no element selectors.
 *
 * Canonical tokens used:
 *   --pd-color-text, --pd-color-muted, --pd-color-surface,
 *   --pd-color-surface-alt, --pd-color-primary, --pd-color-secondary,
 *   --pd-color-accent, --pd-color-border, --pd-color-muted-bg,
 *   --pd-color-on-dark
 *   --pd-font-heading, --pd-font-body
 *   --pd-radius-sm, --pd-radius-md, --pd-radius-lg, --pd-shadow-sm
 *   --pd-space-2, --pd-space-3, --pd-space-4, --pd-space-5,
 *   --pd-space-6, --pd-space-8
 *
 * Variants:
 *   simple-form        heading + intro + form
 *   form-with-details  form beside contact details
 *   form-map-split     form on one side, map + details on the other
 */

.pd-section--contact-form[data-pd-module^="contact-form--"] {
  display: block;
  width: 100%;
  font-family: var(--pd-font-body);
  box-sizing: border-box;
}

/* Background tone contrast.
 * Section bg/root color come from the shared [data-background-tone]
 * primitive. The form itself sits inside a surface card so its inputs
 * stay legible on dark tones; only the section header and the
 * details panel labels need scoped contrast inversion. */
/* PASS 4BO: __headline / __eyebrow / __intro tone-aware contrast
 * moved to shared [data-background-tone] rules in components.css. */
.pd-section--contact-form[data-pd-module^="contact-form--"][data-background-tone="primary"] .pd-contact-form__details-label,
.pd-section--contact-form[data-pd-module^="contact-form--"][data-background-tone="secondary"] .pd-contact-form__details-label {
  color: var(--pd-color-surface);
  opacity: 0.85;
}
.pd-section--contact-form[data-pd-module^="contact-form--"][data-background-tone="primary"] .pd-contact-form__details-value,
.pd-section--contact-form[data-pd-module^="contact-form--"][data-background-tone="secondary"] .pd-contact-form__details-value,
.pd-section--contact-form[data-pd-module^="contact-form--"][data-background-tone="primary"] .pd-contact-form__details-address,
.pd-section--contact-form[data-pd-module^="contact-form--"][data-background-tone="secondary"] .pd-contact-form__details-address {
  color: var(--pd-color-surface);
}
.pd-section--contact-form[data-pd-module^="contact-form--"][data-background-tone="primary"] .pd-contact-form__details-link,
.pd-section--contact-form[data-pd-module^="contact-form--"][data-background-tone="secondary"] .pd-contact-form__details-link {
  color: var(--pd-color-surface);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__inner {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-6);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__header {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  max-width: 48rem;
}

/* PASS 4BO: contact-form section header typography moved to shared
 * .pd-eyebrow / .pd-section-heading / .pd-section-intro rules in
 * components.css. The placeholder modifier keeps its empty-state cue. */
.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__headline--placeholder {
  font-style: italic;
  opacity: 0.7;
}

/* Form wrapper */
.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__form-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-4);
  padding: var(--pd-space-6);
  background: var(--pd-color-surface);
  border: 1px solid var(--pd-color-border);
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-sm);
  box-sizing: border-box;
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__form-intro {
  margin: 0;
  color: var(--pd-color-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-4);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pd-color-text);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__required {
  margin-left: 0.25rem;
  color: var(--pd-color-primary);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__input,
.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__textarea {
  width: 100%;
  padding: var(--pd-space-3) var(--pd-space-4);
  background: var(--pd-color-surface);
  color: var(--pd-color-text);
  border: 1px solid var(--pd-color-border);
  border-radius: var(--pd-radius-md);
  font: inherit;
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__textarea {
  min-height: 8rem;
  resize: vertical;
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__input:focus-visible,
.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__textarea:focus-visible {
  outline: none;
  border-color: var(--pd-color-primary);
  box-shadow: 0 0 0 3px var(--pd-color-muted-bg);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__actions {
  display: flex;
  justify-content: flex-start;
}

/* PASS 4BN: contact-form submit composes .pd-button + .pd-button--primary.
 * Visual styling, hover/focus, and reduced-motion stop now live in
 * components.css. The native <button> default border is overridden
 * by .pd-button's `border: 1px solid transparent` so no per-package
 * `border: none` reset is needed. */

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__banner {
  padding: var(--pd-space-3) var(--pd-space-4);
  border-radius: var(--pd-radius-md);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__banner--success {
  background: var(--pd-color-muted-bg);
  color: var(--pd-color-text);
  border: 1px solid var(--pd-color-border);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__banner--error {
  background: var(--pd-color-surface-alt);
  color: var(--pd-color-text);
  border: 1px solid var(--pd-color-primary);
}

/* Side panel: details */
.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__details {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-4);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__details-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pd-space-4);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__details-item {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  margin: 0;
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__details-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-color-muted);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__details-value {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pd-color-text);
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__details-link {
  color: var(--pd-color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__details-link:hover {
  border-bottom-color: currentColor;
}

.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__details-address {
  margin: 0;
  font-style: normal;
  white-space: pre-wrap;
  color: var(--pd-color-text);
}

/* Variant: simple-form (default) */
.pd-section--contact-form[data-pd-module^="contact-form--"][data-pd-variant="simple-form"] .pd-contact-form__form-wrap {
  max-width: 36rem;
}

/* Variant: form-with-details and form-map-split share the split layout */
.pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pd-space-6);
  align-items: start;
}

@media (min-width: 60rem) {
  .pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__split {
    grid-template-columns: 1fr 1fr;
    gap: var(--pd-space-8);
  }
  .pd-section--contact-form[data-pd-module^="contact-form--"][data-layout-side="form-right"] .pd-contact-form__form-wrap {
    order: 2;
  }
  .pd-section--contact-form[data-pd-module^="contact-form--"][data-layout-side="form-right"] .pd-contact-form__details,
  .pd-section--contact-form[data-pd-module^="contact-form--"][data-layout-side="form-right"] .pd-contact-form__map-column {
    order: 1;
  }
}

/* Variant: form-map-split */
.pd-section--contact-form[data-pd-module^="contact-form--"][data-pd-variant="form-map-split"] .pd-contact-form__map-column {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-5);
}

.pd-section--contact-form[data-pd-module^="contact-form--"][data-pd-variant="form-map-split"] .pd-contact-form__map {
  width: 100%;
  overflow: hidden;
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-sm);
  background: var(--pd-color-muted-bg);
}

.pd-section--contact-form[data-pd-module^="contact-form--"][data-pd-variant="form-map-split"] .pd-contact-form__map-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.pd-section--contact-form[data-pd-module^="contact-form--"][data-pd-variant="form-map-split"][data-map-height="short"] .pd-contact-form__map {
  height: 16rem;
}
.pd-section--contact-form[data-pd-module^="contact-form--"][data-pd-variant="form-map-split"][data-map-height="medium"] .pd-contact-form__map {
  height: 22rem;
}
.pd-section--contact-form[data-pd-module^="contact-form--"][data-pd-variant="form-map-split"][data-map-height="tall"] .pd-contact-form__map {
  height: 28rem;
}

.pd-section--contact-form[data-pd-module^="contact-form--"][data-pd-variant="form-map-split"] .pd-contact-form__map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--pd-space-6);
  font-size: 0.9375rem;
  color: var(--pd-color-muted);
  text-align: center;
}

/* PASS 4BN: CTA submit reduced-motion override moved into
 * components.css .pd-button rule. Form inputs / textarea / details
 * link still own their own transition stops. */
@media (prefers-reduced-motion: reduce) {
  .pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__input,
  .pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__textarea,
  .pd-section--contact-form[data-pd-module^="contact-form--"] .pd-contact-form__details-link {
    transition: none;
  }
}