/*
* Show/hide css for filter toggles
*/
.collapsible-transition {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  max-height: 0;
  /* Ensure it starts hidden */
}

[aria-hidden="false"].collapsible-transition {
  max-height: 1000px;
  /* Large enough to fit content */
}



/* HOTFIX - NEW Content Filter V2 Styles - `12/17/2025 */
.content-filter-v2-main-body {


  /* Aside */
  & .content-filter-v2-exposed-form {


    & .block {


      /* Begin Form Element Styles */
      & form {

        /* Search Keywords & Content Type */
        & .js-form-item {
          & .form-item {
            & .form-item__label {}

            /* Search Keywords */
            & .form-text {}


            /* Content Type */
            & .form-item__dropdown {
              & .form-select {
                &.form-item__select {}
              }
            }
          }
        }

        /* END Search Keywords & Content Type */


        /* Begin Form Dropdowns */
        & div {


          margin: 0;
          padding: 0;


          & .fieldgroup {
            /* Custom Properties */
            --speed: 1s;
            --block-size: auto;
            --font-size: min(0.85rem, 1rem);
            --min-width: fit-content;
            --text-align: left;
            --padding: 1em;
            --font-weight: bold;
            --color: hsl(192, 100%, 24%);
            --grid-columns: repeat(auto-fill, minmax(100%, 1fr));
            --gap: 0.5em;
            --background: hsl(57, 22%, 81%);
            --hover-background: hsl(57, 22%, 87%);


            margin: 0;
            border: none !important;


            /* Styling all fieldset Elements */
            & .h2 {
              width: 100%;
              margin: 0 !important;


              & button {
                cursor: pointer;
                text-align: left;
                color: var(--color);
                padding: var(--padding);
                font-weight: var(--font-weight);
                font-size: var(--font-size);
                background-color: var(--background);
                border: none;
                width: 100%;
                position: relative;


                &::after {
                  content: '▼';
                  position: absolute;
                  right: var(--padding);
                  top: 50%;
                  transform: translateY(-50%) rotate(0deg);
                  transition: transform 0.3s ease-in-out;
                  font-size: var(--font-size);
                  color: var(--color);
                }


                &[aria-expanded='true']::after {
                  transform: translateY(-50%) rotate(180deg);
                }


                &:is(:hover, :focus) {
                  background-color: var(--hover-background);
                }


              }


            }

            & .fieldset-content {
              margin-bottom: var(--padding);


              & .form-item--checkboxes {
                background-color: hsl(53, 22%, 93%);
                padding: 0;


                & .form-checkboxes {
                  display: flex;
                  flex-direction: column;
                  padding-top: var(--padding);
                  padding-bottom: var(--gap);

                  & .form-item {
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: baseline;
                    padding: var(--gap) var(--padding);
                    margin: 0;


                    &:hover {
                      background: var(--hover-background);
                    }


                    & input {
                      cursor: pointer;
                      margin-right: 0.25em;
                      margin-top: 0;
                    }

                    & label {
                      cursor: pointer;
                      width: 100%;
                      font-size: min(0.75rem, 0.9rem);
                      font-weight: 500;
                      color: hsl(210, 17%, 24%);
                    }
                  }
                }
              }
            }

            /* END Styling all fieldset Elements */




            /* Natural Hazards and Disasters */
            &#edit-content-filter-1--2--wrapper {
              & .h2 {}

              & .fieldset-content {
                & .form-item--checkboxes {
                  & .form-checkboxes {
                    & .form-item {
                      & input {}

                      & label {}
                    }
                  }
                }
              }


            }

            /* END Natural Hazards and Disasters */


            /* Weather and Climate */
            &#edit-content-filter-2--2--wrapper {


              & .h2 {}

              & .fieldset-content {
                & .form-item--checkboxes {
                  & .form-checkboxes {
                    & .form-item {
                      & input {}

                      & label {}
                    }
                  }
                }
              }


            }

            /* END Weather and Climate */


            /* Oceans, Coasts, and Geophysics */
            &#edit-content-filter-3--2--wrapper {}

            /* END Oceans, Coasts, and Geophysics */




          }


        }

        /* END Form Dropdowns */


      }

      /* END Form Element Styles */
    }
  }
}

/* END HOTFIX - NEW Content Filter V2 Styles - `12/17/2025 */