/*
 * WrenchPress visit-request form: STRUCTURAL styles only.
 *
 * This stylesheet ships layout, spacing, shape, and exactly one guaranteed
 * focus indicator. It declares no colour and no typography, so the form adopts
 * the host theme's palette, font, and button styling. That is what makes the
 * form look like it belongs on the site instead of looking like a plugin.
 *
 * Anything the form genuinely has to draw (field borders, the select arrow,
 * the notice rule, the required marker, the focus ring) is drawn in
 * currentColor. currentColor is the element's own inherited text colour, so it
 * carries the theme's own text-contrast ratio with it. A theme whose body text
 * is legible at all is already at or above 4.5:1, which is far over the 3:1
 * that WCAG 2.2 SC 1.4.11 asks of a border or a focus ring. The contrast is
 * therefore correct by construction rather than by guessing a hex that happens
 * to work on a white page and fails on a dark one.
 *
 * The custom-property NAMES survive as override hooks: set any of them on
 * .egcrm-form from a theme or plugin stylesheet and it takes effect. They
 * simply carry no hardcoded colour default any more.
 *
 * Selectors are low-specificity and scoped to .egcrm-form. There is no bare
 * element selector and no forced-priority override anywhere in this file, so
 * the host builder/theme cascade wins.
 *
 * Override example (theme / Customizer): set --egcrm-field-border, --egcrm-radius
 * or any other hook below on the form wrapper and it wins.
 */
.egcrm-form {
  /* Spacing and shape. */
  --egcrm-radius: 8px;
  --egcrm-field-radius: 6px;
  --egcrm-gap-x: 16px;
  --egcrm-gap-y: 16px;
  --egcrm-section-gap: 24px;
  --egcrm-padding: 24px;

  /* Label / helper sizing, relative so it scales with the theme's font size. */
  --egcrm-label-size: 0.8125em;
  --egcrm-label-weight: 600;
  --egcrm-label-transform: none;
  --egcrm-label-letter-spacing: 0;
  --egcrm-helper-size: 0.8125em;

  /* Form fields. */
  --egcrm-field-padding-y: 8px;
  --egcrm-field-padding-x: 12px;
  --egcrm-field-height: 40px;

  /*
   * Disabled fields. These two are the ONLY colour defaults left in this file
   * and they stay on purpose. WCAG SC 1.4.3 explicitly exempts inactive user
   * interface components from the contrast requirement, and darkening them
   * would make a disabled field look enabled, which is strictly worse for
   * everybody. Do not "fix" these.
   */
  --egcrm-field-disabled-bg: #f1f5f9;
  --egcrm-field-disabled-fg: #94a3b8;

  /* Buttons: shape only. Colour belongs to the theme. */
  --egcrm-btn-radius: 6px;
  --egcrm-btn-padding-y: 12px;
  --egcrm-btn-padding-x: 16px;
  --egcrm-btn-font-weight: 600;

  /* Layout. No color, no background, no font: the form inherits all three. */
  padding: var(--egcrm-padding);
  border-radius: var(--egcrm-radius);
  max-width: 880px;
  width: 100%;
  box-sizing: border-box;
}

.egcrm-form *,
.egcrm-form *::before,
.egcrm-form *::after {
  box-sizing: border-box;
}

/*
 * THE FOCUS INDICATOR. This is the one visual guarantee the plugin still makes
 * on the front end, and it is non-negotiable (WCAG SC 2.4.7).
 *
 * Four things here are load-bearing and must not be "simplified":
 *
 * 1. outline, not box-shadow. The outline property is precisely the one themes
 *    reset to zero on :focus, for every element or for links. Re-declaring it
 *    here at specificity (0,2,0) beats those resets without forcing priority.
 *    A box-shadow ring, by contrast, is silently wiped by any theme that zeroes
 *    box-shadow on inputs, which flat themes routinely do. The form used to
 *    ship exactly that fragile ring.
 * 2. :focus-visible, not :focus. A mouse click on a button must not paint a
 *    ring; keyboard focus must.
 * 3. currentColor, not a hex. The ring has to be visible on a white page, on a
 *    theme's black hero section, and on everything between. The 2px offset
 *    exposes the element's own background, and text on its own background is
 *    already required to be legible, so the ring inherits that ratio. A fixed
 *    hex provably cannot do this.
 * 4. It targets every focusable DESCENDANT, not just inputs. The buttons, the
 *    consent checkbox, the privacy link and the attribution link had no plugin
 *    focus style at all before this.
 */
.egcrm-form :focus-visible,
.egcrm-form__powered :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/*
 * Visually hidden, for text that only assistive tech should hear.
 *
 * The plugin defines its own rather than using core's .screen-reader-text:
 * that class is a wp-admin class and is NOT guaranteed to exist on the front
 * end, and a conformance claim cannot rest on the theme happening to ship it.
 * (In wp-admin the plugin uses core's .screen-reader-text and never defines a
 * second one.)
 */
.egcrm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.egcrm-form__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--egcrm-section-gap);
  padding-bottom: 16px;
  border-bottom: 1px solid;
  border-bottom-color: var(--egcrm-divider, currentColor);
}

/*
 * Decorative separators (the header rule, the section outline) are softened to
 * a fraction of the inherited text colour so they read as dividers rather than
 * as hard borders. They carry no meaning, so they are not held to SC 1.4.11.
 * If color-mix is unsupported this declaration is simply dropped and the
 * border falls back to full currentColor above: degraded, never invisible.
 */
@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
  .egcrm-form__header {
    border-bottom-color: var(--egcrm-divider, color-mix(in srgb, currentColor 20%, transparent));
  }

  .egcrm-form__section {
    border-color: var(--egcrm-section-border, color-mix(in srgb, currentColor 20%, transparent));
  }
}

.egcrm-form__title {
  margin: 0;
  line-height: 1.2;
}

.egcrm-form__subtitle {
  margin: 4px 0 0;
  font-size: var(--egcrm-helper-size);
}

/*
 * Status region. Always present in the DOM, empty when there is nothing to
 * say, so it is a live region that is REGISTERED BEFORE it changes. That is
 * the whole point: a live region announces on change, not on presence, so a
 * region injected together with its message announces nothing. Empty it has no
 * padding and no border and occupies no space.
 */
.egcrm-form__status {
  display: block;
}

.egcrm-form__notice {
  margin-bottom: var(--egcrm-section-gap);
  padding: 12px 16px;
  border-left: 4px solid currentColor;
  border-radius: var(--egcrm-field-radius);
}

/*
 * Success and error notices differ by their bold text prefix, not by colour.
 * With no plugin colour left on this form there is nothing that can convey
 * meaning by colour alone, so SC 1.4.1 is satisfied here by subtraction.
 */

.egcrm-form__section {
  border: 1px solid;
  border-radius: var(--egcrm-radius);
  padding: 20px;
  margin-bottom: var(--egcrm-section-gap);
}

.egcrm-form__section-title {
  margin: 0 0 16px;
  font-size: var(--egcrm-label-size);
  font-weight: var(--egcrm-label-weight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.egcrm-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--egcrm-gap-x);
  row-gap: var(--egcrm-gap-y);
}

.egcrm-form__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.egcrm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.egcrm-field--full {
  grid-column: 1 / -1;
}

.egcrm-field__label {
  font-size: var(--egcrm-label-size);
  font-weight: var(--egcrm-label-weight);
  text-transform: var(--egcrm-label-transform);
  letter-spacing: var(--egcrm-label-letter-spacing);
}

.egcrm-field__required {
  margin-left: 2px;
}

.egcrm-field__input,
.egcrm-field__select,
.egcrm-field__textarea {
  width: 100%;
  background-color: var(--egcrm-field-bg, transparent);
  border-radius: var(--egcrm-field-radius);
  padding: var(--egcrm-field-padding-y) var(--egcrm-field-padding-x);
  /* Adopt the theme's font entirely rather than restating a font stack. */
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  appearance: none;
}

/*
 * THE FIELD BOUNDARY (SC 1.4.11). This needs its own rule, at (0,2,0), and the
 * reason is the whole point.
 *
 * The 1px border is the ONLY thing distinguishing an empty input from the page,
 * so the contrast rule applies to it: it must reach 3:1 against the page. The
 * old hardcoded #cbd5e1 measured 1.48:1 and failed. currentColor fixes that,
 * because it inherits the theme's own text colour and therefore the theme's own
 * text-contrast ratio, which is necessarily well over 3:1 if the page is
 * readable at all.
 *
 * But declaring it on the single class .egcrm-field__input (0,1,0) is NOT
 * enough, and this was measured rather than assumed. Themes routinely style
 * inputs with an attribute selector, input[type="text"], which is (0,1,1) and
 * therefore OUTRANKS a lone class. On the theme this was verified against, the
 * plugin's border silently lost on exactly the text, tel and email inputs, and
 * the theme's own #bbb border rendered at 1.92:1: still a failure, just a
 * different one. Number inputs, selects and textareas kept the currentColor
 * border only because that theme happens not to target them.
 *
 * Scoping under .egcrm-form lifts this to (0,2,0), which beats an attribute
 * selector without forcing priority, exactly as the focus ring above beats a
 * theme's outline reset. It is the same trick for the same reason. The border
 * colour is still the THEME's (currentColor is inherited, not painted), and it
 * is still overridable through --egcrm-field-border.
 *
 * Must stay ABOVE the invalid-state rule, whose 2px width would otherwise be
 * reset by this shorthand.
 */
.egcrm-form .egcrm-field__input,
.egcrm-form .egcrm-field__select,
.egcrm-form .egcrm-field__textarea {
  border: 1px solid var(--egcrm-field-border, currentColor);
}

.egcrm-field__input,
.egcrm-field__select {
  height: var(--egcrm-field-height);
}

.egcrm-field__textarea {
  min-height: 96px;
  resize: vertical;
}

/*
 * The secondary focus cue on fields. Kept as belt and braces; the outline rule
 * above is the guarantee and this is not relied upon. Softened currentColor,
 * so it needs no plugin hex either.
 */
.egcrm-field__input:focus,
.egcrm-field__select:focus,
.egcrm-field__textarea:focus {
  box-shadow: 0 0 0 3px var(--egcrm-field-ring, color-mix(in srgb, currentColor 20%, transparent));
}

/*
 * Invalid field state. Non-colour by construction: the border thickens, and
 * the per-field error MESSAGE carries the actual meaning. A colour-only
 * invalid border would have failed SC 1.4.1.
 */
.egcrm-field__input[aria-invalid="true"],
.egcrm-field__select[aria-invalid="true"],
.egcrm-field__textarea[aria-invalid="true"] {
  border-width: 2px;
}

/* Per-field error message, populated by visit-form.js. Bold, never coloured. */
.egcrm-field__error {
  font-size: var(--egcrm-helper-size);
  font-weight: 600;
}

/* Collapse when empty so it does not open a phantom flex gap under the field. */
.egcrm-field__error:empty {
  display: none;
}

.egcrm-field__input:disabled,
.egcrm-field__select:disabled,
.egcrm-field__textarea:disabled {
  background-color: var(--egcrm-field-disabled-bg);
  color: var(--egcrm-field-disabled-fg);
  cursor: not-allowed;
}

.egcrm-field__select {
  background-image: linear-gradient(45deg, transparent 50%, var(--egcrm-muted-fg, currentColor) 50%),
    linear-gradient(135deg, var(--egcrm-muted-fg, currentColor) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.egcrm-field__helper {
  font-size: var(--egcrm-helper-size);
}

/*
 * Required consent row. The row is padded so the effective target is at least
 * 44px tall without enlarging the native checkbox (SC 2.5.8). Do not shrink it.
 *
 * The privacy-policy link is a SIBLING of the <label>, never a descendant: the
 * HTML content model forbids interactive content inside a <label>, and in
 * practice a link inside one also toggles the checkbox when activated.
 */
.egcrm-form__consent {
  margin-bottom: var(--egcrm-section-gap);
}

.egcrm-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 0;
}

.egcrm-consent__box {
  flex: 0 0 auto;
  cursor: pointer;
}

.egcrm-consent__text label {
  cursor: pointer;
}

/* Underlined, but the theme owns the colour of its own links. */
.egcrm-consent__link {
  text-decoration: underline;
}

/* Visually hidden honeypot: off-screen rather than display:none so cooperative
 * bots still see and fill it; not announced to assistive tech. */
.egcrm-form__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Optional CAPTCHA slot. Empty and collapsed by default. */
.egcrm-form__captcha:empty {
  display: none;
}

.egcrm-form__captcha {
  margin-bottom: var(--egcrm-section-gap);
}

.egcrm-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: var(--egcrm-section-gap);
}

/*
 * Buttons: shape only, no colour, no background, no border.
 *
 * Both the submit and the reset control are real <button> elements, so the
 * theme's own button / [type=submit] rules apply with zero competition from
 * the plugin. If the theme paints nothing, the user-agent default button
 * (roughly 15:1) is the floor. Either way the result passes, and either way it
 * looks like the site's own button rather than like a plugin's.
 */
.egcrm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--egcrm-btn-radius);
  padding: var(--egcrm-btn-padding-y) var(--egcrm-btn-padding-x);
  min-height: 44px;
  font: inherit;
  font-weight: var(--egcrm-btn-font-weight);
  cursor: pointer;
}

.egcrm-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 640px) {
  .egcrm-form__grid,
  .egcrm-form__grid--three {
    grid-template-columns: 1fr;
  }

  .egcrm-form__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*
 * The attribution line. The opacity: 0.7 that used to sit here composited real
 * text below AA regardless of how good the theme's own contrast was, which is
 * the same defect D-12 found on the cancelled calendar event. Size carries the
 * de-emphasis instead.
 */
.egcrm-form__powered {
  margin-top: var(--egcrm-section-gap);
  text-align: center;
  font-size: 0.75em;
}

.egcrm-form__powered a {
  color: inherit;
}
