/* ==========================================================================
   Webform element overrides
   Restores native radios/checkboxes and controls option group layout.

   Specificity note: section 2 runs at 0,3,0 with !important. Any rule that
   needs to override it must be at least as specific. Sections 3 and 4 are
   written at 0,4,0 for that reason.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Restore native controls
   The theme hides the real input and draws a replacement. These rules put
   the browser's own control back and keep it visible to assistive tech.
   -------------------------------------------------------------------------- */

.webform-submission-form input[type="radio"],
.webform-submission-form input[type="checkbox"],
.js-vbo-checkbox,
.form-checkbox {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  opacity: 1 !important;
  position: static !important;
  clip: auto !important;
  overflow: visible !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 0.45rem 0 0 !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
}

.webform-submission-form input[type="radio"] {
  -webkit-appearance: radio !important;
}

/* --------------------------------------------------------------------------
   2. Default option groups: inline, wrapping rows
   Scoped so it does NOT hijack Webform's built-in options display modes.
   -------------------------------------------------------------------------- */

.webform-submission-form .form-radios:not([class*="webform-options-display-"]),
.webform-submission-form .form-checkboxes:not([class*="webform-options-display-"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.webform-submission-form .form-radios .form-item,
.webform-submission-form .form-checkboxes .form-item,
.webform-submission-form .js-form-type-radio,
.webform-submission-form .js-form-type-checkbox {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
}

.webform-submission-form .form-radios label,
.webform-submission-form .form-checkboxes label,
.webform-submission-form .js-form-type-radio label,
.webform-submission-form .js-form-type-checkbox label {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* --------------------------------------------------------------------------
   3. Shared column behavior
   Applies to BOTH Webform's built-in "Options display: two/three columns"
   setting and the custom form_department class. Use either mechanism.

   Reminder: a class entered as "form_department" in the Webform UI is
   output as "form-department" (Html::getClass hyphenates underscores).
   -------------------------------------------------------------------------- */

.webform-submission-form .webform-options-display-two-columns,
.webform-submission-form .webform-options-display-three-columns,
.webform-submission-form .form-department {
  /* Tune these two together if the type scale changes */
  --option-line-height: 1.4;
  --option-box-size: 1rem;
}

/* Column containers. The :has() rule covers form-department, where the
   class sits on the fieldset rather than on the options container. */
.webform-submission-form .form-checkboxes.webform-options-display-two-columns,
.webform-submission-form .form-radios.webform-options-display-two-columns,
.webform-submission-form .form-department :has(> .js-form-type-checkbox),
.webform-submission-form .form-department :has(> .js-form-type-radio) {
  display: block !important;
  max-width: 900px;
  margin-top: 0.4em;
  column-count: 2;
  column-gap: 2.5rem;
}

.webform-submission-form .form-checkboxes.webform-options-display-three-columns,
.webform-submission-form .form-radios.webform-options-display-three-columns {
  display: block !important;
  column-count: 3;
  column-gap: 2rem;
}

/* Legend spans all columns rather than sitting inside one */
.webform-submission-form .form-department > legend,
.webform-submission-form .form-department .fieldset-legend {
  column-span: all;
}

/* One option per line inside each column */
.webform-submission-form .webform-options-display-two-columns .js-form-type-checkbox,
.webform-submission-form .webform-options-display-two-columns .js-form-type-radio,
.webform-submission-form .webform-options-display-three-columns .js-form-type-checkbox,
.webform-submission-form .webform-options-display-three-columns .js-form-type-radio,
.webform-submission-form .form-department .form-item.js-form-type-checkbox,
.webform-submission-form .form-department .form-item.js-form-type-radio,
.webform-submission-form .form-department .js-form-item.js-form-type-checkbox,
.webform-submission-form .form-department .js-form-item.js-form-type-radio {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin: 0 0 0.5rem !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* Align the control to the FIRST line of a wrapping label.
   align-self on the child beats align-items on the parent, so this holds
   even if a more specific container rule sets align-items: center.
   The margin is half the leading: (line box height - box height) / 2. */
.webform-submission-form .webform-options-display-two-columns input[type="checkbox"],
.webform-submission-form .webform-options-display-two-columns input[type="radio"],
.webform-submission-form .webform-options-display-three-columns input[type="checkbox"],
.webform-submission-form .webform-options-display-three-columns input[type="radio"],
.webform-submission-form .form-department input[type="checkbox"],
.webform-submission-form .form-department input[type="radio"] {
  align-self: flex-start !important;
  margin-top: calc(
    (1rem * var(--option-line-height) - var(--option-box-size)) / 2
  ) !important;
}

.webform-submission-form .webform-options-display-two-columns label,
.webform-submission-form .webform-options-display-three-columns label,
.webform-submission-form .form-department label {
  line-height: var(--option-line-height) !important;
}

/* --------------------------------------------------------------------------
   4. Collapse to a single column on narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .webform-submission-form .form-checkboxes.webform-options-display-two-columns,
  .webform-submission-form .form-radios.webform-options-display-two-columns,
  .webform-submission-form .form-checkboxes.webform-options-display-three-columns,
  .webform-submission-form .form-radios.webform-options-display-three-columns,
  .webform-submission-form .form-department :has(> .js-form-type-checkbox),
  .webform-submission-form .form-department :has(> .js-form-type-radio) {
    column-count: 1;
  }
}

/* --------------------------------------------------------------------------
   5. List spacing
   -------------------------------------------------------------------------- */

ul li {
  margin-bottom: 0;
}