/* ==========================================================================
   Atlas Form Styles
   --------------------------------------------------------------------------
   Styles for labels, inputs, checkboxes, radios, range, and HubSpot form
   overrides. Uses CSS custom properties set in theme_overrides.hubl.css.
   ========================================================================== */

/* Labels */
.form-label,
label,
.hs-form-field > label,
.hs-form-field label,
.hs-field-desc,
.hs-form label,
.hs-form .hs-form-field > label,
form label {
  color: var(--atlas-label-color);
  font-weight: var(--atlas-label-font-weight) !important;
}

/* HubSpot form layout resets */
.hs-form fieldset {
  max-width: none !important;
}

.hs-form ul.inputs-list,
.hs-form ul.inputs-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One token for the gap between form rows, so the legacy markup below and the
   current editor's `.hsfc-*` markup at the bottom of this file cannot drift
   apart. 15px is the screendesign value, measured on XD screens 14 and 15:
   fields are 57px tall on a 72px pitch. */
:root {
  --atlas-form-row-gap: 15px;
}

.hs-form .hs-form-field {
  margin-bottom: var(--atlas-form-row-gap, 20px);
}

.hs-form
  fieldset.form-columns-1
  .hs-input:not([type='checkbox']):not([type='radio']) {
  width: 100% !important;
}

.hs-form
  fieldset.form-columns-2
  .hs-input:not([type='checkbox']):not([type='radio']) {
  width: 100% !important;
}

/* Form Controls */
.form-control,
.form-select,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='file'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='url'],
textarea,
select,
.hs-input:not([type='checkbox']):not([type='radio']) {
  display: block;
  width: 100%;
  padding: var(--atlas-input-padding);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--atlas-input-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--atlas-input-background);
  background-clip: padding-box;
  border: var(--atlas-input-border-width) solid var(--atlas-input-border-color);
  border-radius: var(--atlas-input-border-radius);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;

  &::placeholder {
    color: var(--atlas-input-placeholder-color);
    opacity: 1;
  }

  &:focus {
    color: var(--atlas-input-color);
    background-color: var(--atlas-input-background);
    border-color: var(--atlas-input-focus-border-color);
    outline: 0;
    box-shadow: none;
  }

  &:disabled {
    color: var(--atlas-input-disabled-color);
    background-color: var(--atlas-input-disabled-background);
    opacity: 1;
  }
}

.form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}

/* Checkboxes and Radios */
.form-check-input,
input[type='checkbox'],
input[type='radio'],
.hs-form input[type='checkbox'],
.hs-form input[type='radio'],
.hs-form .hs-input[type='checkbox'],
.hs-form .hs-input[type='radio'] {
  --atlas-form-check-bg: var(--atlas-input-background);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--atlas-form-check-bg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border: var(--atlas-input-border-width) solid var(--atlas-input-border-color);
  flex-shrink: 0;
  height: 1em !important;
  width: 1em !important;
  margin-top: 0.25em;
  vertical-align: top;

  &[type='checkbox'] {
    border-radius: 0.25em;

    &:checked {
      background-color: var(--atlas-form-accent);
      border-color: var(--atlas-form-accent);
      background-image: var(--atlas-form-check-bg-svg);
    }
  }

  &[type='radio'] {
    border-radius: 50%;

    &:checked {
      background-color: var(--atlas-form-accent);
      border-color: var(--atlas-form-accent);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E");
    }
  }

  &:focus {
    border-color: var(--atlas-input-focus-border-color);
    box-shadow: none;
    outline: 0;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* Range Input */
.form-range,
input[type='range'] {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  &:focus {
    outline: 0;
  }

  &::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: var(--atlas-form-accent);
    border: 0;
    border-radius: 1rem;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  &::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: var(--atlas-form-accent);
    border: 0;
    border-radius: 1rem;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--atlas-input-border-color);
    border-color: transparent;
    border-radius: 1rem;
  }

  &::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--atlas-input-border-color);
    border-color: transparent;
    border-radius: 1rem;
  }
}

/* Progress Bar */
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: var(--atlas-input-border-radius);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--atlas-form-accent-contrast);
  text-align: center;
  white-space: nowrap;
  background-color: var(--atlas-form-accent);
  transition: width 0.6s ease;
}

/* Spinner */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Form Layout — title (5/12) + form (7/12) side by side
   ========================================================================== */

.hs_cos_wrapper_type_form {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: var(--bs-gutter-x, 1.5rem);
  align-items: start;
}

/* Title and optional richtext description stay in column 1 */
.hs_cos_wrapper.form-title,
.hs_cos_wrapper_type_form > .hs-richtext {
  grid-column: 1;
}

.hs_cos_wrapper_type_form > .hs-richtext,
.hs-form .hs-richtext {
  margin-bottom: 20px;
}

/* Title typography from theme setting */
.hs_cos_wrapper.form-title {
  font-size: var(--atlas-form-title-font-size, var(--atlas-h3-font-size));
  font-weight: var(--atlas-form-title-font-weight, var(--atlas-h3-font-weight));
  margin-top: 0;
  line-height: 1.2;
}

/* Form occupies column 2 and spans all rows */
.hs_cos_wrapper_type_form > .hs-form,
.hs_cos_wrapper_type_form > form {
  grid-column: 2;
  grid-row: 1 / -1;
}

.hs-form :is(.actions, .hs-submit, .hs_submit) {
  margin-bottom: 20px;
}

.hs-form
  :is(.actions, .hs-submit, .hs_submit)
  :is(.hs-button, input[type='submit']) {
  margin-bottom: 0;
}

.hs-form > :is(.hs-button, input[type='submit']) {
  margin-bottom: 20px;
}

@media (max-width: 767.98px) {
  .hs_cos_wrapper_type_form {
    grid-template-columns: 1fr;
  }

  .hs_cos_wrapper.form-title,
  .hs_cos_wrapper_type_form > .hs-richtext,
  .hs_cos_wrapper_type_form > .hs-form,
  .hs_cos_wrapper_type_form > form {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ==========================================================================
   Current forms editor (.hsfc-*)
   --------------------------------------------------------------------------
   Everything above targets `.hs-form` / `.hs-input`, the markup HubSpot's
   legacy forms editor emits. A form built in the current editor renders
   `.hsfc-*` classes instead and matches none of it, so every theme Forms
   setting -- fill, border, padding, text colour, font -- silently stopped at
   the module boundary and the form kept HubSpot's own look: #F5F8FA fill, a
   grey border, Helvetica, and a gold submit button. The rules below are the
   twins that put the same `--atlas-*` tokens back.

   Two things make this fiddly, both verified on the sandbox rather than
   guessed:

   1. HubSpot injects its form stylesheet into <head> at runtime, *after* the
      theme's CSS, so a rule that merely ties on specificity loses. Its own
      rules measure 0-2-0, so every selector here is at least 0-2-1 -- the
      element name in `input.hsfc-TextInput` is what buys that. Tested by
      injecting each candidate at the very top of <head>, where only
      specificity can win: `.hsfc-TextInput` and `.hsfc-Form .hsfc-TextInput`
      both lost, `.hsfc-Form input.hsfc-TextInput` won. That is why these read
      oddly and why they need no `!important`.
   2. The class names come from HubSpot's forms runtime and are not a
      documented API. If forms lose their styling after a HubSpot release,
      re-check these names before anything else. The same warning is on the
      footer module's own copy of this block.
   ========================================================================== */

/* The form root. Setting the family here as well as on the controls is
   deliberate: `inherit` on an input would inherit HubSpot's own family from
   this element, not the theme's. */
.hsfc-Renderer form.hsfc-Form {
  font-family: var(--atlas-font-body);
  color: var(--atlas-input-color);
}

/* Controls. Matching `[class*='hsfc-']` on the element rather than listing
   .hsfc-TextInput, .hsfc-Textarea and one class per field type means a field
   type nobody has used yet is still covered. Checkboxes and radios keep their
   own appearance and are excluded, as they are in the legacy rules above. */
.hsfc-Form
  :is(input, textarea, select)[class*='hsfc-']:not([type='checkbox']):not(
    [type='radio']
  ):not([type='hidden']) {
  box-sizing: border-box;
  width: 100%;
  padding: var(--atlas-input-padding);
  font-family: var(--atlas-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--atlas-input-color);
  background-color: var(--atlas-input-background);
  border: var(--atlas-input-border-width) solid var(--atlas-input-border-color);
  border-radius: var(--atlas-input-border-radius);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hsfc-Form
  :is(input, textarea, select)[class*='hsfc-']:not([type='checkbox']):not(
    [type='radio']
  ):not([type='hidden']):is(:focus, :focus-visible) {
  border-color: var(--atlas-input-focus-border-color);
  outline: none;
}

.hsfc-Form :is(input, textarea, select)[class*='hsfc-']::placeholder {
  color: var(--atlas-input-placeholder-color);
}

/* Labels. The legacy block at the top of this file already forces the weight
   through a bare `label` selector; the family and size are what it cannot
   reach at this specificity. */
.hsfc-Form label.hsfc-FieldLabel {
  font-family: var(--atlas-font-body);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: var(--atlas-label-font-weight);
  color: var(--atlas-label-color);
}

/* Rows. HubSpot's own `.hsfc-Row` is the grid that pairs two fields on one
   line, which is the behaviour the screendesign wants -- only the gaps are
   its own. Keep the grid, replace the spacing.

   The gap is set on BOTH axes, and the row half is the one that is easy to
   think is dead code. The column gap is the design's 15px between two fields
   standing side by side. The row gap only ever applies once HubSpot's forms
   runtime flips the row to `flex-direction: column`, which is what it does at
   mobile widths -- and there it was 0, so the two fields of a pair sat flush
   against each other while the rows around them kept their 15px. Measured on
   the sandbox in a 386px viewport: 0px inside a pair against 15px between
   rows. That is the uneven mobile spacing reported on Productive #48.

   Nothing moves on desktop: there the row is a single flex line, and a row
   gap cannot reach a layout that has only one line. Verified before and after
   on the rendered page rather than reasoned about.

   The footer module carries its own copy of this fix at its own 10px -- see
   the note in its module.css. Its rule resolves to
   `.footer-module .newsletter-form .hsfc-Row` at 0-3-0 against the 0-2-1
   here, so it wins on specificity whatever this rule says and is untouched by
   the change. Checked on the sandbox by injecting this rule as the very last
   stylesheet in <head>, which is a harder test than the real load order: the
   footer's three rows stayed at 10px. */
.hsfc-Form div.hsfc-Row {
  gap: var(--atlas-form-row-gap);
  margin-bottom: var(--atlas-form-row-gap);
}

.hsfc-Form div.hsfc-NavigationRow {
  margin-top: var(--atlas-form-row-gap);
  margin-bottom: 0;
}

/* The submit button gets colour, radius, padding and size from the shared
   `.btn` block in theme_overrides.hubl.css, which this generation's class was
   added to. Family and weight are the two things that block does not set --
   ordinary buttons simply inherit both -- and inheritance loses against
   HubSpot's own class rule. Left alone, the button kept rendering in Helvetica
   Bold 700 while every field around it had already switched to the theme font.
   `inherit` lands on 400, which is what the theme's own buttons render at, so
   this matches them rather than inventing a weight for forms alone. (The
   screendesign wants SemiBold 600 on every button, but that is a theme-wide
   button setting -- see the open points in docs/module-sollwerte-xd.md.) */
.hsfc-Form button.hsfc-Button {
  font-family: var(--atlas-font-body);
  font-weight: inherit;
}

/* ── Submit button: stop HubSpot painting gold on click ────────────────────
   Reported as "the form buttons turn gold when you click them", and the cause
   is `:focus`, not `:active`. HubSpot ships these three rules for the button,
   in this order:

     .hsfc-Button:not([disabled]):hover  -> reads --hsf-button--hover__*
     .hsfc-Button:not([disabled]):active -> transform and box-shadow only
     .hsfc-Button:not([disabled]):focus  -> reads --hsf-button--focus__*

   `:active` sets no colour at all, so it was never the one. `:focus` sets
   colour, background and border, and each falls back through
   `--hsf-button__*` to `--hsf-default-button__*` when we hand it nothing --
   which in this portal computes to rgba(181, 136, 38), the gold. Clicking a
   button focuses it, so every click repainted it gold, and its rule at 0-4-0
   beat the theme's own 0-2-1.

   The modules that styled this button only ever fed the *hover* trio, so the
   focus trio was reaching HubSpot's default untouched. Feeding it the resting
   look is the fix, and it is the same approach the hover trio already uses:
   hand HubSpot the variables its own rule reads rather than out-specifying it.

   A click is not a design state of its own -- the screendesign has a resting
   and a hover button and nothing else -- so focus renders as the resting one.
   Modules with a differently coloured button override these three; the footer
   does, because its newsletter button is black rather than the brand red.

   Note this also covers keyboard focus, which the modules' `:focus-visible`
   rules already handled. `:focus-visible` is exactly why the click case went
   unnoticed for so long: it does not match a mouse click, only a keyboard
   one, so the guard that looked like it covered this never ran on a click. */
.hsfc-Form {
  --hsf-button--focus__background-color: var(--atlas-btn-primary-background);
  --hsf-button--focus__color: var(--atlas-btn-primary-color);
  --hsf-button--focus__border-color: var(--atlas-btn-primary-border-color);
}

/* With the trio fed, a button that is hovered *and* focused -- which is every
   button for as long as the pointer rests on it after a click -- would show
   the resting colours, because HubSpot's `:focus` rule ties with its `:hover`
   rule on specificity and sits after it. Without this the button visibly
   un-hovers under the cursor the moment it is clicked.

   0-5-1 against their 0-4-0. The values are the same ones the hover trio
   feeds, so a module that overrides those still gets its own hover here. */
[data-hsfc-id='Renderer'] .hsfc-Form button.hsfc-Button:not([disabled]):hover {
  background-color: var(
    --hsf-button--hover__background-color,
    var(--atlas-btn-primary-hover-background)
  );
  color: var(--hsf-button--hover__color, var(--atlas-btn-primary-hover-color));
  border-color: var(
    --hsf-button--hover__border-color,
    var(--atlas-btn-primary-hover-border-color)
  );
}