/*
 * Fluent Forms in the look of the framework forms (.contact-form-grid in
 * base.css): labels, inputs, two columns on desktop, hint and consent text
 * small and muted, theme button.
 *
 * Fluent Forms' own default skin (fluentform-public-default.css) is switched
 * off in functions.php via the filter fluentform/load_default_public
 * (fluentform 6.2.15, app/Hooks/actions.php), so only its structural
 * stylesheet fluent-forms-public.css stays (columns, upload list, errors).
 * Inputs, labels and focus rings come from the global form rules in
 * base.css; this file only maps Fluent's markup onto them. Selectors start
 * with body: fluent-forms-public.css loads after the theme with equal
 * specificity (.fluentform .x), the extra type selector wins without !important.
 */
body .fluentform .ff-el-group { margin-bottom: var(--space-md); }
body .fluentform .ff-t-container { gap: var(--space-md); }
body .fluentform .ff-t-container .ff-el-group { margin-bottom: var(--space-md); }
body .fluentform .ff-t-cell { padding: 0; }
/* Fluent sets the label wrapper inline-block, so the line box of the larger
   body font adds height; block like the framework label in its flex column */
body .fluentform .ff-el-input--label { display: block; margin-bottom: 0.375rem; }
body .fluentform .ff-el-input--label label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    display: block;
    margin: 0;
}
/* Required marker like the framework label: " *" in text colour */
body .fluentform .ff-el-is-required.asterisk-right label::after {
    content: " *";
    color: var(--color-text);
    margin-left: 0;
}
body .fluentform .ff-el-form-control { display: block; }
body .fluentform .ff-el-help-message,
body .fluentform .nl-form-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: normal;
    margin: var(--space-2xs) 0 0;
}
body .fluentform .nl-form-hint { font-size: 0.85rem; margin: 0; }
body .fluentform .nl-form-consent {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

/* File upload: native-looking field box with the button inside, like the
   framework <input type=file>. */
body .fluentform .ff_file_upload_holder {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
}
body .fluentform .ff_upload_btn.ff-btn {
    font: inherit;
    font-size: var(--font-size-sm);
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    color: var(--color-text);
}
body .fluentform .ff_upload_btn.ff-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Errors: red border plus text (not colour alone, WCAG 1.4.1) */
body .fluentform .ff-el-is-error .ff-el-form-control { border-color: #c62828; box-shadow: 0 0 0 1px #c62828; }
body .fluentform .error.text-danger { color: #c62828; font-size: var(--font-size-sm); margin-top: var(--space-2xs); }

/* Submit: theme button (.btn .btn-primary is set in the form) */
body .fluentform .ff_submit_btn_wrapper { margin-top: var(--space-xs); }
body .fluentform .ff-btn-submit.btn { width: auto; }

/* Numbered form blocks in the framework look (fieldset.form-block in
   base.css: 1px frame, legend on the top line with counter). Fluent has no
   fieldset; the form builder marks the block: section break
   .nl-fb-start (h3.ff-el-section-title plus <hr>, fluentform 6.2.15
   Components/SectionBreak.php), rows .nl-fb, last row .nl-fb--last.
   Rows carry side borders and use padding instead of margin, so the
   frame runs through. */
body .fluentform form { counter-reset: form-block; }
body .fluentform .ff-el-section-break hr,
body .fluentform .ff-el-section-break .ff-section_break_desk:empty { display: none; }
body .fluentform .ff-el-section-break.nl-fb-start {
    counter-increment: form-block;
    margin: var(--space-md) 0 0;
    padding: 0 var(--space-lg) var(--space-sm);
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
body .fluentform .ff-el-section-title {
    display: inline-block;
    margin: 0 0 0 -0.6rem;
    padding: 0 0.6rem;
    transform: translateY(-50%);
    background: var(--color-bg);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--color-accent);
}
body .fluentform .ff-el-section-title::before {
    content: counter(form-block) ". ";
    color: var(--color-primary);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
body .fluentform .nl-fb {
    margin: 0;
    padding: 0 var(--space-lg) var(--space-md);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}
body .fluentform .nl-fb .ff-el-group { margin-bottom: 0; }
body .fluentform .nl-fb--last {
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    margin-bottom: var(--space-md);
}
.section--alt .fluentform .ff-el-section-title { background: var(--color-bg-soft); }

/* Success message after sending */
.ff-message-success {
    padding: var(--space-md);
    border-left: 4px solid var(--color-primary);
    background: var(--color-surface);
}
.ff-message-success p { margin: 0; }

/* Phone: one column like .contact-form-grid (the inline flex-basis of
   the cells has no effect in a column flexbox) */
@media (max-width: 640px) {
    body .fluentform .ff-t-container { flex-direction: column; gap: 0; }
}