/**
 * @file
 * Bridges Drupal Form API classes to DPL design system conventions for the
 * Newsletter Subscription paragraph. All visual styling defers to base.css;
 * this file only provides the layout plumbing and class mapping that the
 * design-system templates normally handle via Twig.
 */

/* Make each form item behave like .dpl-input */
.paragraph--type--newsletter-subscription .form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

/* Email input: bottom-border only, matching .dpl-input input */
.paragraph--type--newsletter-subscription .form-item-email input[type="email"] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #707070;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 4px;
  font-family: inherit;
  font-size: inherit;
}

.paragraph--type--newsletter-subscription .form-item-email input[type="email"]:focus {
  outline: none;
  border-bottom-color: #000;
}

/* Mailing list legend: treat like an input-label */
.paragraph--type--newsletter-subscription .fieldset-legend,
.paragraph--type--newsletter-subscription .js-form-type-checkboxes > label {
  font-weight: 500;
  margin-bottom: 8px;
}

/* Each checkbox row: flex row, matching .dpl-input.checkbox-override */
.paragraph--type--newsletter-subscription .js-form-type-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 8px 6px 0;
  margin-bottom: 0;
}

.paragraph--type--newsletter-subscription .js-form-type-checkbox input[type="checkbox"] {
  accent-color: #000;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.paragraph--type--newsletter-subscription .js-form-type-checkbox label {
  cursor: pointer;
  padding: 0 8px;
  margin: 0;
}

/* No extra margin on form actions, button styling handled by btn-* classes */
.paragraph--type--newsletter-subscription .form-actions {
  margin-top: 24px;
}

.paragraph--type--newsletter-subscription .form-actions .button {
  padding: 12px 32px;
  border: 1px solid currentColor;
}