/**
 * Foundation Base — canonical Webform presentation v1.
 *
 * Shared public-facing Webform presentation only.
 * canonical.css remains the site-wide baseline.
 * Root-Domain CSS establishes Domain identity.
 * Optional css/webforms/<webform_id>.css may refine an individual journey.
 */

/* --------------------------------------------------------------------------
 * Webform canvas
 * -------------------------------------------------------------------------- */

.path-webform .foundation-content-main {
  min-inline-size: 0;
}

.path-webform .block-system-main-block > .content {
  inline-size: min(100%, 58rem);
  margin-inline: auto;
}

.path-webform .webform-submission-form {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 4vw, 3.25rem);
  border: var(--foundation-border-width) solid var(--foundation-color-border);
  background: var(--foundation-color-input);
}

.path-webform .webform-submission-form > *,
.path-webform .webform-submission-form .mb-3 {
  margin-block-end: 0;
}

.path-webform .webform-required {
  justify-self: end;
  margin: 0;
  color: var(--foundation-color-text-muted);
  font-size: var(--foundation-font-size-tiny);
  line-height: var(--foundation-line-height-small);
}

/* --------------------------------------------------------------------------
 * Labels, legends and supporting copy
 * -------------------------------------------------------------------------- */

.path-webform .webform-submission-form label:not(.form-check-label),
.path-webform .webform-submission-form .fieldset-legend {
  display: block;
  margin: 0 0 0.55rem;
  color: var(--foundation-color-text);
  font-family: var(--foundation-font-family-interface);
  font-size: var(--foundation-font-size-meta);
  font-weight: var(--foundation-font-weight-interface);
  letter-spacing: var(--foundation-letter-spacing-interface);
  line-height: var(--foundation-line-height-small);
  text-transform: uppercase;
}

.path-webform .webform-submission-form .form-required::after {
  margin-inline-start: 0.3em;
  color: var(--foundation-color-domain-accent);
}

.path-webform .webform-submission-form .description,
.path-webform .webform-submission-form .text-muted,
.path-webform .webform-submission-form .webform-element-description {
  color: var(--foundation-color-text-muted) !important;
  font-size: var(--foundation-font-size-small);
  line-height: var(--foundation-line-height-small);
}

.path-webform .webform-submission-form .description,
.path-webform .webform-submission-form .webform-element-description {
  margin-block-start: 0.55rem;
}

.path-webform .webform-submission-form .webform-element-description > :last-child {
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
 * Textual controls
 * -------------------------------------------------------------------------- */

.path-webform .webform-submission-form :is(
  .form-control,
  .form-select
) {
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: 0.8rem 0.15rem;
  border: 0;
  border-block-end: var(--foundation-border-width) dashed var(--foundation-color-border-strong);
  border-radius: 0;
  background: var(--foundation-color-input);
  color: var(--foundation-color-text);
  box-shadow: none;
  line-height: var(--foundation-line-height-small);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.path-webform .webform-submission-form textarea.form-control {
  min-block-size: 8.5rem;
  padding-block: 0.85rem;
  line-height: var(--foundation-line-height-body);
  resize: vertical;
  background: var(--foundation-color-input);
}

.path-webform .webform-submission-form :is(
  .form-control,
  .form-select
)::placeholder {
  color: var(--foundation-color-text-muted);
  opacity: 0.72;
}

.path-webform .webform-submission-form :is(
  .form-control,
  .form-select
):focus {
  border-block-end-color: var(--foundation-color-domain-accent);
  background-color: color-mix(
    in srgb,
    var(--foundation-color-domain-accent) 0.5%,
    transparent
  );
  box-shadow: 0 0.125rem 0 var(--foundation-color-domain-accent);
  border-style: none;
}

.path-webform .webform-submission-form :is(
  .form-control,
  .form-select
):disabled,
.path-webform .webform-submission-form :is(
  .form-control,
  .form-select
)[readonly] {
  background: var(--foundation-color-input);
  color: var(--foundation-color-text-muted);
  cursor: not-allowed;
  opacity: 0.8;
}

.path-webform .webform-submission-form :is(
  .form-control,
  .form-select
).error,
.path-webform .webform-submission-form :is(
  .form-control,
  .form-select
)[aria-invalid="true"] {
  border-block-end-color: #9f2d20;
  box-shadow: 0 0.125rem 0 #9f2d20;
}

/* --------------------------------------------------------------------------
 * Composites and groups
 * -------------------------------------------------------------------------- */

.path-webform .webform-submission-form fieldset.form-composite {
  min-inline-size: 0;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  border: 0;
  border-block-start: 0px solid var(--foundation-color-border);
}

.path-webform .webform-submission-form fieldset.form-composite > legend {
  float: none;
  inline-size: auto;
  margin: 0 0 0.9rem;
  padding: 0;
}

.path-webform .webform-submission-form .fieldset-wrapper {
  min-inline-size: 0;
}

.path-webform .webform-submission-form :is(
  .webform-options-display-one-column,
  .checkbox,
  .radio
) {
  display: grid;
  gap: 0.6rem;
}

.path-webform .webform-submission-form .form-check,
.path-webform .webform-submission-form .form-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  min-block-size: 3rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border: var(--foundation-border-width) solid var(--foundation-color-border);
  border-radius: var(--foundation-radius);
  background: var(--foundation-color-input);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.path-webform .webform-submission-form .form-check:hover,
.path-webform .webform-submission-form .form-switch:hover {
  border-color: var(--foundation-color-border-strong);
  background: var(--foundation-color-input);
}

.path-webform .webform-submission-form .form-check:has(.form-check-input:checked),
.path-webform .webform-submission-form .form-switch:has(.form-check-input:checked) {
  border-color: var(--foundation-color-domain-accent);
  background: color-mix(
    in srgb,
    var(--foundation-color-domain-accent) 6%,
    var(--foundation-color-input)
  );
}

.path-webform .webform-submission-form .form-check-input {
  float: none;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin: 0.14rem 0 0;
  padding: 0;
  border-color: var(--foundation-color-border-strong);
  accent-color: var(--foundation-color-domain-accent);
  box-shadow: none;
}

.path-webform .webform-submission-form .form-check-input:checked {
  border-color: var(--foundation-color-domain-accent);
  background-color: var(--foundation-color-domain-accent);
}

.path-webform .webform-submission-form .form-check-label {
  min-inline-size: 0;
  margin: 0;
  color: var(--foundation-color-text);
  font-family: var(--foundation-font-family-body);
  font-size: var(--foundation-font-size-small);
  font-weight: var(--foundation-font-weight-medium);
  letter-spacing: normal;
  line-height: var(--foundation-line-height-small);
  text-transform: none;
}

.path-webform .webform-submission-form :is(
  .webform-radios-other-input,
  .webform-checkboxes-other-input
) {
  margin-block-start: 0.75rem;
}

/* --------------------------------------------------------------------------
 * Date/time and compact composites
 * -------------------------------------------------------------------------- */

.path-webform .webform-submission-form .container-inline.form-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--foundation-grid-gap);
  align-items: end;
}

.path-webform .webform-submission-form .container-inline.form-inline > .form-item {
  min-inline-size: 0;
}

/* --------------------------------------------------------------------------
 * File upload
 * -------------------------------------------------------------------------- */

.path-webform .webform-submission-form .form-managed-file {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: var(--foundation-border-width) dashed var(--foundation-color-border-strong);
  background: var(--foundation-color-texr);
}

.path-webform .webform-submission-form .managed-file-placeholder {
  margin: 0;
  color: var(--foundation-color-text-muted);
  font-size: var(--foundation-font-size-small);
  line-height: var(--foundation-line-height-small);
  margin-inline-start: 1rem;
}

.path-webform .webform-submission-form input[type="file"].form-control {
  min-block-size: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.path-webform .webform-submission-form input[type="file"]::file-selector-button {
  margin-inline-end: 0.8rem;
  padding: 0.7rem 1rem;
  border: var(--foundation-border-width) solid var(--foundation-color-text);
  border-radius: 3px;
  background: var(--foundation-color-text);
  color: var(--foundation-color-action-contrast);
  font-family: var(--foundation-font-family-interface);
  font-size: var(--foundation-font-size-small);
  font-weight: var(--foundation-font-weight-interface);
  cursor: pointer;
}

.form-managed-file input.form-control[type="file"]::file-selector-button, .button.js-form-submit {
  background: var(--foundation-color-text);
  margin: 0.7rem 1rem;
  padding-block: 0.5rem;
  border-radius: 1px;
  max-width: max-content;
  border: var(--foundation-border-width) solid var(--foundation-color-text);
}

.form-managed-file input.form-control[type="file"]:hover::file-selector-button, .button.js-form-submit:hover {
  background: transparent;
  color: var(--foundation-color-text);
  border: var(--foundation-border-width) solid var(--foundation-color-text);
}

/* --------------------------------------------------------------------------
 * Actions
 * -------------------------------------------------------------------------- */

.path-webform .webform-submission-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0;
  padding-block-start: clamp(1.25rem, 3vw, 2rem);
  border-block-start: var(--foundation-border-width) solid var(--foundation-color-border);
}

.path-webform .webform-submission-form .form-actions .btn,
.path-webform .webform-submission-form .webform-button--submit {
  min-block-size: 3rem;
  padding: 0.8rem 1.5rem;
  border: var(--foundation-border-width) solid var(--foundation-color-action);
  border-radius: 1px;
  background: var(--foundation-color-action);
  color: var(--foundation-color-action-contrast);
  font-family: var(--foundation-font-family-interface);
  font-size: var(--foundation-font-size-small);
  font-weight: var(--foundation-font-weight-interface);
  line-height: var(--foundation-line-height-ui);
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.path-webform .webform-submission-form .form-actions .btn:hover,
.path-webform .webform-submission-form .webform-button--submit:hover {
  border-color: var(--foundation-color-domain-accent);
  background: var(--foundation-color-domain-accent);
  color: var(--foundation-color-action-contrast);
}

/* --------------------------------------------------------------------------
 * Messages, progress and confirmation
 * -------------------------------------------------------------------------- */

.path-webform .webform-message,
.path-webform .webform-confirmation {
  inline-size: min(100%, 58rem);
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: var(--foundation-border-width) solid var(--foundation-color-border);
  background: var(--foundation-color-input);
}

.path-webform .webform-progress {
  inline-size: min(100%, 58rem);
  margin-inline: auto;
  margin-block-end: clamp(1rem, 2vw, 2rem);
}

.path-webform .webform-progress-tracker {
  margin: 0;
}

.path-webform .webform-progress-tracker .progress-step.is-active .progress-marker,
.path-webform .webform-progress-tracker .progress-step.is-complete .progress-marker {
  background-color: var(--foundation-color-domain-accent);
}

/* --------------------------------------------------------------------------
 * RTL and responsive behavior
 * -------------------------------------------------------------------------- */

[dir="rtl"] .path-webform .webform-submission-form label:not(.form-check-label),
[dir="rtl"] .path-webform .webform-submission-form .fieldset-legend {
  letter-spacing: normal;
  text-transform: none;
}

@media (max-width: 640px) {
  .path-webform .webform-submission-form {
    gap: 1.5rem;
    padding: 1.1rem;
  }

  .path-webform .webform-submission-form .container-inline.form-inline {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .path-webform .webform-submission-form .form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .path-webform .webform-submission-form .form-actions .btn,
  .path-webform .webform-submission-form .webform-button--submit {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .path-webform .webform-submission-form *,
  .path-webform .webform-submission-form *::before,
  .path-webform .webform-submission-form *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}