/**
  * @file
  * Views, including filters, tables, grids, etc.
  **/

/** Style the overall block of filters **/
.view-filters form.views-exposed-form:has(.exposed-filters) {
  margin-bottom: 1rem;
  border: 1px solid var(--grey);
  padding: calc(var(--bs-gutter-x) / 2);
}

/** Collapse exposed filter form fields to fit in one row **/
.view-filters {
  width: 100%;
  margin-bottom: 1rem;
}

.view-filters .flex-wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  row-gap: 1rem;
  column-gap: 1rem;
}

.view-filters .row {
  row-gap: 1rem;
}

.view-filters .form-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  justify-items: start;
  align-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.view-filters fieldset legend {
  font-weight: bold;
}

.view-filters fieldset .fieldset-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.view-filters .form-control,
.view-filters .row div,
.view-filters .row .form-actions,
.view-filters .form-select {
  gap: 0.5rem;
  width: initial;
  max-width: 100%;
  border-color: var(--black);
}

.view-filters .form-select {
  color: var(--black);
}

.view-filters :is(.form-control, .form-select):is(:focus, :hover) {
  box-shadow: 0 0 0 0.18rem var(--laurier-blue);
  border-color: transparent;
}

.view-filters .form-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.view-filters div label {
  font-weight: bold;
}

/** Field block, with some extra padding **/
.view-field-block {
  padding-bottom: 1em;
}

/** View header full width **/
.view-header {
  width: 100%;
}

/** Sidebar blocks **/
.phone-number-block:not(:last-child) {
  padding-bottom: 15px;
}

.subject-nav .view-header {
  margin-bottom: 1rem;
}

/** Grid style views, with a purple outline on hover **/
.results-title {
  padding-left: calc(var(--bs-gutter-x) / 2);
}

.grid-view-item {
  display: flex;
  flex-wrap: wrap;
  z-index: 2;
  padding: 0 5px 5px 10px;
  margin-top: 5px;
  background-color: transparent;
}

.grid-view-item a {
  text-decoration: none;
}

.grid-view-item a:is(:hover, :focus) {
  border: 1px solid var(--laurier-purple);
  color: var(--laurier-purple);
}

/** Only apply to tutorials grid item to line up with its filter section **/
.tutorials-view div.grid-view-item {
  padding: 0 0 5px 0;
}

/** Link over the whole item **/
.grid-view-link {
  position: relative;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  background-color: transparent;
  color: #000;
  text-decoration: none;
}

.grid-view-link:is(:hover, :focus) {
  border-color: var(--laurier-purple);
  color: #000;
  transition: border-color 0.3s;
}

.grid-view-link:before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--laurier-purple);
  transition: top 0.3s, left 0.3s;
}

.grid-view-link:hover:before {
  left: 8px;
  top: 8px;
}

.grid-view-image {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 2;
  background-color: var(--white);
}

.grid-view-title {
  z-index: 2;
  padding: 16px;
  margin-bottom: 0;
  background-color: var(--white);
}

.view-more-link {
  padding: 0;
  margin-bottom: 0.25rem;
  text-align: right;
}

.highlight-attribution {
  /** This should match the padding left of the image above it **/
  padding-left: 10px;
}

/** Disruption view **/
.disruption-row {
  margin: 0.5rem;
  border: 1px solid var(--grey);
  padding: 1rem;
}

.disruption-row:hover {
  box-shadow: 0 0 36px var(--laurier-gold);
}

/** Locations view, which share some with other grids but not all **/
.locations-grid-item {
  margin: 5px;
  border: 1px solid var(--grey);
  padding: 10px;
}

.locations-grid-image img {
  display: flex;
  max-width: 150px;
}

.locations-grid-title,
.locations-grid-summary {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  text-align: left;
}

/** Blog style page **/
.blog-page-more-link {
  padding: 10px 0;
}

/** Used on section pages **/
.section-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.section-header a {
  color: var(--laurier-blue);
}

.section-page-summary {
  padding-left: 2rem;
}

/** Table view, with one field per row **/
.view-table {
  display: table;
}

.view-table-row {
  display: table-row;
}

.view-table-cell {
  display: table-cell;
  padding-bottom: 1.5rem;
}

.view-table-cell .item-list {
  margin: 0;
}

.view-table-cell .list-group-item {
  display: contents;
}

/** Better Exposed Filters details block **/
.bef--secondary {
  margin-bottom: 1rem;
}

.bef--secondary summary {
  padding: 5px;
  background-color: var(--laurier-blue);
  text-transform: none;
}

.bef--secondary summary:is(:hover, :focus, :active) {
  outline: 1px solid var(--laurier-purple);
  color: var(--laurier-purple);
}

.bef--secondary .details-wrapper,
.tutorials-view .row.exposed-filters {
  /** This is too broad and shouldn't apply to all exposed filters **/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}

.bef--secondary .details-wrapper div {
  margin: 0.5rem;
}

/** Headers on content type views **/
.header-field {
  line-break: loose;
  word-break: break-word;
}

/** Staff profile views **/
.librarian-profile {
  padding-left: 1rem;
}

/**
 * @file
 * Styling for Views in Bartik, copied from Barrio.
 * @todo review if these are still needed.
 */

/* Tab styles */
.views-displays .tabs .open > a {
  border-radius: 7px 7px 0 0;
}
.views-displays .tabs .open > a:hover,
.views-displays .tabs .open > a:focus {
  color: #0071b3;
}
.views-displays .secondary .form-submit {
  font-size: 0.846em;
}

/* Tabs action list styles */
.views-displays .tabs .action-list {
  padding: 0;
}

/* Contextual filter options styles */
.views-filterable-options
  .filterable-option:nth-of-type(even)
  .form-type-checkbox {
  background-color: #f9f9f9;
}

/* Views action dropbutton styles */
.views-ui-display-tab-actions .dropbutton .form-submit {
  color: #0071b3;
}
.views-ui-display-tab-actions .dropbutton .form-submit:hover,
.views-ui-display-tab-actions .dropbutton .form-submit:focus {
  color: #018fe2;
}