/*
 * Local styles for the cloned pages.
 *
 * deskbird's own Webflow CSS does the heavy lifting — it is the real design system and the
 * source of truth for anything it already styles. This file covers only what arrives at runtime
 * on the live site and therefore has no CSS in those files:
 *
 *   - the language switcher, normally rendered by Weglot
 *   - the FAQ accordion's open/closed state, normally driven by the Finsweet script
 *   - the logo-marquee scroll and the client-logo sheets' recolouring
 *
 * Every measurement is taken from the live reference, not estimated.
 */

/* ------------------------------------------------------------------ *
 * 1. Demo request form
 *    Reference: .hsfc-Step__Content on https://www.deskbird.com/request-demo
 *    wrapper 496x590 · content padding 40 · row pitch 86 · field 74
 *    (label 24 + 10 gap + input 40) · inputs r6 / 1px #eee / 10px pad
 * ------------------------------------------------------------------ */
.hsfc-Form {
  width: 100%;
}

.hsfc-Step__Content {
  display: flex;
  flex-direction: column;
  padding: 40px;
}

/* Row spacing is deskbird's own fluid step, not a fixed value: clamp(10px … 12px). The live
 * page applies it through `.hsfc-Row { margin-bottom: var(--_spacing---space--2) !important }`.
 * Using a fixed 12px matched desktop but left mobile ~1.6px short per row. */
.hsfc-Row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px; /* --hsf-default-row__horizontal-spacing */
  margin-bottom: var(--_spacing---space--2);
}

.hsfc-Row.is-split {
  grid-template-columns: 1fr 1fr;
}

/* Below the form's two-column threshold the reference stacks every row as a flex column with
 * a 20px gap (--hsf-default-row__vertical-spacing) and stretches the submit button. */
@media (max-width: 767px) {
  .hsfc-Row,
  .hsfc-Row.is-split {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .hsfc-NavigationRow__Buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .hsfc-Button {
    width: 100%;
  }
}

.hsfc-Field {
  display: flex;
  flex-direction: column;
  gap: 10px; /* --hsf-default-module__vertical-spacing */
  min-width: 0;
}

.hsfc-FieldLabel {
  /* HubSpot renders its labels in its own stack (--hsf-default-field-label__font-family:
   * Helvetica), not deskbird's Atlas Grotesk. Letting them inherit Atlas made every label
   * visibly wider than the reference. */
  font-family: Helvetica, arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: rgb(86, 86, 86);
  /* deskbird's Webflow CSS ships `label { margin-bottom: .25rem }`. HubSpot's own stylesheet
   * cancelled that on the live page; since the form is ours, we cancel it here. Leaving it in
   * adds 4px per field — 20px across the five rows, which pushed every section below the
   * hero out of alignment. */
  margin-bottom: 0;
}

.hsfc-FieldLabel__RequiredIndicator {
  color: rgb(229, 21, 32);
}

.hsfc-TextInput {
  width: 100%;
  height: 40px;
  padding: 10px;
  font-family: arial, helvetica, sans-serif; /* HubSpot's stack, kept for parity */
  font-size: 16px;
  /* The reference controls compute line-height: normal. Inheriting the body's 24px shifted
   * the text baseline ~3px down inside every control. */
  line-height: normal;
  color: rgb(86, 86, 86);
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(238, 238, 238);
  border-radius: 6px;
  box-sizing: border-box;
  appearance: none;
}

.hsfc-TextInput:focus {
  outline: 2px solid rgb(118, 70, 255);
  outline-offset: -1px;
}

/* Native select styled as HubSpot's button-style dropdown, with the caret drawn in the
 * same place its .hsfc-DropdownInput__Caret sits (52px box, 12x6 glyph). */
.hsfc-DropdownInput {
  position: relative;
  display: flex;
}

/* The dropdown trigger is a readonly text input, matching the reference's structure, with the
 * native select layered transparently over it. That way the trigger's text is rendered by the
 * same kind of element as the reference and lands on the same pixel row at every viewport. */
.hsfc-TextInput--button {
  padding-right: 52px;
  cursor: pointer;
}

.hsfc-DropdownInput__Native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  /* Above the caret so the whole control is clickable. */
  z-index: 1;
}

/* Placeholders use the reference's grey rather than the text colour. */
.hsfc-TextInput--button::placeholder {
  color: rgb(189, 189, 189);
  opacity: 1;
}

/* Keep the focus ring visible even though the real control is transparent. */
.hsfc-DropdownInput__Native:focus-visible + .hsfc-DropdownInput__Caret,
.hsfc-DropdownInput:has(.hsfc-DropdownInput__Native:focus-visible) .hsfc-TextInput--button {
  outline: 2px solid rgb(118, 70, 255);
  outline-offset: -1px;
}

.hsfc-DropdownInput__Caret {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 40px;
  padding: 0 20px;
  pointer-events: none;
  color: rgb(86, 86, 86);
}

/* The reference leaves exactly 40px between the last field and the submit row at both
 * breakpoints, so the row's own fluid bottom margin has to be subtracted rather than
 * hard-coded. */
.hsfc-NavigationRow {
  margin-top: calc(40px - var(--_spacing---space--2));
}

.hsfc-NavigationRow__Buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}

.hsfc-Button {
  height: 48px;
  padding: 12px 36px;
  font-family: arial, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: rgb(118, 70, 255);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s;
}

.hsfc-Button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hsfc-Button:not(:disabled):hover {
  background-color: rgb(96, 52, 226);
}

/* ------------------------------------------------------------------ *
 * 1b. Language switcher
 *     The live site renders this through Weglot, whose stylesheet we do not ship. Values
 *     measured from the reference: a 49x40 white pill, radius 5, 0 15px padding, with the
 *     active code in system-ui 14px/21px weight 700, pure black.
 * ------------------------------------------------------------------ */
.weglot_switcher {
  position: relative;
}

.weglot_switcher .language-option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 15px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
}

.weglot_switcher .language-option a {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

/* Collapsed by default, exactly as the reference renders it on load. */
.weglot_switcher .language-list {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  border-radius: 0 0 5px 5px;
}

/* ------------------------------------------------------------------ *
 * 2. FAQ accordion
 *    The Webflow CSS ships `.g_accordion_answer { display: none }` and expects
 *    Finsweet's script to reveal it. We drive it from a data attribute instead.
 * ------------------------------------------------------------------ */
.g_accordion_question {
  cursor: pointer;
}

.g_accordion_group[data-open="true"] .g_accordion_answer {
  display: block;
}

.g_accordion_icon {
  transition: transform 0.3s ease;
}

.g_accordion_group[data-open="true"] .g_accordion_icon {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------ *
 * 3. Logo marquee
 *    Two identical 1568px strips with a 2rem gap scroll left by exactly one
 *    strip-plus-gap, so the seam is invisible and the loop is seamless.
 * ------------------------------------------------------------------ */
/* Client-logo sheets. The live site inlines each SVG and forces every path to currentColor,
 * so the logos render in the inherited grey rather than the artwork's own blue. Masking a
 * currentColor fill with the same file reproduces that without inlining ~1.7MB of paths. */
.ported-logo-sheet {
  width: var(--sheet-width, 100%);
  flex: 0 0 auto;
  background-color: currentColor;
  /* Top-aligned, not centred: on the live site the sheet is a block <svg> at the top of a
   * taller box, so centring the mask dropped the artwork 8px. */
  -webkit-mask: var(--sheet) no-repeat left top / 100% auto;
  mask: var(--sheet) no-repeat left top / 100% auto;
}

@keyframes ported-marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1568px - 2rem)); }
}

.logo-marquee_list {
  animation: ported-marquee-left 40s linear infinite;
  will-change: transform;
}

.logo-marquee_wrap:hover .logo-marquee_list {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee_list {
    animation: none;
  }
}

/* ------------------------------------------------------------------ *
 * 4. Image dragging
 *     Deliberate deviation from the reference, on instruction. Measured: the live site prevents
 *     image dragging nowhere — -webkit-user-drag computes to auto on all its images and a
 *     dragstart is never cancelled. This is an improvement over the original, not a fidelity
 *     fix, and it is declared in src/ported/<page>/accepted-differences.json.
 *
 *     Purely behavioural: nothing here paints, so the pixel comparison is unaffected.
 *     Firefox ignores -webkit-user-drag, so scripts/no-image-drag.ts also sets
 *     draggable="false" and cancels dragstart.
 * ------------------------------------------------------------------ */
img,
svg,
picture {
  -webkit-user-drag: none;
}

/* The logo sheets are painted as a mask over a currentColor fill, so there is no <img> to
 * catch — but the element still offers a drag handle for its background. */
.ported-logo-sheet,
.marquee_client_logos {
  -webkit-user-drag: none;
}