/* ============================================================
   CAREERS FORM MODULE  (prefix: crf-)

   Layout: dark full-bleed section — left copy, right form card.
   The form card contains an embedded HubSpot form styled to
   match the brand. All selectors are namespaced with .crf- or
   scoped under .crf-form-card to prevent bleed into other modules.

   !important is used heavily throughout the HubSpot form overrides.
   HubSpot's embed JS injects inline styles and its own stylesheet
   which have high specificity. !important is the only reliable way
   to override them from an external module stylesheet.
   ============================================================ */


/* ── Full-bleed wrap ────────────────────────────────────────
   The section needs to break out of the page's content column
   and stretch to 100vw. The left: 50% + margin-left: -50vw trick
   achieves this regardless of what container the module is placed
   inside — no negative margin or absolute positioning hacks needed.
   overflow: hidden clips the decorative gradient blobs that extend
   beyond the section boundary.
   ─────────────────────────────────────────────────────────── */
.crf-wrap {
  position: relative;
  left: 50%;
  width: 100vw;
  min-height: 640px;
  margin-left: -50vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(84, 62, 152, 0.30) 0, rgba(84, 62, 152, 0.10) 26%, transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(20, 103, 101, 0.30) 0, rgba(20, 103, 101, 0.11) 30%, transparent 54%),
    var(--crf-bg, #0b0a12);
  color: var(--crf-heading, #f7f5ff);
  font-family: var(--crf-body-font);
  box-sizing: border-box;
}

/* Global box-sizing reset scoped to this module only */
.crf-wrap *,
.crf-wrap *::before,
.crf-wrap *::after {
  box-sizing: border-box;
}


/* ── Decorative ambient blobs ───────────────────────────────
   Large blurred circles that simulate soft ambient lighting.
   pointer-events: none ensures they never intercept clicks.
   aria-hidden="true" is set in HTML — these are purely visual.
   ─────────────────────────────────────────────────────────── */
.crf-gradient {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(120px);
}

.crf-gradient--purple {
  top: -200px;
  left: 5%;
  width: 680px;
  height: 680px;
  background: rgba(90, 66, 178, 0.40);
}

.crf-gradient--teal {
  right: -100px;
  bottom: -200px;
  width: 720px;
  height: 580px;
  background: rgba(21, 106, 105, 0.32);
}


/* ── Entrance animations ────────────────────────────────────
   The left copy slides in from the left and the form card slides
   in from the right when the section enters the viewport.
   The prefers-reduced-motion block immediately below overrides
   these for users who have requested reduced motion in their OS.
   ─────────────────────────────────────────────────────────── */
@keyframes crf-slide-left {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes crf-slide-right {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Respect the OS-level "Reduce Motion" accessibility preference.
   Disables all animations and starts elements fully visible. */
@media (prefers-reduced-motion: reduce) {
  .crf-copy, .crf-form-card, .crf-form-embed::before { animation: none !important; opacity: 1 !important; }
}


/* ── Inner grid: copy left + form card right ────────────────
   Two-column grid where the left column takes all remaining space
   and the right column is capped at --crf-card-w (default 550px).
   minmax(0, ...) on the right column prevents the form card from
   ever growing wider than the cap even inside a flex/grid context.
   The width constraint centres the grid and respects section padding.
   ─────────────────────────────────────────────────────────── */
/* Brand faces, pinned: Akzidenz-Grotesk on the heading, Brandon Grotesque on
   everything else including the whole form. */
.crf-wrap {
  --crf-heading-font: 'akzidenz-grotesk', 'Akzidenz-Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --crf-body-font:    'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;
  margin-top: var(--crf-mar-top, 0);
  margin-bottom: var(--crf-mar-bottom, 0);
}

/* This one rule replaces forceFormStyles(), which walked every node in the
   rendered form with querySelectorAll('*') - 300 to 500 nodes - and set
   font-family inline with !important on each one, on the assumption that
   HubSpot's injected inline styles could not be beaten from a stylesheet. They
   can: a CSS declaration carrying !important outranks a plain inline
   declaration, and the styles HubSpot injects are plain. Same result, no DOM
   walk, nothing on the main thread. */
.crf-form-embed,
.crf-form-embed * {
  font-family: var(--crf-body-font) !important;
}

/* Rich text normalisation. HubSpot wraps field output in <p>/<h*>. Inline
   contexts collapse those and inherit type, so a stray <h2> an editor applied
   inside the badge cannot resize it. */
.crf-rt > * {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.crf-rt > * + *::before {
  content: ' ';
}

.crf-inner {
  position: relative;
  z-index: 1;  /* sits above the absolutely-positioned gradient blobs */
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--crf-card-w, 550px));
  gap: 16px;
  align-items: start;
  width: min(var(--crf-max-w, 1080px), calc(100% - var(--crf-pad-left, 24px) - var(--crf-pad-right, 24px)));
  min-height: 0;
  margin: 0 auto;
  padding: var(--crf-pad-top, 100px) 0 var(--crf-pad-bottom, 100px);
}


/* ── Left copy column ───────────────────────────────────────
   align-self: start pins the copy to the top of the grid row
   so it does not stretch to match the taller form card height.
   padding-top: 6px optically aligns the badge top with the
   form card's inner padding.
   ─────────────────────────────────────────────────────────── */
.crf-copy {
  align-self: start;
  padding-top: 6px;
  animation: crf-slide-left 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ── Badge ──────────────────────────────────────────────────
   Pill-shaped label above the heading (e.g. "Apply Now").
   Uses inline-flex so height is driven by content rather than
   being a fixed block. The subtle border + low-opacity background
   creates a frosted pill look on the dark section background.
   ─────────────────────────────────────────────────────────── */
.crf-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 var(--crf-badge-gap, 28px);
  padding: 5px 18px;
  border: 1px solid var(--crf-badge-border, rgba(177, 140, 255, 0.22));
  border-radius: 999px;
  background: var(--crf-badge-bg, rgba(177, 140, 255, 0.08));
  color: var(--crf-badge-color, #ada5c5);
  font-family: var(--crf-body-font);
  font-weight: 700;
  font-size: var(--crf-badge-size, 12px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}


/* ── Heading ────────────────────────────────────────────────
   Two-line heading where the first line is white and the second
   gets a purple gradient applied via background-clip: text.
   clamp() scales the size fluidly between a min and max as the
   viewport width changes, avoiding hard breakpoints for type.
   !important overrides any global heading styles the HubSpot
   theme may apply.
   ─────────────────────────────────────────────────────────── */
.crf-heading {
  max-width: none;
  margin: 0 0 var(--crf-heading-gap, 24px);
  color: var(--crf-heading, #f7f5ff);
  /* Akzidenz-Grotesk, stated. This rule never set a family, so the heading was
     inheriting Brandon Grotesque from .crf-wrap - the body face - while the
     module claimed to be brand-locked. */
  font-family: var(--crf-heading-font);
  font-weight: 800;
/* The clamp() arrives whole from module.html, with a floor that survives a
     200% zoom, so no per-breakpoint restatement is needed. */
  font-size: var(--crf-heading-size, 38px);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

/* Each part is a block so the two halves stack on separate lines */
.crf-heading__plain,
.crf-heading__accent {
  display: block;
}

/* Gradient text technique:
   background-clip: text clips the gradient fill to the glyph shapes and
   -webkit-text-fill-color: transparent lets it show through the glyphs.
   width: fit-content is required — without it, the gradient background
   spans the full container width and the gradient colours look wrong.

   `color` is NOT set to transparent. The fill colour alone produces the same
   pixels in every engine that honours background-clip: text, and zeroing
   `color` would only make the computed colour transparent - which a contrast
   checker reads as a 1:1 ratio against any background. The solid colour below
   is what stays computed, and it is also what renders in forced-colors mode
   and in print. */
/* Solid colour first, and it stays the computed `color` - only the paint is
   replaced, and only when the editor turns the gradient on. In forced-colors
   mode, in print, or anywhere background-clip: text is not honoured, the accent
   words must still be readable rather than vanishing into transparent fill, and
   a contrast checker reading `color` sees a real value instead of
   `transparent`. */
.crf-heading__accent {
  color: var(--crf-heading-accent, #a68de2);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .crf-heading__accent--grad {
    background-image: var(--crf-heading-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media (forced-colors: active) {
  .crf-heading__accent--grad {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}


/* ── Description ────────────────────────────────────────────
   max-width: 400px keeps the line length comfortable and prevents
   the description from stretching the full width of the copy column
   on wider viewports.
   ─────────────────────────────────────────────────────────── */
.crf-description {
  margin: 0;
  max-width: var(--crf-copy-max-w, 460px);
  color: var(--crf-copy, #a9a5b7);
  font-family: var(--crf-body-font);
  font-weight: 400;
  font-size: var(--crf-description-size, 16px);
  line-height: 1.6;
}


/* ── Form card ──────────────────────────────────────────────
   The light rounded container that holds the embedded HubSpot form.
   background !important is needed because HubSpot's embed JS
   sets its own background colour on the form wrapper element.
   min-height is exposed as a CSS variable so the editor can set a
   fixed card height if the form is short and they want it taller.
   ─────────────────────────────────────────────────────────── */
.crf-form-card {
  width: 100%;
  max-width: 100%;
  min-height: var(--crf-card-h, 0px);
  padding: 36px 32px 32px;
  border: 1px solid rgba(22, 21, 31, 0.08);
  border-radius: 24px;
  background: #f7fafc !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
  color: #000000 !important;
  animation: crf-slide-right 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Force the HubSpot form embed and all its wrappers to fill the
   card width. HubSpot injects max-width values that must be cleared. */
.crf-form-embed,
.crf-form-card form,
.crf-form-card .hs-form,
.crf-form-card .hbspt-form {
  width: 100% !important;
  max-width: none !important;
}

/* Shown inside the editor only — when no HubSpot form has been
   selected in the module settings yet */
/* Editor-only, but editors read it too: #5c5a66 on the #f7f7f8 card is 6.31:1,
   where #8b879c would be 3.25:1. */
.crf-form-placeholder {
  margin: 0;
  padding: 32px 0;
  color: #5c5a66;
  font-family: var(--crf-body-font);
  text-align: center;
}


/* ── Form base reset ────────────────────────────────────────
   The first rule resets margin and colour on .hs-form itself.
   The second rule (with *) applies the brand font to every
   single element inside the form via the cascade.
   Both are needed: HubSpot injects inline style="font-family:..."
   on individual elements after the stylesheet loads, so the
   cascade rule alone is insufficient — forceFormStyles() in JS
   applies these as inline !important to beat those injections.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-form {
  margin: 0;
  color: #000000 !important;
  font-family: var(--crf-body-font) !important;
}

.crf-form-card .hs-form,
.crf-form-card .hs-form * {
  font-family: var(--crf-body-font) !important;
}


/* ── Field spacing ──────────────────────────────────────────
   20px bottom margin on every field gives consistent breathing
   room between fields. On mobile this is reduced to 14px (see
   mobile breakpoint) to fit more fields in a shorter scroll.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-form-field {
  margin: 0 0 20px;
}


/* ── Labels / Legends ───────────────────────────────────────
   Small caps uppercase style for field labels.
   letter-spacing: 0.05em adds tracking for readability at small sizes.
   Targeting both <label> and <legend> covers both single-field labels
   and grouped radio/checkbox field legends.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-form-field > label,
.crf-form-card .hs-form-field > legend,
.crf-form-card .hs-label {
  display: block;
  margin: 0 0 8px;
  /* Pinned, not a var: a field label is the only thing naming its input. */
  color: #111111 !important;
  font-family: var(--crf-body-font) !important;
  font-size: var(--crf-label-size, 11px) !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ── Text / email / url / single-line inputs ────────────────
   The :not() chain excludes checkbox, radio, and file inputs
   from this rule so they each get their own targeted styling below.
   appearance: none removes browser-specific default input chrome
   (e.g. the iOS inner shadow) for consistent cross-platform look.
   ─────────────────────────────────────────────────────────── */
.crf-form-card input.hs-input:not([type='checkbox']):not([type='radio']):not([type='file']),
.crf-form-card select.hs-input,
.crf-form-card textarea.hs-input {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
/* An input's border is the control's only visible boundary, so it has to clear
     3:1 on its own. The field default is #8f8ab2, at 3.26:1 against the white
     fill. */
  border: 1px solid var(--crf-input-border, #8f8ab2) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--crf-input-text, #1a1830) !important;
  font-family: var(--crf-body-font) !important;
  font-size: var(--crf-form-size, 13px) !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  appearance: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus indicator.
   The outline is left alone and an explicit ring is drawn at the field's Focus
   Ring Color; the border change and the glow sit on top of it as decoration. A
   border tint plus a 13%-opacity glow on a white fill is nowhere near the 3:1
   an indicator needs on its own. */
.crf-form-card input.hs-input:focus-visible:not([type='checkbox']):not([type='radio']):not([type='file']),
.crf-form-card select.hs-input:focus-visible,
.crf-form-card textarea.hs-input:focus-visible {
  outline: 3px solid var(--crf-focus-ring, #5c44c5) !important;
  outline-offset: 2px !important;
}

.crf-form-card input.hs-input:focus:not([type='checkbox']):not([type='radio']):not([type='file']),
.crf-form-card select.hs-input:focus,
.crf-form-card textarea.hs-input:focus {
  border-color: var(--crf-focus-ring, #5c44c5) !important;
  box-shadow: 0 0 0 3px rgba(92, 68, 197, 0.15) !important;
}


/* ── Select dropdown ────────────────────────────────────────
   appearance: none (inherited above) removes the browser's native
   dropdown arrow. This rule injects a custom SVG chevron as a
   background image, positioned at the right edge. The SVG is
   URI-encoded inline to avoid an extra HTTP request.
   padding-right: 34px reserves space so text never overlaps the arrow.
   ─────────────────────────────────────────────────────────── */
.crf-form-card select.hs-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b9a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  padding-right: 34px !important;
  cursor: pointer;
}


/* ── Textarea ───────────────────────────────────────────────
   min-height: 110px gives comfortable space for a cover letter
   or message. resize: vertical lets users expand downward only —
   horizontal resize would break the card layout.
   ─────────────────────────────────────────────────────────── */
.crf-form-card textarea.hs-input {
  min-height: 110px !important;
  resize: vertical;
  border: 1px solid var(--crf-input-border, #ddd9ee) !important;
  border-radius: 8px !important;
}


/* ── File upload wrapper ────────────────────────────────────
   HubSpot wraps file inputs in a .hs-fieldtype-file .input div
   that defaults to display: inline-block and clips overflow.
   These overrides make the wrapper stretch to full width and
   allow the native file name text to display without clipping.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-fieldtype-file .input {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

/* ── File input ─────────────────────────────────────────────
   Styled to match the other inputs visually. The native file input
   is kept (not replaced with a custom button) so keyboard navigation
   and screen reader file-picker interactions work without extra ARIA.
   overflow: visible is required so the selected filename text is not
   clipped on browsers that default to overflow: hidden on file inputs.
   ─────────────────────────────────────────────────────────── */
.crf-form-card input[type='file'].hs-input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 5px 8px !important;
  border: 1px solid var(--crf-input-border, #8f8ab2) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #4a4868 !important;
  font-family: var(--crf-body-font) !important;
  font-size: 12px !important;
  cursor: pointer;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Same as the text inputs: an explicit ring, so a keyboard user tabbing onto
   the resume field can see where they are. */
.crf-form-card input[type='file'].hs-input:focus-visible {
  outline: 3px solid var(--crf-focus-ring, #5c44c5) !important;
  outline-offset: 2px !important;
}

/*
 * Two pseudo-elements for the "Choose File" button are required:
 *   ::-webkit-file-upload-button — Chrome, Edge, Safari (WebKit/Blink)
 *   ::file-selector-button       — the CSS standard (Firefox, modern Chrome)
 * They cannot be combined in one rule — an unrecognised pseudo-element
 * causes the entire rule to be ignored by the parser.
 */
.crf-form-card input[type='file'].hs-input::-webkit-file-upload-button {
  background: #ede9f8;
  border: none;
  border-radius: 5px;
  color: #3a2e7b;
  font-family: var(--crf-body-font);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.crf-form-card input[type='file'].hs-input::file-selector-button {
  background: #ede9f8;
  border: none;
  border-radius: 5px;
  color: #3a2e7b;
  font-family: var(--crf-body-font);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.crf-form-card input[type='file'].hs-input::-webkit-file-upload-button:hover,
.crf-form-card input[type='file'].hs-input::file-selector-button:hover {
  background: #ddd5f5;
}


/* ── Fieldset reset ─────────────────────────────────────────
   HubSpot wraps radio and checkbox groups in a <fieldset> and
   injects a visible border and vertical divider line via
   browser defaults. These rules strip all of that back to zero
   so our custom radio/checkbox styles are unaffected.
   min-width: 0 is needed because fieldsets have a browser default
   of min-width: min-content which can cause overflow in narrow grids.
   ─────────────────────────────────────────────────────────── */
.crf-form-card fieldset {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-shadow: none !important;
}

/*
 * Visually-hidden pattern for fieldset legends.
 * display: none would remove legends from the accessibility tree,
 * meaning screen readers lose the group question (e.g. "Work Authorized?")
 * for radio button groups. This pattern hides them visually while keeping
 * them in the AT — a 1×1px absolutely-positioned clipped element is
 * invisible to sighted users but announced by screen readers.
 */
.crf-form-card fieldset legend {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}


/* ── 2-column row layout ────────────────────────────────────
   Two selectors are targeted intentionally:
     .form-columns-2  — HubSpot's native multi-column fieldset class
     .crf-field-row   — our custom wrapper injected by pairFields() in JS
   Both must use the same grid so fields look identical whether they
   are native HubSpot 2-col or JS-paired. minmax(0, 1fr) prevents
   either column from overflowing when a field contains long content.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .form-columns-2,
.crf-form-card .crf-field-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 28px !important;
  border: none !important;
  padding: 0 !important;
  outline: none !important;
  margin-bottom: 20px !important;
}

/* Inside 2-col rows, clear any HubSpot float-based width constraints
   and remove individual field bottom margin since the row container
   already provides spacing via margin-bottom above */
.crf-form-card .form-columns-2 .hs-form-field,
.crf-form-card .crf-field-row .hs-form-field {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}


/* ── Legal disclaimer text blocks ───────────────────────────
   Injected above and below the consent/privacy field by
   addLegalText() in onFormReady. Never shown in the observer
   loop — the .crf-legal-above guard prevents re-injection.
   ─────────────────────────────────────────────────────────── */
.crf-legal-above,
.crf-legal-below {
  font-size: 11px;
  line-height: 1.55;
  color: #5a5870;
}

.crf-legal-above {
  margin-bottom: 20px;
}

.crf-legal-below {
  margin-top: 12px;
  margin-bottom: 20px;
}

.crf-legal-above p,
.crf-legal-below p {
  margin: 0 0 8px;
  font-family: var(--crf-body-font) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #5a5870 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.crf-legal-above p:last-child,
.crf-legal-below p:last-child {
  margin-bottom: 0;
}

.crf-legal-above a,
.crf-legal-below a {
  color: var(--crf-button-bg, #3a2e7b);
  text-decoration: underline;
}


/* ── I agree / consent checkbox font ─────────────────────────
   The privacy_accepted field label inherits the heading style
   (11px uppercase bold). Override to match form body weight and
   remove all-caps so the label is readable, not shouted.
   Also covers HubSpot's built-in Legal Consent container.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-privacy_accepted > label {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.crf-form-card .hs-privacy_accepted .hs-form-checkbox label,
.crf-form-card .hs-privacy_accepted .hs-form-checkbox label span,
.crf-form-card .hs-form-booleancheckbox label,
.crf-form-card .hs-form-booleancheckbox label span,
.crf-form-card .hs-fieldtype-booleancheckbox label,
.crf-form-card .hs-fieldtype-booleancheckbox label span,
.crf-form-card .legal-consent-container,
.crf-form-card .legal-consent-container label,
.crf-form-card .legal-consent-container label span,
.crf-form-card .legal-consent-container .hs-richtext p {
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #444444 !important;
  line-height: 1.5 !important;
}


/* ── Radio / checkbox list base ─────────────────────────────
   HubSpot renders choice lists as <ul> elements with browser
   default list styles, margins, and padding. Reset all of that
   and switch to flexbox for gap-controlled spacing.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .inputs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.crf-form-card .hs-form-radio,
.crf-form-card .hs-form-checkbox {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ── Inline radio layout — Yes / No pairs ───────────────────
   When .crf-radio-inline is added by markRadioInline() in JS,
   switch the option list to a horizontal row with larger gaps.
   Used for short binary choices like "Work Authorized? Yes / No".
   ─────────────────────────────────────────────────────────── */
.crf-form-card .crf-radio-inline .inputs-list {
  flex-direction: row !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}


/* ── Strip HubSpot's injected pseudo-element indicators ─────
   HubSpot themes inject decorative ::before / ::after pseudo-
   elements on radio and checkbox labels to create custom-styled
   indicators (circles, tick-boxes). We use native browser controls
   styled via appearance: none instead, so these injected pseudo-
   elements must be nulled out to prevent ghost shapes appearing.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-form-radio label::before,
.crf-form-card .hs-form-radio label::after,
.crf-form-card .hs-form-checkbox label::before,
.crf-form-card .hs-form-checkbox label::after,
.crf-form-card .hs-form-radio label span::before,
.crf-form-card .hs-form-radio label span::after,
.crf-form-card .hs-form-checkbox label span::before,
.crf-form-card .hs-form-checkbox label span::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  background: none !important;
}


/* ── Radio / checkbox label ─────────────────────────────────
   Labels wrap the native input and the option text using inline-flex
   so the control and text align vertically to centre.
   Every HubSpot theme property (pill background, border, height,
   text-transform) is explicitly cleared — the design uses a simple
   text + native control pattern with no decorative pill.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-form-radio label,
.crf-form-card .hs-form-checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: #2a2840 !important;
  font-family: var(--crf-body-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  transition: none !important;
}

/* The <span> inside the label wraps the option text.
   flex: 1 1 auto allows it to grow and shrink normally. */
.crf-form-card .hs-form-radio label span,
.crf-form-card .hs-form-checkbox label span {
  flex: 1 1 auto !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ── Native radio / checkbox controls ───────────────────────
   appearance: none removes all browser-default input chrome so
   we can style the control from scratch using borders and
   box-shadow. The checked state uses an inset box-shadow to
   simulate a filled dot (radio) or filled box (checkbox) without
   needing pseudo-elements (which are not supported on inputs).
   visibility: visible and opacity: 1 override any HubSpot theme
   rules that hide the native control in favour of a custom one.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-form-radio input[type='radio'],
.crf-form-card .hs-form-checkbox input[type='checkbox'] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  flex: 0 0 15px !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border-radius: 50% !important;
/* These are custom controls - appearance: none removes the native ones - so
     the border is the entire control and has to clear 3:1. #8f8ab2 is 3.26:1
     against the white fill. */
  border: 1.5px solid var(--crf-input-border, #8f8ab2) !important;
  background: #ffffff !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

/* Checked state: filled background + white inset ring creates a
   dot-within-circle effect without needing a pseudo-element */
.crf-form-card .hs-form-radio input[type='radio']:checked,
.crf-form-card .hs-form-checkbox input[type='checkbox']:checked {
  background: var(--crf-button-bg, #3a2e7b) !important;
  border-color: var(--crf-button-bg, #3a2e7b) !important;
  box-shadow: inset 0 0 0 3px #ffffff !important;
}

/* Hover: subtle border colour shift as a hover affordance */
.crf-form-card .hs-form-radio input[type='radio']:hover,
.crf-form-card .hs-form-checkbox input[type='checkbox']:hover {
  border-color: #9b8fd4 !important;
}


/* ── Submit section ─────────────────────────────────────────
   .hs-submit contains the .actions div which contains the button.
   The ::before / ::after on .actions are stripped because some
   HubSpot themes inject decorative dividers or spinner icons there.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-submit {
  margin-top: 20px;
  display: block !important;
}

.crf-form-card .actions {
  position: relative;
  margin: 0;
  padding: 0;
}

.crf-form-card .actions::before,
.crf-form-card .actions::after {
  content: none !important;
  display: none !important;
}


/* ── Submit button ──────────────────────────────────────────
   Both input[type='submit'] and .hs-button are targeted because
   HubSpot uses either element type depending on the portal config.
   display: block + width: 100% makes the button full-width.
   The ::before / ::after rules strip spinner or icon pseudo-elements
   that some HubSpot themes inject on hover or active states.
   ─────────────────────────────────────────────────────────── */
.crf-form-card input[type='submit'],
.crf-form-card .hs-button {
  display: block !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 15px 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--crf-button-bg, #3a2e7b) !important;
  color: var(--crf-button-text, #ffffff) !important;
  font-family: var(--crf-body-font) !important;
  font-size: var(--crf-btn-size, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
  transition: background 0.2s ease !important;
}

.crf-form-card input[type='submit']::before,
.crf-form-card input[type='submit']::after,
.crf-form-card .hs-button::before,
.crf-form-card .hs-button::after {
  content: none !important;
  display: none !important;
}

.crf-form-card input[type='submit']:hover,
.crf-form-card .hs-button:hover {
  background: var(--crf-button-hover-bg, #2d2360) !important;
}


/* ── Error messages ─────────────────────────────────────────
   .hs-error-msgs is HubSpot's error list container (a <ul>).
   .hs-error-msg and .hs-error-msgs label cover both the list item
   text and label elements HubSpot uses across different form versions.
   The .crf-file-error <p> elements injected by setFileError() in JS
   also carry the hs-error-msg class, so they inherit this styling
   automatically without needing separate CSS rules.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .hs-error-msgs {
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}

/* Error text carries a colour cue, so the wording has to do the work on its
   own - which it does: HubSpot writes the field name and the problem into the
   string. The field default is 12px: 11px is too small for the one string a
   user has to read under pressure. */
.crf-form-card .hs-error-msg,
.crf-form-card .hs-error-msgs label {
  color: var(--crf-error-color, #c2415b) !important;
  font-size: var(--crf-error-size, 12px);
  line-height: 1.4;
  text-transform: none;
  font-weight: 400;
}

/* The file-validation message the script injects. It is hidden with the
   `hidden` attribute rather than an inline display, so it is out of the
   accessibility tree as well as out of sight while there is no error. */
.crf-form-card .crf-file-error[hidden] {
  display: none;
}


/* ── Legal consent / richtext ───────────────────────────────
   Covers GDPR consent text and any rich-text blocks HubSpot
   injects at the bottom of the form. Kept small (11px) to be
   readable without visually competing with the form fields.
   Links inside consent text are coloured to match the button
   and underlined, so they are distinguishable without relying
   on colour alone.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .legal-consent-container,
.crf-form-card .legal-consent-container p,
.crf-form-card .legal-consent-container span,
.crf-form-card .hs-richtext,
.crf-form-card .hs-richtext p,
.crf-form-card .hs-richtext span {
  color: #444444 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.crf-form-card .legal-consent-container,
.crf-form-card .hs-richtext {
  margin: 10px 0 0 !important;
}

.crf-form-card .legal-consent-container p,
.crf-form-card .hs-richtext p {
  margin: 0 !important;
}

.crf-form-card .legal-consent-container a,
.crf-form-card .hs-richtext a {
  color: #3a2e7b !important;
  text-decoration: underline !important;
}


/* ── Success / thank-you message ────────────────────────────
   HubSpot replaces the form with a .submitted-message div after
   a successful submission. Centred text with comfortable line
   height reads well on the light card background.
   ─────────────────────────────────────────────────────────── */
.crf-form-card .submitted-message {
  color: #1a1830;
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
  padding: 28px 0;
}


/* ── Loading shimmer ────────────────────────────────────────
   The .crf-form-embed div starts empty while the HubSpot Forms
   JS loads and injects the form HTML. The :empty pseudo-class
   matches only when the element has no children or text nodes.
   A ::before pseudo-element with a moving gradient background
   creates a shimmer skeleton that fills the space.
   Once HubSpot injects the form, :empty stops matching and
   the shimmer disappears automatically — no JS needed.
   The prefers-reduced-motion rule above disables the animation
   for users who have requested reduced motion.
   ─────────────────────────────────────────────────────────── */
@keyframes crf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.crf-form-embed:empty::before {
  content: '';
  display: block;
  height: 380px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 25%,
    rgba(0, 0, 0, 0.09) 50%,
    rgba(0, 0, 0, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: crf-shimmer 1.5s ease-in-out infinite;
}


/* ─────────────────────────────────────────
   TABLET  561px – 900px
   Stack the two columns vertically. The form
   card takes full width beneath the copy.
───────────────────────────────────────── */
@media (max-width: 900px) {
  .crf-wrap {
    min-height: 0;
  }

  /* Single-column stacked layout */
  .crf-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    width: min(100%, calc(100% - 40px));
  }

  .crf-form-card {
    max-width: 100%;
    padding: 28px 24px 24px;
  }

  .crf-form-card .form-columns-2,
  .crf-form-card .crf-field-row {
    gap: 20px !important;
    margin-bottom: 20px !important;
  }
}


/* ─────────────────────────────────────────
   MOBILE  560px and below
   Narrower padding, smaller type, and 2-col
   rows collapse to single column so each
   field gets full width on small screens.
───────────────────────────────────────── */
@media (max-width: 560px) {
  .crf-wrap {
    min-height: 0;
  }

  /* Full bleed on mobile — no side margins on the grid */
  .crf-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    padding: 56px 20px 48px;
  }

  .crf-form-card {
    max-width: 100%;
    min-height: 0;
    padding: 22px 16px 20px;
    border-radius: 16px;  /* slightly tighter radius suits smaller screens */
  }

  /* 2-column field rows collapse to single column on mobile */
  .crf-form-card .form-columns-2,
  .crf-form-card .crf-field-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Restore individual field spacing when columns collapse to single */
  .crf-form-card .form-columns-2 .hs-form-field,
  .crf-form-card .crf-field-row .hs-form-field {
    margin-bottom: 14px !important;
  }

  /* Slightly tighter field spacing to reduce scroll length on mobile */
  .crf-form-card .hs-form-field {
    margin-bottom: 14px;
  }

  /* Slightly larger font size on touch devices improves tap accuracy */
  .crf-form-card input.hs-input:not([type='checkbox']):not([type='radio']):not([type='file']),
  .crf-form-card select.hs-input,
  .crf-form-card textarea.hs-input {
    font-size: 15px !important;
  }

  /* Inline radio options stay horizontal even on mobile — Yes/No fits */
  .crf-form-card .crf-radio-inline .inputs-list {
    flex-direction: row !important;
    gap: 14px !important;
  }
}