/* public afforms */
.crm-public af-form {

  legend,
  strong,
  fieldset:not(:has(legend)) .crm-af-field-label {
    display: block;

    color: var(--crm-primary-color);
    font-weight: bold;
    font-family: var(--crm-font-title);
    font-size: 1.2rem;
    padding-left: 0;

    padding-top: 1.5rem;
    border-top: var(--crm-border);
    margin-top: 1.5rem;
  }

  legend, strong {
    margin-bottom: 1rem;
  }

  /* use column arrangement for radios with more than 3 options */
  .af-field-type-radio .crm-af-field:has(label:nth-child(4)) {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    padding-right: 3rem;

    .crm-hover-button {
      position: relative;
      top: calc(2rem - 100%);
      left: calc(100% + 1rem);
    }
  }
}


/* indicate title styles in FormBuilder Admin
TODO: this assumes you are editing a frontend form - I dont think there's any selector for this */

#afGuiEditor .af-gui-node-title:not([ng-switch-when=field] .af-gui-node-title),
#afGuiEditor [ng-switch-when=fieldset]:has(.af-gui-node-title .ng-empty) .af-gui-node-title,
#afGuiEditor .af-gui-markup-content strong {
  color: var(--crm-primary-color);
  font-weight: bold;
  font-family: var(--crm-font-title);
  font-size: 1.2rem;
}
#afGuiEditor .af-gui-markup-content strong {
  display: block;
  padding-left: 0;

  padding-top: 1.5rem;
  border-top: var(--crm-border);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}