/* ==========================================================================
   formlib-site.css - the form's LOOK for this site. Load it after the site's own CSS
   and after formlib.css, so these rules take over from the site-wide form styles.
   Every rule below is scoped to .formlib-form (the form). The thank-you page's rules are in formlib.css.
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: styled "Choose Files" button
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: added --formlib-counter-full-bg (counter highlight at the limit)
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: --formlib-section renamed --formlib-legend (section legends only)
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: small screens keep the box color (--formlib-box-bg-small) and drop only the border; bottom margin 3em
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: added --formlib-processing (the "please wait" text that replaces the Send button)
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: "Choose Files" button hover color (--formlib-file-btn-hover)
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: added --formlib-prompt-bg (the "check the box above" prompt background)
   (Tue, 10/06/2026) Claude Opus 5.5 - Revised: header note corrected (the thank-you page no longer uses this file)
   ========================================================================== */

/* (Mon, 10/05/2026) Claude Opus 5.5 - COLORS: the only values to change per site (greyscale starter set)
   Contrast checked: text/hint/error/legend at least 4.5:1 on the box; field borders, checkbox tint, and focus ring at least 3:1 */
:root {
   --formlib-text:#000;          /* all form text */
   --formlib-hint:#4a4a4a;       /* hints, character counter */
   --formlib-counter-full-bg:#fff3a8; /* highlight behind the counter when the limit is reached */
/* --formlib-box-bg:#f2f2f2; */   /* form box background */
   --formlib-box-bg:#e8f8fe;     /* form box background */
   --formlib-box-bg-small:var(--formlib-box-bg); /* box background on small phones (480px and under): same as above unless
                                    replaced with a hex color, or with transparent to show the page background */
   --formlib-box-border:#b3b3b3; /* form box border */
   --formlib-field-bg:#fff;      /* fields, error summary, file remove buttons */
   --formlib-field-border:#767676; /* field borders - keep at least 3:1 against the box and the field */
   --formlib-file-btn-hover:#cfe3f7; /* "Choose Files" button background on hover (text stays --formlib-text; #000 on this is 15:1) */
/* --formlib-legend:#222; */     /* section legends (was --formlib-section) */
   --formlib-legend:#b11116;     /* section legends only: the heading of each formlib-section fieldset. Field labels and
                                    checkbox/radio question legends stay --formlib-text */
   --formlib-rule:#8c8c8c;       /* line under section headings */
   --formlib-accent:#333;        /* checkbox and radio tint */
/* --formlib-btn:#333; */        /* Send button, ready */
   --formlib-btn:#1457a3;           /* Send button, ready */
   --formlib-btn-hover:#000;     /* Send button hover sweep */
   --formlib-btn-off:#767676;    /* Send button, waiting for verification - keep at least this dark */
   --formlib-btn-text:#fff;      /* Send button text and icons */
   --formlib-processing:#1a7f37; /* "Please wait... sending your form now" in place of the Send button - keep at least 4.5:1
                                    against the box (#1a7f37 is 4.7:1 on #e8f8fe, 5.1:1 on white) */
   --formlib-prompt-bg:#ffe873;  /* background of "Please check the box above..." in place of the Send button (black text 17:1,
                                    red arrow 5.9:1) */
   --formlib-error:#b00020;      /* errors, required asterisk */
   --formlib-focus:#000;         /* keyboard focus ring */
}

/* (Mon, 10/05/2026) Claude Opus 5.5 - the form box: border and rounded corners; on small phones, no border and less padding
   (Mon, 10/05/2026) Claude Opus 5.5 - Revised: bottom margin 3em to clear mobile browser toolbars; small phones keep a background color */
.formlib-form {box-sizing:border-box; max-width:40em; margin:0 0 3em; padding:1.5em 1.75em; border:1px solid var(--formlib-box-border); border-radius:8px; color:var(--formlib-text); background-color:var(--formlib-box-bg); font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:1rem; line-height:1.45; text-align:left;}
.formlib-form *, .formlib-form *::before, .formlib-form *::after {box-sizing:border-box;}
:where(.formlib-form) p {margin:0 0 1em; line-height:1.45;}   /* :where() keeps this low-priority, so formlib.css rules for specific paragraphs still apply */
@media (max-width:480px) {.formlib-form {padding:1.25em 1em; border:0; background-color:var(--formlib-box-bg-small);}}

/* (Mon, 10/05/2026) Claude Opus 5.5 - sections (fieldset + legend around a group of related fields) */
.formlib-section {min-width:0; margin:0 0 1.75em; padding:0; border:0;}
.formlib-section > legend {display:block; width:100%; margin:0 0 1em; padding:0 0 .3em; border-bottom:2px solid var(--formlib-rule); color:var(--formlib-legend); font-size:1.25em; font-weight:bold; line-height:1.3;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - one field: label, hint, input, error */
.formlib-field {display:flex; flex-direction:column; margin:0 0 1.25em;}
.formlib-field > label {display:block; margin:0 0 .35em; padding:0; color:var(--formlib-text); font-size:1em; font-weight:bold; text-align:left;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - text fields, drop-downs, text boxes: 16px minimum so phones don't zoom in when tapped */
.formlib-form input, .formlib-form select, .formlib-form textarea, .formlib-form button {font-family:inherit; line-height:1.3;}
.formlib-form input[type="text"], .formlib-form input[type="email"], .formlib-form input[type="tel"], .formlib-form input[type="url"], .formlib-form input[type="date"], .formlib-form input[type="number"], .formlib-form select, .formlib-form textarea {display:block; width:100%; max-width:100%; min-height:2.75em; margin:0; padding:.55em .65em; border:1px solid var(--formlib-field-border); border-radius:4px; color:var(--formlib-text); background-color:var(--formlib-field-bg); font-size:max(16px, 1em); box-shadow:none;}
.formlib-form input[type="date"] {max-width:14em;}
.formlib-form input.formlib-short {max-width:8em;}
.formlib-form textarea {min-height:9em; resize:vertical;}
.formlib-form input[type="file"] {display:block; align-self:flex-start; width:auto; max-width:100%; margin:0; padding:0; border:0; border-radius:4px; color:var(--formlib-text); background:none; font-size:max(16px, 1em);}

/* (Mon, 10/05/2026) Claude Opus 5.5 - the browser's own "Choose Files" button, restyled to match the fields (the text beside it stays the browser's) */
.formlib-form input[type="file"]::file-selector-button {min-height:2.75em; margin:0 .75em 0 0; padding:.55em 1em; border:1px solid var(--formlib-field-border); border-radius:4px; color:var(--formlib-text); background-color:var(--formlib-field-bg); font:inherit; font-weight:bold; cursor:pointer;}
.formlib-form input[type="file"]::-webkit-file-upload-button {min-height:2.75em; margin:0 .75em 0 0; padding:.55em 1em; border:1px solid var(--formlib-field-border); border-radius:4px; color:var(--formlib-text); background-color:var(--formlib-field-bg); font:inherit; font-weight:bold; cursor:pointer;}
/* (Tue, 10/06/2026) Claude Opus 5.5 - hover: tinted background and a darker border. The two button names need separate rules
   (a browser that doesn't know one of them ignores the whole rule) */
.formlib-form input[type="file"]::file-selector-button {transition:background-color .2s, border-color .2s;}
.formlib-form input[type="file"]:hover::file-selector-button {border-color:var(--formlib-text); background-color:var(--formlib-file-btn-hover);}
.formlib-form input[type="file"]:hover::-webkit-file-upload-button {border-color:var(--formlib-text); background-color:var(--formlib-file-btn-hover);}
@media (prefers-reduced-motion: reduce) {.formlib-form input[type="file"]::file-selector-button {transition:none;}}

/* (Mon, 10/05/2026) Claude Opus 5.5 - fields with an error: red border (restated here so the field rules above don't hide it) */
.formlib-form input[aria-invalid="true"], .formlib-form select[aria-invalid="true"], .formlib-form textarea[aria-invalid="true"] {border-color:var(--formlib-error); outline:2px solid var(--formlib-error); outline-offset:0;}
.formlib-form input[type="checkbox"][aria-invalid="true"], .formlib-form input[type="radio"][aria-invalid="true"] {outline-offset:2px;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - one clear focus ring on every control (keyboard and tap) */
.formlib-form input:focus-visible, .formlib-form select:focus-visible, .formlib-form textarea:focus-visible {outline:3px solid var(--formlib-focus); outline-offset:2px; box-shadow:none;}
.formlib-form input[type="text"]:focus, .formlib-form input[type="email"]:focus, .formlib-form input[type="tel"]:focus, .formlib-form input[type="url"]:focus, .formlib-form input[type="date"]:focus, .formlib-form select:focus, .formlib-form textarea:focus {outline:3px solid var(--formlib-focus); outline-offset:2px; box-shadow:none;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - radio and checkbox questions (fieldset + legend), larger tap areas, site tint */
.formlib-group {min-width:0; margin:0 0 1.25em; padding:0; border:0;}
.formlib-group > legend {margin:0 0 .35em; padding:0; color:var(--formlib-text); font-size:1em; font-weight:bold; text-align:left;}
.formlib-option {display:flex; align-items:flex-start; margin:.1em 0;}
.formlib-option input[type="checkbox"], .formlib-option input[type="radio"] {flex-shrink:0; width:1.25em; height:1.25em; margin:.35em .6em 0 0; accent-color:var(--formlib-accent); cursor:pointer;}
.formlib-option label {padding:.25em 0; color:var(--formlib-text); font-size:1em; font-weight:normal; text-align:left; cursor:pointer;}
.formlib-field > .formlib-option label {font-weight:bold;}

/* (Mon, 10/05/2026) Claude Opus 5.5 - verification widget and Send button area */
.formlib-turnstile {margin:0 0 .75em;}
#formlib-ts-note {margin:0 0 1em;}

/* THANK YOU PAGE RULES in /formlib.css */