/* Immersify – Content
   Copy that comes out of ACF wysiwyg fields (.prose), and the WPForms
   contact form, restyled for the dark ground. */

/* ── Wysiwyg copy ────────────────────────────────────────── */
.prose {
    max-width: 720px;
    color:     var(--color-silver);

    > :last-child {
        margin-bottom: 0;
    }

    a:not(.button) {
        color:                 var(--color-violet);
        text-decoration:       underline;
        text-underline-offset: 3px;
        text-decoration-color: var(--color-violet-50);

        &:hover {
            color:                 var(--color-cyan);
            text-decoration-color: currentColor;
        }
    }

    ul {
        list-style: none;
        padding:    0;
        margin:     0 0 var(--space-md);

        li {
            position:     relative;
            padding-left: 22px;
            margin-bottom: 10px;

            /* a square "pixel" bullet */
            &::before {
                content:    '';
                position:   absolute;
                left:       0;
                top:        10px;
                width:      7px;
                height:     7px;
                background: var(--color-violet);
                box-shadow: 0 0 8px var(--color-violet);
            }
        }
    }

    ol {
        padding-left: 22px;
    }

    h2, h3, h4 {
        margin-top: var(--space-lg);
    }

    img {
        border-radius: var(--radius-lg);
    }
}

/* ── WPForms ─────────────────────────────────────────────── */
/* WPForms ships its own base CSS; these rules only repaint it. Field widths,
   layout and validation behaviour stay WPForms'. */
.wpforms-container {
    margin: 0 !important;

    .wpforms-field {
        padding: 0 0 var(--space-md) !important;
    }

    .wpforms-field-label {
        font:           var(--text-10pr) !important;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color:          var(--color-violet) !important;
        margin-bottom:  10px !important;
    }

    .wpforms-required-label {
        color: var(--color-magenta) !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea {
        width:         100% !important;
        max-width:     100% !important;
        height:        auto !important;
        padding:       14px 16px !important;
        font:          var(--text-16ir) !important;
        color:         var(--color-snow) !important;
        background:    var(--color-charcoal) !important;
        border:        1px solid var(--color-violet-18) !important;
        border-radius: var(--radius-md) !important;
        box-shadow:    none !important;
        transition:    border-color var(--transition-base), box-shadow var(--transition-base);

        &::placeholder {
            color: var(--color-grey);
        }

        &:focus {
            outline:      none;
            border-color: var(--color-cyan) !important;
            box-shadow:   var(--glow-cyan) !important;
        }
    }

    textarea {
        min-height: 160px;
    }

    .wpforms-field-sublabel {
        color: var(--color-grey) !important;
    }

    label.wpforms-error,
    em.wpforms-error {
        color: var(--color-magenta) !important;
        font:  var(--text-13ir) !important;
    }

    .wpforms-submit-container {
        padding-top: var(--space-sm) !important;
    }

    /* The submit takes .button-primary's look – WPForms gives it no hook for a class */
    button[type="submit"].wpforms-submit {
        display:             inline-flex !important;
        align-items:         center;
        padding:             14px 28px !important;
        height:              auto !important;
        border:              0 !important;
        border-radius:       var(--radius-md) !important;
        font:                var(--text-11pr) !important;
        letter-spacing:      0.06em;
        text-transform:      uppercase;
        color:               var(--color-black) !important;
        background:          var(--gradient-neon) !important;
        background-size:     200% 100% !important;
        box-shadow:          var(--glow-button) !important;
        transition:          background-position var(--transition-slow), box-shadow var(--transition-base);

        &:hover,
        &:focus-visible {
            background-position: 100% 0% !important;
            box-shadow:          var(--glow-button-hover) !important;
        }
    }

    .wpforms-confirmation-container-full {
        color:         var(--color-snow) !important;
        background:    var(--color-violet-10) !important;
        border:        1px solid var(--color-violet-50) !important;
        border-radius: var(--radius-md);
        padding:       var(--space-md) !important;
    }
}