/*
 * The Fast Track form that sits straight on the black page.
 *
 * Loaded by resources/views/landing.antlers.html for the fast-track site only,
 * after hs-forms.css. Everything here is a colour or a measurement off the
 * original, and neither is what hs-forms.css carries: that file is shared by
 * five sites and inherits from the page, so a value written there would fix
 * one site and break the other four.
 *
 * WHERE THE NUMBERS COME FROM. Three screenshots of the original v4 embed,
 * kept as the reference for this form: the two steps and the message after
 * sending. They are 1x, and in all three the form's content column is 958-960
 * px wide, which is what makes a pixel in them a pixel here. Everything below
 * that is a size rather than a colour was read off those images - the label
 * that is 16px and not the theme's 12px, the 52px boxes, the 42px gutter
 * between two half-width fields, the 16px progress bar, the 4px buttons - and
 * is written as the theme's own variable wherever the theme has one, so the
 * shape and the font stay the site's and only the value changes.
 *
 * Why it is needed at all: this form is the one HubSpot rendered with its v4
 * embed, inside a shadow DOM its own script styled at runtime. The page's
 * stylesheets never touched it, so nothing about how it looked survived the
 * capture - and the mirrored theme CSS, asked to style a form for the first
 * time, styles it for the white HubSpot page it used to sit on: a black CTA
 * and #666 small print. On a black page that is an invisible button and a
 * data-protection notice nobody can read.
 *
 * The orange is measured, not chosen: #da954b, sampled off the screenshot of
 * the original form, where it is the flat fill of both buttons and of the
 * progress bar (one exact value over ~12,000 pixels). It is not the #f28032
 * the testimonials slider further down the same page uses, and it is not the
 * #ff7a59 this form's saved submitColor still says - HubSpot's own default,
 * left behind by the v4 editor the form was last styled in.
 *
 * SCOPE: the questionnaire's own guid, which is the whole point of this file.
 *
 * Everything here was measured off one form and is correct for that form only,
 * so the file names it: .hs-form-wrapper[data-hs-form="66cfe558-..."], the
 * attribute forms/hs-form puts on every wrapper. /usa/getstarted is the only
 * page that carries that form, and no other form on this site gets a value
 * from this file.
 *
 * It used to be scoped the other way round - :not(.theme-form *), "every form
 * the theme has not drawn on a card" - on the reading that /usa/getstarted was
 * the only such form on the site. It is not. The theme's .theme-form card is
 * what the webinar and competition pages use; schools-get-in-touch and its
 * thank-you page draw the same white card from the form module's own style
 * block instead (#hs_cos_wrapper_widget_1700153365796, in the page), which no
 * selector here can see. So they were being styled for a black page while
 * sitting on a white one, and the field boxes below - filled #f6f8fa with
 * --field-border: 0 - lost the only outline they had against that card, on
 * top of an orange ring around a button their own !important paints black.
 * Naming the form cannot go wrong that way: a page that does not have this
 * form keeps the theme's white-page form, which is what hosco.com showed.
 */

/*
 * The buttons: Next, Previous and Submit.
 *
 * Set as the theme's own variables rather than as rules of ours, so the colour
 * arrives through .hs-button's own cascade and the shape, padding and font
 * stay those of every other button on the site.
 *
 * The border matters as much as the background: .hs-button has a 2px border
 * and background-clip: padding-box, so leaving the border transparent shows
 * the page through a ring around the button instead of more orange.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] {
    --button-form-bg: #da954b;
    --button-form-bg-hover: #da954b;
    --button-form-border: #da954b;
    --button-form-border-hover: #da954b;
    --button-form-text: #fff;
    --button-form-text-hover: #fff;

    /* The filled part of the progress bar - see hs-forms.css. */
    --hs-form-accent: #da954b;

    /*
     * The original's button: 140x57 for "Submit", 155x57 for "Previous", with
     * a 4px corner. The theme's own is a 50px pill 180px wide at 18px bold,
     * which is the shape of every CTA on the site and not the shape of this
     * form's buttons - so the padding is what sets the width, min-width is
     * dropped below, and the radius stops being a pill.
     *
     * 16px of padding rather than 18: .hs-button carries a 2px border, so the
     * box is 16 + 20 (the line) + 16 + 4 = 56, one pixel under the original.
     * 18 would overshoot it by three.
     */
    --button-font: normal 700 16px/1.25 "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --button-padding: 16px 40px;
    --button-border-radius: 4px;

    /*
     * The boxes.
     *
     * The theme dresses a field for the white HubSpot page: a 40px box, white
     * on a 1px #ccc border, 12px text. The original is a 52px box with no
     * border at all, filled #f6f8fa - which on this black page is the only
     * thing that says where a field is - and the text inside it is 16px.
     */
    --field-bg: #f6f8fa;
    --field-border: 0;
    --field-radius: 4px;
    --input-height: 52px;
    --input-font: normal 16px/1.4 "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --input-color: #33475b;
    --placeholders-color: #7c98b6;
    --placeholders-font: normal 16px/1.4 "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* The caption above a box, and the help line under it. */
    --labels-font: normal 16px/1.4 "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --help-font: normal 15px/1.4 "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --help-color: #d4d4d4;

    /* A radio or a tick box, and the wording beside it. */
    --choice-font: normal 16px/1.4 "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --choice-height: 20px;

    /* The data-protection block, which the theme sets at 12px/#666. */
    --gdpr-font: normal 16px/1.4 "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /*
     * A filled triangle, which is what the original's dropdowns show. The
     * theme's shared arrow is a thin chevron from /hs-assets, so this is a
     * data: URI rather than another mirrored file - one shape, in the same
     * #33475b as the text in the box.
     */
    --select-arrow: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%2333475b" d="M4 7.5h12L10 14z"/></svg>');
}

/*
 * The caption above a box: 16px, and 10px clear of the box.
 *
 * The theme's .25rem is right under a 12px caption and too tight under a 16px
 * one; the original leaves 10px. Colour is left to hs-forms.css, which makes
 * every label follow the page rather than the form's saved #000.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form-field > label {
    margin-bottom: 10px;
    /* 1.4, not the theme's 1.5em: the questionnaire's questions are the only
       captions here long enough to wrap, and the original sets their two lines
       22px apart. */
    line-height: 1.4;
}

/*
 * The required asterisk, in HubSpot's own red.
 *
 * It is a <span class="hs-form-required"> because that is the element HubSpot
 * renders and the class its stylesheets key off - see forms/hs-field. Nothing
 * on this site styles that class, so on every other form the asterisk keeps
 * inheriting the caption's colour exactly as it did when it was bare text.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form-required {
    color: #d2332e;
}

/*
 * The help line under a caption: "Your resume must be in English", "E.g.
 * Associate's Degree, Bachelor's Degree, Master's Degree, PhD."
 *
 * The theme pulls it up a quarter rem to sit tight under a 12px label. Under
 * a 16px one that reads as part of the caption, so it gets its own line.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form-field .hs-field-desc {
    margin: 0 0 12px;
}

/*
 * Two half-width fields, 42px apart.
 *
 * The theme puts 15px between them, which was fine for a 500px form and is
 * not what the original does across 958: first/last name are 458px each with
 * 42px of black between them. Written the theme's own way - a margin plus a
 * width that takes the margin back out - so a three-column row, if this form
 * ever grows one, divides the same way.
 *
 * The selector is deliberately as heavy as the theme's own (.hs-form three
 * times over, which is how their build escapes specificity), plus our scope.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form.hs-form.hs-form [class*="form-columns"] .hs-form-field,
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form.hs-form.hs-form [class*="form-columns"] .hs-dependent-field {
    margin-left: 42px;
    width: calc(100% / var(--columns) - 42px * (var(--columns) - 1) / var(--columns));
}

.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form.hs-form.hs-form [class*="form-columns"] .hs-form-field:first-child,
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form.hs-form.hs-form [class*="form-columns"] .hs-dependent-field:first-child {
    margin-left: 0;
}

/*
 * One row to the next: 26px, and nothing at all for a row that is not there.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form.hs-form.hs-form [class*="form-columns"] + [class*="form-columns"] {
    margin-top: 26px;
}

/*
 * A row with nothing visible in it takes no room.
 *
 * Two kinds of row draw nothing and were both spending 26px. hs_language,
 * fast_track_source and the hidden message field each render as a fieldset
 * holding one hidden input, which put 78px of dead space above First Name -
 * the reference image has none. And on the second page the four conditional
 * questions are real fields that the page's own script hides until an answer
 * calls for them, so their fieldsets stacked another 104px of nothing between
 * the first question and the consent block.
 *
 * Hidden rather than merely unspaced, so the gap closes and reopens with the
 * answers as the visitor changes their mind. A heading is a fieldset with no
 * field in it at all and has to survive this, hence the second :not().
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form fieldset:not(:has(.hs-form-field:not([hidden]))):not(:has(.hs-richtext)) {
    display: none;
}

/* The answers to a question, 12px apart - the original's 34px pitch on a
   20px control. */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .inputs-list > li + li {
    margin-top: 12px;
}

/*
 * The hairline inside the phone box.
 *
 * The shape of that box is in hs-forms.css, where every form that switches the
 * chooser on can use it. Only this one value is Fast Track's: the field border
 * here is 0, so the divider cannot borrow it, and the reference shows a light
 * grey line between the flag and the number.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] {
    --hs-form-phone-divider: #dfe3e8;
}

/*
 * The resume field: a file input, not a box pretending to be one.
 *
 * Every other field is a filled 52px box and the theme paints this one the
 * same, so the browser's own "Choose file / No file chosen" sat inside a
 * white slab the width of the form. The original shows the control bare on
 * the page, directly under its help line.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-fieldtype-file .hs-input {
    background: none;
    border: 0;
    border-radius: 0;
    height: auto;
    padding: 0;
    color: inherit;
    font: var(--choice-font);
}

/*
 * A bar you can see across a black page.
 *
 * 16px and a #d9d9d9 track, both read off the reference images now that the
 * content column settles their scale - the earlier 10px was the safe end of a
 * range the screenshot could not resolve. The unfilled part is a flat light
 * grey rather than hs-forms.css's translucent currentColor: on black, 25% of
 * white is a bar that reads as barely there, and the original's is solid.
 *
 * It sits at the FOOT of each step, over the buttons - see forms/hs-form. The
 * spacing here is that position's: 28px clear of the last field, 6px between
 * the count and the bar, and 54px from the bar down to the buttons.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form-steps {
    margin: 28px 0 0;
}

.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form-steps__count {
    margin: 0 0 6px;
    font: var(--input-font);
    color: inherit;
    opacity: 1;
}

.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form-steps__track {
    height: 16px;
    border-radius: 8px;
    background: #d9d9d9;
}

/*
 * The row of buttons under the bar.
 *
 * .hs-button is a block with a 2.8rem top margin and a 180px minimum of its
 * own, both of which belong to a CTA standing alone in a module rather than
 * to a pair of buttons in a row. The row owns the spacing; the button owns
 * only its padding, which is what makes it as wide as its wording.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form-nav {
    margin-top: 54px;
}

.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .hs-form .hs-button {
    margin-top: 0;
    min-width: 0;
}

/*
 * The consent block, readable.
 *
 * The theme paints .legal-consent-container p, span, li and label #666 at
 * 12px, for the white page this form used to be on. Against black that is a
 * contrast ratio of about 2.4:1, half of what WCAG asks, and in practice the
 * notice and the tick-box wording were reported as missing from the page.
 * They were there the whole time.
 *
 * Inheriting rather than naming a colour, for the same reason the field labels
 * do in hs-forms.css: the block then follows the page around it.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container,
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container p,
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container span,
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container li,
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container label {
    color: inherit;
}

/*
 * ...and laid out the way the original lays it out.
 *
 * The theme rules a line above the block (border-top: 1px solid #fff on this
 * palette) and spaces its paragraphs by 1rem. The original has no line - the
 * notice simply follows the last question - and 24px between paragraphs, with
 * 26px between the questions and the first of them.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container {
    border-top: 0;
    margin-top: 26px;
}

.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container p {
    margin: 0 0 24px;
}

.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container p:last-child,
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container .hs-richtext:last-child p:last-child {
    margin-bottom: 0;
}

/* The tick box, and the notice that follows it. */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container .field.hs-form-field {
    margin: 24px 0;
}

/*
 * The Privacy Policy link, blue and underlined.
 *
 * This is the browser's own #0000ee, which is what the original shows: the v4
 * embed styled its consent text and left the anchor inside it alone. The
 * theme's #666 with no underline is what has to go - an invisible link, in the
 * paragraph whose whole job is to point at it - and picking the form's orange
 * instead reads as a button-coloured word in a sentence rather than a link.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .legal-consent-container a {
    color: #00e;
    text-decoration: underline;
}

/*
 * What the visitor is left looking at after sending.
 *
 * HubSpot centred the message and set it at 20px - the page's own body size,
 * not the 12px the form's small print uses - and gave its paragraphs room to
 * breathe. Ours inherited the form's left-aligned 20px/1.67 body text, which
 * put three lines of celebration hard against the left edge of the page.
 */
.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .submitted-message {
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
}

.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .submitted-message p {
    margin: 0 0 32px;
}

.hs-form-wrapper[data-hs-form="66cfe558-90ea-42fa-a662-8ed0df149b49"] .submitted-message p:last-child {
    margin-bottom: 0;
}