/* Areas of interest: style each individual checkbox as a clickable pill
   button with a checkbox icon inside it, rather than a checkbox+label
   pair. Kept as real checkboxes underneath (each is its own Compass
   field) - visual only.

   The theme already hides the native checkbox input and draws its own
   checkbox box/checkmark via label::before/::after (see
   audley/src/scss/components/_forms.scss), absolutely positioned to sit
   to the left of the whole label - that positioning doesn't work once
   the label becomes a pill, so this draws a single self-contained
   box+checkmark from label::before instead (laid out inline via flex,
   no manual positioning needed) and turns off the theme's own ::after. */
.webform-checkbox-buttons .form-type-checkbox {
  display: inline-block !important;
  margin: 0 10px 12px 0 !important;
}
.webform-checkbox-buttons label.option {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 8px !important;
  font-size: 0.875rem !important;
  font-weight: normal !important;
  /* The checkbox box is a fixed 18px square so it always centres
     reliably; the text next to it sits in an anonymous flex item whose
     height is the line-height, which is inherently font-metric
     dependent and can end up taller than the checkbox with the extra
     space split unevenly depending on the font's own ascent/descent
     (can render slightly differently across browsers/OSes even with
     identical CSS). Pinning line-height close to the checkbox's own
     size removes the slack that lets any such mismatch show. */
  line-height: 18px !important;
  border: 1px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
}
/* Preferred time slots specifically (the only pills with two-line
   title+description text): centering the checkbox against the whole
   two-line block puts it at the boundary between the lines, which
   reads as misaligned against the (visually dominant) title line.
   Align it with the top/title line instead, matching how an icon
   next to a title+subtitle pair is normally aligned. Single-line
   pills are untouched - they were already correctly centered. */
.webform-checkbox-buttons label.option:has(.slot-text) {
  align-items: flex-start;
}
.webform-checkbox-buttons label.option:has(.slot-text)::before {
  margin-top: 1px;
}
/* The theme's own native checkbox/radio box (form .form-item.form-type-
   checkbox label::before, form .form-item.form-type-radio label::before)
   has more type selectors in its chain (form, label) than this rule
   does, so despite our rule having the same number of classes it was
   losing on width/height/border/background-color/border-radius here -
   rendering the THEME's own checkbox box (wrong size, brand-coloured
   border) instead of ours, on both sites (border-style: none on
   Mayfield's version specifically, making the checkbox invisible
   there; a stray 20px purple-bordered box on Audley's). !important
   throughout, matching the pattern already used elsewhere in this
   block rather than trying to out-specificity the theme selector. */
.webform-checkbox-buttons label.option::before {
  content: '' !important;
  position: static !important;
  display: inline-block !important;
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  box-sizing: border-box !important;
  border: 1.5px solid #999 !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.webform-checkbox-buttons label.option::after {
  content: none !important;
  display: none !important;
}
.webform-checkbox-buttons .form-checkbox:checked ~ label.option {
  background: #2b0e48;
  border-color: #2b0e48;
  color: #fff;
}
/* Same theme specificity issue as above, this time on the :checked
   variant (form .form-item.form-type-checkbox input:checked ~
   label::before) - it was winning on background-color, leaving the
   checkbox showing the theme's pale tint instead of turning white
   with our purple checkmark icon. */
.webform-checkbox-buttons .form-checkbox:checked ~ label.option::before {
  background-color: #fff !important;
  border-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232b0e48' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4.5'/%3E%3C/svg%3E") !important;
}
.webform-checkbox-buttons .form-checkbox:focus ~ label.option {
  outline: 2px solid #2b0e48;
  outline-offset: 2px;
}
/* Preferred time slots: two-line title/description text within the same
   pill button treatment (option labels support HTML, confirmed). */
.webform-checkbox-buttons label.option .slot-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.webform-checkbox-buttons label.option .slot-title {
  font-weight: normal;
}
.webform-checkbox-buttons label.option .slot-desc {
  font-size: 0.75rem;
  opacity: 0.75;
}
/* Top-level sections (fieldsets and plain fields alike) currently have
   no bottom margin at all, so consecutive sections sit flush against
   each other - most noticeable straight after a row of pill buttons or
   after a fieldset's description text. Add consistent breathing room
   between every top-level section without affecting spacing of the
   fields nested inside them (column layouts etc unaffected). */
.webform-submission-form > .form-item,
.webform-submission-form > .js-form-wrapper {
  margin-bottom: 1.5rem;
}
/* Address line 1/2, town/county and postcode all belong to the same
   postal address group (moved to top-level siblings rather than being
   nested, to avoid a theme CSS bug elsewhere in this form) - give them a
   tighter gap between each other than the gap separating the group as a
   whole from unrelated fields before/after it, so postcode still reads
   as part of the address rather than a disconnected extra field. */
.webform-submission-form > .form-item-address-one,
.webform-submission-form > .form-item-address-line-2,
.webform-submission-form > #edit-address-town-county {
  margin-bottom: 0.5rem !important;
}
/* The theme adds an extra-large 2.5rem bottom margin to nested
   .form-item elements on desktop viewports (audley theme
   components/_forms.scss, under the desktop breakpoint) - sized for
   normal spaced-out forms elsewhere on the site, but it leaves an
   oversized, inconsistent gap after the last field in "Visit & event
   details" (particularly noticeable after the Preferred time slots
   pills). Bring fields inside this fieldset back down to the same
   1.5rem gap used between top-level sections everywhere else in this
   form. */
#edit-visit-and-event-details .form-item {
  margin-bottom: 1.5rem !important;
}
/* The rule above (needed for !important specificity against the theme)
   also matches each individual Preferred time slots checkbox wrapper,
   since every pill is itself a .form-item nested in this same
   fieldset - overriding the tighter 12px pill-to-pill spacing set
   above back up to 1.5rem. Both are !important, so this needs to win
   purely on specificity: same ID + one extra class beats ID + one
   class. */
#edit-visit-and-event-details .webform-checkbox-buttons .form-type-checkbox {
  margin-bottom: 12px !important;
}
/* The geolocation "Your nearest village appears to be..." message
   renders its whole text inside a div.label (see
   webform-geolocation.js), which the theme bolds by default like a
   real form-item label - not wanted here, it should read as plain
   body text, sized to match a field description rather than a label. */
.audley_nearest_village_explanation .label {
  font-weight: normal;
  font-size: .875rem;
}
/* The theme's checkbox/radio-specific label rule
   (form .form-item.form-type-checkbox label) is more specific than
   .webform-checkbox-buttons label.option above, so it was winning and
   overriding our 0.875rem font-size back up to the theme's 1rem
   default for every checkbox styled as a pill button (areas of
   interest, preferred time slots, where did you hear about us,
   consent & opt-ins) - not visible as a difference in weight (both
   already computed to 500), only in size. Fixed with !important
   rather than out-specificing the theme selector, to match the
   pattern already used elsewhere in this CSS block.

   "I understand..." (age_confirm) has the same theme rule bumping it
   to 1rem, but isn't one of the pill buttons at all - just a plain
   checkbox - so it needs its own separate override, keyed off its
   wrapper class rather than .webform-checkbox-buttons. */
.form-item-age-confirm label {
  font-size: 0.875rem !important;
}
/* Phone number's "invalid number" message is custom JS (see
   audley_webform.js), not Drupal's own generated
   <label class="error">...</label> markup that every other
   validation error on this form uses - so it never picked up the
   theme's error-label styling (12px, brand red, medium weight) and
   was rendering as a plain bold 16px <strong>, plus an unwanted icon
   from Drupal core's own (unrelated) .form-item--error-message
   convention that this JS happens to reuse the class name of. Matched
   to the other validation errors and dropped the icon. */
.form-item--error-message {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #e30613 !important;
}
.form-item--error-message::before {
  content: none !important;
  display: none !important;
}