/* General styling */
body #content-cont {
  max-width: 65em;
  width: auto;
}

/* Styling the search form */
#search-section input, 
#search-section select,
#search-section .custom-select {
  margin: 0;
  margin-bottom: 0.5em;
}
#search-buttons {
  display: flex;
  gap: 0.5em;
}
#search-buttons button {
  margin-top: 0.5em;
  margin-bottom: 0;
}
#expand-filters-button { /* styling expand filters button with a caret */
  padding: 0;
}
#expand-filters-button span {
  padding: 0.25em 0.75em;
  padding-right: 2em;
}
#expand-filters-button span::after {
  border-right-color: var(--main-col);
  border-bottom-color: var(--main-col);
}
#expand-filters-button:hover span::after,
#expand-filters-button:focus span::after {
  border-right-color: white;
  border-bottom-color: white;
}
.has-js #filter-section {
  max-height: 0;
  overflow: hidden;
  width: 100%;
}
.has-js #filter-section.active {
  max-height: none;
  overflow: visible;
}
#filter-section .duration-cont {
  display: flex;
  gap: 0.5em;
}
#filter-section .duration-cont > * {
  flex: 1 1 0px;
}
#filter-section .duration-section-label {
  margin-top: 1.25em;
  margin-bottom: 0.25em;
}
#filter-section .duration-cont label {
  margin: 0;
  font-size: 0.9em;
  font-style: italic;
}
#filter-section .duration-cont input {
  width: 100%;
  margin: 0;
}
#sort-cont label:first-child {
  margin-top: 1.25em;
}
@media (min-width: 30em){
  /* Flex styling of other filter + sort section */
  #filter-main-content {
    display: flex;
    align-items: flex-start;
    gap: 3em;
  }
  #filter-main-content .filter-column {
    flex: 1 1 0;
  }
  #filter-section .duration-cont {
    max-width: 25em;
  }

  /* Flex styling of search bar + search select */
  #search-bar-cont {
    display: flex;
    gap: 0.5em;
  }
  #search-section input, 
  #search-section select,
  #search-section .custom-select {
    margin-bottom: 0.5em;
  }
  #search-section .custom-select,
  #search-section select {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 11em;
    width: 11em;
  }
  #search-section .clearable-input-cont {
    flex-grow: 4;
    flex-shrink: 0;
    flex-basis: 10em;
    width: 10em;
  }
}
@media (min-width: 40em){
  /* buttons and search bar on the same line */
  #search-section {
    display: flex;
    gap: 0.5em;
  }
  #search-bar-cont {
    flex: 1 1 auto;
  }
  #search-buttons {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    width: auto;
    margin: 0;
  }
  #search-section input, 
  #search-section select,
  #search-section .custom-select {
    margin-bottom: 0;
  }
  #search-buttons button { /* reducing padding so buttons are the same height as labels */
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }
  #search-buttons button:not(#expand-filters-button) {
    padding-left: 1em;
    padding-right: 1em;
  }
  #search-buttons button {
    margin: 0;
  }
}

/* Styling text links */
#text-search-results {
  margin-top: 1.5em;
}
.text-link {
  position: relative;
  display: block;
  border-bottom: 2px solid var(--light-bg);
}
.text-link::before,
.text-link::after {
  content: "";
  display: block;
  position: absolute;
}
.text-link::before { /*bottom highlight*/
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--link);
  transform: scaleX(0);
  transform-origin: left center;
  transition: var(--trans) ease;
}
.text-link:hover::before {
  transform: scaleX(1);
}
.text-link::after { /*right arrow*/
  width: 0.35em;
  height: 0.35em;
  border: 2px solid transparent;
  border-right-color: var(--light-bg);
  border-bottom-color: var(--light-bg);
  top: 50%;
  right: 0.5em;
  transform-origin: center center;
  transform: translate(0%, -50%) rotate(-45deg);
  pointer-events: none;
  transition: var(--trans) ease;
}
.text-link:hover::after {
  border-right-color: var(--link);
  border-bottom-color: var(--link);
  transform: translate(25%, -50%) rotate(-45deg);
}
.text-link a {
  width: 100%;
  display: block;
  border-bottom: 0;
  background: none;
  padding: 0.5em 0;
  padding-right: 1.25em; /*for the side arrow*/
  box-sizing: border-box;
}
span.speaker { /* styling supplementary info */
  color: var(--med-text);
  font-style: italic;
}
span.speaker::before {
  content: " - ";
}
span.duration {
  color: var(--med-text);
}