/* Phase 50c — bulletproof contact-form styling.
 *
 * Designed to land cleanly on:
 *   • CMS-MainLayout pages (article / static-page / presentation)
 *   • Imported HTML bundles whose CSS may reset all <input> defaults
 *     (Tailwind preflight, Stitch-mockup resets, etc.)
 *
 * Strategy:
 *   1. Selector root is `form.cms-form[data-form-slug]` — three matching
 *      slots produce a specificity of (0,2,1), enough to beat plain
 *      `input { … }` from a bundle's base layer.
 *   2. Render-critical properties (border, background, padding, radius,
 *      font, color, display) carry !important so a bundle's base reset
 *      can't strip them. Layout-only properties stay non-important so an
 *      operator can still tweak placement via inline style.
 *   3. The honeypot field is always invisible regardless of which CSS
 *      layer eventually loads.
 */

form.cms-form[data-form-slug] {
    --nx-form-fg: #0F172A;
    --nx-form-fg-muted: #475569;
    --nx-form-border: #E2E8F0;
    --nx-form-border-focus: #2563EB;
    --nx-form-bg: #FFFFFF;
    --nx-form-bg-muted: #F8FAFC;
    --nx-form-bg-disabled: #F1F5F9;
    --nx-form-primary: #2563EB;
    --nx-form-primary-hover: #1D4ED8;
    --nx-form-success-bg: #ECFDF5;
    --nx-form-success-fg: #065F46;
    --nx-form-success-border: #6EE7B7;
    --nx-form-error-bg: #FEF2F2;
    --nx-form-error-fg: #991B1B;
    --nx-form-error-border: #FECACA;
    --nx-form-radius: 8px;
    --nx-form-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    display: grid !important;
    gap: 16px !important;
    max-width: 640px;
    margin: 24px 0;
    padding: 28px !important;
    border: 1px solid var(--nx-form-border) !important;
    border-radius: 12px !important;
    background: var(--nx-form-bg) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-family: var(--nx-form-font) !important;
    color: var(--nx-form-fg) !important;
    box-sizing: border-box;
}

form.cms-form[data-form-slug] *,
form.cms-form[data-form-slug] *::before,
form.cms-form[data-form-slug] *::after {
    box-sizing: border-box;
}

/* Title + intro hint inside the form card. */
form.cms-form[data-form-slug] .cms-form__title {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--nx-form-fg) !important;
}

form.cms-form[data-form-slug] .cms-form__intro,
form.cms-form[data-form-slug] > p:not(.nexo-form-status):not(.cms-form__hint) {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--nx-form-fg-muted) !important;
}

/* Two-column row for short paired inputs (e.g. name + email). */
form.cms-form[data-form-slug] .cms-form__grid {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    form.cms-form[data-form-slug] .cms-form__grid {
        grid-template-columns: 1fr 1fr;
    }
}

form.cms-form[data-form-slug] .cms-form__row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0;
}

form.cms-form[data-form-slug] .cms-form__label,
form.cms-form[data-form-slug] .cms-form__row > label {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--nx-form-fg) !important;
    line-height: 1.4 !important;
}

/* `*` marker after required-field labels.
 * Two paths: (1) the CSS `:has()` rule for the canonical `.cms-form__row` layout,
 * and (2) the `.cms-form__req` span injected by forms-handler.js for any other
 * authored wrapper (e.g. `.field`) where this structural selector can't reach. */
form.cms-form[data-form-slug] .cms-form__row:has(input:required) > label::after,
form.cms-form[data-form-slug] .cms-form__row:has(textarea:required) > label::after,
form.cms-form[data-form-slug] .cms-form__row:has(select:required) > label::after {
    content: " *";
    color: var(--nx-form-error-fg);
}

form.cms-form[data-form-slug] .cms-form__req {
    color: var(--nx-form-error-fg) !important;
    font-weight: 600 !important;
}

/* Cloudflare Turnstile widget (injected by forms-handler.js when a site key is
   configured). Just needs breathing room above the submit row. */
form.cms-form[data-form-slug] .cf-turnstile {
    margin: 4px 0 !important;
    min-height: 65px;
}

/* Inputs / textareas / selects share the same base. */
form.cms-form[data-form-slug] .cms-form__input,
form.cms-form[data-form-slug] .cms-form__textarea,
form.cms-form[data-form-slug] .cms-form__select,
form.cms-form[data-form-slug] input[type="text"],
form.cms-form[data-form-slug] input[type="email"],
form.cms-form[data-form-slug] input[type="tel"],
form.cms-form[data-form-slug] input[type="url"],
form.cms-form[data-form-slug] input[type="number"],
form.cms-form[data-form-slug] textarea,
form.cms-form[data-form-slug] select {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 11px 13px !important;
    border: 1px solid var(--nx-form-border) !important;
    border-radius: var(--nx-form-radius) !important;
    background: var(--nx-form-bg) !important;
    color: var(--nx-form-fg) !important;
    font-family: var(--nx-form-font) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none;
    transition: border-color 140ms, box-shadow 140ms;
}

form.cms-form[data-form-slug] input::placeholder,
form.cms-form[data-form-slug] textarea::placeholder {
    color: var(--nx-form-fg-muted) !important;
    opacity: 0.7 !important;
}

form.cms-form[data-form-slug] input:focus,
form.cms-form[data-form-slug] textarea:focus,
form.cms-form[data-form-slug] select:focus {
    border-color: var(--nx-form-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

form.cms-form[data-form-slug] input:invalid:not(:placeholder-shown):not(:focus),
form.cms-form[data-form-slug] textarea:invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--nx-form-error-border) !important;
}

form.cms-form[data-form-slug] .cms-form__textarea,
form.cms-form[data-form-slug] textarea {
    min-height: 130px !important;
    resize: vertical;
    line-height: 1.5 !important;
}

/* Select arrow — we killed the native one with appearance:none above. */
form.cms-form[data-form-slug] .cms-form__select,
form.cms-form[data-form-slug] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    padding-right: 40px !important;
}

/* Consent checkbox row.
 * The checkbox is absolutely positioned in a left gutter and the label text flows
 * as a normal block. This is deliberately NOT grid/flex: a `display:grid` (or flex)
 * label splits unwrapped consent text — "…stimme der <a>Datenverarbeitung</a> zu…" —
 * into multiple grid/flex items (checkbox / text / link / text), which collapse and
 * overlap. Block flow keeps the inline link in the running text regardless of whether
 * the operator wrapped it in a <span>. font-family is pinned so the consent text
 * never inherits a monospace base font from the surrounding page bundle. */
form.cms-form[data-form-slug] .cms-form__consent {
    display: block !important;
    position: relative !important;
    padding: 14px 14px 14px 42px !important;
    border: 1px solid var(--nx-form-border) !important;
    border-radius: var(--nx-form-radius) !important;
    background: var(--nx-form-bg-muted) !important;
    font-family: var(--nx-form-font) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--nx-form-fg-muted) !important;
    cursor: pointer;
    font-weight: 400 !important;
}

form.cms-form[data-form-slug] .cms-form__consent input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    position: absolute !important;
    left: 14px !important;
    top: 15px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    accent-color: var(--nx-form-primary);
    background: initial !important;
    border: initial !important;
}

form.cms-form[data-form-slug] .cms-form__consent a {
    color: var(--nx-form-primary) !important;
    text-decoration: underline;
}

form.cms-form[data-form-slug] .cms-form__hint {
    margin: 0 !important;
    font-size: 12.5px !important;
    color: var(--nx-form-fg-muted) !important;
    line-height: 1.5 !important;
}

form.cms-form[data-form-slug] .cms-form__actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap;
    margin-top: 4px !important;
}

/* Submit button — covers `button[type="submit"]`, `input[type="submit"]`,
   and the explicit `.cms-form__submit` class so any template shape wins. */
form.cms-form[data-form-slug] .cms-form__submit,
form.cms-form[data-form-slug] button[type="submit"],
form.cms-form[data-form-slug] input[type="submit"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--nx-form-primary) !important;
    background: var(--nx-form-primary) !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    font-family: var(--nx-form-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: var(--nx-form-radius) !important;
    cursor: pointer;
    min-height: 44px !important;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background 140ms, transform 80ms;
}

form.cms-form[data-form-slug] .cms-form__submit:hover:not(:disabled),
form.cms-form[data-form-slug] button[type="submit"]:hover:not(:disabled),
form.cms-form[data-form-slug] input[type="submit"]:hover:not(:disabled) {
    background: var(--nx-form-primary-hover) !important;
    border-color: var(--nx-form-primary-hover) !important;
}

@media (prefers-reduced-motion: no-preference) {
    form.cms-form[data-form-slug] button[type="submit"]:active:not(:disabled) {
        transform: translateY(1px);
    }
}

form.cms-form[data-form-slug] .cms-form__submit:disabled,
form.cms-form[data-form-slug] button[type="submit"]:disabled,
form.cms-form[data-form-slug] input[type="submit"]:disabled {
    background: var(--nx-form-bg-disabled) !important;
    color: var(--nx-form-fg-muted) !important;
    border-color: var(--nx-form-border) !important;
    cursor: wait !important;
    box-shadow: none !important;
}

/* Status sink emitted by forms-handler.js. */
form.cms-form[data-form-slug] .nexo-form-status {
    padding: 12px 14px !important;
    border-radius: var(--nx-form-radius) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

form.cms-form[data-form-slug] .nexo-form-status[data-kind="ok"] {
    background: var(--nx-form-success-bg) !important;
    color: var(--nx-form-success-fg) !important;
    border: 1px solid var(--nx-form-success-border) !important;
}

form.cms-form[data-form-slug] .nexo-form-status[data-kind="error"] {
    background: var(--nx-form-error-bg) !important;
    color: var(--nx-form-error-fg) !important;
    border: 1px solid var(--nx-form-error-border) !important;
}

/* Honeypot always invisible — !important so a bundle's `input { display:block }`
   can't undo our concealment. */
form.cms-form[data-form-slug] input[name="nexograph_url"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Dark-mode opt-in. */
@media (prefers-color-scheme: dark) {
    form.cms-form[data-form-slug] {
        --nx-form-fg: #F1F5F9;
        --nx-form-fg-muted: #94A3B8;
        --nx-form-border: #334155;
        --nx-form-border-focus: #60A5FA;
        --nx-form-bg: #0F172A;
        --nx-form-bg-muted: #1E293B;
        --nx-form-bg-disabled: #1E293B;
        --nx-form-success-bg: rgba(110, 231, 183, 0.1);
        --nx-form-success-fg: #6EE7B7;
        --nx-form-success-border: rgba(110, 231, 183, 0.3);
        --nx-form-error-bg: rgba(252, 165, 165, 0.1);
        --nx-form-error-fg: #FCA5A5;
        --nx-form-error-border: rgba(252, 165, 165, 0.3);
    }
}