/*
 * Maple Forms baseline overrides for Maple Site Kit blocks.
 *
 * Every form-bearing block calls through the render_maple_form()
 * helper in inc/forms-integration.php, which injects `msk-has-form`
 * into the `.maple-form` wrapper alongside the block-specific class.
 * That gives us a single, future-proof scope for layout + typography
 * resets that every block — existing or new — inherits for free.
 *
 * Per-block style.css files add only the block's distinctive visual
 * treatment (underlined inputs, pill fields, rounded accent buttons).
 * If a new block wants the default look, it doesn't need any CSS at
 * all — this file handles the baseline.
 *
 * Contract: all rules here stay single-class, no !important, no ID
 * selectors. Per-block rules with parent-selector scoping
 * (e.g. `.msk-contact-collab .maple-form__input`) beat these cleanly.
 */

/* ── Outer container ───────────────────────────────────────────── */
.msk-has-form.maple-form,
.msk-has-form .maple-form {
    margin: 0;
    max-width: none;
}

/* ── Field layout ──────────────────────────────────────────────── */
.msk-has-form .maple-form__field { margin-block-end: 1rem; }
.msk-has-form .maple-form__label  { display: block; margin-block-end: 0.25rem; font-weight: 600; font-size: 0.9375rem; }
.msk-has-form .maple-form__required { color: inherit; opacity: 0.7; margin-inline-start: 0.125rem; }
.msk-has-form .maple-form__description { margin-block-start: 0.25rem; font-size: 0.8125rem; opacity: 0.7; }

/* ── Inputs ────────────────────────────────────────────────────── */
.msk-has-form .maple-form__input {
    inline-size: 100%;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    box-sizing: border-box;
}
.msk-has-form .maple-form__input--textarea { min-block-size: 5rem; resize: vertical; }
.msk-has-form .maple-form__input--select { appearance: auto; }

/* ── Choice groups (radio / checkbox) ──────────────────────────── */
.msk-has-form .maple-form__choices { display: flex; flex-direction: column; gap: 0.5rem; }
.msk-has-form .maple-form__choice  { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }

/* ── Submit button ─────────────────────────────────────────────── */
.msk-has-form .maple-form__submit { margin-block-start: 1rem; text-align: start; }
.msk-has-form .maple-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 150ms ease-out;
}
.msk-has-form .maple-form__button:hover { opacity: 0.9; }

/* ── Feedback regions ──────────────────────────────────────────── */
.msk-has-form .maple-form__errors { padding: 0.75rem 1rem; margin-block-end: 1rem; border: 1px solid currentColor; border-radius: 0.25rem; font-size: 0.875rem; }
.msk-has-form .maple-form__errors ul { margin: 0; padding-inline-start: 1.25rem; }
.msk-has-form .maple-form__field-error { display: block; margin-block-start: 0.25rem; font-size: 0.8125rem; color: inherit; opacity: 0.85; }
.msk-has-form .maple-form__confirmation { padding: 0.75rem 1rem; margin-block-end: 1rem; border: 1px solid currentColor; border-radius: 0.25rem; font-size: 0.9375rem; }
.msk-has-form .maple-form__confirmation p:first-child { margin-block-start: 0; }
.msk-has-form .maple-form__confirmation p:last-child  { margin-block-end: 0; }

/* ── Admin-only fallback ───────────────────────────────────────── */
.msk-form-fallback {
    margin-block: 1rem;
    padding: 0.75rem 1rem;
    border: 1px dashed currentColor;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    opacity: 0.75;
}
.msk-form-fallback p { margin: 0; }

/* ── prefers-reduced-motion ─────────────────────────────────────────────
 * WCAG 2.3.3 — honour users' OS-level motion preference. The 0.01ms
 * duration cancels visible motion while still firing transitionend /
 * animationend events that JS handlers may listen for.
 */
@media ( prefers-reduced-motion: reduce ) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}