/* Forms - built in Elementor (classic Pro form or V4 atomic form), styled here. Field look ported
   from the mock (kit.css .input, .select, ::picker(select)); floating labels added (Richard, 29 Sept):
   the label rests inside the field like a placeholder and rises smoothly on focus or once filled.
   forms.js pairs each label with its control and adds .ddc-field / .ddc-field__label / .ddc-control /
   .ddc-select; without the script, labels simply sit above the fields. */
:is(.elementor-form, .e-form-base, .ddc-form) {
  --field-h: calc(var(--input-h) + var(--gap-8));
  font-family: var(--font);
}

/* Controls */
:is(.elementor-form, .e-form-base, .ddc-form) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"]), select, textarea) {
  width: 100%; min-height: var(--field-h); margin: 0;
  padding: var(--gap-10) var(--gap-20); border: var(--hair) solid transparent; border-radius: var(--r-card);
  background: var(--field-fill); color: var(--body); font: 400 var(--fs-body)/1.4 var(--font); box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), padding var(--dur) var(--ease);
}
/* Classic Pro forms: Elementor's kit paints its own field colours (a white box, grey text) at a higher
   specificity than the rule above, so the careers form looked nothing like the Contact form (12 Oct 2026).
   The same declarations again, heavy enough to beat the kit: the site's fields are the V4 look. */
body .elementor .elementor-form .elementor-field-group :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"]), select, textarea) {
  background: var(--field-fill); color: var(--body); border: var(--hair) solid transparent; border-radius: var(--r-card);
  padding: var(--gap-10) var(--gap-20); font: 400 var(--fs-body)/1.4 var(--font); box-shadow: none;
}
/* ...which also took away the floating label's room (13 Oct 2026, measured on staging: the typed text began 10px
   from the top of the box, under the raised label; Richard: "don't move out of the way"). Heavier than the override. */
body .elementor .elementor-form .elementor-field-group.ddc-field .ddc-control { padding-top: calc(var(--gap-20) + var(--gap-6)); padding-bottom: var(--gap-6); }
:is(.elementor-form, .e-form-base, .ddc-form) textarea { min-height: calc(var(--gap-120) + var(--gap-20)); resize: vertical; }
:is(.elementor-form, .e-form-base, .ddc-form) :is(input, select, textarea)::placeholder { color: var(--ddc-purple-soft); opacity: 1; }
:is(.elementor-form, .e-form-base, .ddc-form) :is(input, select, textarea):hover { border-color: var(--line); }
:is(.elementor-form, .e-form-base, .ddc-form) :is(input, select, textarea):focus-visible,
:is(.elementor-form, .e-form-base, .ddc-form) :is(input, select, textarea):focus {
  border-color: var(--heading); outline: none; box-shadow: 0 0 0 calc(var(--mark-w) + var(--hair)) var(--focus-ring);
}
:is(.elementor-form, .e-form-base, .ddc-form) :is([type="checkbox"], [type="radio"]) { accent-color: var(--ddc-green); width: var(--icon); height: var(--icon); }

/* Labels, static (no script, or checkboxes) */
:is(.elementor-form, .e-form-base, .ddc-form) :is(label, .elementor-field-label) {
  font: 500 var(--fs-small)/1.3 var(--font); color: var(--body);
}

/* Floating labels */
.ddc-forms-ready .ddc-field { position: relative; }
.ddc-forms-ready .ddc-field .ddc-control { padding-top: calc(var(--gap-20) + var(--gap-6)); padding-bottom: var(--gap-6); }
.ddc-forms-ready .ddc-field__label {
  position: absolute; z-index: 1; left: calc(var(--gap-20) + var(--hair)); top: calc(var(--field-h) / 2);
  margin: 0; padding: 0; max-width: calc(100% - var(--gap-40)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transform: translateY(-50%); transform-origin: left top; pointer-events: none;
  font: 400 var(--fs-body)/1.2 var(--font); letter-spacing: 0; color: var(--ddc-purple-soft);
  transition: top var(--dur) var(--ease), transform var(--dur) var(--ease), font-size var(--dur) var(--ease),
              letter-spacing var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.ddc-forms-ready .ddc-field--textarea .ddc-field__label { top: calc(var(--gap-20) + var(--gap-10)); }
.ddc-forms-ready .ddc-field.is-active .ddc-field__label {
  top: var(--gap-8); transform: none;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--heading);
}
.ddc-forms-ready .ddc-field:not(.is-active) .ddc-control::placeholder { color: transparent; }
/* Classic Pro forms (the careers application, 12 Oct 2026). The widget prints its own label typography at
   (0,3,0) and pads each field group by half the column gap (10px at the 20px our forms set), with labels
   positioned from the group's edge: so the shared rules are repeated here, heavier and 10px to the right. */
body .elementor .elementor-form .elementor-field-group > label { font: 500 var(--fs-small)/1.3 var(--font); color: var(--body); }
.ddc-forms-ready .elementor-form .ddc-field .ddc-field__label {
  left: calc(var(--gap-10) + var(--gap-20) + var(--hair)); font: 400 var(--fs-body)/1.2 var(--font); color: var(--ddc-purple-soft);
}
.ddc-forms-ready .elementor-form .ddc-field.is-active .ddc-field__label {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--heading);
}
body .elementor .elementor-form .elementor-field-type-html { color: var(--muted); }
/* A classic Pro upload field wears its label the way a filled text field does: raised inside the box, small
   caps, with the file button beneath (forms.js floats the others and skips file inputs on purpose). */
body .elementor .elementor-form .elementor-field-type-upload { position: relative; }
body .elementor .elementor-form .elementor-field-type-upload > label {
  position: absolute; z-index: 1; top: var(--gap-8); left: calc(var(--gap-10) + var(--gap-20) + var(--hair)); margin: 0; padding: 0;
  max-width: calc(100% - var(--gap-60)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
  font: 500 var(--fs-label)/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--heading);
}
body .elementor .elementor-form .elementor-field-type-upload > label .elementor-required { color: var(--ddc-green); }
/* 13 Oct 2026 (Richard: "upload field feels cramped", 62px with the pill hard under the label): the box is
   taller, the raised label keeps its line and the file button sits clear of it. */
body .elementor .elementor-form .elementor-field-group input[type="file"] { min-height: calc(var(--field-h) + var(--gap-20)); padding-top: var(--gap-40); padding-bottom: var(--gap-10); line-height: 1.4; }
.ddc-forms-ready .ddc-field__label .elementor-required, .ddc-forms-ready .ddc-field__label abbr { color: var(--ddc-green); text-decoration: none; }

/* Selects: styled closed and open; the caret ROTATES, never moves. */
.ddc-select { position: relative; display: block; width: 100%; }
.ddc-select select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--gap-20) * 2 + var(--chevron)); cursor: pointer; }
.ddc-select::after {
  content: ""; position: absolute; right: var(--gap-20); top: calc(var(--field-h) / 2);
  width: var(--chevron); height: var(--chevron); translate: 0 -50%; pointer-events: none;
  background: var(--heading);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate var(--dur) var(--ease);
}
.ddc-select:focus-within::after, .ddc-select.is-open::after { rotate: 180deg; }
.elementor-form .select-caret-down-wrapper { display: none; }

/* Open state: the browser's customisable select, where supported. Dark picker, so white option
   text stays readable (the mock's white picker would hide it on this ground). */
@supports (appearance: base-select) {
  .ddc-select select, .ddc-select select::picker(select) { appearance: base-select; }
  .ddc-select select::picker-icon { display: none; }
  .ddc-select select::picker(select) {
    margin-top: var(--gap-8); padding: var(--gap-8); border: var(--hair) solid var(--line);
    border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-pill);
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete;
  }
  .ddc-select select:not(:open)::picker(select) { opacity: 0; translate: 0 calc(var(--gap-8) * -1); }
  .ddc-select select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { .ddc-select select:open::picker(select) { opacity: 0; translate: 0 calc(var(--gap-8) * -1); } }
  .ddc-select option {
    display: flex; align-items: center; gap: var(--gap-10); padding: var(--gap-10) var(--gap-20);
    border-radius: var(--r-pill); color: var(--body); font: 400 var(--fs-body)/1.4 var(--font); cursor: pointer;
  }
  .ddc-select option:hover, .ddc-select option:focus-visible { background: var(--ddc-purple-tint); color: var(--heading); outline: none; }
  .ddc-select option:checked { background: var(--ddc-purple); color: var(--white); }
  .ddc-select option::checkmark { order: 1; margin-left: auto; color: var(--ddc-green); }
  .ddc-select option:checked::checkmark { color: var(--white); }
}

/* Errors: shown in text, never by colour alone. */
:is(.elementor-form, .e-form-base, .ddc-form) :is(.elementor-error, [aria-invalid="true"]) :is(input, select, textarea),
:is(.elementor-form, .e-form-base, .ddc-form) :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--heading); }
:is(.elementor-form, .e-form-base, .ddc-form) :is(.elementor-message-danger, .elementor-field-group .elementor-message, .e-form-error-message) {
  font: 500 var(--fs-small)/1.4 var(--font); color: var(--heading);
}
:is(.elementor-form, .e-form-base, .ddc-form) :is(.elementor-message-success, .e-form-success-message) { font: 500 var(--fs-small)/1.4 var(--font); color: var(--ddc-green); }

/* Submit: the mock's primary button. */
:is(.elementor-form, .e-form-base, .ddc-form) :is(.elementor-button, button[type="submit"], input[type="submit"]) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-10);
  min-height: var(--btn-h); padding: var(--gap-6) var(--gap-20); border: var(--hair) solid transparent; border-radius: var(--r-btn);
  background: var(--ddc-purple); color: var(--white); font: 500 var(--fs-small)/1 var(--font); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
:is(.elementor-form, .e-form-base, .ddc-form) :is(.elementor-button, button[type="submit"], input[type="submit"]):is(:hover, :focus-visible) { background: var(--ddc-green); color: var(--on-green); border-color: var(--ddc-green); }
/* The mock's arrow circle (V4's submit button takes text only, so it is drawn here): a white disc with
   the purple north-east arrow; on hover the disc turns, so the arrow rotates and the circle never moves.
   The arrow colour is DDC purple written into the SVG (a data URI cannot read a custom property). */
.e-form-base button[type="submit"] { padding: var(--gap-6) var(--gap-6) var(--gap-6) var(--gap-20); }
.e-form-base button[type="submit"]::after {
  content: ""; flex: none; width: var(--icon-circle); height: var(--icon-circle); border-radius: var(--r-pill);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23511E84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / var(--gap-20) no-repeat;
  transition: transform var(--dur) var(--ease);
}
.e-form-base button[type="submit"]:is(:hover, :focus-visible)::after { transform: var(--turn); }

/* V4 atomic form (Elementor e-form, as built on /contact/): each .field holds the control FIRST, then
   its label, and inputs carry placeholder=" " - so the float is pure CSS, no script needed.
   The select always has a value, so its label always sits raised. */
.e-form-base .field { position: relative; display: block; }
.e-form-base .field > :is(input, textarea) { padding-top: calc(var(--gap-20) + var(--gap-6)); padding-bottom: var(--gap-6); }
.e-form-base .field > label {
  position: absolute; z-index: 1; left: calc(var(--gap-20) + var(--hair)); top: calc(var(--field-h) / 2);
  margin: 0; max-width: calc(100% - var(--gap-40)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transform: translateY(-50%); transform-origin: left top; pointer-events: none;
  font: 400 var(--fs-body)/1.2 var(--font); letter-spacing: 0; color: var(--ddc-purple-soft);
  transition: top var(--dur) var(--ease), transform var(--dur) var(--ease), font-size var(--dur) var(--ease),
              letter-spacing var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.e-form-base .field > textarea + label { top: calc(var(--gap-20) + var(--gap-10)); }
.e-form-base .field > :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label,
.e-form-base .field > select + label {
  top: var(--gap-8); transform: none;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--heading);
}
.e-form-base .field > :is(input, textarea):not(:focus)::placeholder { color: transparent; }

/* V4 select: raised label leaves room above the value; caret drawn on the field, rotates on focus. */
.e-form-base .field > select { appearance: none; -webkit-appearance: none; padding: calc(var(--gap-20) + var(--gap-6)) calc(var(--gap-20) * 2 + var(--chevron)) var(--gap-6) var(--gap-20); cursor: pointer; }
.e-form-base .field:has(> select)::after {
  content: ""; position: absolute; right: var(--gap-20); top: calc(var(--field-h) / 2);
  width: var(--chevron); height: var(--chevron); translate: 0 -50%; pointer-events: none; background: var(--heading);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate var(--dur) var(--ease);
}
.e-form-base .field:has(> select:focus)::after, .e-form-base .field:has(> select:open)::after { rotate: 180deg; }
@supports (appearance: base-select) {
  .e-form-base .field > select, .e-form-base .field > select::picker(select) { appearance: base-select; }
  .e-form-base .field > select::picker-icon { display: none; }
  .e-form-base .field > select::picker(select) {
    margin-top: var(--gap-8); padding: var(--gap-8); border: var(--hair) solid var(--line);
    border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-pill);
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete;
  }
  .e-form-base .field > select:not(:open)::picker(select) { opacity: 0; translate: 0 calc(var(--gap-8) * -1); }
  .e-form-base .field > select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { .e-form-base .field > select:open::picker(select) { opacity: 0; translate: 0 calc(var(--gap-8) * -1); } }
  .e-form-base .field > select option {
    display: flex; align-items: center; gap: var(--gap-10); padding: var(--gap-10) var(--gap-20);
    border-radius: var(--r-pill); color: var(--body); font: 400 var(--fs-body)/1.4 var(--font); cursor: pointer;
  }
  .e-form-base .field > select option:hover, .e-form-base .field > select option:focus-visible { background: var(--ddc-purple-tint); color: var(--heading); outline: none; }
  .e-form-base .field > select option:checked { background: var(--ddc-purple); color: var(--white); }
  .e-form-base .field > select option::checkmark { order: 1; margin-left: auto; color: var(--ddc-green); }
  .e-form-base .field > select option:checked::checkmark { color: var(--white); }
}
.e-form-base :is(.message-success, .message-error) p { margin: 0; }
.e-form-base .message-success { color: var(--ddc-green); }
.e-form-base .message-error { color: var(--heading); }

/* Spam trap field (inc/theme-forms.php): off-screen for everyone. Never display:none - bots skip those. */
.e-form-base .field:has(#enquiry-confirm) { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; visibility: hidden; } /* visibility: out of the tab order and the accessibility tree even if forms.js never runs */