/*
 * Form blocks (owlic/form and its children)
 *
 * On a dark background, the fields match the MailPoet forms of the site
 * (components/form.css): same type, same translucent box, same focus. On a
 * light one, they take the light values below. Nothing to choose in the
 * editor: as everywhere in the theme, the background declares its
 * color-scheme (base/themes.css) and light-dark() settles each colour.
 *
 * Values come from the design tokens (theme.json) where one exists. Kept
 * literal, as MailPoet's and with no token: the dark field's translucent box
 * and border, the blur, the 18px padding, the letter spacing.
 *
 * Contrast, on sand (light) and on bleu-petrole (dark):
 * - hint text, the muted ink: 4.55:1 and 7.3:1;
 * - error text and asterisk, rouge-600 / rouge-300: 6.8:1 and 6.9:1. MailPoet
 *   keeps rouge-600 on dark backgrounds too, at 2.1:1;
 * - field border, light: 3:1. The dark one is MailPoet's, at 2:1.
 */

.wp-block-owlic-form {
    --owlic-form-text: light-dark(var(--wp--preset--color--gray-600), var(--wp--preset--color--gray-500));
    --owlic-form-filled: var(--wp--custom--color--ink);
    --owlic-form-box: light-dark(var(--wp--custom--color--surface-raised), rgba(255, 255, 255, 0.08));
    --owlic-form-border: light-dark(rgba(0, 0, 0, 0.42), rgba(230, 230, 230, 0.24));
    --owlic-form-border-focus: light-dark(rgba(0, 0, 0, 0.72), rgba(230, 230, 230, 0.62));
    --owlic-form-hint: var(--wp--custom--color--ink-muted);
    --owlic-form-error: light-dark(var(--wp--preset--color--rouge-600), var(--wp--preset--color--rouge-300));
    --owlic-form-success: light-dark(var(--wp--preset--color--vert-800), var(--wp--preset--color--vert-300));
    --owlic-form-outline: var(--wp--custom--color--focus);

    position: relative;
}

/* Spacing between fields, as between MailPoet's paragraphs. */
.wp-block-owlic-form > * + * {
    margin-block-start: var(--gap-column);
}

@media (min-width: 782px) {
    .wp-block-owlic-form > * + * {
        margin-block-start: calc(var(--gap-column) / 2);
    }
}

/* Out of sight and out of reach: only robots fill it in. */
.wp-block-owlic-form__honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Label */
.wp-block-owlic-form-label {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--4);
    margin-bottom: 2px;
    font-family: var(--wp--preset--font-family--es-rebond-grotesque);
    font-size: var(--wp--preset--font-size--body-small);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.28px;
    color: var(--heading);
}

/* A link in a label, such as a consent's privacy policy: underlined, told
   apart from the text by more than its colour. */
.wp-block-owlic-form-label a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wp-block-owlic-form-label__required {
    font-size: var(--wp--preset--font-size--body-small);
    font-weight: var(--wp--custom--typography--weight-regular);
    line-height: 1.4;
    color: var(--owlic-form-error);
}

/* Input, textarea and select */
.wp-block-owlic-form-input__control:not([type="checkbox"]) {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 18px var(--wp--preset--spacing--16);
    font-family: var(--wp--preset--font-family--es-rebond-grotesque);
    font-size: var(--wp--preset--font-size--body-small);
    font-weight: var(--wp--custom--typography--weight-regular);
    line-height: 1.24;
    letter-spacing: -0.28px;
    color: var(--owlic-form-text);
    background-color: var(--owlic-form-box);
    border: 1px solid var(--owlic-form-border);
    border-radius: var(--wp--preset--border-radius--sm);
    backdrop-filter: blur(16px);
}

/* Select: the site's caret (the breadcrumbs', turned down) in place of the
   browser's arrow, which sat against the border. It lines up with the text's
   16px padding and takes the text's colour. Drawn on the wrapper, as a mask,
   a select taking no pseudo-element. */
.wp-block-owlic-form-input__select > select.wp-block-owlic-form-input__control {
    appearance: none;
    padding-inline-end: var(--wp--preset--spacing--48);
}

.wp-block-owlic-form-input__select {
    position: relative;
    display: block;
}

.wp-block-owlic-form-input__select::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--wp--preset--spacing--16);
    top: 50%;
    width: var(--wp--preset--spacing--16);
    height: var(--wp--preset--spacing--16);
    translate: 0 -50%;
    pointer-events: none;
    background-color: var(--owlic-form-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%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 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Windows high contrast replaces the colours: the caret follows the text. */
@media (forced-colors: active) {
    .wp-block-owlic-form-input__select::after {
        background-color: CanvasText;
    }
}

.wp-block-owlic-form-input__control::placeholder {
    color: var(--owlic-form-text);
    opacity: 1;
}

.wp-block-owlic-form-input__control:focus {
    border-color: var(--owlic-form-border-focus);
}

.wp-block-owlic-form-input__control:not(:placeholder-shown),
select.wp-block-owlic-form-input__control:has(option:checked:not([value=""])) {
    color: var(--owlic-form-filled);
}

.wp-block-owlic-form-input__control:focus-visible {
    outline: 2px dotted var(--owlic-form-outline);
    outline-offset: 3px;
}

.wp-block-owlic-form-input__control[aria-invalid="true"] {
    border-color: var(--owlic-form-error);
}

/* Checkbox and consent: the box first, its label beside it, helpers below. */
.wp-block-owlic-form-field:is(.is-type-checkbox, .is-type-consent) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--wp--preset--spacing--8);
}

:is(.is-type-checkbox, .is-type-consent) > .wp-block-owlic-form-input,
:is(.is-type-checkbox, .is-type-consent) > .wp-block-owlic-form-input__control {
    order: -1;
}

:is(.is-type-checkbox, .is-type-consent) .wp-block-owlic-form-label {
    /* Inline, so the asterisk follows the text when it wraps. */
    display: block;
    flex: 1;
    margin-bottom: 0;
    font-weight: var(--wp--custom--typography--weight-regular);
}

:is(.is-type-checkbox, .is-type-consent) .wp-block-owlic-form-label__required {
    margin-inline-start: var(--wp--preset--spacing--4);
}

:is(.is-type-checkbox, .is-type-consent) .wp-block-owlic-form-helper {
    flex-basis: 100%;
}

.wp-block-owlic-form-input__control[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Radio buttons and checkboxes: a fieldset without the browser's frame, its
   legend styled as a label, then one option per line, the box before its
   text. Margins are reset on the sides and below only: the form spaces its
   fields above. */
fieldset.wp-block-owlic-form-field {
    min-inline-size: 0;
    margin-inline: 0;
    margin-block-end: 0;
    padding: 0;
    border: 0;
}

legend.wp-block-owlic-form-label {
    padding: 0;
}

.wp-block-owlic-form-input__choices {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--8);
    margin-block-start: var(--wp--preset--spacing--8);
}

.wp-block-owlic-form-input__choice {
    display: flex;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--8);
    font-family: var(--wp--preset--font-family--es-rebond-grotesque);
    font-size: var(--wp--preset--font-size--body-small);
    /* One line as tall as the box: the text's first line sits beside it. */
    line-height: 20px;
    letter-spacing: -0.28px;
    color: var(--heading);
    cursor: pointer;
}

/* Scoped to the choice, to outrank the admin's input[type="radio"] margins
   in the editor. */
.wp-block-owlic-form-input__choice > .wp-block-owlic-form-input__box {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.wp-block-owlic-form-input__box:focus-visible {
    outline: 2px dotted var(--owlic-form-outline);
    outline-offset: 3px;
}

/* Every box, alone or in a group, drawn by the site with the field's box,
   border and blur: it sits on the section's background as the inputs do,
   light or dark. The mark takes the ink of a filled field. */
:is(
    .wp-block-owlic-form-input__control[type="checkbox"],
    .wp-block-owlic-form-input__choice > .wp-block-owlic-form-input__box
) {
    appearance: none;
    display: grid;
    place-content: center;
    box-sizing: border-box;
    background-color: var(--owlic-form-box);
    border: 1px solid var(--owlic-form-border);
    border-radius: 4px;
    backdrop-filter: blur(16px);
}

.wp-block-owlic-form-input__box[type="radio"] {
    border-radius: 50%;
}

:is(
    .wp-block-owlic-form-input__control[type="checkbox"],
    .wp-block-owlic-form-input__box
)::before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--owlic-form-filled);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%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 12 12' fill='none'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: hidden;
}

/* The radio's mark: a dot. */
.wp-block-owlic-form-input__box[type="radio"]::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -webkit-mask: none;
    mask: none;
}

:is(
    .wp-block-owlic-form-input__control[type="checkbox"],
    .wp-block-owlic-form-input__box
):checked::before {
    visibility: visible;
}

:is(
    .wp-block-owlic-form-input__control[type="checkbox"],
    .wp-block-owlic-form-input__box
):is(:hover, :checked) {
    border-color: var(--owlic-form-border-focus);
}

:is(
    .wp-block-owlic-form-input__control[type="checkbox"],
    .wp-block-owlic-form-input__box
)[aria-invalid="true"] {
    border-color: var(--owlic-form-error);
}

/* Windows high contrast replaces the colours: the browser's own boxes. */
@media (forced-colors: active) {
    :is(
        .wp-block-owlic-form-input__control[type="checkbox"],
        .wp-block-owlic-form-input__choice > .wp-block-owlic-form-input__box
    ) {
        appearance: auto;
    }

    :is(
        .wp-block-owlic-form-input__control[type="checkbox"],
        .wp-block-owlic-form-input__box
    )::before {
        content: none;
    }
}

/* Multiple select: every option in sight, in the ink of a filled field. */
select[multiple].wp-block-owlic-form-input__control {
    padding-block: var(--wp--preset--spacing--8);
    color: var(--owlic-form-filled);
}

/* Hidden fields take no room on the page; the editor keeps them in reach. */
.wp-block-owlic-form-field.is-type-hidden:not(.block-editor-block-list__block) {
    display: none;
}

/* Helpers: a hint, or an error. Scoped to the form, to outrank the theme's
   body copy rule (p:not(.has-background), in paragraphs.css). */
.wp-block-owlic-form .wp-block-owlic-form-helper {
    margin: 6px 0 0;
    font-size: var(--wp--preset--font-size--body-small);
    line-height: 1.4;
    color: var(--owlic-form-hint);
}

.wp-block-owlic-form .wp-block-owlic-form-helper.is-error {
    color: var(--owlic-form-error);
}

/* The outcome of a submission, announced to screen readers. Kept in the
   page when empty: a live region added or shown late is not announced. */
.wp-block-owlic-form__status {
    font-size: var(--wp--preset--font-size--body-small);
    line-height: 1.4;
}

.wp-block-owlic-form__status:empty {
    margin: 0;
}

.wp-block-owlic-form__status.is-success {
    color: var(--owlic-form-success);
}

.wp-block-owlic-form__status.is-error {
    color: var(--owlic-form-error);
}

.wp-block-owlic-form[aria-busy="true"] {
    cursor: progress;
}

/* Editor: a hidden field is shown as a note. */
.wp-block-owlic-form-input__hidden {
    margin: 0;
    font-size: var(--wp--preset--font-size--body-small);
    color: var(--owlic-form-hint);
}