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

/* --------------------------------------------------------------------------
   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
   Specificity here is 0,3,0 with !important. Anything that needs to
   override it must be more specific. See section 3.
   -------------------------------------------------------------------------- */

.webform-submission-form .form-radios,
.webform-submission-form .form-checkboxes {
  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. Two-column override
   Add "form_department" in the Webform UI. Drupal outputs it as
   "form-department" (Html::getClass converts underscores to hyphens).

   Selectors are deliberately at 0,4,0 so they outrank section 2.
   The :has() rule targets whichever element is the direct parent of the
   checkbox items, regardless of Webform's wrapper markup.
   -------------------------------------------------------------------------- */

.webform-submission-form .form-department :has(> .js-form-type-checkbox),
.webform-submission-form .form-department :has(> .js-form-type-radio) {
  display: block !important;
  column-count: 2;
  column-gap: 2.5rem;
}

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

/* Force one option per line inside each column */
.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;
}

/* Nudge the box down so it optically centers on the first line of a
   label that wraps to two lines */
.webform-submission-form .form-department input[type="checkbox"],
.webform-submission-form .form-department input[type="radio"] {
  margin-top: 0.25em !important;
}

.webform-submission-form .form-department label {
  line-height: 1.4 !important;
  /*font-weight: normal;*/
}

/* Single column on small screens */
@media (max-width: 48rem) {
  .webform-submission-form .form-department :has(> .js-form-type-checkbox),
  .webform-submission-form .form-department :has(> .js-form-type-radio) {
    column-count: 1;
  }
}

/* --------------------------------------------------------------------------
   4. List spacing
   -------------------------------------------------------------------------- */

ul li {
  margin-bottom: 0;
}