/*
 * 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 follows the page: currentColor for the part still to go, and
 * --hs-form-accent for the part already done, which a site sets to its own
 * accent and which falls back to currentColor where nobody has. That keeps
 * this file free of per-site colours - see hs-forms-fast-track.css, which is
 * where Fast Track's orange lives.
 */
.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;
}

/*
 * The part still to go is a translucent background, NOT opacity on the track.
 *
 * opacity applies to an element and everything inside it, so the fill sitting
 * in this box was drawn at the track's 0.25 as well: filled and unfilled came
 * out the same shade, and the bar read as one flat grey line that never
 * changed however far you got. It was reported as the progress bar missing,
 * which is exactly what it looked like - the markup, the width and the script
 * were all doing their job.
 *
 * The plain rgba first for anything that cannot do color-mix, and the mix
 * second so the bar follows the page's own text colour where it can.
 */
.hs-form-steps__track {
    height: 6px;
    border-radius: 3px;
    background: rgba(127, 127, 127, 0.35);
    background: color-mix(in srgb, currentColor 25%, transparent);
    overflow: hidden;
}

.hs-form-steps__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--hs-form-accent, currentColor);
    transition: width 0.25s ease-in-out;
}

/*
 * The phone box, with the country chooser inside it.
 *
 * HubSpot's mobile_phone widget drew one: a flag and a caret on the left of
 * the box, a hairline, then the number with its prefix already in it. That was
 * JavaScript inside a shadow DOM and none of it survived the capture - the
 * markup is rebuilt in forms/hs-field, switched on per field, and this is what
 * makes it one control instead of a select stacked on an input.
 *
 * HERE rather than in a per-site file, and this is the second time that
 * distinction has cost something: the rules first landed in
 * hs-forms-fast-track.css, scoped to the one form on a black page, so the same
 * widget on the J1 form - which sits on a white card on the webinar pages -
 * rendered with no layout at all. The field property is available to any form
 * on any of the five sites, so its shape belongs in the shared file and only
 * its colours belong per site.
 *
 * Every value below is the theme's own variable, so the box matches the fields
 * around it wherever it is drawn: 40px and a #ccc border on the language
 * sites, 52px and no border on Fast Track.
 */
.hs-form-phone {
    display: flex;
    align-items: stretch;
    height: var(--input-height);
    background: var(--field-bg);
    border: var(--field-border);
    border-color: var(--field-border-color);
    border-radius: var(--field-radius);
    overflow: hidden;
}

/*
 * The chooser: a flag and a caret, with the real select laid over them at zero
 * opacity.
 *
 * It IS a real select - the platform's own dropdown, its keyboard handling,
 * its typeahead by country name, and a label a screen reader reads - while
 * what shows through is what the original showed. Rendering the select itself
 * would put "Spain +34" in a box the original gives 70px to.
 */
.hs-form-phone__code {
    position: relative;
    flex: 0 0 70px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    /* The divider is its own value: a site that draws no border on a field
       still draws this one, because it is what makes the box read as two
       parts rather than one. */
    border-right: 1px solid var(--hs-form-phone-divider, rgba(127, 127, 127, 0.35));
    background: var(--select-arrow) no-repeat right 8px center;
    background-size: 16px;
    cursor: pointer;
}

.hs-form-phone__flag {
    font-size: 1.4em;
    line-height: 1;
    /* Where the platform has no flag glyph - Windows has never shipped one -
       the pair degrades to the two ISO letters, which must not push the caret
       out of the box. */
    max-width: 26px;
    overflow: hidden;
}

.hs-form-phone__country {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* The ring belongs to the box, not to the invisible select inside it. */
.hs-form-phone:focus-within {
    outline: 1px solid var(--field-focus, currentColor);
}

.hs-form .hs-form-phone .hs-input {
    flex: 1 1 auto;
    background: none;
    border: 0;
    border-radius: 0;
    height: 100%;
    /* The theme's rule that makes a field fill its column would make this one
       fill the box and push the chooser out of it. */
    width: auto;
}

.hs-form .hs-form-phone .hs-input:focus {
    outline: 0;
}

/*
 * The date box, and the calendar that opens under it.
 *
 * HubSpot's own date field was a text box reading "MM - DD - YYYY" with a
 * datepicker behind it; the box survived the capture and the picker did not,
 * so this is the picker rebuilt - see the script in forms/hs-form for what it
 * does and why it holds the date as eight slots rather than as text.
 *
 * HERE rather than in a per-site file, for the reason the phone widget's rules
 * are here: any form on any of the five sites can carry a date field, so the
 * shape belongs in the shared file and only the colours belong per site. Every
 * value below is the theme's own variable, so the box matches the fields
 * around it wherever it is drawn.
 */
.hs-form-date {
    position: relative;
    display: flex;
    align-items: stretch;
    height: var(--input-height);
    background: var(--field-bg);
    border: var(--field-border);
    border-color: var(--field-border-color);
    border-radius: var(--field-radius);
}

.hs-form .hs-form-date .hs-input {
    flex: 1 1 auto;
    background: none;
    border: 0;
    border-radius: 0;
    height: 100%;
    /* The theme's rule that makes a field fill its column would make this one
       fill the box and push the calendar button out of it. */
    width: auto;
    /* The parts are selected a whole one at a time and typing overwrites them,
       so the box must not scroll a digit out of sight under the button. */
    min-width: 0;
}

.hs-form .hs-form-date .hs-input:focus {
    outline: 0;
}

/* The ring belongs to the box, not to the input inside it. */
.hs-form-date:focus-within {
    outline: 1px solid var(--field-focus, currentColor);
}

/*
 * The button that opens the calendar.
 *
 * Square, the height of the box, and carrying the icon as currentColor so it
 * follows the text in the field rather than needing a colour of its own. It is
 * not a .hs-button and must not pick up the theme's rules for one, which is
 * why it resets padding and background rather than inheriting them.
 */
.hs-form-date__open {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--input-height);
    padding: 0;
    border: 0;
    background: none;
    color: var(--input-color, currentColor);
    opacity: 0.65;
    cursor: pointer;
}

.hs-form-date__open:hover,
.hs-form-date__open[aria-expanded="true"] {
    opacity: 1;
}

/*
 * The panel.
 *
 * Under the box and over everything else on the page - the fields below it are
 * in normal flow and would otherwise sit on top. It is anchored to the left of
 * the field and allowed to be narrower than one, because these fields are half
 * a row wide on a wide screen and the whole row on a phone.
 */
.hs-form-date__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    width: 300px;
    max-width: 100vw;
    padding: 12px;
    background: var(--hs-form-date-bg, #fff);
    color: var(--hs-form-date-color, #33475b);
    border: 1px solid var(--hs-form-date-border, rgba(127, 127, 127, 0.35));
    border-radius: var(--field-radius, 4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font: var(--input-font, inherit);
}

/*
 * The header: an arrow, the month, the year, an arrow.
 *
 * The two dropdowns are the point of the whole panel. A birthday is twenty to
 * sixty years back, and a calendar that only steps a month at a time asks for
 * hundreds of clicks to reach one; picking the year is what makes this usable
 * for the only date these forms ask for.
 */
.hs-form-date__head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.hs-form-date__select {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 22px 0 8px;
    color: inherit;
    font: inherit;
    line-height: 34px;
    background: transparent var(--select-arrow) no-repeat right 4px center;
    background-size: 14px;
    border: 1px solid var(--hs-form-date-border, rgba(127, 127, 127, 0.35));
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
}

/* The year is four digits and the month is a word; without this they share the
   space equally and September is clipped. */
.hs-form-date__select:last-of-type {
    flex: 0 0 5.5em;
}

.hs-form-date__step {
    flex: 0 0 28px;
    height: 34px;
    padding: 0;
    color: inherit;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.hs-form-date__step:hover {
    background: var(--hs-form-date-hover, rgba(127, 127, 127, 0.14));
}

.hs-form-date__weekdays,
.hs-form-date__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.hs-form-date__weekdays {
    margin-bottom: 2px;
    font-size: 12px;
    text-align: center;
    opacity: 0.6;
}

.hs-form-date__day {
    height: 34px;
    padding: 0;
    color: inherit;
    font: inherit;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.hs-form-date__day--empty {
    cursor: default;
}

.hs-form-date__day:hover {
    background: var(--hs-form-date-hover, rgba(127, 127, 127, 0.14));
}

/* Today is outlined, the chosen day is filled: two states that have to be
   told apart at a glance and cannot both be a background. */
.hs-form-date__day.is-today {
    box-shadow: inset 0 0 0 1px currentColor;
}

.hs-form-date__day.is-picked {
    color: var(--hs-form-date-picked-text, #fff);
    background: var(--hs-form-accent, currentColor);
}

/*
 * 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;
}

/*
 * One row for both ways out of a page: back on the left, on to the next page
 * or Submit on the right, the way HubSpot showed them.
 *
 * flex-end with the back button pushed over by its own auto margin, rather
 * than space-between, because a first page has nothing on the left and its
 * Next belongs on the right regardless. Wrapping so the pair stacks instead
 * of shrinking on a narrow screen.
 *
 * The back button is a real button and carries the same classes as Submit, so
 * the theme's own .hs-button rules paint the two the same. It was a small
 * underlined link, which put the least prominent control on the page next to
 * the most prominent one and looked nothing like the form it replaced.
 */
.hs-form-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    clear: both;
}

.hs-form-nav .hs-form-back {
    margin-right: auto;
}

/* HubSpot's own wrapper around the send button: a flex item now, so it brings
   no margin of its own into the row. */
.hs-form-nav .hs_submit {
    margin: 0;
}

/* 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;
    }
}