:root {
  --primary-pine-green: #0c322c;
  --primary-jungle-green: #30ba78;
  --secondary-midnight-blue: #192072;
  --secondary-waterhole-blue: #2453ff;
  --tertiary-mint: #90ebcd;
  --tertiary-persimmon: #fe7c3f;
  --font-size: 16px;
  --neutral-buttons: #e9e9ed;
}

.indexPage {
  padding-block: 2rem;
  padding-inline: 4rem;
  text-align: left;
}

.breadcrumbs-bar a,
.archives a {
  color: var(--primary-jungle-green);
  text-decoration: none;
}

.indexPage h1 {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.indexPage h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.indexPage label {
  font-weight: normal;
  margin: 0;
  line-height: 1.5;
  display: block;
  font-size: 14px;
}

.indexPage p,
.indexPage .archives label {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 0;
}

.page-description {
  font-size: 14px;
}

.archives label {
  display: inline;
}

.filters-bar {
  display: flex;
  margin-block: 16px;
  padding-inline: 0;
  padding-block: 16px;
  border-bottom: 1px solid var(--tertiary-persimmon);
  margin-top: 32px;
  flex-wrap: wrap;
  font-size: 14px;
}

.select-section {
  margin-right: 16px;
}

.select-section label {
  font-weight: 500;
  line-height: 150%;
}

.select-section select,
.select-section input {
  padding-block: 6px;
  padding-inline: 16px;
  margin-top: 6px;
  margin-bottom: 16px;
  background-color: transparent;
  border: 2px solid var(--tertiary-persimmon);
  max-width: 340px;
}

.select-section input:focus {
  outline: none;
}

#all-articles-content {
  margin-top: 32px;
}

.articleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* cursor: pointer; */
  margin: 8px;
}

.articleRow .articleTitle {
  text-decoration: none;
  line-height: 1.8;
  cursor: pointer;
}

.articleRow .articleTitle {
  color: var(--primary-jungle-green);
  font-size: 16px;
  font-weight: 600;
}

.articleTitle .gated-icon {
  height: 20px;
  display: inline;
  margin-bottom: 4px;
  margin-left: 4px;
}

.articleText:hover a {
  color: var(--primary-jungle-green);
}

/* .articleRow:hover {
  color: #0c322c;
} */

.articleText {
  /* max-width: 76%; */
  width: 64%;
  margin-block: 0.5rem;
  cursor: pointer;
}

.formatOptions {
  display: flex;
  gap: 0.8rem;
}

.formatOptions button {
  padding-inline: 0.5rem;
  padding-block: 0.3rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.formatDropdown {
  position: relative;
}

.formatDropdown button,
.formatDropdown button:hover {
  /* width: 7.5rem; */
  width: 128px;
  padding: 0.3rem;
  padding-left: 1rem;
  font-size: 14px;
  background: transparent;
  color: black;
  border: 2px solid #fe7c3f;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}

.formatDropdown button.disabled {
  cursor: auto;
}

.format-dropdown-menu {
  position: absolute;
  /* width: max-content; */
  width: 100%;
  font-size: 0.9rem;
  top: 100%; /* Position below the button */
  left: 0;
  background-color: #fff; /* Adjust background color as needed */
  border: 1px solid #ccc; /* Add border for styling */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add box shadow for a subtle effect */
  padding: 8px;
  z-index: 1000; /* Ensure the menu appears above other elements */
  inset: -2px auto auto 0px;
  transform: translate3d(0px, 30.2222px, 0px);
}

.dropdown-item {
  display: block;
  padding: 6px;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 3rem;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.disabled.dropdown-toggle::after {
  visibility: hidden;
}

.format-dropdown-menu {
  display: none;
}

.show {
  display: block;
}

.indexPage .articleDescription {
  font-size: 14px;
  margin-block: 8px;
  color: #0f0f0f;
}

.applies-to-text span {
  font-weight: 600;
}

.no-match-text {
  display: none;
}

.indexPage .article-counter {
  width: 100%;
  text-align: center;
  color: var(--tertiary-persimmon);
  font-weight: bold;
  font-size: 14px;
}

@media (max-width: 850px) {
  .indexPage {
    padding-inline: 1.5rem;
  }

  .filters-bar {
    flex-direction: column;
  }

  .filters-bar select,
  .filters-bar input {
    width: 80%;
  }

  .articleRow {
    flex-wrap: wrap;
    margin-block: 1rem;
  }

  .articleRow .articleText {
    max-width: 100%;
  }
}