:root {
  interpolate-size: allow-keywords;
}

.faq-topics-grid {
  gap: 1.5rem;
}
.faq-topics-grid .faq-topic-card {
  height: 20rem;
  align-items: center;
  text-align: center;
}
.faq-topics-grid .faq-topic-card::after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  transition: box-shadow 200ms ease-out;
  box-shadow: inset 0 -3px 0 0 var(--color-brown);
  margin-bottom: -3px;
}
.faq-topics-grid .faq-topic-card:hover {
  transform: scale(1.01);
}
.faq-topics-grid .faq-topic-card:hover::after {
  box-shadow: inset 0 -7px 0 -1px var(--color-brown);
}
.faq-topics-grid .faq-topic-card:hover .faq-topic-chevron {
  --icon-color: var(--color-brown);
}
.faq-topics-grid .faq-topic-card .faq-topic-icon {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 0.25rem 0;
}
.faq-topics-grid .faq-topic-card .card-body {
  border: none;
}
.faq-topics-grid .faq-topic-card .card-body .faq-topic-title {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.faq-topics-grid .faq-topic-card .card-body p {
  text-wrap: balance;
}
.faq-topics-grid .faq-topic-card .faq-topic-chevron {
  margin: 0.5rem 0 0.75rem 0;
  width: 1.75rem;
  height: 1.75rem;
  --icon-color: var(--color-text-faded);
  transition: all 200ms ease-out;
}

.faq-groups-section {
  gap: 32px;
}

.faq-group {
  border: 2px solid var(--color-seperator);
  background-color: var(--color-white);
  width: 100%;
  max-width: var(--max-width);
  padding: 1.5rem 2.5rem 1.5rem;
  /* box-shadow: 0px 4px 44px 0px var(--color-shadow-float); */
  scroll-margin-top: calc(var(--nav-height-outer) + 2rem);
}

.faq-group-title {
  font-size: 1.25rem;
  padding-bottom: 0.5rem;
  border-width: 2px;
  margin-bottom: 0.5rem;
}

.faq-group-items {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 2px solid var(--color-seperator);
  padding: 1rem 0;
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item::details-content {
  transition: height 200ms ease-out, content-visibility 200ms ease-out;
  transition-behavior: allow-discrete;
  height: 0;
  overflow: hidden;
}
.faq-item[open]::details-content {
  transition: height 200ms ease-out;
  height: auto;
}

.faq-item-question {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 500;
  transition: color 150ms ease-out;
  margin-bottom: 0.375rem;
  text-wrap: pretty;
}
.faq-item-question::-webkit-details-marker {
  display: none;
}
.faq-item-question::marker {
  display: none;
  content: "";
}
.faq-item-question:hover {
  color: var(--color-brown);
}
.faq-item-question span {
  flex: 1.5;
}

.faq-item-chevron {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 2rem;
  transform: rotate(-90deg);
  transition: transform 250ms ease-out;
}

.faq-item[open] .faq-item-chevron {
  transform: rotate(0deg);
}

.faq-item-answer {
  padding: 0 0 0 2.75rem;
  text-wrap: pretty;
}
.faq-item-answer p {
  margin: 0 0 0.75rem;
}
.faq-item-answer p:last-child {
  margin-bottom: 0;
}

.page-container .faq-videos-section {
  margin-bottom: -4rem;
  padding-bottom: 6rem;
}

@media (max-width: 40rem) {
  .faq-topics-grid {
    align-items: stretch;
  }
  .faq-topics-grid .faq-topic-card {
    height: auto;
    font-size: 1rem;
  }
  .faq-topics-grid .faq-topic-card .faq-topic-icon {
    width: 2.125rem;
    height: 2.125rem;
  }
  .faq-topics-grid .faq-topic-card .card-body {
    padding: 1rem;
  }
  .faq-topics-grid .faq-topic-card .card-body .faq-topic-title {
    font-size: 1.125rem;
  }
  .faq-topics-grid .faq-topic-card .faq-topic-chevron {
    margin: 0.25rem 0 0.5rem 0;
  }
  .faq-group {
    padding: 1rem 1.25rem 1rem;
  }
  .faq-group-title {
    font-size: 1.125rem;
  }
  .faq-item-chevron {
    width: 1.5rem;
    height: 1.5rem;
  }
  .faq-item-question {
    font-size: 1rem;
    gap: 0.25rem;
    font-weight: 550;
  }
  .faq-item-question:hover {
    color: unset;
  }
  .faq-item-answer {
    font-size: 1rem;
    padding: 0 0 0 2.25rem;
  }
}