/* ==========================================================================
   Form controls — the form spec.

   Form controls are styled here and nowhere else (house rule). A project
   replaces this file with the forms.css its design system exports; what has
   to survive the swap is the CLASS CONTRACT and the WooCommerce selectors
   that join it, listed next to each rule. Woo builds its own markup and
   cannot carry our classes, so its controls join the spec by selector —
   one rule, two selectors — never by a duplicated rule.

   CAD-Vision: the Figma form is underline-only with the placeholder as the
   label. Kept: the underline. Changed: a visible label above every field, and
   the underline at --line-strong (3:1) instead of Title at 25% (1.18:1).

   The rules this file follows:
   · radius 0 on every control; the radio is the one documented exception
   · separation is a 1px --line-strong rule (3:1 on canvas and surface); no shadow, no fill except the checked state
   · the NATIVE checkbox and radio are styled (appearance:none), never a span
     standing in for them, so keyboard and screen readers keep working
   · disabled = --text-2 text AND rule, never opacity, never below 3:1
   · error   = --error rule AND a message (.msg) — the message is the error,
     the colour is a hint; the field also carries aria-invalid="true"
   · focus   = the site's 2px --ink ring, offset 2
   · a label is visible text above the field; a placeholder is not a label
   ========================================================================== */

/* ---- layout ---- */
.form { display: flex; flex-direction: column; gap: 24px; max-width: 560px; }
.form__row { display: grid; gap: 24px; }
@media (min-width: 48rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px; }

/* ---- label · helper · error message ----
   Woo: .woocommerce-form-row > label (account forms), .comment-form label (reviews) */
.field-wrap,
.woocommerce form .form-row,
#review_form .comment-form > p { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.label,
.woocommerce-form-row > label,
.woocommerce form .form-row > label { font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--ink); }
.label .req,
.woocommerce form .form-row .required { color: var(--text-2); margin-left: 4px; font-weight: 400; text-decoration: none; }
.hint { font-size: 14px; line-height: 1.4; color: var(--text-2); margin: 0; }
.msg { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--error); margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.msg::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 3px; background: var(--error); }   /* a mark, so the message is not colour alone */

/* ---- text field — underlined (default) and boxed ----
   Woo: .woocommerce-Input (account, login, register, lost password, edit address) */
.field,
.woocommerce-Input {
    width: 100%; background: transparent; color: var(--ink);
    font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.3;
    border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
    padding: 12px 0; min-height: 49px;
    transition: border-color var(--t), color var(--t);
}
.field::placeholder, .woocommerce-Input::placeholder { color: var(--text-2); opacity: 1; }
.field:hover, .woocommerce-Input:hover { border-color: var(--accent-ink); }
.field:focus-visible, .woocommerce-Input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field[aria-invalid="true"], .woocommerce-Input[aria-invalid="true"] { border-color: var(--error); }
.field:disabled, .woocommerce-Input:disabled { color: var(--text-2); border-color: var(--text-2); cursor: not-allowed; }
.field[readonly], .woocommerce-Input[readonly] { cursor: default; }

/* 20 + 15·2 + 1·2 = 52: the height of .btn, which it sits beside */
.field--boxed { border: 1px solid var(--line-strong); padding: 15px 20px; line-height: 20px; min-height: 52px; }
.field--boxed:hover { border-color: var(--accent-ink); }
.field--boxed[aria-invalid="true"] { border-color: var(--error); }
.field--boxed:disabled { border-color: var(--text-2); }

textarea.field { min-height: 121px; resize: vertical; }

/* ---- select — boxed, native menu and native indicator ----
   The browser draws the arrow, so no data-URI and no colour value is needed
   here; a project that wants a hairline chevron sets appearance:none and
   its own mark. Woo: the catalogue ordering and the variation selects. */
.select,
.woocommerce-ordering .orderby,
.variations select {
    width: 100%; background: transparent; color: var(--ink);
    font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.3;
    border: 1px solid var(--line-strong); border-radius: 0; padding: 12px 16px; min-height: 49px;
    transition: border-color var(--t), color var(--t);
}
.select:hover, .woocommerce-ordering .orderby:hover, .variations select:hover { border-color: var(--accent-ink); }
.select:focus-visible, .woocommerce-ordering .orderby:focus-visible, .variations select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.select[aria-invalid="true"] { border-color: var(--error); }
.select:disabled, .woocommerce-ordering .orderby:disabled, .variations select:disabled { color: var(--text-2); border-color: var(--text-2); cursor: not-allowed; }

/* ---- checkbox · radio — the NATIVE control, styled ----
   Woo: .woocommerce-form__input-checkbox (remember me, account options, terms) */
.choice,
.woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.3; color: var(--ink); cursor: pointer; }
.choice input,
.woocommerce-form__input-checkbox {
    appearance: none; -webkit-appearance: none; flex: none;
    width: 18px; height: 18px; margin: 1px 0 0;
    background: transparent; border: 1px solid var(--line-strong); border-radius: 0;
    display: grid; place-content: center; cursor: pointer;
    transition: background-color var(--t), border-color var(--t);
}
.choice input:hover, .woocommerce-form__input-checkbox:hover { border-color: var(--accent-ink); }
.choice input:focus-visible, .woocommerce-form__input-checkbox:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice input:checked, .woocommerce-form__input-checkbox:checked { background: var(--ink); border-color: var(--ink); }
/* the mark is a mask, so it takes --on-ink in every palette; the SVG carries no colour */
.choice input[type="checkbox"]:checked::before,
.woocommerce-form__input-checkbox[type="checkbox"]:checked::before {
    content: ""; width: 10px; height: 10px; background: var(--on-ink);
    -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='3'%3E%3Cpath d='M5 12l5 5L20 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='3'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* radio: the one round control in the system — a radio is a circle, by convention */
.choice input[type="radio"] { border-radius: 50%; }
.choice input[type="radio"]:checked { background: transparent; }
.choice input[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.choice input[aria-invalid="true"], .woocommerce-form__input-checkbox[aria-invalid="true"] { border-color: var(--error); }
.choice input:disabled, .woocommerce-form__input-checkbox:disabled { border-color: var(--text-2); cursor: not-allowed; }
.choice input:disabled:checked, .woocommerce-form__input-checkbox:disabled:checked { background: var(--text-2); border-color: var(--text-2); }
.choice input[type="radio"]:disabled:checked { background: transparent; }
.choice input[type="radio"]:disabled:checked::before { background: var(--text-2); }
.choice:has(input:disabled) { color: var(--text-2); cursor: not-allowed; }
.choice__text { padding-top: 1px; }

/* ---- groups ---- */
.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.fieldset legend { font-weight: 500; font-size: 14px; color: var(--ink); padding: 0; margin-bottom: 8px; }


/* ---- Contact Form 7 ---------------------------------------------------------
   The contact module renders any plugin's shortcode; CF7 is the assumed one
   (BUILD-PLAN.md, decision 2). Its markup cannot carry our classes, so it
   joins the spec by selector. A CF7 form is written with a <label> around or
   before each field — the placeholder is never the label. */
.wpcf7-form { display: flex; flex-direction: column; gap: 24px; }
.wpcf7-form p { margin: 0; }
.wpcf7-form label {
    display: flex; flex-direction: column; gap: 8px;
    font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--ink);
}
.wpcf7-form-control:is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea) {
    width: 100%; background: transparent; color: var(--ink);
    font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: var(--ls-p);
    border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
    padding: 12px 0; min-height: 49px;
    transition: border-color var(--t), color var(--t);
}
.wpcf7-form-control::placeholder { color: var(--placeholder); opacity: 1; }
.wpcf7-form-control:is(input, textarea):hover { border-color: var(--accent-ink); }
.wpcf7-form-control:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wpcf7-form-control.wpcf7-not-valid { border-color: var(--error); }
textarea.wpcf7-form-control { min-height: 121px; resize: vertical; }

.wpcf7-not-valid-tip {
    display: flex; gap: 6px; align-items: flex-start; margin-top: 6px;
    font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--error);
}
.wpcf7-not-valid-tip::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 3px; background: var(--error); }

/* Float label (the contact card). Figma draws each field as its placeholder on
   an underline, 36 tall (message 60), 16 apart. Here the words are a real
   <label> that rests where Figma's placeholder sits and moves above the line
   once the field has focus or a value — so it never disappears while typing.
   Form template: <label class="cv-float"><span class="cv-float__label">Vorname*</span>
   [text* vorname placeholder "Vorname"]</label>. The placeholder is never
   painted; it is there so :placeholder-shown can tell an empty field. */
.wpcf7-form:has(.cv-float),
.wpcf7-form:has(.cv-float) .form__row { gap: 16px; }
.wpcf7-form:has(.cv-float) > p:has(.wpcf7-acceptance) { margin-top: 16px; }   /* 32 between fields and the rest, as in Figma */
.wpcf7-form .cv-float { position: relative; display: block; }
.cv-float__label {
    position: absolute; left: 0; top: 0; z-index: 1;
    font-size: 16px; font-weight: 400; line-height: 20px; color: var(--text-2);
    transform-origin: left top;
    pointer-events: none;
    transition: transform var(--t), color var(--t);
}
.cv-float .wpcf7-form-control-wrap { display: block; }
.cv-float .wpcf7-form-control:is(input, textarea) { padding: 0 8px 15px 0; min-height: 36px; line-height: 20px; }
.cv-float .wpcf7-form-control:focus-visible { outline-offset: 1px; }   /* clears the raised label */
.cv-float textarea.wpcf7-form-control { display: block; min-height: 140px; max-height: 320px; field-sizing: content; }   /* taller than Figma's 60, on request: room for a real message */   /* block: no baseline gap under it */
.cv-float .wpcf7-form-control::placeholder { color: transparent; }
.cv-float:focus-within .cv-float__label,
.cv-float:has(.wpcf7-form-control:not(:placeholder-shown)) .cv-float__label {
    transform: translateY(-17px) scale(.75);   /* 12px, inside the 16px gap above the field */
    color: var(--ink);
}

/* Acceptance / checkbox: the native control, styled like .choice input. */
.wpcf7-list-item { margin: 0; }
.wpcf7-list-item label { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; color: var(--text-2); }
.wpcf7-list-item input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; flex: none;
    width: 18px; height: 18px; margin: 1px 0 0;
    background: transparent; border: 1px solid var(--line-strong); border-radius: 0;
    display: grid; place-content: center; cursor: pointer;
}
.wpcf7-list-item input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.wpcf7-list-item input[type="checkbox"]:checked::before {
    content: ""; width: 10px; height: 10px; background: var(--on-ink);
    -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='3'%3E%3Cpath d='M5 12l5 5L20 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='3'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wpcf7-list-item input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Submit: the Figma outline button. */
.wpcf7-submit {
    align-self: flex-start;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: min(238px, 100%);   /* Figma: the form's button is fixed at 238 */
    min-height: 48px; padding: var(--btn-pad-y) var(--btn-pad-x);
    font-family: inherit; font-size: var(--fs-h6); font-weight: var(--fw-h6); letter-spacing: var(--ls-h6); line-height: 1;
    border: 1px solid var(--accent-ink); border-radius: var(--radius-btn);
    background: transparent; color: var(--accent-ink); cursor: pointer;
    transition: background-color var(--t), color var(--t);
}
.wpcf7-submit:hover { background: var(--accent); color: var(--on-accent); }
.wpcf7-submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wpcf7-spinner { margin: 0 0 0 12px; }

.wpcf7 form .wpcf7-response-output {
    margin: 0; padding: 12px 16px;
    font-size: 14px; line-height: 1.4; color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--error); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--accent-ink); }

/* Honeypot (inc/cf7-honeypot.php): present for bots, gone for people.
   Off-screen rather than display:none, which some bots check for. */
.cv-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}