/**
 * Theming for forms
 */

legend {
  font-size: 1.1em;
  font-weight: 500;
  margin-bottom: 1rem;
}

.form-item {
  margin-bottom: 1em;
}

label,
h4.label {
  display: block;
  font-size: 1em;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

label.label-inline:after {
  content: ":";
  margin-right: 0.5em;
}

label.option {
  display: inline-block;
}

input,
select,
textarea,
.chosen-container-single .chosen-single {
  background: var(--color-white);
  border: 1px solid var(--color-white);
  outline: none;
  font-size: 0.8rem;

  width: 100%;
  max-width: 30rem;
  padding: 0.7rem;

  /* hack to make select elements in Safari correctly set the padding */
  -webkit-appearance: initial;
  appearance: initial;

  &:is(:focus, :focus-within, :focus-visible) {
    border-color: var(--color-blue);
  }
}

/* for radio buttons the appearance should not be "initial" */
input[type="radio"],
input[type="checkbox"] {
  appearance: auto !important;
}

.form-date {
  width: auto;
}

textarea {
  font-size: 1em;
  font-family: inherit;
  width: 100%;
}

.description {
  font-size: 0.9em;
  line-height: 1.2em;
  margin-top: 0.5em;
}

/* Grouping elements */
fieldset,
fieldset.form-item {
  border: none;
  margin-bottom: 1.7em;
  min-width: 0;
  padding: 0.4em 0.8em;
}

fieldset.collapsible legend {
  font-size: 1em;
}

/* Field types */
.form-radio,
.form-checkbox {
  label {
    font-size: 0.9em;
    font-weight: 300;
  }

  input {
    width: auto;
  }

  .form-item {
    padding: 0;
    margin-bottom: 0.2em;
  }
}

/* Chosen select overrides */

/* Required fields */
.form-required:after {
  content: "*";
  color: #bb3535;
  vertical-align: super;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 6px 6px;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
}

/* Actions */
.form-actions {
  margin-top: 2em;
}

.form-actions > * {
  margin-right: 0.5em;
}

input[type="submit"],
.form-actions .form-submit {
  border: none;
  cursor: pointer;
  width: auto;
}

/* Image Widget */
.image-widget img {
  float: left;
  margin-right: 1em;
}

/* Load more pager  */

.load-more-pager {
  margin: var(--vertical-padding) auto 0;
  text-align: center;

  & + footer {
    text-align: center;
  }
}

/* Views exposed forms */

.views-exposed-form {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 960px) {
  .views-exposed-form {
    flex-direction: column;
  }
}

.form-item-search-api-fulltext .form-text {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' version='1.1' id='svg10' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs14' /%3E%3Cg id='Property 1=Outline, Property 2=search'%3E%3Cpath id='Mask' fill-rule='evenodd' clip-rule='evenodd' d='M5 11C5 7.691 7.691 5 11 5C14.309 5 17 7.691 17 11C17 14.309 14.309 17 11 17C7.691 17 5 14.309 5 11ZM20.707 19.293L17.312 15.897C18.365 14.543 19 12.846 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19C12.846 19 14.543 18.365 15.897 17.312L19.293 20.707C19.488 20.902 19.744 21 20 21C20.256 21 20.512 20.902 20.707 20.707C21.098 20.316 21.098 19.684 20.707 19.293Z' fill='%232D2D2D' mask='none' /%3E%3C/g%3E%3C/svg%3E");
  background-position: calc(100% - 0.5rem) center;
  background-size: 1.5rem auto;
  background-repeat: no-repeat;
}

/* Faux links from radio buttons */
.faux-radio-links {
  .form-radios {
    display: flex;

    .form-item {
      padding-left: 0;
      margin: 0 4rem 0 0;

      input {
        visibility: hidden;
        height: 1px;
        width: 1px;
      }

      .option {
        font-size: 0.65rem;
        font-weight: 600;
        padding: 0.25rem 0.5rem;
        text-transform: uppercase;

        &:hover {
          cursor: pointer;
          color: var(--color-blue);
        }
      }

      input[checked] + .option {
        background: var(--color-blue);
        color: var(--color-white);

        &:hover {
          color: var(--color-blue);
          background: none;
        }
      }

      .checkmark {
        display: none;
      }
    }
  }
}

@media (max-width: 960px) {
  .radio-faux-links {
    .form-radios {
      flex-wrap: wrap;
      justify-content: space-between;

      .form-check {
        margin: 0 0 1.25rem 0;
      }
    }
  }
}

/* hide Centres & Initiatives filter under People list */
.form-item-field-people-centres-initiatives {
  display: none;
}

/* hide Series filter under events form filter */
div.form-item-series {
  display: none;
}

/* Events search form */
#views-exposed-form-events-list-index-block-events-list-index {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);

  [id^="edit-field-date-wrapper"] {
    grid-column: 1/3;
    padding-left: 0;

    .fieldset-wrapper {
      width: 100%;
    }

    [id^="edit-field-date-op"] {
      display: flex;
      padding-left: 0;
      gap: 4rem;

      & legend {
        display: none;
      }

      & label {
        font-size: 1em;
        font-weight: 500;
      }

      .form-item-field-date-op {
        display: flex;
        align-items: baseline;
        gap: 5px;
      }
    }

    /* hide the field_date container */
    .form-item-field-date-value {
      display: none;
    }
  }
}

@media (max-width: 960px) {
  #views-exposed-form-events-list-index-block-events-list-index {
    display: flex;
    flex-direction: column;
  }
}