/* ============================================================
   CSI Karnataka Central Diocese — "Update Church Details"
   Visual direction: "The Dedication Plaque"
   Inscriptional caps + brass + cassock-indigo on limewash.
   Scoped to this webform so nothing leaks into the site theme.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --kcd-nave:    #20223D;  /* deep cassock indigo  */
  --kcd-nave-2:  #34376108; /* indigo tint */
  --kcd-brass:   #A67C3D;  /* brass fittings / plaque */
  --kcd-brass-2: #C9A24B;  /* lit brass */
  --kcd-limewash:#F4F5F2;  /* cool limewashed wall   */
  --kcd-paper:   #FFFFFF;
  --kcd-slate:   #5A5E68;  /* secondary text/labels  */
  --kcd-line:    #E4E3DC;  /* hairline rules         */
  --kcd-ink:     #1B1C22;
  --kcd-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --kcd-body:    'Public Sans', system-ui, -apple-system, sans-serif;
}

/* ---- Document shell ---------------------------------------- */
.webform-progress,
form.webform-submission-update-church-details-form {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
form.webform-submission-update-church-details-form {
  font-family: var(--kcd-body);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--kcd-ink);
  background: var(--kcd-paper);
  border: 1px solid var(--kcd-line);
  border-top: 3px solid var(--kcd-brass);
  box-shadow: 0 30px 70px -50px rgba(32,34,61,.55);
  padding: 2.4rem clamp(1.1rem, 4vw, 3rem) 2.6rem;
  margin-bottom: 3rem;
  -webkit-font-smoothing: antialiased;
}
form.webform-submission-update-church-details-form *:focus-visible {
  outline: 2px solid var(--kcd-brass);
  outline-offset: 2px;
}

/* ---- Plaque header (the processed_text intro, page 1) ------ */
.webform-submission-update-church-details-form .js-form-type-processed-text { text-align: center; }
.webform-submission-update-church-details-form .js-form-type-processed-text h2 {
  font-family: var(--kcd-display);
  font-weight: 400;
  color: var(--kcd-nave);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  letter-spacing: .01em;
  line-height: 1.15;
  margin: .2rem 0 .6rem;
  position: relative;
  padding-top: 1.6rem;
}
/* engraved brass rule above the title */
.webform-submission-update-church-details-form .js-form-type-processed-text h2::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 54px; height: 2px;
  background: var(--kcd-brass);
}
.webform-submission-update-church-details-form .js-form-type-processed-text p {
  color: var(--kcd-slate);
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0 auto 1.4rem;
  max-width: 46ch;
}
/* draft cookie caveat callout */
.webform-submission-update-church-details-form .js-form-type-processed-text p.kcd-draft-note {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--kcd-nave);
  background: var(--kcd-limewash);
  border-left: 3px solid var(--kcd-brass);
  border-radius: 2px;
  padding: .8rem 1rem;
  margin: .6rem auto 0;
  max-width: 60ch;
  text-align: left;
}

/* ============================================================
   SIGNATURE — step bar as arched plaque tablets
   ============================================================ */
.webform-progress { margin: 0 auto 1.8rem; padding: .4rem 0 0; }
.webform-progress .progress-tracker { padding: 0; }

/* connecting hairline */
.webform-progress .progress-step .progress-marker::after {
  background: var(--kcd-line);
  height: 2px;
}
.webform-progress .progress-step.is-complete .progress-marker::after {
  background: var(--kcd-brass);
}

/* the tablet itself (round-topped arch silhouette) */
.webform-progress .progress-marker {
  color: #fff;
}
.webform-progress .progress-marker::before {
  width: 30px; height: 34px;
  background: var(--kcd-nave-2);
  border: 1.5px solid #C7C8C0;
  border-radius: 16px 16px 4px 4px;   /* arch: round top, square base */
  color: var(--kcd-slate);
  font-family: var(--kcd-display);
  font-size: .95rem;
  line-height: 31px;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.webform-progress .progress-step.is-complete .progress-marker::before {
  background: var(--kcd-nave);
  border-color: var(--kcd-nave);
  color: var(--kcd-brass-2);
}
/* current step = illuminated brass arch, capped with a lancet point */
.webform-progress .progress-step.is-active .progress-marker::before {
  background: var(--kcd-brass);
  border-color: var(--kcd-brass);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(166,124,61,.8);
}
.webform-progress .progress-step.is-active .progress-marker {
  position: relative;
}
.webform-progress .progress-step.is-active .progress-marker > span,
.webform-progress .progress-step.is-active .progress-marker::after { z-index: 1; }
.webform-progress .progress-step.is-active .progress-text::before {
  content: "";
  position: absolute; left: 50%; transform: translateX(-50%);
  margin-top: -54px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid var(--kcd-brass);
}

.webform-progress .progress-text { padding-left: 0; padding-right: .3rem; }
.webform-progress .progress-title {
  font-family: var(--kcd-display);
  font-weight: 400;
  font-size: 1rem !important;
  letter-spacing: .02em;
  color: var(--kcd-slate);
  margin-top: .55rem;
  line-height: 1.25;
}
.webform-progress .progress-step.is-active .progress-title { color: var(--kcd-nave); }
.webform-progress__status { display: none; }   /* hide "1 of 6" duplicate */

/* ============================================================
   Section eyebrows (fieldset legends)
   ============================================================ */
.webform-submission-update-church-details-form .fieldset-legend,
.webform-submission-update-church-details-form .webform-section-title {
  font-family: var(--kcd-display);
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--kcd-nave);
  letter-spacing: .02em;
}
.webform-submission-update-church-details-form fieldset.webform-type-fieldset {
  border: 0;
  border-top: 1px solid var(--kcd-line);
  margin: 1.8rem 0 .4rem;
  padding-top: 1.2rem;
}
.webform-submission-update-church-details-form fieldset.webform-type-fieldset > .fieldset-legend {
  position: relative;
  padding-bottom: .5rem;
}
.webform-submission-update-church-details-form fieldset.webform-type-fieldset > .fieldset-legend::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 2px; background: var(--kcd-brass);
}

/* ============================================================
   Fields
   ============================================================ */
.webform-submission-update-church-details-form .form-item { margin-bottom: 1.15rem; }
.webform-submission-update-church-details-form label,
.webform-submission-update-church-details-form .form-item__label,
.webform-submission-update-church-details-form .webform-multiple-table--item label {
  font-family: var(--kcd-body);
  font-weight: 600;
  font-size: 14px;            /* explicit px — overrides the theme/global label size */
  line-height: 1.35;
  color: var(--kcd-nave);
  margin-bottom: .45rem;
  display: inline-block;
}
/* help / description text */
.webform-submission-update-church-details-form .description,
.webform-submission-update-church-details-form .webform-element-description,
.webform-submission-update-church-details-form .form-item .description {
  font-size: .98rem;
  color: var(--kcd-slate);
  line-height: 1.45;
}
.webform-submission-update-church-details-form .form-required::after,
.webform-submission-update-church-details-form .form-item label .form-required,
.webform-submission-update-church-details-form abbr.required,
.webform-submission-update-church-details-form .required > label::after { color: var(--kcd-brass); }

.webform-submission-update-church-details-form input.form-text,
.webform-submission-update-church-details-form input.form-email,
.webform-submission-update-church-details-form input.form-url,
.webform-submission-update-church-details-form input.form-tel,
.webform-submission-update-church-details-form textarea,
.webform-submission-update-church-details-form select.form-select {
  width: 100%;
  font-family: var(--kcd-body);
  font-size: 1.12rem;
  color: var(--kcd-ink);
  background: var(--kcd-paper);
  border: 1px solid #CFCFC7;
  border-radius: 3px;
  padding: .72rem .9rem;
  box-shadow: inset 0 1px 2px rgba(27,28,34,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.webform-submission-update-church-details-form input.form-text:focus,
.webform-submission-update-church-details-form input.form-email:focus,
.webform-submission-update-church-details-form input.form-url:focus,
.webform-submission-update-church-details-form textarea:focus,
.webform-submission-update-church-details-form select.form-select:focus {
  border-color: var(--kcd-brass);
  box-shadow: 0 0 0 3px rgba(166,124,61,.15);
  outline: none;
}
.webform-submission-update-church-details-form input::placeholder { color: #A9A9A2; }

/* select2 dropdowns (area / church / clergy) */
.webform-submission-update-church-details-form .select2-container .select2-selection--single {
  height: auto; min-height: 44px;
  border: 1px solid #CFCFC7; border-radius: 3px;
  display: flex; align-items: center;
}
.webform-submission-update-church-details-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5; color: var(--kcd-ink); padding-left: .9rem; font-size: 1.12rem;
}
.webform-submission-update-church-details-form .select2-container .select2-selection--single { min-height: 48px; }
.webform-submission-update-church-details-form .select2-results__option { font-size: 1.08rem; }
.webform-submission-update-church-details-form .select2-container--focus .select2-selection--single,
.webform-submission-update-church-details-form .select2-container--open .select2-selection--single {
  border-color: var(--kcd-brass);
  box-shadow: 0 0 0 3px rgba(166,124,61,.15);
}

/* ============================================================
   Council member blocks — webform_contact composite, repeatable.
   Each member renders as <fieldset.webform-contact--wrapper> inside a
   <td>. Force label-above + full-width inputs to match the rest of the form.
   ============================================================ */
.webform-submission-update-church-details-form .webform-multiple-table table { border: 0; width: 100%; }
.webform-submission-update-church-details-form .webform-multiple-table thead { display: none; } /* empty header row */
.webform-submission-update-church-details-form .webform-multiple-table > table > tbody > tr {
  background: var(--kcd-limewash);
}
.webform-submission-update-church-details-form .webform-multiple-table td,
.webform-submission-update-church-details-form .webform-multiple-table th {
  border: 0;
  vertical-align: top;
}
/* the member "card" = the contact composite wrapper */
.webform-submission-update-church-details-form .webform-contact--wrapper {
  border: 0 !important;
  border-left: 3px solid var(--kcd-brass) !important;
  background: transparent;
  margin: 0;
  padding: 1rem 1.1rem 1rem 1.25rem !important;
  border-radius: 2px;
}
.webform-submission-update-church-details-form .webform-contact--wrapper > legend { display: none; }
.webform-submission-update-church-details-form .webform-contact--wrapper .fieldset-wrapper { margin: 0; padding: 0; }
/* stack each field: label above, input full width (override theme inline layout) */
.webform-submission-update-church-details-form .webform-contact--wrapper .form-item {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 .85rem !important;
}
.webform-submission-update-church-details-form .webform-contact--wrapper .form-item:last-child { margin-bottom: 0 !important; }
.webform-submission-update-church-details-form .webform-contact--wrapper .form-item > label {
  display: block !important;
  float: none !important;
  width: auto !important;
  text-align: left !important;
}
.webform-submission-update-church-details-form .webform-contact--wrapper input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* operations: keep only the remove (−); hide the redundant per-row + and drag */
.webform-submission-update-church-details-form input[type="image"][name*="_table_add"] { display: none !important; }
.webform-submission-update-church-details-form .webform-multiple-table--handle,
.webform-submission-update-church-details-form .webform-multiple-table--weight,
.webform-submission-update-church-details-form .tabledrag-toggle-weight { display: none !important; }
.webform-submission-update-church-details-form .webform-multiple-table--operations {
  width: 40px;
  vertical-align: top;
  padding: 1rem .3rem 0 .3rem;
  text-align: center;
}
.webform-submission-update-church-details-form .webform-multiple-add { margin-top: .9rem; }
.webform-submission-update-church-details-form .webform-multiple-add .form-actions,
.webform-submission-update-church-details-form .webform-multiple-add .form-item {
  border: 0; margin: 0; padding: 0;
}
.webform-submission-update-church-details-form .webform-computed,
.webform-submission-update-church-details-form [class*="webform-computed"] {
  background: var(--kcd-nave);
  color: #fff;
  font-family: var(--kcd-display);
  font-size: 1.2rem;
  letter-spacing: .01em;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--kcd-brass-2);
  border-radius: 2px;
}

/* ============================================================
   Actions — Next / Submit / Save Draft / Previous
   ============================================================ */
.webform-submission-update-church-details-form .form-actions {
  border-top: 1px solid var(--kcd-line);
  margin-top: 1.8rem; padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
}
.webform-submission-update-church-details-form .button,
.webform-submission-update-church-details-form .form-submit {
  font-family: var(--kcd-display);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 1.05rem;
  border-radius: 3px;
  padding: .8rem 1.7rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .05s ease;
}
.webform-submission-update-church-details-form .button:active,
.webform-submission-update-church-details-form .form-submit:active { transform: translateY(1px); }

form.webform-submission-update-church-details-form .webform-button--next,
form.webform-submission-update-church-details-form .webform-button--submit,
form.webform-submission-update-church-details-form input.button--primary {
  background: var(--kcd-nave) !important; color: #fff !important;
  border-color: var(--kcd-nave) !important;
  box-shadow: inset 0 -2px 0 var(--kcd-brass);
}
form.webform-submission-update-church-details-form .webform-button--next:hover,
form.webform-submission-update-church-details-form .webform-button--submit:hover,
form.webform-submission-update-church-details-form input.button--primary:hover {
  background: #2A2D52 !important;
}
.webform-submission-update-church-details-form .webform-button--draft {
  background: transparent; color: var(--kcd-brass);
  border-color: var(--kcd-brass);
}
.webform-submission-update-church-details-form .webform-button--draft:hover {
  background: rgba(166,124,61,.08);
}
.webform-submission-update-church-details-form .webform-button--previous {
  background: transparent; color: var(--kcd-slate); border-color: transparent;
  padding-left: .4rem; padding-right: .4rem;
}
.webform-submission-update-church-details-form .webform-button--previous:hover { color: var(--kcd-nave); }
.webform-submission-update-church-details-form .webform-button--add,
.webform-submission-update-church-details-form .webform-button--remove {
  font-family: var(--kcd-body); text-transform: none; letter-spacing: 0;
}

/* ---- Motion / a11y ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  form.webform-submission-update-church-details-form * { transition: none !important; }
}

/* ---- Mobile ----------------------------------------------- */
@media (max-width: 600px) {
  form.webform-submission-update-church-details-form { padding: 1.4rem 1.1rem 1.8rem; font-size: 1.05rem; }
  .webform-progress .progress-title { font-size: .85rem !important; }
  .webform-submission-update-church-details-form .form-actions { gap: .5rem; }
}