/*!
 * MCI WS Form + Divi — specificity shim
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 * ---------------------------------------------------------------------------
 * The Divi Builder *plugin* namespaces every rule it ships with
 * `.et-db #et-boc .et-l` — that is one ID. WS Form's CSS uses zero IDs (its
 * strongest field rule is `.wsf-form input[type=email].wsf-field`, specificity
 * 0-3-1). An ID outranks any number of classes, so WS Form cannot win a single
 * property anywhere inside builder content.
 *
 * Divi does this damage with exactly two kinds of rule:
 *
 *   1. `#et-boc .et-l <el>`                      (1-1-1) — a reset applied to 25
 *      bare elements: a, blockquote, div, em, form, h1-h6, hr, iframe, img,
 *      input, label, li, object, ol, p, span, strong, textarea, ul, video.
 *      It sets: text-align, margin, padding, border, outline, vertical-align,
 *      background, letter-spacing, color, box-shadow, text-shadow,
 *      border-radius, transition.
 *
 *   2. `.et-db #et-boc .et-l .et_pb_module input[type=text]`  (1-4-1)
 *      border, color, padding, height, width — `width: auto` is what collapses
 *      fields out of their column.
 *
 * Note what is NOT in that element list: select, button, fieldset, legend.
 * Buttons and section legends therefore need no shim at all, and none is
 * provided here. Do not add rules for them speculatively.
 *
 * ---------------------------------------------------------------------------
 * HOW IT WORKS
 * ---------------------------------------------------------------------------
 * Every selector below carries the prefix:
 *
 *     #et-boc .wsf-form.wsf-form.wsf-form
 *
 * The repeated class is DELIBERATE, not a typo — it is the whole mechanism.
 * Prefix = 1-3-0; the target adds at least one element and two classes, giving
 * 1-6-1 for fields and 1-5-1 for labels. Divi's ceiling against a WS Form
 * element is 1-4-1, so this clears it with room to spare. WS Form uses the same
 * doubled-class trick itself (ws-form-public-base.css:324). If you "tidy" the
 * repeats away, this file stops working.
 *
 * Values are ALL `var(--wsf-*)` references. Nothing here is a design decision —
 * the WS Form Styler remains the single source of truth, and changing a colour
 * in the Styler flows through with no edit to this file.
 *
 * Rules restore ONLY the properties Divi actually clobbers (the 13 listed
 * above). They deliberately do not re-declare font-*, display, line-height or
 * text-transform, because Divi never touches those and re-declaring them would
 * override WS Form's own more specific rules — label-position-inside mode being
 * the obvious casualty.
 *
 * ---------------------------------------------------------------------------
 * TWO HARD RULES
 * ---------------------------------------------------------------------------
 * 1. NO `!important`, ever. `ws-form-public-base.css:590-610` sets
 *    `.wsf-form .wsf-input-group > .wsf-field { width: 1% !important }`.
 *    A shim `width: 100% !important` would beat it and break every input group.
 *    Plain `width: 100%` correctly beats Divi while still losing to WS Form.
 *
 * 2. NEVER rely on source order. WS Form prints its CSS in the footer
 *    (wp_footer 20) and the Styler variable block later still (wp_footer 100),
 *    so this stylesheet can never be ordered last. Specificity is the only
 *    thing that works in every enqueue mode.
 *
 * @package Mci_Wsform_Divi
 */


/* ===========================================================================
   1. Text-like fields
   Mirrors ws-form-public-base.css:170-212

   `select` is untouched by Divi's reset but is included here because it shares
   WS Form's selector group and costs nothing. Checkbox and radio are NOT in
   this list — they carry `.wsf-field` too, so a bare `.wsf-field` selector
   would stretch them to full width. They are handled in section 4.
   =========================================================================== */

#et-boc .wsf-form.wsf-form.wsf-form :is(
	input:is(
		[type=date], [type=datetime-local], [type=file], [type=month],
		[type=password], [type=search], [type=time], [type=week],
		[type=email], [type=number], [type=tel], [type=text], [type=url]
	), select, textarea
).wsf-field.wsf-field {
	background-color: var(--wsf-field-color-background);
	border: var(--wsf-field-border);
	border-radius: var(--wsf-field-border-radius);
	color: var(--wsf-field-color);
	height: auto;
	letter-spacing: var(--wsf-field-letter-spacing);
	margin: 0;
	padding: var(--wsf-field-padding);
	width: 100%;

	/* Deliberate deviation: WS Form never declares text-align on a field, but
	   Divi's reset sets `text-align: inherit`, which makes input text pick up
	   the alignment of the enclosing Divi text module. This restores the UA
	   default so a centred text module no longer centres the field contents. */
	text-align: start;
}

/* Divi's reset sets `transition: none`. Mirrors base.css:700-716. */
#et-boc .wsf-form.wsf-form.wsf-form :is(
	input:is(
		[type=date], [type=datetime-local], [type=file], [type=month],
		[type=password], [type=search], [type=time], [type=week],
		[type=email], [type=number], [type=tel], [type=text], [type=url]
	), select, textarea
).wsf-field.wsf-field {
	transition:
		background-color var(--wsf-form-transition),
		background-image var(--wsf-form-transition),
		border-color var(--wsf-form-transition),
		box-shadow var(--wsf-form-transition);
}


/* ===========================================================================
   2. Field states
   Mirrors base.css:285-302 (hover), 303-323 (focus), 324-349 (disabled)
   =========================================================================== */

#et-boc .wsf-form.wsf-form.wsf-form :is(
	input:is(
		[type=date], [type=datetime-local], [type=file], [type=month],
		[type=password], [type=search], [type=time], [type=week],
		[type=email], [type=number], [type=tel], [type=text], [type=url]
	), select, textarea
).wsf-field.wsf-field:hover:enabled:not(:focus) {
	background-color: var(--wsf-field-color-background-hover);
	border: var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-field-border-color-hover);
}

/* box-shadow matters most here: Divi's reset sets `box-shadow: none`, which
   removes WS Form's focus ring. WS Form also sets `outline: 0` on focus and
   supplies the ring via box-shadow, so losing it is a real a11y regression. */
#et-boc .wsf-form.wsf-form.wsf-form :is(
	input:is(
		[type=date], [type=datetime-local], [type=file], [type=month],
		[type=password], [type=search], [type=time], [type=week],
		[type=email], [type=number], [type=tel], [type=text], [type=url]
	), select, textarea
).wsf-field.wsf-field:focus {
	background-color: var(--wsf-field-color-background-focus);
	border: var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-field-border-color-focus);
	box-shadow: var(--wsf-field-box-shadow);
	color: var(--wsf-field-color-focus);
	outline: 0;
}

#et-boc .wsf-form.wsf-form.wsf-form :is(
	input:is(
		[type=date], [type=datetime-local], [type=file], [type=month],
		[type=password], [type=search], [type=time], [type=week],
		[type=email], [type=number], [type=tel], [type=text], [type=url]
	), select, textarea
).wsf-field.wsf-field:disabled {
	background-color: var(--wsf-field-color-background-disabled);
	border: var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-field-border-color-disabled);
	color: var(--wsf-field-color-disabled);
	-webkit-text-fill-color: var(--wsf-field-color-disabled);
}


/* ===========================================================================
   3. Validation states
   Mirrors base.css:794-890. WS Form applies `.wsf-validated` either on the form
   itself or on an ancestor of the field, so both forms are covered.
   =========================================================================== */

#et-boc .wsf-form.wsf-form.wsf-form.wsf-validated :is(
	input:is(
		[type=date], [type=datetime-local], [type=file], [type=month],
		[type=password], [type=search], [type=time], [type=week],
		[type=email], [type=number], [type=tel], [type=text], [type=url]
	), select, textarea
).wsf-field.wsf-field:invalid,
#et-boc .wsf-form.wsf-form.wsf-form .wsf-validated :is(
	input:is(
		[type=date], [type=datetime-local], [type=file], [type=month],
		[type=password], [type=search], [type=time], [type=week],
		[type=email], [type=number], [type=tel], [type=text], [type=url]
	), select, textarea
).wsf-field.wsf-field:invalid {
	background-color: var(--wsf-field-color-background-invalid);
	border-color: var(--wsf-field-border-color-invalid);
}

#et-boc .wsf-form.wsf-form.wsf-form.wsf-validated :is(
	input:is(
		[type=date], [type=datetime-local], [type=file], [type=month],
		[type=password], [type=search], [type=time], [type=week],
		[type=email], [type=number], [type=tel], [type=text], [type=url]
	), select, textarea
).wsf-field.wsf-field:invalid:focus:not(:hover),
#et-boc .wsf-form.wsf-form.wsf-form .wsf-validated :is(
	input:is(
		[type=date], [type=datetime-local], [type=file], [type=month],
		[type=password], [type=search], [type=time], [type=week],
		[type=email], [type=number], [type=tel], [type=text], [type=url]
	), select, textarea
).wsf-field.wsf-field:invalid:focus:not(:hover) {
	box-shadow: var(--wsf-field-box-shadow);
}


/* ===========================================================================
   4. Checkbox and radio
   Mirrors ws-form-public-checkbox.css:1-67 and ws-form-public-radio.css:1-62

   These are absolutely positioned boxes sized from their own size vars, so
   width/height are NOT restored here — Divi never touches them. The `::after`
   tick and dot also survive untouched, because Divi's reset targets `input`,
   not `input::after`. What Divi does break is the box itself: background,
   border, radius, margin, padding, and the sibling label's offset.

   Note `input[type=radio]` additionally picks up `margin-right: 7px` from
   `.et-db #et-boc .et-l .et_pb_module input[type=radio]`, which the
   `margin: 0` below reverses.
   =========================================================================== */

#et-boc .wsf-form.wsf-form.wsf-form input[type=checkbox].wsf-field.wsf-field {
	background-color: var(--wsf-field-checkbox-color-background);
	border: var(--wsf-field-border);
	border-radius: var(--wsf-field-checkbox-border-radius);
	margin: 0;
	padding: 0;
	text-align: left;
	vertical-align: middle;
}

#et-boc .wsf-form.wsf-form.wsf-form input[type=radio].wsf-field.wsf-field {
	background-color: var(--wsf-field-radio-color-background);
	border: var(--wsf-field-border);
	border-radius: 50%;
	margin: 0;
	padding: 0;
	text-align: left;
	vertical-align: middle;
}

#et-boc .wsf-form.wsf-form.wsf-form input[type=checkbox].wsf-field.wsf-field:checked {
	background-color: var(--wsf-field-checkbox-checked-color-background);
	border-color: var(--wsf-field-checkbox-checked-color-background);
}

#et-boc .wsf-form.wsf-form.wsf-form :is(input[type=checkbox], input[type=radio]).wsf-field.wsf-field:hover:enabled:not(:checked):not(:focus) {
	background-color: var(--wsf-field-color-background-hover);
	border-color: var(--wsf-field-border-color-hover);
}

#et-boc .wsf-form.wsf-form.wsf-form :is(input[type=checkbox], input[type=radio]).wsf-field.wsf-field:focus {
	border-color: var(--wsf-field-border-color-focus);
	box-shadow: var(--wsf-field-box-shadow);
}

/* The label sits beside the absolutely positioned control, so its left offset
   is load-bearing — Divi's `label { margin: 0 }` collapses the two on top of
   each other. Longhands only: section 5 owns margin-top/margin-bottom for the
   same elements, and a `margin` shorthand here would wipe them. */
#et-boc .wsf-form.wsf-form.wsf-form input[type=checkbox].wsf-field + label.wsf-label.wsf-label {
	margin-left: calc(var(--wsf-field-checkbox-size) + var(--wsf-field-checkbox-gap-horizontal));
}

#et-boc .wsf-form.wsf-form.wsf-form input[type=radio].wsf-field + label.wsf-label.wsf-label {
	margin-left: calc(var(--wsf-field-radio-size) + var(--wsf-field-radio-gap-horizontal));
}

/* Row spacing between stacked choices — these wrappers are divs. */
#et-boc .wsf-form.wsf-form.wsf-form [data-row-checkbox] {
	margin-bottom: var(--wsf-field-checkbox-gap-vertical);
}

#et-boc .wsf-form.wsf-form.wsf-form [data-row-radio] {
	margin-bottom: var(--wsf-field-radio-gap-vertical);
}


/* ===========================================================================
   5. Labels
   Mirrors base.css:368-400

   Both `label.wsf-label` and `div.wsf-label` are needed: WS Form uses a div for
   controls that cannot take a real label, and both elements are in Divi's reset.
   =========================================================================== */

#et-boc .wsf-form.wsf-form.wsf-form :is(label, div).wsf-label.wsf-label {
	background-color: var(--wsf-field-label-color-background);
	color: var(--wsf-field-label-color);
	letter-spacing: var(--wsf-field-label-letter-spacing);
	margin-bottom: var(--wsf-field-label-gap);
}

#et-boc .wsf-form.wsf-form.wsf-form .wsf-label-wrapper :is(label, div).wsf-label.wsf-label {
	padding: calc(var(--wsf-field-padding-vertical) + var(--wsf-field-border-width)) 0;
	margin-bottom: 0;
}

/* A label that follows its field (checkbox, radio, and any inline control)
   flips its gap from below to above. Higher specificity than the base label
   rule above, so it must stay after it. */
#et-boc .wsf-form.wsf-form.wsf-form .wsf-field + label.wsf-label.wsf-label,
#et-boc .wsf-form.wsf-form.wsf-form .wsf-input-group-append + label.wsf-label.wsf-label {
	margin-bottom: 0;
	margin-top: var(--wsf-field-label-gap);
}


/* ===========================================================================
   6. Help text and validation messages
   Mirrors base.css:401-457. Both are divs, so Divi's reset flattens their
   spacing and colour.
   =========================================================================== */

#et-boc .wsf-form.wsf-form.wsf-form .wsf-help.wsf-help {
	background-color: var(--wsf-field-help-color-background);
	color: var(--wsf-field-help-color);
	letter-spacing: var(--wsf-field-help-letter-spacing);
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: var(--wsf-field-help-gap);
	padding: 0;
}

#et-boc .wsf-form.wsf-form.wsf-form .wsf-help-pre.wsf-help-pre {
	margin-bottom: var(--wsf-field-help-gap);
	margin-top: 0;
}

#et-boc .wsf-form.wsf-form.wsf-form .wsf-invalid-feedback.wsf-invalid-feedback {
	background-color: var(--wsf-field-invalid-feedback-color-background);
	color: var(--wsf-field-invalid-feedback-color);
	letter-spacing: var(--wsf-field-invalid-feedback-letter-spacing);
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: var(--wsf-field-invalid-feedback-gap);
	padding: 0;
}


/* ===========================================================================
   7. Grid gutters
   Mirrors base.css:119-121 and 156-163

   `.wsf-grid` and `.wsf-tile` are divs, so `div { margin: 0; padding: 0 }`
   removes the negative-margin / padding gutter pair and the row spacing.
   (Section tiles are <fieldset> elements, which Divi does not reset — that is
   why their padding already survives.)
   =========================================================================== */

#et-boc .wsf-form.wsf-form.wsf-form .wsf-grid.wsf-grid {
	margin-left: calc(-1 * var(--wsf-form-grid-gap) / 2);
	margin-right: calc(-1 * var(--wsf-form-grid-gap) / 2);
}

#et-boc .wsf-form.wsf-form.wsf-form .wsf-tile.wsf-tile {
	padding-left: calc(var(--wsf-form-grid-gap) / 2);
	padding-right: calc(var(--wsf-form-grid-gap) / 2);
}

#et-boc .wsf-form.wsf-form.wsf-form .wsf-field-wrapper.wsf-field-wrapper {
	margin-bottom: var(--wsf-form-grid-gap);
}