/**
 * @file
 * Form component styles.
 *
 * NOTE: superseded, but deliberately not updated. The full-page design shows this
 * section redesigned — a centred heading over a two-column field grid on white,
 * with no photo background and no translucent panel. That redesign is out of
 * scope for the current page, so what follows still implements the standalone
 * mockup it was built from. Expect this file to be rewritten rather than tweaked
 * when the new design comes into scope.
 *
 * Values are measured from tmp/form-component.png. The component is 1410px wide
 * and the export is 2820px, so the scale is exactly 2 and every measurement
 * halves cleanly — the input gap lands on 16px and the submit button on 208x40,
 * which is the confirmation that the divisor is right.
 *
 * The background image is the section's own background and is clipped to the
 * 1410px measure rather than bleeding, which is what the comp shows: the photo
 * starts and stops with the component.
 *
 * Scope: the section, the two columns, the panel, and generic styling for the
 * webform's own fields. That last part follows Site Studio's model, where field
 * rules belonged to the component embedding the form rather than to a global
 * stylesheet — see the note above the field rules for the division of labour
 * between this file and a webform's own CSS tab.
 *
 * Every measured value is a custom property, since a few of them — the 42px
 * input height, the 50px panel padding — sit half a pixel off a round number and
 * may read differently in Figma.
 */

.ln-form {
  --ln-form-max-width: 1410px;

  /* Confirmed from the export's alpha channel: the corners are transparent, and
     fitting a circle to where the arc becomes opaque gives 32.8 image px — 16.4
     CSS at 2x. The background is clipped by this automatically, since a
     background is painted inside the border box and honours its radius. */
  --ln-form-radius: 16px;

  /* 32px at full width: the copy's left edge and the panel's right edge both sit
     32px inside the measure. Shrinks on small screens. */
  --ln-form-padding-inline: clamp(1.25rem, 4vw, 32px);
  --ln-form-padding-block: 32px;

  /* The copy column does not fill its side. It is capped and the remaining space
     falls between the columns, which is what leaves the wide empty cream area in
     the comp. */
  --ln-form-copy-width: 510px;

  --ln-form-fg: var(--ln-color-ink, #1c1c1c);
  --ln-form-accent: var(--ln-color-red, #cf0000);

  /* Heading is set in caps by the designer, not by text-transform — see the note
     on .ln-form__copy h2. */
  --ln-form-heading-size: 28px;
  --ln-form-heading-weight: 400;
  --ln-form-heading-leading: 1.4;
  --ln-form-body-size: 18px;
  --ln-form-body-leading: 1.8;

  /* Panel. 85% white: the building lines stay faintly visible, which is what the
     mockup shows. Solved from two samples of the same panel over a dark and a
     light part of the photo, which put it between 0.80 and 0.85. */
  --ln-form-panel-width: 544px;
  --ln-form-panel-bg: rgb(255 255 255 / 85%);

  /* Matched to the section rather than left at the 4px of an earlier pass, which
     measurement has since ruled out. Tracing the panel's own corner puts it
     between 10 and 16 CSS px — the reading is noisy because the panel is
     translucent over a photograph — so 16 is both within tolerance and the value
     the section uses. Worth a glance when the designer reviews. */
  --ln-form-panel-radius: 16px;
  --ln-form-panel-padding-block-start: 40px;
  --ln-form-panel-padding-block-end: 32px;
  --ln-form-panel-padding-inline: 50px;

  /* Controls. The text size is from the cap height of the "First Name"
     placeholder, which has no descenders, so its ink extent is the cap height
     directly. */
  --ln-form-input-height: 42px;
  --ln-form-input-gap: 16px;
  --ln-form-input-radius: 2px;
  --ln-form-input-border: #b1b1b1;
  --ln-form-input-bg: #ffffff;
  --ln-form-input-fg: var(--ln-color-ink, #1c1c1c);
  --ln-form-input-placeholder: #757575;
  --ln-form-input-size: 16px;
  --ln-form-input-padding-inline: 14px;
  --ln-form-radio-size: 16px;

  /* Submit button: the hero's primary CTA. Read from the shared CTA tokens in
     css/tokens.css rather than restated, so the two cannot drift apart. Not the
     mockup's values — see the note above .ln-form .form-actions. */
  --ln-form-button-bg: var(--ln-color-red, #cf0000);
  --ln-form-button-bg-hover: var(--ln-color-red-hover, #961f00);
  --ln-form-button-fg: #ffffff;
  --ln-form-button-radius: var(--ln-cta-radius, 4px);
  --ln-form-button-size: var(--ln-cta-font-size, 18px);
  --ln-form-button-weight: var(--ln-cta-font-weight, 400);
  --ln-form-button-leading: var(--ln-cta-line-height, 1.5);
  --ln-form-button-padding-block: var(--ln-cta-padding-block, 10px);
  --ln-form-button-padding-inline: var(--ln-cta-padding-inline, 16px);
  --ln-form-button-transition: var(--ln-cta-transition,
    background-color 0.15s ease-in-out, color 0.15s ease-in-out,
    border-color 0.15s ease-in-out);
  --ln-form-button-min-width: 0;

  --ln-form-font: var(--ln-font-sans, Outfit, sans-serif);

  position: relative;
  box-sizing: border-box;
  max-inline-size: var(--ln-form-max-width);
  margin-inline: auto;
  border-radius: var(--ln-form-radius);
  color: var(--ln-form-fg);
  font-family: var(--ln-form-font);
  /* Mobile crop is the default so that the narrow case needs no query, and a
     viewport between the two rules is never left with no background at all. */
  background-image: var(--ln-form-bg-mobile, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ln-form *,
.ln-form *::before,
.ln-form *::after {
  box-sizing: inherit;
}

/**
 * 72rem, not the 64rem used elsewhere in the library. The two columns need
 * 510 + 544 plus padding and a gap, which is about 1120px — below that the panel
 * would start eating the copy. Paired with the layout query near the bottom of
 * this file: the crop and the column count have to change together.
 */
@media (min-width: 72rem) {
  .ln-form {
    background-image: var(--ln-form-bg-desktop, var(--ln-form-bg-mobile, none));
  }
}

/**
 * Two columns. The copy sits at the bottom of its column and the panel is
 * centred in its own, which is how the mockup reads — they are not aligned to a
 * shared baseline, so align-items would be the wrong tool.
 *
 * space-between rather than a fixed gap. At the full 1410px the columns come to
 * 510 + 544 inside 32px padding, leaving 292px between them — too much to call a
 * gap, and hardcoding it would push the panel off the measure the moment the
 * viewport narrowed. Letting the free space collapse on its own means the copy
 * keeps its cap and the panel keeps its width until there is genuinely no room.
 */
.ln-form__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
  padding-block: var(--ln-form-padding-block);
  padding-inline: var(--ln-form-padding-inline);
}

.ln-form__copy {
  display: flex;
  flex: 1 1 auto;
  /* Bottom of the column, per the mockup. */
  flex-direction: column;
  justify-content: flex-end;
  min-inline-size: 0;
  max-inline-size: var(--ln-form-copy-width);
  font-size: var(--ln-form-body-size);
  line-height: var(--ln-form-body-leading);
}

/**
 * The heading is uppercase in the comp. Deliberately not text-transform, so the
 * casing lives in the content: the translated headings are authored by hand per
 * locale, and languages differ on whether a long heading is set in caps at all.
 * Forcing it here would apply that decision to every locale at once.
 */
.ln-form__copy :is(h2, h3) {
  margin: 0 0 24px;
  font-size: var(--ln-form-heading-size);
  font-weight: var(--ln-form-heading-weight);
  line-height: var(--ln-form-heading-leading);
  letter-spacing: 0.01em;
}

.ln-form__copy > :last-child {
  margin-bottom: 0;
}

.ln-form__copy p {
  margin: 0 0 1em;
}

.ln-form__copy p:last-child {
  margin-bottom: 0;
}

/* Panel. */
.ln-form__panel {
  /* Shrinkable, so between the breakpoint and the full measure the free space
     between the columns closes before the panel is squeezed. */
  flex: 0 1 var(--ln-form-panel-width);
  align-self: center;
  max-inline-size: 100%;
  padding-block: var(--ln-form-panel-padding-block-start) var(--ln-form-panel-padding-block-end);
  padding-inline: var(--ln-form-panel-padding-inline);
  border-radius: var(--ln-form-panel-radius);
  background-color: var(--ln-form-panel-bg);
}

/**
 * Field styling.
 *
 * This mirrors how Site Studio does it: the field rules belong to the component
 * that embeds the form, not to a global stylesheet. Each rendering context owns
 * the appearance of the fields it renders, so during the migration a form placed
 * in this block and the same form placed in a Site Studio component each get
 * styled by whatever is around them, and neither has to know about the other.
 *
 * The division of labour that follows from that:
 *
 * - Generic — what a text input, a radio row or a submit button looks like in
 *   this layout — belongs here. One copy, in version control, applied to any of
 *   the ~30 webforms an editor might select.
 * - Form-specific — hide this element, widen that one — belongs in that
 *   webform's own CSS tab, keyed on the classes Webform puts on the <form>
 *   itself (webform-submission-<id>-form and friends) so it survives being
 *   rendered anywhere.
 *
 * Selectors are written against Webform's generic output rather than any one
 * form's element keys, because which form is placed here is an editor decision
 * made per language.
 *
 * If a second form-bearing block ever appears, these rules lift out into a
 * shared library in the module and both components attach it. Not worth the
 * indirection for one.
 */

/* Webform wraps the whole thing; strip the margins it ships with. */
.ln-form .webform-submission-form {
  display: flex;
  flex-direction: column;
  gap: var(--ln-form-input-gap);
  margin: 0;
}

.ln-form .form-item {
  margin: 0;
}

/**
 * A field that renders nothing is still a flex item, so the gap above opens a
 * hole in the stack where the visitor sees no field. A hidden input already gets
 * display:none from the UA stylesheet, but its wrapper does not.
 *
 * This is live rather than theoretical: honeypot.settings has
 * protect_all_forms: true, so every webform on this site gets a trap field
 * injected. Honeypot ships its own inline display:none and is therefore already
 * safe, but antibot's markers and any element switched to Webform's Hidden type
 * are not — and neither announces itself as a gap you would think to look for.
 */
.ln-form .form-item:has(> input[type="hidden"]:only-child) {
  display: none;
}

/**
 * Labels: nothing needed here. The comp shows placeholder-only fields, and a
 * placeholder is not a label — announced inconsistently, and gone as soon as the
 * visitor types, which fails WCAG 3.3.2. The fix is on the webform, setting each
 * element's title display to "invisible" so a real <label> stays in the DOM.
 * Core's system/base library already ships .visually-hidden on every page, so no
 * rule is required from this component to make that work.
 */

/**
 * Text inputs. Doubled class to outrank Site Studio's global form styles, the
 * same technique used on the comparison table toggle and the carousel arrows.
 */
.ln-form .form-text.form-text,
.ln-form .form-email.form-email,
.ln-form .form-tel.form-tel,
.ln-form .form-number.form-number,
.ln-form .form-url.form-url,
.ln-form .form-select.form-select,
.ln-form .form-textarea.form-textarea {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: var(--ln-form-input-height);
  max-inline-size: none;
  padding-block: 0;
  padding-inline: var(--ln-form-input-padding-inline);
  border: 1px solid var(--ln-form-input-border);
  border-radius: var(--ln-form-input-radius);
  background-color: var(--ln-form-input-bg);
  box-shadow: none;
  color: var(--ln-form-input-fg);
  font-family: inherit;
  font-size: var(--ln-form-input-size);
  line-height: normal;
}

/* A textarea has to be able to grow, so height becomes a minimum. */
.ln-form .form-textarea.form-textarea {
  block-size: auto;
  min-block-size: calc(var(--ln-form-input-height) * 2);
  padding-block: 12px;
  line-height: 1.4;
}

.ln-form :is(.form-text, .form-email, .form-tel, .form-number, .form-url, .form-textarea)::placeholder {
  color: var(--ln-form-input-placeholder);
  /* Firefox dims placeholders by default. */
  opacity: 1;
}

.ln-form :is(.form-text, .form-email, .form-tel, .form-number, .form-url, .form-select, .form-textarea):focus-visible {
  border-color: var(--ln-form-fg);
  outline: 2px solid var(--ln-form-accent);
  outline-offset: 1px;
}

/* Drupal's inline error styling, kept but recoloured to the brand red. */
.ln-form :is(.form-text, .form-email, .form-tel, .form-number, .form-url, .form-select).error {
  border-color: var(--ln-form-accent);
  border-width: 2px;
}

.ln-form .form-item--error-message {
  margin-block-start: 6px;
  color: var(--ln-form-accent);
  font-size: 15px;
}

/**
 * Radio and checkbox rows. The comp puts the question and its options on one
 * line — "Listings Managed by Office:  (o) 1-4  ( ) 5+" — wrapping only when
 * there is no room.
 *
 * Written against Webform's actual markup, which is *not* core's fieldset:
 *
 *   <div class="form-type-radios webform-type-radios form-item …">
 *     <label for="…">Listings Managed by Office:</label>
 *     <div class="js-webform-radios webform-options-display-one-column">
 *       <div class="form-type-radio …"><input class="form-radio"><label class="option">
 *
 * An earlier pass here assumed a <fieldset><legend> and floated the legend,
 * because a legend cannot be a flex item in several engines. None of it matched:
 * Webform uses a plain <label> as a sibling of the options container, so it is
 * an ordinary flex item and the float was solving a problem this markup does not
 * have. The fieldset reset below is kept because Webform's own Fieldset element
 * does produce one, but the row layout no longer depends on it.
 *
 * The options container is targeted by .js-webform-radios rather than
 * .form-radios — Webform replaces core's class, so the core one never matched.
 * Flex here also means the row reads side by side whichever "Options display"
 * the editor picked on the element; this form is set to one column.
 */
.ln-form .fieldgroup,
.ln-form fieldset.form-item {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The question and its options, on one line. */
.ln-form :is(.form-type-radios, .form-type-checkboxes) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.ln-form :is(.form-type-radios, .form-type-checkboxes) > label {
  margin: 0;
  font-size: var(--ln-form-body-size);
  font-weight: 400;
  line-height: 1.3;
}

/* The options themselves. */
.ln-form .fieldset-wrapper,
.ln-form :is(.js-webform-radios, .js-webform-checkboxes),
.ln-form :is(.form-radios, .form-checkboxes) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.ln-form .form-type-radio,
.ln-form .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ln-form .form-radio.form-radio,
.ln-form .form-checkbox.form-checkbox {
  /* accent-color styles the native control, which keeps the platform's own focus
     ring and hit target instead of rebuilding both from a pseudo-element. */
  inline-size: var(--ln-form-radio-size);
  block-size: var(--ln-form-radio-size);
  margin: 0;
  accent-color: var(--ln-form-accent);
}

.ln-form :is(.form-type-radio, .form-type-checkbox) label {
  margin: 0;
  font-size: var(--ln-form-body-size);
  font-weight: 400;
  line-height: 1;
}

/**
 * Submit button — the hero's primary CTA, reproduced.
 *
 * Every value here is button.css's, so the two read as one button: #cf0000 on
 * white, 10px/16px padding, 4px radius, Outfit 18px/400 at 1.5, and the same
 * 0.15s ease-in-out transition. The hover #961f00 is worth knowing about — it is
 * not in the Figma frame, which has no hover state. It comes from the existing
 * Site Studio "Red button" custom style
 * (cohesion_custom_styles.cohesion_custom_style.fd769c62), which is why an
 * opacity fade was the wrong approach: it approximated a colour the site already
 * defines exactly.
 *
 * This overrides the mockup, which draws a smaller 208x40 button with a 2px
 * radius and 16px text. Matching the hero makes it roughly 224x49 instead. Told
 * to match, the shared component wins over the one comp — but it is a visible
 * change from the mockup, so worth a look.
 *
 * min-width rather than a fixed width, for the reason button.css gives: the
 * button holds its designed size for a normal label and grows for a long one.
 * That matters more here than in the hero, since these forms are per-locale and
 * "Request Demo" becomes "Solicitar una demostración".
 *
 * The values are not duplicated: both this file and button.css read the
 * --ln-cta-* and --ln-color-red* tokens from css/tokens.css, so the button has a
 * single definition. Sharing a *class* is what is impossible — the markup is
 * Webform's, and a form_alter that added .ln-button could not tell whether the
 * form was rendering in this block or in a Site Studio component, so it would
 * leak the class site-wide. Sharing the values is the next best thing.
 *
 * Centring is this component's own decision, from the comp, not part of the
 * match — the hero's buttons align left in their own layout.
 */
.ln-form .form-actions {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}

.ln-form .form-actions .form-submit.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-inline-size: var(--ln-form-button-min-width);
  max-inline-size: 100%;
  padding: var(--ln-form-button-padding-block) var(--ln-form-button-padding-inline);
  border: 1px solid transparent;
  border-radius: var(--ln-form-button-radius);
  background-color: var(--ln-form-button-bg);
  background-image: none;
  color: var(--ln-form-button-fg);
  font-family: var(--ln-form-font);
  font-size: var(--ln-form-button-size);
  font-weight: var(--ln-form-button-weight);
  line-height: var(--ln-form-button-leading);
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: var(--ln-form-button-transition);
}

/* 62rem, matching button.css, so both buttons take their designed width at the
   same point rather than at two breakpoints 10rem apart. */
@media (min-width: 62rem) {
  .ln-form {
    --ln-form-button-min-width: var(--ln-cta-min-width, 224px);
  }
}

.ln-form .form-actions .form-submit.form-submit:hover,
.ln-form .form-actions .form-submit.form-submit:focus {
  border-color: transparent;
  background-color: var(--ln-form-button-bg-hover);
  color: var(--ln-form-button-fg);
  text-decoration: none;
}

/* Not in the Figma frame; added so keyboard users get a visible focus ring. */
.ln-form .form-actions .form-submit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Confirmation and error summaries, which replace the form after submission. */
.ln-form .webform-confirmation {
  font-size: var(--ln-form-body-size);
  line-height: 1.5;
}
/**
 * One column below the panel's breakpoint. The copy comes first, the panel below
 * it, and the panel loses its fixed width so it can fill the measure.
 */
/* Pairs with the background query near the top of this file. */
@media (max-width: 71.9375rem) {
  .ln-form {
    --ln-form-padding-block: 48px;
    --ln-form-heading-size: clamp(1.5rem, 5vw, 28px);
    --ln-form-panel-padding-inline: 24px;
    --ln-form-panel-padding-block-start: 32px;
    --ln-form-panel-padding-block-end: 32px;

    /* The cap only exists to hold the comp's line breaks beside the panel. In one
       column the copy should use the measure it has. */
    --ln-form-copy-width: none;
  }

  .ln-form__inner {
    flex-direction: column;
    gap: 40px;
  }

  .ln-form__copy {
    justify-content: flex-start;
  }

  .ln-form__panel {
    flex: 0 0 auto;
    align-self: stretch;
  }
}

/**
 * Phone: 16px of gutter outside the card.
 *
 * A margin, not padding, because .ln-form *is* the card — it carries the
 * background photograph, the 16px radius and the max-width, and .ln-form__inner
 * holds the padding inside it. Padding here would inset the content while leaving
 * the photo and its rounded corners still running to the screen edge.
 *
 * This replaces `margin-inline: auto`, which loses nothing: auto only has spare
 * width to distribute above --ln-form-max-width (1410px), so at 48rem and below
 * it was already resolving to zero.
 *
 * This is the only component where the page gutter is a margin. Everywhere else
 * the section is a transparent wrapper and the gutter is its padding; here the
 * section is the visible object.
 */
@media (max-width: 47.99rem) {
  .ln-form {
    margin-inline: 16px;
  }
}

/**
 * The panel is the only thing keeping the form legible over a photograph, so when
 * the visitor has asked for less transparency it becomes opaque. Without this the
 * building lines run behind the input labels.
 */
@media (prefers-reduced-transparency: reduce) {
  .ln-form {
    --ln-form-panel-bg: #ffffff;
  }
}

/* Mirrors button.css, so the submit behaves like the hero's CTA here too. */
@media (prefers-reduced-motion: reduce) {
  .ln-form .form-actions .form-submit.form-submit {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .ln-form {
    --ln-form-panel-bg: #ffffff;
    --ln-form-input-border: var(--ln-color-ink, #1c1c1c);
    --ln-form-input-placeholder: #595959;
  }
}