:root {
  --featured-search-container-width: 680px;
}

#featured .site-label {
  color: rgba(255, 255, 255, .75);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#featured h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 1.5rem;
}

#search-wrap {
  max-width: var(--featured-search-container-width);
  margin: 0 auto 1.6rem;
}

/* search box */
#search-btn {
  flex-shrink: 0;
  font-size: .9rem;
  height: 2.0rem;
  padding: .3rem .9rem;
  transition: opacity .15s;
  white-space: nowrap;
  opacity: 1;
}

#search-btn:hover {
  opacity: 0.9;
}

#filters {
  max-width: var(--featured-search-container-width);
}


/* Filter toggle button */

.filter-toggle-btn {
  flex-shrink: 0;
  font-size: .9rem;
  height: 2.0rem;
  padding: .3rem .9rem;
  background: rgba(255, 255, 255, .08);
  transition: width 0.15s ease-in-out, background .15s;
  white-space: nowrap;
}

.filter-toggle-btn:not(.collapsed),
.filter-toggle-btn:hover {
  background: rgba(255, 255, 255, .15);
  --bs-border-opacity: 0.4;
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5);
}

.filter-toggle-btn .bi {
  transition: transform .25s;
}

.filter-toggle-btn.collapsed .bi-chevron-up::before {
  transform: rotate(180deg);
}

/* filter drawer */
#filter-forms {
  max-width: var(--featured-search-container-width);
}

#filter-forms .btn-close {
  width: .5rem;
  height: .5rem;
  --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>");
}

.collapsed-filters {
  background: linear-gradient(to top, rgb(47 138 195 / 50%) calc(100% - 1.5rem), transparent 95%);
  backdrop-filter: blur(10px);
  box-shadow: 0px 15px 15px -3px rgba(0, 0, 0, .15);
}

.collapsed-filters .form-check-input,
.collapsed-filters .form-check-label {
  cursor: pointer;
}

.collapsed-filters .form-check-input:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}

.collapsed-filters .form-switch .form-check-input {
  background-color: rgba(255, 255, 255, .1);
}

.collapsed-filters .form-switch .form-check-input:checked {
  background-color: rgba(255, 255, 255, .4);
  border-color: var(--secondary);
}

.collapsed-filters:has(.form-switch .form-check-input:checked) #calendar-range {
  display: block;
}

.collapsed-filters:has(.form-switch .form-check-input:checked) #calendar-exact {
  display: none;
}

.collapsed-filters:has(.form-switch .form-check-input:not(:checked)) #calendar-exact {
  display: block;
}

.collapsed-filters:has(.form-switch .form-check-input:not(:checked)) #calendar-range {
  display: none;
}


#dates-filter-toggle .label {
  max-width: 35ch;
}

#remove-filters a {
  transition: color .15s;
  font-size: 0.9rem;
}

#remove-filters .bi-x::before {
  vertical-align: -0.23em;
}

/* vanilla-calendar-pro */

/* changing weekends colors */

[data-vc-theme=light] .vc-date[data-vc-date-holiday] .vc-date__btn,
[data-vc-theme=light] .vc-date[data-vc-date-weekend] .vc-date__btn {
  color: #999;
}

[data-vc-theme=light] .vc-week__day[data-vc-week-day-off] {
  color: #999;
}

[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-holiday][data-vc-date-selected] .vc-date__btn,
[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-weekend][data-vc-date-selected] .vc-date__btn {
  background-color: rgb(218 218 218 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.7;
  color: #999;
}

[data-vc-theme=light] .vc-date[data-vc-date-holiday][data-vc-date-selected] .vc-date__btn,
[data-vc-theme=light] .vc-date[data-vc-date-weekend][data-vc-date-selected] .vc-date__btn {
  --tw-bg-opacity: 1;
  background-color: rgb(218 218 218 / var(--tw-bg-opacity));
  color: #999;
}

[data-vc-theme=light] .vc-date[data-vc-date-holiday][data-vc-date-hover=first] .vc-date__btn,
[data-vc-theme=light] .vc-date[data-vc-date-holiday][data-vc-date-hover=last] .vc-date__btn,
[data-vc-theme=light] .vc-date[data-vc-date-weekend][data-vc-date-hover=first] .vc-date__btn,
[data-vc-theme=light] .vc-date[data-vc-date-weekend][data-vc-date-hover=last] .vc-date__btn {
  --tw-bg-opacity: 1;
  background-color: rgb(218 218 218/var(--tw-bg-opacity))
}

@media (hover: hover) and (pointer:fine) {

  [data-vc-theme=light] .vc-date[data-vc-date-holiday][data-vc-date-hover=first] .vc-date__btn:hover,
  [data-vc-theme=light] .vc-date[data-vc-date-holiday][data-vc-date-hover=last] .vc-date__btn:hover,
  [data-vc-theme=light] .vc-date[data-vc-date-weekend][data-vc-date-hover=first] .vc-date__btn:hover,
  [data-vc-theme=light] .vc-date[data-vc-date-weekend][data-vc-date-hover=last] .vc-date__btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(218 218 218/var(--tw-bg-opacity))
  }
}

@media (hover: hover) and (pointer: fine) {

  [data-vc-theme=light] .vc-date[data-vc-date-holiday][data-vc-date-selected] .vc-date__btn:hover,
  [data-vc-theme=light] .vc-date[data-vc-date-weekend][data-vc-date-selected] .vc-date__btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(218 218 218 / var(--tw-bg-opacity));
    color: #999;
  }
}

@media (hover: hover) and (pointer: fine) {

  [data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-holiday][data-vc-date-selected] .vc-date__btn:hover,
  [data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-weekend][data-vc-date-selected] .vc-date__btn:hover {
    background-color: rgb(218 218 218 / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.7;
    color: #999;
  }
}

[data-vc-theme=light] .vc-date[data-vc-date-holiday][data-vc-date-hover] .vc-date__btn,
[data-vc-theme=light] .vc-date[data-vc-date-weekend][data-vc-date-hover] .vc-date__btn {
  --tw-bg-opacity: 1;
  background-color: rgb(218 218 218/var(--tw-bg-opacity))
}

@media (hover: hover) and (pointer: fine) {

  [data-vc-theme=light] .vc-date[data-vc-date-holiday] .vc-date__btn:hover,
  [data-vc-theme=light] .vc-date[data-vc-date-weekend] .vc-date__btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(218 218 218 / var(--tw-bg-opacity));
  }
}

/* Changing selected dates colors - matching site's color scheme */

[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn {
  --tw-bg-opacity: 1;
  background-color: rgb(13 119 186/var(--tw-bg-opacity));
  color: #fff
}

@media (hover: hover) and (pointer:fine) {
  [data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(13 119 186/var(--tw-bg-opacity));
    color: #fff
  }
}

[data-vc-theme=light] .vc-months__month[data-vc-months-month-selected],
[data-vc-theme=light] .vc-years__year[data-vc-years-year-selected] {
  --tw-bg-opacity: 1;
  background-color: rgb(13 119 186/var(--tw-bg-opacity));
  color: #fff
}

@media (hover: hover) and (pointer:fine) {

  [data-vc-theme=light] .vc-months__month[data-vc-months-month-selected]:hover,
  [data-vc-theme=light] .vc-years__year[data-vc-years-year-selected]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(13 119 186/var(--tw-bg-opacity));
    color: #fff
  }
}

[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn {
  background-color: rgb(13 119 186/var(--tw-bg-opacity));
  --tw-bg-opacity: 0.7;
  color: #fff
}

@media (hover: hover) and (pointer:fine) {
  [data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn:hover {
    background-color: rgb(13 119 186/var(--tw-bg-opacity));
    --tw-bg-opacity: 0.7;
    color: #fff
  }
}

[data-vc-theme=light] .vc-date[data-vc-date-holiday][data-vc-date-today] .vc-date__btn,
[data-vc-theme=light] .vc-date[data-vc-date-weekend][data-vc-date-today] .vc-date__btn {
  color: #999;
}

/* publication listing */
#issues-list .list-group-item:not(.issue-period) {
  border: 1px solid rgba(14, 94, 170, .1);
  box-shadow: 0 2px 12px rgba(14, 94, 170, .06);
  transition: background-color .20s, border-color .30s, box-shadow .2s ease;
}

#issues-list .list-group-item:not(.issue-period):has(a:active),
#issues-list .list-group-item:not(.issue-period):has(a:focus),
#issues-list .list-group-item:not(.issue-period):has(a:focus-visible),
#issues-list .list-group-item:not(.issue-period):has(a:hover) {
  background-color: #fff;
  border-color: #8dc8ec;
  box-shadow: 0 8px 20px rgba(14, 94, 170, .14);
}

#issues-list .issue-number {
  margin-right: var(--bs-list-group-item-padding-x);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 3px 10px rgba(14, 94, 170, .25);
}

#issues-list .download-links a {
  display: inline-flex;
  align-items: center;
  padding: .3rem .9rem;
  font-size: .85rem;
  font-weight: 500;
  border-radius: 50rem;
  color: var(--secondary);
  background: rgba(141, 200, 236, .18);
  transition: background .2s, transform .2s ease;
}

#issues-list .download-links a:hover {
  background: rgba(141, 200, 236, .35);
  transform: translateY(-1px);
}

#issues-list .issue-period {
  color: #4e85ba;
  font-weight: 500;
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(78, 133, 186, 0.3) !important;
  mask-image: linear-gradient(to left, black calc(100% - 5rem), transparent 100%), linear-gradient(to right, black calc(100% - 5rem), transparent 100%);
  mask-composite: intersect;
}

#paginate a {
  font-weight: 500;
}
