/* ============================================================================
   HubSpot Forms — Dark-background styling (shared, site-wide)
   ----------------------------------------------------------------------------
   PURPOSE
     Single source of truth for styling HubSpot forms embedded on this site's
     dark-themed pages. Replaces the per-page <style> blocks.

   APPLIES TO
     The INLINE "developer" embed only — i.e. forms rendered with
       <script src="https://js.hsforms.net/forms/embed/developer/<portal>.js" defer></script>
       <div class="hs-form-html" data-form-id="..." data-portal-id="..." data-region="na1"></div>
     These render inline (no iframe) using the .hs-form-html container + hsfc-* classes,
     so page CSS can reach them. It does NOT reach the classic iframe embed
     (js.hsforms.net/forms/embed/<portal>.js) — that's walled off cross-origin.

   LOAD ORDER (important)
     Reference this file AFTER homestyle.css. The site's homestyle.css sets a global
       input, select, textarea { color: white }  AND  input:focus { color: white }
     which is why typed text turned white while focused. The :focus overrides below
     (with !important + -webkit-text-fill-color) defeat it; loading later is the safe
     tiebreaker for any equal-specificity !important clash.

   SCOPE NOTE
     Every form on the site is currently on a dark background, so the rules target
     .hs-form-html directly. If a form is ever placed on a LIGHT background, the white
     label/heading rules would make text invisible there. In that case, add a wrapper
     class (e.g. class="dark-form") to the dark pages and prefix the dark rules with
     ".dark-form " instead of styling .hs-form-html globally.

   Page dark background reference: #212d3a
   ============================================================================ */


/* ============================================================
   Headings & labels — white so they show on the dark bg
   ============================================================ */
.hs-form-html .hsfc-Heading,
.hs-form-html h1,
.hs-form-html h2,
.hs-form-html h3,
.hs-form-html h4 {
    color: #ffffff !important;
}

.hs-form-html .hsfc-FieldLabel,
.hs-form-html label {
    color: #ffffff !important;
}

/* Field label weight: medium instead of bold */
.hs-form-html .hsfc-FieldLabel {
    font-weight: 500 !important;
}

/* Radio / checkbox option text */
.hs-form-html .hsfc-CheckboxRadioInput__Label,
.hs-form-html .hsfc-FieldRow__Item label {
    color: #ffffff !important;
}

/* Help / description text — lighter grey */
.hs-form-html .hsfc-FieldDescription,
.hs-form-html .hsfc-HelpText,
.hs-form-html small,
.hs-form-html p {
    color: #d9d9d9 !important;
}

/* Rich text / plain text blocks */
.hs-form-html .hsfc-Text,
.hs-form-html .hsfc-RichText,
.hs-form-html .hsfc-RichText p {
    color: #ffffff !important;
}

/* Required asterisk */
.hs-form-html .hsfc-Required,
.hs-form-html .hsfc-FieldLabel__Required {
    color: #ff6b6b !important;
}

/* Validation error messages */
.hs-form-html .hsfc-FieldError,
.hs-form-html .hsfc-ErrorMessage {
    color: rgb(229 21 32) !important;
}

/* Catch-all safety net for stray form text */
.hs-form-html {
    color: #ffffff;
}


/* ============================================================
   INPUT TEXT — must stay DARK (inputs have light backgrounds)
   The :focus variants override homestyle.css's input:focus { color: white }.
   File inputs are EXCLUDED via :not([type="file"]) and handled separately below.
   ============================================================ */
.hs-form-html input:not([type="file"]),
.hs-form-html textarea,
.hs-form-html select,
.hs-form-html input:not([type="file"]):focus,
.hs-form-html textarea:focus,
.hs-form-html select:focus,
.hs-form-html .hsfc-TextInput,
.hs-form-html .hsfc-TextInput:focus {
    color: #212d3a !important;
    -webkit-text-fill-color: #212d3a !important;
}

/* Placeholder text — medium grey */
.hs-form-html input::placeholder,
.hs-form-html textarea::placeholder {
    color: #6b7785 !important;
}


/* ============================================================
   FILE INPUT
   - "No file chosen" / selected filename / status text = white
     (sits on transparent => dark page bg)
   - "Choose File" button label = dark (sits on light grey button)
   ============================================================ */
.hs-form-html input[type="file"],
.hs-form-html .hsfc-FileInput {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* File upload status messages ("Uploading...", "Upload complete", etc.)
   render transiently inside the FileField container — keep them light */
.hs-form-html .hsfc-FileField,
.hs-form-html .hsfc-FileField span,
.hs-form-html .hsfc-FileField div,
.hs-form-html .hsfc-FileField p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* "Choose File" button portion = dark text on its light grey bg */
.hs-form-html input[type="file"]::file-selector-button,
.hs-form-html .hsfc-FileInput::file-selector-button,
.hs-form-html .hsfc-FileField input[type="file"]::file-selector-button {
    color: #212d3a !important;
    -webkit-text-fill-color: #212d3a !important;
}
/* WebKit / older Chrome-Safari fallback */
.hs-form-html input[type="file"]::-webkit-file-upload-button,
.hs-form-html .hsfc-FileInput::-webkit-file-upload-button,
.hs-form-html .hsfc-FileField input[type="file"]::-webkit-file-upload-button {
    color: #212d3a !important;
    -webkit-text-fill-color: #212d3a !important;
}


/* ============================================================
   PHONE FIELD country selector (flag + "US" code + caret)
   Sits on a light background => needs dark text/caret
   ============================================================ */
.hs-form-html .hsfc-PhoneInput__FlagAndCaret,
.hs-form-html .hsfc-PhoneInput__FlagAndCaret * {
    color: #212d3a !important;
    -webkit-text-fill-color: #212d3a !important;
}
.hs-form-html .hsfc-PhoneInput__FlagAndCaret__Caret {
    border-top-color: #212d3a !important;
    color: #212d3a !important;
}


/* ============================================================
   FORM PADDING
   HubSpot wraps the form content in .hsfc-Step__Content with a
   flat 40px padding on all sides. Reduce it here.
   Set to 0 for flush, or pick your own value.
   ============================================================ */
.hs-form-html .hsfc-Step__Content {
    padding: 16px !important;   /* HubSpot default is 40px */
}


/* ============================================================
   INPUT SHAPE — rounded corners + height
   Rounds all text fields, textarea and select, and gives them a
   taller, more comfortable height via padding. The phone field is
   a composite (country-selector button + number input), so its two
   halves are rounded on their OUTER corners only — keeping it one
   clean rounded box rather than two.
   Tune: change 6px (radius) and 12px/14px (padding -> box height).
   ============================================================ */
.hs-form-html .hsfc-TextInput,
.hs-form-html textarea,
.hs-form-html select {
    border-radius: 6px !important;
    padding: 6px 12px !important;   /* vertical padding sets the box height (~35px; HubSpot default ~43px) */
}

/* Phone field: keep selector + number as one rounded box */
.hs-form-html .hsfc-PhoneInput__FlagAndCaret {
    border-radius: 6px 0 0 6px !important;   /* left corners only */
}
.hs-form-html .hsfc-PhoneInput .hsfc-TextInput {
    border-radius: 0 6px 6px 0 !important;   /* right corners only */
}

/* Footer "Get in Touch" form only:
   - top padding removed so the form heading top-aligns with the other
     footer column titles,
   - side padding removed so fields span the full column width (~255px),
     matching the 256px inline reCAPTCHA badge.
   Scoped to the footer so popup and other HubSpot forms are untouched. */
footer .hs-form-html .hsfc-Step__Content,
.footer-section .hs-form-html .hsfc-Step__Content {
    padding: 0 0 16px 0 !important;
}