/*
 * The form layout HubSpot's JS used to inject at runtime.
 *
 * The pages carry HubSpot's own stylesheets (template_main.css et al) and
 * those style .hs-input, .hs-button and the field widths - but the rules that
 * put two fields side by side never lived in a file. HubSpot's forms script
 * wrote them into a <style> block when it mounted the form, scoped to a
 * per-instance class. With the script gone, our fields stacked in one column
 * and the form stopped looking like the one it replaced.
 *
 * These are those rules, taken from the live form on hosco.com (measured, not
 * guessed: fieldset max-width 500px, a two-column field 50% floated, .input
 * margin-right 8px) and rescoped from the instance class to .hs-form so they
 * apply to every captured form.
 */

.hs-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    max-width: 500px;
}

/* A fieldset is one row of floated fields; keep it from collapsing. */
.hs-form fieldset::after {
    content: "";
    display: table;
    clear: both;
}

.hs-form fieldset.form-columns-1 .hs-form-field {
    width: 100%;
    float: none;
}

.hs-form fieldset.form-columns-2 .hs-form-field {
    width: 50%;
    float: left;
}

.hs-form fieldset.form-columns-3 .hs-form-field {
    width: 32.7%;
    float: left;
}

.hs-form fieldset .input {
    margin-right: 8px;
}

.hs-form fieldset.form-columns-1 .hs-input {
    width: 95%;
}

.hs-form fieldset.form-columns-1 input[type="checkbox"],
.hs-form fieldset.form-columns-1 input[type="radio"] {
    width: auto;
}

.hs-form .hs-field-desc {
    width: 100%;
}

.hs-form .hs-richtext {
    word-break: break-word;
}

.hs-form .hs-button {
    white-space: pre-wrap;
}

.hs-form .hs-fieldtype-textarea.hs-input {
    resize: vertical;
}

/* Checkbox and radio groups: HubSpot's list, without the bullets. */
.hs-form .inputs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-form .inputs-list > li {
    display: block;
}

.hs-form .hs-form-booleancheckbox-display input,
.hs-form .hs-form-radio-display input {
    float: left;
    width: auto;
    margin-top: 4px;
}

.hs-form .hs-form-booleancheckbox-display > span,
.hs-form .hs-form-radio-display > span {
    display: block;
    margin-left: 20px;
}

.hs-form .hs-form-booleancheckbox-display p {
    margin: 0;
    display: inline;
}

/* The consent block, and its errors in HubSpot's red. */
.legal-consent-container .field.hs-form-field {
    margin-bottom: 8px;
}

.legal-consent-container .hs-error-msgs label {
    color: #f2545b;
}

/*
 * Below HubSpot's own breakpoint the columns stack, which is what the live
 * site does on a phone - without this a two-column row stays 50/50 and the
 * inputs become unusably narrow.
 */
@media (max-width: 400px) {
    .hs-form fieldset.form-columns-2 .hs-form-field,
    .hs-form fieldset.form-columns-3 .hs-form-field {
        float: none;
        width: 100%;
    }

    .hs-form fieldset.form-columns-2 .hs-input,
    .hs-form fieldset.form-columns-3 .hs-input {
        width: 95%;
    }
}

/*
 * Labels follow the page, not HubSpot's saved colour.
 *
 * Each form carries a labelTextColor from its HubSpot display options, and the
 * template CSS applies it as --labels-color. On Fast Track that value is #000,
 * set back when the form sat on a white HubSpot page. The migrated page has a
 * black background, so every label rendered black on black - present, correct,
 * and completely invisible. The first tester found it by selecting the page
 * text to make it appear.
 *
 * Inheriting instead of picking a colour is what makes this safe to put in a
 * stylesheet shared by five sites: the four language sites are light and their
 * labels stay dark, Fast Track is dark and its labels go light, and neither
 * needs a per-site override. Same reasoning for the choice text next to a
 * radio or checkbox.
 *
 * This file is loaded after the template CSS, so equal specificity wins.
 */
.hs-form .hs-form-field > label,
form .hs-form-field > label {
    color: inherit;
}

.inputs-list .hs-form-radio > label,
.inputs-list .hs-form-checkbox > label,
.inputs-list .hs-form-booleancheckbox > label {
    color: inherit;
}

/*
 * The submit button reacts to the pointer.
 *
 * It did not, and the reason is in HubSpot's own theme CSS:
 *
 *   .hs-button:hover, .button--primary:hover, ... {
 *       background-color: rgba(#null,0.0);
 *       color: rgba(#null,0.0);
 *       border-color: rgba(#null,0.0);
 *   }
 *
 * rgba(#null,0.0) is not a colour. Their compiler wrote #null where a theme
 * variable was unset, the browser throws the whole declaration away, and the
 * hover state silently does nothing - so the one control on the page that
 * definitely is a button was the one that did not look clickable. Josh spotted
 * it against the blog buttons, which hardcode a darker colour and do work.
 *
 * brightness() rather than a colour, because this file is shared by five sites
 * whose buttons are not the same colour: employers is blue, Fast Track orange.
 * Hardcoding either would fix one site and break the other, and the theme
 * variable that should have carried it is exactly the thing that is unset.
 *
 * :focus-visible gets the same treatment, so it is reachable by keyboard and
 * not only by mouse.
 */
.hs-form .hs-button {
    cursor: pointer;
    transition: filter 0.15s ease-in-out;
}

.hs-form .hs-button:hover,
.hs-form .hs-button:focus-visible {
    filter: brightness(0.88);
}

@media (prefers-reduced-motion: reduce) {
    .hs-form .hs-button {
        transition: none;
    }
}

/*
 * The two-page form: progress, Next, Back.
 *
 * HubSpot showed "1/2" over a bar that filled as you advanced, with Next at
 * the bottom right. None of that survived the capture, which read the rendered
 * DOM and saw one page, so this is rebuilt rather than restored.
 *
 * Colour comes from the button, not from a value written here. currentColor
 * and the accent are whatever the site already uses, so the bar is orange on
 * Fast Track and blue on the four language sites without a per-site override -
 * the same reasoning as the label colour above.
 */
.hs-form-steps {
    margin: 1.5rem 0 0.5rem;
}

.hs-form-steps__count {
    margin: 0 0 0.35rem;
    font-size: 0.9em;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.hs-form-steps__track {
    height: 6px;
    border-radius: 3px;
    background: currentColor;
    opacity: 0.25;
    overflow: hidden;
}

.hs-form-steps__fill {
    height: 100%;
    border-radius: 3px;
    background: currentColor;
    transition: width 0.25s ease-in-out;
}

/*
 * A checked radio or checkbox that actually looks checked.
 *
 * HubSpot's own theme marks the checked state with background: #ccc and a
 * white outline - built for a white page, where a pale grey box reads as
 * "filled in". Fast Track's theme is black, so #ccc on black and #fff on
 * black are both just "a light box"; the difference between checked and
 * unchecked survives in the accessibility tree and nowhere else. A visitor
 * clicking through sees no confirmation and, reasonably, clicks again or
 * assumes the form is broken.
 *
 * A dot on top, sized well inside the box, fixes it on any background: now
 * checked is "a box with something in it" rather than "a very slightly
 * different shade of the same box". currentColor rather than a fixed value,
 * so it follows whatever an input's own colour resolves to (a form control's
 * UA default, not the page's) - which in practice is dark, and reads clearly
 * against the light checked/unchecked box on every theme this form ships on.
 */
.hs-form .hs-form-radio-display input:checked,
.hs-form .hs-form-booleancheckbox-display input:checked {
    position: relative;
}

.hs-form .hs-form-radio-display input:checked::after,
.hs-form .hs-form-booleancheckbox-display input:checked::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: currentColor;
}

.hs-form-nav {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    clear: both;
}

.hs-form-nav--back {
    justify-content: flex-start;
    margin-top: 0.5rem;
}

.hs-form-back {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    opacity: 0.75;
    text-decoration: underline;
    font: inherit;
}

.hs-form-back:hover,
.hs-form-back:focus-visible {
    opacity: 1;
}

/* A page that is not the current one is gone, not merely transparent: its
   fields must not be tabbable, and `hidden` alone loses to the display the
   theme CSS sets on a div. */
.hs-form-page[hidden],
.hs-form-tail[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .hs-form-steps__fill {
        transition: none;
    }
}