/* =============================================================================
   rsform.css — Serenade styling for RSForm Pro forms
   -----------------------------------------------------------------------------
   The contact form is built in RSForm Pro (per the project's "forms = RSForm,
   never scripted" rule). RSForm emits Bootstrap-flavoured markup
   (.row / .col-md-* / .mb-3 / .form-control …) but this template ships NO
   CSS framework, so all of those classes are inert out of the box — the form
   renders as a bare unstyled stack. This file restyles RSForm's output to
   match the Figma Kontakt design 1:1.

   Figma reference: Serenade Screendesign oQhmhUU0axPdFzvhmTaKPg, node 37:126
   (Kontakt frame), form group "Allgemeine Anfragen". Verified via
   get_design_context.

   Field spec (Figma):
     • Inputs / textarea: white fill, radius 30 px (--rad-card),
       padding 10/30 px (--s-2 / --s-6), IBM Plex Serif Regular 20 px,
       placeholder petrol @ 50 % (--c-petrol-50).
     • Two-column layout: name + Anrede left, phone + e-mail right
       (Figma left col x=299 w=545, right col x=883 w=545, gap ≈ 40 px).
     • Mitteilung: full width, min-height 134 px.
     • Anrede radios: 16 px petrol ring, filled petrol when checked;
       labels IBM Plex Serif Regular 20 px petrol.
     • Submit "Senden": petrol fill, radius 30 px, padding 10/50 px
       (--s-2 / --s-8), Akhand Bold 24 px, white.

   Scope: every rule is prefixed with #userForm — RSForm Pro's standard form
   wrapper id — so these styles never leak onto the rest of the site and
   apply uniformly to any RSForm form (Kontakt, Karriere, …).

   Allow-listed literals: 0, 100%, none (CSS keywords); 16px is the Figma
   radio diameter and has no spacing-scale token (it is a control glyph
   size, documented here, not a layout metric).
   ============================================================================= */


/* --- Form shell ---------------------------------------------------------- */

#userForm {
    width: 100%;
    max-width: var(--layout-inner);
    margin: 0 auto;
    color: var(--c-petrol);
    font-family: var(--ff-text);
}

/* Section heading ("Kontaktformular" / "Allgemeine Anfragen"). Colour and
   face come from the global h2 rule; we only set the rhythm to the design. */
#userForm h2 {
    margin: 0 0 var(--s-7) 0;
}

#userForm .formContainer {
    display: block;
}


/* --- Layout grid (rebuilds the absent Bootstrap row / column behaviour) -- */
/* The OUTER .row holds the .col-md-* layout columns. The INNER .row IS each
   .rsform-block (RSForm wraps every field in a .row). Both become flex; the
   per-field block is handled in the field section below. */

#userForm .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-7);
    margin: 0;
}

/* Neutralise any inherited grid gutter. RSForm's markup keeps the Bootstrap
   column classes (.col-md-*, .col-sm-*); if a framework or RSForm's own
   responsive.css is present it gives those columns (and the .col-sm-9 control
   wrapper) a ~15 px horizontal padding. The caption already pins padding:0,
   so only the controls inherit it — which shoves every input/textarea/button
   in from the column edge while the inline "Anrede" caption stays flush (the
   left-misalignment seen on the Kontakt page). Zero the horizontal gutter on
   every column wrapper so all fields align to the column's true left edge;
   the inter-column space comes solely from the flex `gap` above. */
#userForm [class*="col-"],
#userForm .formControls {
    padding-left: 0;
    padding-right: 0;
}

#userForm .col-md-6 {
    flex: 1 1 0;
    min-width: 0;
}

#userForm .col-md-12 {
    flex: 1 1 100%;
    min-width: 0;
}

/* Each column stacks its fields vertically with the design's row gap. */
#userForm .col-md-6,
#userForm .col-md-12 {
    display: flex;
    flex-direction: column;
}


/* --- Field block (one RSForm .rsform-block = label col + controls col) --- */
/* RSForm's horizontal layout splits each field into a col-sm-3 caption and a
   col-sm-9 control. The Figma form uses placeholders instead of captions, so
   every caption ships empty — we collapse empty captions and let the control
   span the full block width. A non-empty caption (e.g. if an editor fills the
   Anrede label) still shows, stacked above its control. */

#userForm .rsform-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 var(--s-3) 0;
}

#userForm .col-md-6 .rsform-block:last-child,
#userForm .col-md-12 .rsform-block:last-child {
    margin-bottom: 0;
}

/* Empty captions take up no space; non-empty ones become a full-width label
   above the control (Figma never shows them, but stay graceful if added). */
#userForm .formControlLabel:empty {
    display: none;
}

#userForm .formControlLabel {
    flex: 1 1 100%;
    margin: 0 0 var(--s-2) 0;
    padding: 0;
    font-family: var(--ff-text);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    line-height: var(--lh-text);
    color: var(--c-petrol);
}

#userForm .formControls {
    flex: 1 1 100%;
    min-width: 0;
}


/* --- Text inputs + textarea (the white pills) ---------------------------- */

#userForm input[type="text"],
#userForm input[type="tel"],
#userForm input[type="email"],
#userForm input[type="number"],
#userForm input[type="url"],
#userForm textarea {
    width: 100%;
    margin: 0;
    padding: var(--s-2) var(--s-6);
    background: var(--c-white);
    border: 0;
    border-radius: var(--rad-card);
    font-family: var(--ff-text);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-text);
    color: var(--c-petrol);
    box-sizing: border-box;
    -webkit-appearance: none;
            appearance: none;
}

#userForm input::placeholder,
#userForm textarea::placeholder {
    color: var(--c-petrol-50);
    opacity: 1; /* Firefox dims placeholders by default; pin to the token. */
}

#userForm input:focus,
#userForm textarea:focus {
    outline: var(--bw-marker) solid var(--c-wasser);
    outline-offset: 0;
}

#userForm textarea {
    min-height: 134px;
    resize: vertical;
}


/* --- Anrede radio group -------------------------------------------------- */

/* The Anrede block is row 1 of the LEFT column; Telefon is row 1 of the
   RIGHT column. To keep row 2 (Vor-/Nachname ↔ E-Mail) aligned across the
   columns, the short radio row must occupy the same height as an input box.
   Input box height = vertical padding (2 × --s-2) + one line of body text
   (--fs-body × --lh-text) = 20 + 34 = 54 px, expressed as a calc so it
   tracks the tokens instead of hardcoding 54 px.

   Figma shows the "Anrede" caption INLINE with the three radios on a single
   line, so this block stays a nowrap flex row: caption (intrinsic width) +
   radio group, separated by --s-5. This overrides the generic full-width
   caption behaviour used by the placeholder-only text fields. */
#userForm .rsform-block-anrede {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--s-5);
    min-height: calc(2 * var(--s-2) + var(--fs-body) * var(--lh-text));
}

#userForm .rsform-block-anrede .formControlLabel {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

#userForm .rsform-block-anrede .formControls {
    flex: 1 1 auto;
}

#userForm .rsfp-fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-5);
    margin: 0;
    padding: 0;
    border: 0;
}

#userForm .form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
}

/* Custom 16 px ring (Figma Ellipse8): petrol outline, filled petrol when
   checked — same recipe as mod_serenade_contact_form for visual parity. */
#userForm .form-check-input,
#userForm input[type="radio"],
#userForm input[type="checkbox"] {
    -webkit-appearance: none;
            appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    background: transparent;
    border: var(--bw-marker) solid var(--c-petrol);
    border-radius: var(--rad-dot);
    cursor: pointer;
    vertical-align: middle;
    transition: background var(--tr-fast);
}

#userForm input[type="checkbox"] {
    border-radius: var(--bw-marker);
}

#userForm .form-check-input:checked,
#userForm input[type="radio"]:checked,
#userForm input[type="checkbox"]:checked {
    background: var(--c-petrol);
}

#userForm .form-check-input:focus-visible,
#userForm input[type="radio"]:focus-visible,
#userForm input[type="checkbox"]:focus-visible {
    outline: var(--bw-marker) solid var(--c-wasser);
    outline-offset: var(--s-1);
}

#userForm .form-check-label {
    margin: 0;
    font-family: var(--ff-text);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-text);
    color: var(--c-petrol);
    cursor: pointer;
}


/* --- Submit button ("Senden") -------------------------------------------- */

#userForm .rsform-submit-button,
#userForm button[type="submit"],
#userForm .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--s-2) var(--s-8);
    background: var(--c-petrol);
    color: var(--c-white);
    border: 0;
    border-radius: var(--rad-card);
    font-family: var(--ff-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: var(--lh-display);
    cursor: pointer;
    transition: background var(--tr-base);
    -webkit-appearance: none;
            appearance: none;
}

#userForm .rsform-submit-button:hover,
#userForm button[type="submit"]:hover,
#userForm .btn-primary:hover,
#userForm .rsform-submit-button:focus-visible,
#userForm button[type="submit"]:focus-visible,
#userForm .btn-primary:focus-visible {
    background: var(--c-wasser);
    outline: none;
}


/* --- Validation messages ------------------------------------------------- */
/* RSForm renders a neutral ".formNoError" hint next to each field that should
   be invisible until validation fails (when RSForm swaps it to ".formError").
   The template doesn't ship RSForm's frontend CSS, so we hide the neutral
   state and style the error state in a brand-consistent way. */

#userForm .formNoError {
    display: none;
}

#userForm .formError {
    display: block;
    margin-top: var(--s-1);
    font-family: var(--ff-text);
    font-weight: var(--fw-regular);
    font-size: var(--fs-small);
    line-height: var(--lh-text);
    color: var(--c-schilf);
}

/* RSForm's own visually-hidden helper for the empty <legend>. */
#userForm .rsfp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --- Responsive ---------------------------------------------------------- */
/* Below the tablet breakpoint the two layout columns stack. Inputs already
   fill their column, so only the column flex-basis needs to go full-width. */

@media (max-width: 768px) {
    #userForm .row {
        gap: var(--s-3);
    }

    #userForm .col-md-6 {
        flex: 1 1 100%;
    }

    #userForm .rsfp-fieldset {
        gap: var(--s-3);
    }

    /* Columns are stacked now, so the cross-column height match is no longer
       needed — drop the min-height and let the inline Anrede row wrap if the
       caption + three radios get tight on a narrow viewport. */
    #userForm .rsform-block-anrede {
        flex-wrap: wrap;
        min-height: 0;
    }
}