/**
 * @file
 * Basic form: a centred two-up grid, in one of two skins. The ln-signup class
 * predates the rename; see signup.component.yml for why it stayed.
 *
 * The values below are the "pill" skin, which is also the default; the
 * .ln-signup--style-filled block further down overrides only what the newer
 * treatment changes. Everything structural — the width, the two columns, the
 * gap between them — is shared, because the two comps were drawn to the same
 * grid: measured off the filled mockup at 916.5px wide, two 443.5px columns
 * and a 29.5px gutter, against the 920/29 already here.
 *
 * No background and no padding-block — the section and css/layout.css own both.
 */

.ln-signup {
  --ln-signup-max-width: 920px;
  --ln-signup-column-gap: 29px;
  --ln-signup-row-gap: 25px;

  --ln-signup-label-size: 18px;
  --ln-signup-label-gap: 4px;

  /* Radio and checkbox option labels. The same size as a field label, not the
     input's — measured off the comp, where "1-4" is 12.5px of digit height
     against the field labels' 13px cap, both of which are 18px in Outfit. The
     line box is deliberately much taller than the text: it is what gives the
     option row its height. */
  --ln-signup-option-size: 18px;
  --ln-signup-option-line-height: 36px;

  --ln-signup-input-height: 42.5px;
  --ln-signup-input-radius: 68px;
  --ln-signup-input-bg: #ffffff;
  --ln-signup-input-border: #d7d7d7;
  --ln-signup-input-border-focus: var(--ln-color-red, #cf0000);
  --ln-signup-input-padding-inline: 17.5px;
  --ln-signup-input-size: 14px;
  --ln-signup-input-placeholder: #37321c;

  --ln-signup-submit-width: 163px;
  --ln-signup-submit-height: 40px;
  --ln-signup-submit-radius: 74px;

  box-sizing: border-box;
  max-inline-size: var(--ln-signup-max-width);
  margin-inline: auto;
  padding-inline: var(--ln-container-gutter, 15px);
  color: var(--ln-color-slate, #242a2a);
  font-family: var(--ln-font-sans, Outfit, sans-serif);
}

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

/* Row-major, so the webform's field order is the reading order. */
.ln-signup form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ln-signup-column-gap);
  row-gap: var(--ln-signup-row-gap);
  align-items: start;
}

.ln-signup .js-form-item,
.ln-signup .form-item {
  display: flex;
  flex-direction: column;
  gap: var(--ln-signup-label-gap);
  margin: 0;
  min-inline-size: 0;
}

.ln-signup label {
  font-size: var(--ln-signup-label-size);
  font-weight: 500;
  line-height: normal;
}

.ln-signup :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select) {
  inline-size: 100%;
  block-size: var(--ln-signup-input-height);
  padding-inline: var(--ln-signup-input-padding-inline);
  border: 1px solid var(--ln-signup-input-border);
  border-radius: var(--ln-signup-input-radius);
  background-color: var(--ln-signup-input-bg);
  color: var(--ln-color-slate, #242a2a);
  font-family: inherit;
  font-size: var(--ln-signup-input-size);
  line-height: normal;
}

/* The mockup draws the first field focused, with the border going red and the
   fill unchanged. :focus-visible would skip pointer focus, and a field the user
   clicked into should look the same as one they tabbed to. */
.ln-signup :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select):focus {
  border-color: var(--ln-signup-input-border-focus);
  outline: none;
}

.ln-signup ::placeholder {
  color: var(--ln-signup-input-placeholder);
  opacity: 1;
}

/**
 * The required marker. Nothing renders one otherwise: this site's theme leaves
 * .form-required::after at content: none, so the asterisk the comp draws would
 * simply be absent. The "/ ''" is alternative text — empty, so a screen reader
 * does not announce "star" on top of the field's own required state.
 *
 * Whether the label it hangs off is visible at all is the webform's business,
 * not this component's: each element carries its own "Title display" setting,
 * and the forms on this site are commonly set to invisible with the field's
 * placeholder carrying the name instead.
 */
.ln-signup label.form-required::after {
  content: '*' / '';
  color: var(--ln-color-red, #cf0000);
}

/**
 * Radios and checkboxes.
 *
 * The selectors follow form.css, which is what these markup hooks were proved
 * against on this site's webforms — Webform emits .form-type-radios for the
 * group, one of three different containers for the options depending on the
 * element, and .form-type-radio per option.
 *
 * Unlike the form block, which sets the question and its options on one line,
 * here the question sits above them: in this grid a radio group is one cell of
 * a two-column layout and has to read like the fields beside it.
 */
.ln-signup :is(.form-type-radios, .form-type-checkboxes) {
  display: flex;
  flex-direction: column;
  gap: var(--ln-signup-label-gap);
}

/* Webform puts the options in one of several containers depending on the
   element and its options display; all of them lay the options out in a row. */
.ln-signup .fieldset-wrapper,
.ln-signup :is(.js-webform-radios, .js-webform-checkboxes),
.ln-signup :is(.form-radios, .form-checkboxes),
.ln-signup [class*="webform-options-display-"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}

.ln-signup :is(.form-type-radio, .form-type-checkbox) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* accent-color rather than a hand-drawn control: it recolours the native
   widget, so the hit area, keyboard behaviour and forced-colors rendering all
   stay the browser's. The comp's selected radio measures 13x13, which is the
   native size, so nothing is resized. Doubled class to clear Cohesion. */
.ln-signup .form-radio.form-radio,
.ln-signup .form-checkbox.form-checkbox {
  margin: 0;
  accent-color: var(--ln-color-red, #cf0000);
}

/**
 * Option labels. They take the field-label size but not its weight: in the
 * comp they read as the field's value, not as a second heading over it.
 *
 * Matched two ways on purpose. label.option is the reliable one: core's
 * form-element-label template adds that class to every radio and checkbox
 * label whatever the options display, so it holds even when the option is not
 * wrapped in .form-type-radio. The wrapper-based selector stays for any option
 * label that arrives without the class.
 */
.ln-signup label.option,
.ln-signup :is(.form-type-radio, .form-type-checkbox) label {
  margin: 0;
  font-size: var(--ln-signup-option-size);
  font-weight: 400;
  line-height: var(--ln-signup-option-line-height);
}

/* Spans both columns so the button can sit against the grid's right edge. */
.ln-signup .form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.ln-signup .form-actions .form-submit {
  inline-size: var(--ln-signup-submit-width);
  block-size: var(--ln-signup-submit-height);
  padding: 0;
  border: 0;
  border-radius: var(--ln-signup-submit-radius);
  background-color: var(--ln-color-red, #cf0000);
  color: var(--ln-color-creme, #fbf6f0);
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ln-cta-transition, background-color 0.15s ease-in-out);
}

.ln-signup .form-actions .form-submit:hover {
  background-color: var(--ln-color-red-hover, #961f00);
}

/**
 * ---------------------------------------------------------------------------
 * The "filled" skin
 * ---------------------------------------------------------------------------
 *
 * Measured from tmp/new-form.png, a 2x export of a 1920px frame. The fill is
 * #f4f4f3 and the hairline #b1b3b0, both sampled directly; the 8px input radius
 * and the 3px submit radius are circle fits to the rendered corners, to 0.15
 * and 0.10 CSS px respectively. The submit measures 162.5x40 against the pill
 * skin's 163x40 — the same button with its corners taken off.
 *
 * The row rhythm differs only because the input is 2.5px shorter: the mockup's
 * row pitch is 94.5px, and 40 + 6 + 26 plus an 18px label's line box lands on
 * that, where the pill skin's 42.5 + 4 + 25 lands on 94.
 */
.ln-signup--style-filled {
  /**
   * 916.5px of fields, measured edge to edge. Expressed as content plus the
   * gutters because --ln-signup-max-width is the outer box and the gutter sits
   * inside it, the way --ln-container-max does in tokens.css.
   *
   * The pill skin's plain 920px therefore renders 890px of fields. If its own
   * comp also meant 920px of fields — and its 29px gutter matching this comp's
   * 29.5px suggests the two were drawn on one grid — then it is 27px narrow
   * and wants the same treatment. Left alone here rather than quietly moving a
   * form that is already live.
   */
  --ln-signup-max-width: calc(917px + 2 * var(--ln-container-gutter, 15px));

  --ln-signup-row-gap: 26px;
  --ln-signup-label-gap: 6px;

  --ln-signup-input-height: 40px;
  --ln-signup-input-radius: 8px;
  --ln-signup-input-bg: #f4f4f3;
  --ln-signup-input-border: #b1b3b0;
  --ln-signup-input-placeholder: #757575;

  --ln-signup-submit-radius: 3px;
}

/**
 * The submit sits beside the last field instead of on a row of its own, which
 * is how the mockup pairs it with the radio group.
 *
 * Column 2 explicitly, not auto-placement: auto-placement would drop it into
 * column 1 whenever the webform has an even number of fields. Grid's sparse
 * row flow only ever moves the cursor forward, so naming the column puts it in
 * the first free cell of column 2 at or after the last field.
 */
.ln-signup--style-filled .form-actions {
  grid-column: 2;
  align-self: end;
  justify-content: flex-end;
}

/* Phone: one column, and the submit stretches rather than hanging right. */
@media (max-width: 47.99rem) {
  .ln-signup form {
    grid-template-columns: minmax(0, 1fr);
  }

  .ln-signup .form-actions,
  .ln-signup--style-filled .form-actions {
    grid-column: 1;
    justify-content: stretch;
  }

  .ln-signup .form-actions .form-submit {
    inline-size: 100%;
  }
}

/**
 * Editor-authored rich text, revealed by the CRM writing to style.display — so
 * no display here, it would be overridden anyway.
 *
 * Descendant selectors, not child: Drupal's field wrapper sits in between. Every
 * rule is (0,1,1), which clears Cohesion's bare-element styles at (0,0,1).
 */
.ln-signup__success {
  color: var(--ln-color-slate, #242a2a);
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

.ln-signup__success :is(p, h2, h3, h4, ul, ol) {
  margin: 0;
}

.ln-signup__success :is(p, ul, ol) + :is(p, ul, ol) {
  margin-block-start: 1rem;
}

/* Headings group with their own text: more space above than below. */
.ln-signup__success * + :is(h2, h3, h4) {
  margin-block-start: 1.5rem;
}

.ln-signup__success :is(h2, h3, h4) {
  font-weight: 500;
  line-height: 1.3;
}

.ln-signup__success h2 {
  font-size: 24px;
}

.ln-signup__success h3 {
  font-size: 20px;
}

.ln-signup__success h4 {
  font-size: 18px;
}

.ln-signup__success :is(ul, ol) {
  padding-inline-start: 1.25rem;
}

.ln-signup__success li + li {
  margin-block-start: 0.25rem;
}

.ln-signup__success :is(strong, b) {
  font-weight: 600;
}

.ln-signup__success a {
  color: var(--ln-color-red, #cf0000);
  text-decoration: underline;
}