/* ================================================================= */
/* FORMS (forms.css)                                                 */
/* Restyles every Fluent Forms form (contact forms, sign-up forms,   */
/* and any form built later) to match the REGEN dark theme.          */
/* Forms are built in wp-admin → Fluent Forms and placed on a page   */
/* with their shortcode, e.g. [fluentform id="3"]. Submissions are   */
/* saved under Fluent Forms → Entries.                               */
/*                                                                   */
/* Fluent Forms ships its own light-themed CSS, so most rules here   */
/* start with "body .fluentform": one step more specific than the    */
/* plugin's own rules, so ours win no matter which file loads last.  */
/* Because these rules cover every form, colors picked inside the    */
/* Fluent Forms editor (e.g. a button color) are overridden on       */
/* purpose, so every form always matches the site.                   */
/* ================================================================= */

/* ---------------------------------------------------------------- */
/* THE FORM PANEL                                                    */
/* ---------------------------------------------------------------- */

/* The outer box around each form (Fluent Forms gives every form the "fluentform" class) */
.fluentform {
    /* Fluent Forms colors several parts of a form from these variables (CSS variables are values */
    /* stored under a name). Setting them here, on the form itself, swaps in the REGEN palette for */
    /* everything that uses them, including parts we don't style by hand below. */
    --fluentform-primary: var(--rsn-signal); /* Highlight color (Fluent's blue) → Signal */
    --fluentform-secondary: var(--rsn-ice); /* Field text color (Fluent's gray) → Ice */
    --fluentform-danger: var(--rsn-alert); /* Error and required-asterisk red → Alert */
    --fluentform-border-color: var(--rsn-drive); /* Field border → Drive, like the wp-admin fields */
    --fluentform-border-radius: 4px; /* Same corner rounding as the theme's buttons */

    color-scheme: dark; /* Tells the browser this area is dark, so built-in pieces it draws itself */
                        /* (dropdown arrows and lists, date pickers, scrollbars) come out dark too */
    max-width: 720px; /* A comfortable width for filling in fields; a full 1100px-wide form is hard to scan */
    background-color: var(--rsn-depth); /* Depth — the same raised panel color as the article cards */
    padding: 32px; /* Breathing room between the panel's edge and the fields */
    border-radius: 6px; /* Same rounded corners as the cards, banner and menu bar */
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, the theme's UI/body font */
    color: var(--rsn-ice); /* Ice — default text color for anything inside the form */
}

/* Space between one field and the next */
body .fluentform .ff-el-group {
    margin-bottom: 22px;
}

/* ---------------------------------------------------------------- */
/* LABELS                                                            */
/* ---------------------------------------------------------------- */

/* The name above each field (e.g. "Email", "Favorite League") */
body .fluentform .ff-el-input--label label {
    color: var(--rsn-ice); /* Ice — readable on the dark panel */
    font-family: var(--rsn-font-dm-sans); /* DM Sans, matching the rest of the form */
    font-weight: 600; /* Semi-bold, so labels stand out from what visitors type */
    font-size: 14px;
    margin-bottom: 6px; /* Small gap between the label and its field */
}
/* The red "*" after a required field's label already uses --fluentform-danger (set to Alert above) */

/* ---------------------------------------------------------------- */
/* TEXT FIELDS, DROPDOWNS AND MESSAGE BOXES                          */
/* ---------------------------------------------------------------- */

/* Every box a visitor types into or picks from. Fluent Forms gives them all the "ff-el-form-control" class */
body .fluentform .ff-el-form-control {
    background-color: var(--rsn-carbon); /* Carbon — darker than the panel, so each field reads as a "slot" */
    color: var(--rsn-ice); /* Ice — what the visitor types is light and readable */
    border: 1px solid var(--rsn-drive); /* Drive — the brand-colored outline used on the wp-admin fields too */
    border-radius: 4px; /* Same rounding as the buttons */
    font-family: var(--rsn-font-dm-sans); /* The plugin uses the computer's system font; switch to the theme's */
    font-size: var(--rsn-type-body-size); /* 15px, the Body role size */
    padding: 10px 12px; /* Roomy inside spacing, easy to tap on a phone */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Smoothly animate the focus ring below */
}

/* The field the visitor is currently in */
body .fluentform .ff-el-form-control:focus {
    background-color: var(--rsn-carbon); /* Fluent Forms turns focused fields white; keep them dark */
    color: var(--rsn-ice);
    border-color: var(--rsn-signal); /* Signal — clearly marks the active field */
    box-shadow: 0 0 0 1px var(--rsn-signal); /* A thin Signal glow, thickening the outline */
    outline: none; /* The glow replaces the browser's default focus outline */
}

/* Hint text shown inside an empty field (e.g. "you@example.com") */
body .fluentform .ff-el-form-control::placeholder {
    color: rgba(255, 255, 255, 0.45); /* Ice at 45% — visible, but clearly a hint and not a real answer */
}

/* The list that drops open from a dropdown (e.g. NFL, NBA, MLB...) */
body .fluentform select.ff-el-form-control option {
    background-color: var(--rsn-depth); /* Some browsers draw this list white; keep it dark */
    color: var(--rsn-ice);
}

/* ---------------------------------------------------------------- */
/* CHECKBOXES AND RADIO BUTTONS                                      */
/* ---------------------------------------------------------------- */

/* The text beside each checkbox or radio button (e.g. "Breaking news alerts") */
body .fluentform .ff-el-form-check-label {
    color: var(--rsn-ice); /* Ice — readable on the dark panel */
    font-size: var(--rsn-type-body-size); /* 15px, the Body role size */
    cursor: pointer; /* Clicking the text ticks the box too, so show the pointing hand */
}

/* Space between one option and the next */
body .fluentform .ff-el-form-check {
    margin-bottom: 6px;
}

/* The boxes and circles themselves */
body .fluentform input[type="checkbox"],
body .fluentform input[type="radio"] {
    accent-color: var(--rsn-signal); /* Signal — the tick/dot fill color when chosen */
    width: 16px; /* A little bigger than the browser default, easier to hit */
    height: 16px;
    margin-right: 6px; /* Space before the option's text */
    vertical-align: -2px; /* Line the box up with the middle of the text beside it */
}

/* The "I agree to..." consent text */
body .fluentform .ff_t_c {
    color: var(--rsn-ice);
}

/* ---------------------------------------------------------------- */
/* HELP TEXT AND ERRORS                                              */
/* ---------------------------------------------------------------- */

/* Extra guidance under a field, set in the Fluent Forms editor as "Help Message" */
body .fluentform .ff-el-help-message {
    color: rgba(255, 255, 255, 0.7); /* Ice at 70% — readable, but quieter than the labels */
    font-size: 13px;
    font-style: normal; /* The plugin uses italics; plain text is easier to read on dark */
}

/* "This field is required" messages under a field, and the summary of errors under the form */
body .fluentform .text-danger,
.ff-errors-in-stack .error {
    color: var(--rsn-alert); /* Alert — the brand's "something needs attention" red */
    font-size: 13px;
}
/* A field with a problem also gets an Alert-red border, through --fluentform-danger set above */

/* ---------------------------------------------------------------- */
/* SUBMIT BUTTON                                                     */
/* ---------------------------------------------------------------- */

/* The "Send Message" / "Sign Up" button. "form .ff-btn.ff-btn-submit" is deliberately very specific: */
/* when a button color is picked in the Fluent Forms editor, the plugin writes a per-form rule */
/* (e.g. "form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit"), and this selector outranks it, */
/* so every form's button matches the site. */
body .fluentform form .ff-btn.ff-btn-submit {
    background-color: var(--rsn-signal); /* Signal — the primary brand color for main actions, like the Admin Login button */
    border: 1px solid var(--rsn-signal); /* Matching border so it reads as one solid shape */
    color: var(--rsn-ice); /* Ice — white label on the Signal fill */
    font-family: var(--rsn-font-dm-sans);
    font-weight: 600; /* Semi-bold, so the button text is easy to read */
    font-size: var(--rsn-type-body-size); /* 15px */
    padding: 10px 28px; /* Generous size makes it easy to click or tap */
    border-radius: 4px; /* Same rounding as the theme's other buttons */
    opacity: 1; /* The plugin fades buttons on hover; we change the color instead (below) */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover and keyboard-focus state */
body .fluentform form .ff-btn.ff-btn-submit:hover,
body .fluentform form .ff-btn.ff-btn-submit:focus {
    background-color: var(--rsn-drive); /* Drive — Signal's designated hover/pressed state */
    border-color: var(--rsn-drive);
    color: var(--rsn-ice);
    opacity: 1;
}

/* The row holding the button is the last thing in the panel, so drop the usual gap under it. */
/* Otherwise that gap plus the panel's padding leaves more space under the button than above the first field. */
body .fluentform .ff_submit_btn_wrapper {
    margin-bottom: 0;
}

/* Keyboard users get a visible ring around the button, so they can see where they are */
body .fluentform form .ff-btn.ff-btn-submit:focus-visible {
    outline: 2px solid var(--rsn-ice); /* Ice ring, clear against both the button and the panel */
    outline-offset: 2px; /* A small gap between the button and the ring */
}

/* ---------------------------------------------------------------- */
/* AFTER SUBMITTING                                                  */
/* ---------------------------------------------------------------- */

/* The confirmation that replaces the form once it's sent (e.g. "Thanks for reaching out!") */
.ff-message-success {
    background-color: var(--rsn-depth); /* Depth — the same panel look as the form it replaces */
    border: none; /* Remove the plugin's light-gray outline... */
    border-left: 4px solid var(--rsn-live); /* ...and use a Live-green stripe instead, the theme's "success/positive" color */
    border-radius: 6px;
    box-shadow: none; /* The plugin's soft shadow doesn't show on a dark page */
    color: var(--rsn-ice); /* Ice — readable message text */
    max-width: 720px; /* Same width as the form panel */
    padding: 20px 24px;
}

/* ---------------------------------------------------------------- */
/* SMALL SCREENS                                                     */
/* ---------------------------------------------------------------- */

@media (max-width: 600px) {
    /* Less padding around the panel, so the fields get as much of a phone's width as possible */
    .fluentform {
        padding: 20px;
    }
}