/* =========================================================
   Cooinda — Webform PAGE styles (only /form/* page variant)
   ========================================================= */

.c6-webform-page { overflow-x: hidden; }

/* Comfortable measure */
.c6-webform-page .c6-form-page__inner {
  width: 100%;
  max-width: 1020px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

/* Kill any legacy width caps inside the page */
.c6-webform-page .webform-submission-form,
.c6-webform-page .webform-submission-form .form-item,
.c6-webform-page .webform-submission-form .js-form-item,
.c6-webform-page .webform-submission-form .form-wrapper,
.c6-webform-page .webform-submission-form .fieldset-wrapper,
.c6-webform-page fieldset {
  max-width: none !important;
  width: 100%;
  min-width: 0;
}

/* Stack webform flex rows on smaller screens */
@media (max-width: 800px) {
  .c6-webform-page .webform-flexbox { display: block !important; }
  .c6-webform-page .webform-flex,
  .c6-webform-page .webform-flex--container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* Keep the tracker from causing sideways scroll */
.c6-webform-page .webform-progress,
.c6-webform-page .webform-progress-tracker {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
  .c6-webform-page .c6-form-page__inner { padding-inline: 12px; }
  .c6-webform-page .webform-progress-tracker .progress-text { display: none; }
}
/* =========================================================
   Cooinda — Webform page (scoped)
   Scope: only pages rendered with page--webform.html.twig
   Marker class is added to the outer container there.
   ========================================================= */

/* ---- 0) Safety: scope container (Twig sets .c6-webform-page) ---- */
.c6-webform-page {}

/* ---- 1) Progress tracker tidy ----------------------------------- */
.c6-webform-page .webform-progress-tracker.progress-tracker {
  margin: 8px 0 28px;
}
.c6-webform-page .progress-tracker .progress-step { text-align: center; }

/* Connector bars */
.c6-webform-page .progress-tracker .progress-step::before,
.c6-webform-page .progress-tracker .progress-step::after {
  background: #cfe7f3 !important;   /* base track */
  height: 6px !important;
  top: 14px !important;
}
/* Filled portion */
.c6-webform-page .progress-tracker .progress-step.is-active::before,
.c6-webform-page .progress-tracker .progress-step.is-complete::before,
.c6-webform-page .progress-tracker .progress-step.is-complete::after {
  background: var(--color-blue) !important;
}
/* Dots */
.c6-webform-page .progress-tracker .progress-marker {
  background: #fff !important;
  border: 3px solid var(--color-blue) !important;
  color: #fff !important;
  width: 28px !important; height: 28px !important;
  line-height: 22px !important;
  border-radius: 999px;
}
.c6-webform-page .progress-tracker .progress-step.is-active .progress-marker,
.c6-webform-page .progress-tracker .progress-step.is-complete .progress-marker {
  background: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
}
.c6-webform-page .progress-tracker .progress-text .progress-title {
  margin-top: .35rem;
}

/* ---- 2) Fieldsets & legends ------------------------------------- */
.c6-webform-page fieldset.js-webform-type-fieldset {
  border: 2px solid color-mix(in srgb, var(--color-blue) 28%, #ffffff);
  border-radius: 12px;
  padding: 14px 16px 10px;
  background: #fff;
}
.c6-webform-page fieldset.js-webform-type-fieldset > legend .fieldset-legend {
  font-weight: 700;
  color: var(--color-blue);
}
.c6-webform-page fieldset.js-webform-type-fieldset > legend {
  padding: 0 8px;
  margin-left: 6px;
}

/* Sub-fieldsets Webform uses for composites (checkboxes/radios) */
.c6-webform-page fieldset.fieldgroup {
  border: 2px solid #e6f0f6;
  border-radius: 10px;
  padding: 12px 12px 6px;
}
.c6-webform-page fieldset.fieldgroup > legend .fieldset-legend {
  color: var(--color-blue);
  font-weight: 700;
}

/* ---- 3) Headings inside the form body --------------------------- */
.c6-webform-page .region-content h1,
.c6-webform-page .region-content h2,
.c6-webform-page .region-content h3,
.c6-webform-page .region-content h4 {
  margin-top: 1.25rem;
  margin-bottom: .5rem;
}

/* ---- 4) Textareas not in MDC wrapper (rare, but present sometimes) */
.c6-webform-page textarea.form-textarea:not(.mdc-text-field__input) {
  border: 2px solid #cfe0ea !important;
  border-radius: 8px;
  outline: none !important;
  box-shadow: none !important;
  padding: 12px 14px;
  width: 100%;
}
.c6-webform-page textarea.form-textarea:focus {
  border-color: var(--color-blue) !important;
}

/* ---- 5) Mobile niceties ----------------------------------------- */
@media (max-width: 599px) {
  .c6-webform-page .webform-progress-tracker.progress-tracker {
    margin: 2px 0 18px;
    padding: 0 8px;
  }
  .c6-webform-page .progress-tracker .progress-step::before,
  .c6-webform-page .progress-tracker .progress-step::after {
    top: 12px !important;
  }
  .c6-webform-page .progress-tracker .progress-marker {
    width: 24px !important; height: 24px !important; line-height: 20px !important;
  }
  .c6-webform-page fieldset.js-webform-type-fieldset { padding: 12px; }
}
/* Keep content to a comfortable measure on any route that uses the webform template */
.c6-webform-page .c6-form-page__inner {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

/* Progress tracker spacing vs H1 */
.c6-webform-page .webform-progress { margin-top: 8px; }