:root {
  --main-color: #555960;
  --transition: all 250ms cubic-bezier(.4, 0, .2, 1);
  --header1: 3.052rem;
  --header2: 2.441rem;
  --header3: 1.953rem;
  --header4: 1.563rem;
  --header5: 1.25rem;
  --header5hover: 1.28rem;
  --paragraph: 1rem;
  --button: 0.9rem;
  --img-height: 300px;
}

/* =====================================
   FAQ TYPOGRAPHY
===================================== */

.faq-container {
  max-width: var(--max-width, 1100px);
  padding: var(--padding, 1rem);
  margin: var(--margin, 0 auto);
}

.faq-title {
  font-size: var(--header1);
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--main-color);
}

.faq-question {
  font-size: var(--header2);
  font-weight: bold;
  margin: 1.5rem 0 0.5rem;
  color: var(--highlight-color, #8e6f3e);
}

.faq-answer {
  font-size: var(--paragraph);
  margin-bottom: 1.5rem;
  color: var(--main-color);
}

.faq-answer a {
  color: var(--highlight-color, #8e6f3e);
  text-decoration: underline;
}

.faq-answer a:hover {
  text-decoration: none;
}

/* =====================================
   FAQ ACCORDION CONTAINER
===================================== */

#accordion,
#accordion *,
#accordion *::before,
#accordion *::after {
  box-sizing: border-box;
}

#accordion.container {
  margin: 0 auto;
}

#accordion p {
  text-align: justify;
}

#accordion > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#accordion > ul > li {
  list-style: none;
}

#accordion h2 {
  font-size: var(--header3);
  color: var(--main-color);
  padding-bottom: 2rem;
}

/* =====================================
   FAQ SEARCH BAR
===================================== */

#accordion .faq-search-container {
  width: 100%;
  margin: 0 0 1.75rem;
}

#accordion .faq-search-container label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #252525;
}

#faq-search {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: #252525;
  background-color: #fff;
  border: 1px solid #767676;
  border-radius: 6px;
  transition: border-color 200ms ease,
              box-shadow 200ms ease;
}

#faq-search::placeholder {
  color: #666;
}

#faq-search:hover {
  border-color: #252525;
}

#faq-search:focus-visible {
  border-color: #8e6f3e;
  outline: 2px solid #8e6f3e;
  outline-offset: 2px;
}

/* =====================================
   INLINE FAQ CATEGORY FILTER TABS
===================================== */

#accordion .faq-filter-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.625rem;
  margin: 1rem 0 0;
  padding: 0.25rem 0.125rem 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Individual filter tab */
#accordion .faq-filter-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--main-color);
  background: #fff;
  border: 1px solid #b6b6b6;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 200ms ease,
              border-color 200ms ease,
              color 200ms ease;
}

/* Filter hover */
#accordion .faq-filter-tab:hover {
  background: #f7f1e3;
  border-color: #8e6f3e;
}

/* Selected filter */
#accordion .faq-filter-tab[aria-pressed="true"] {
  color: #fff;
  background: #252525;
  border-color: #252525;
}

/* Selected filter hover */
#accordion .faq-filter-tab[aria-pressed="true"]:hover {
  background: #444;
}

/* Keyboard focus */
#accordion .faq-filter-tab:focus-visible {
  outline: 2px solid #8e6f3e;
  outline-offset: 2px;
}

/* =====================================
   FAQ SEARCH RESULTS
===================================== */

#accordion #faq-search-results {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--main-color);
  text-align: left;
}

#faq-search-results:empty {
  display: none;
}

/* Hide filtered-out FAQs */
#accordion .accordion-item[hidden],
#accordion .accordion-controls[hidden] {
  display: none;
}

/* =====================================
   EXPAND / COLLAPSE ALL CONTROLS
===================================== */

.accordion-controls {
  margin: 1rem 0;
  text-align: left;
  display: flex;
  flex-direction: row-reverse;
  padding-left: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

#toggle-button {
  font-size: 1rem;
  font-weight: bold;
  color: var(--main-color);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0.25rem 0;
}

#toggle-button:hover {
  color: #333;
  text-decoration: underline;
}

#toggle-button:focus-visible {
  outline: 2px solid #8e6f3e;
  outline-offset: 3px;
}

/* =====================================
   ACCORDION ITEMS
===================================== */

.accordion-item:first-of-type {
  border-top: 1px solid var(--main-color);
}

.accordion-title {
  padding: 2rem 2rem 2rem 0.5rem;
  border-bottom: 1px solid var(--main-color);
  position: relative;
  font-size: var(--header5);
  color: var(--main-color);
  transition: var(--transition);
  text-align: left;
  cursor: pointer;
}

.accordion-title:focus-visible {
  outline: 2px solid #8e6f3e;
  outline-offset: 2px;
}

/* Accordion arrow */
.accordion-title::after {
  content: "\276F";
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  font-size: 1rem;
  transform-origin: center;
  transform: translateY(-50%) rotate(90deg);
  transition: var(--transition);
  color: var(--main-color);
}

/* Rotated arrow when expanded */
.rotate .accordion-title::after {
  transform: translateY(-50%) rotate(-90deg);
  font-size: var(--header5hover);
}

/* =====================================
   ACCORDION CONTENT
===================================== */

.accordion-content {
  display: none;
  text-align: left;
  gap: 1rem 2rem;
  overflow: hidden;
  padding: 1rem 0.5rem;
  align-items: center;
  border-bottom: 1px solid var(--main-color);
}

/* Expanded content */
.open .accordion-content {
  display: flex;
  animation: faq-reveal 250ms ease both;
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accordion-content img {
  width: auto;
  max-width: 100%;
}

.accordion-content p {
  flex: 0 0 50%;
}

.accordion-content.text {
  flex-direction: column;
  align-items: stretch;
}

.accordion-content.text p {
  flex: none;
  width: 100%;
  margin: 0;
}

.accordion-content.text.force-start-align {
  align-items: flex-start;
}

/* Lists inside FAQ answers */
#accordion .accordion-content ul {
  width: 100%;
  margin: 0;
  padding-left: 1.5rem;
  list-style: disc;
}

#accordion .accordion-content li {
  list-style: disc;
  cursor: auto;
  text-align: left;
}

/* =====================================
   SIMPLE TABLE STYLING
===================================== */

.simple-date-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 1em;
}

.simple-date-table td {
  padding: 10px;
}

.left-column {
  text-align: right;
  font-weight: bold;
  border-right: 2px solid var(--main-color);
}

.right-column {
  text-align: left;
}

/* =====================================
   RESPONSIVE DESIGN
===================================== */

@media (max-width: 768px) {

  :root {
    --header1: 2rem;
    --header2: 1.5rem;
    --paragraph: 0.9rem;
    --padding: 15px;
    --margin: 10px;
  }

  .accordion-content {
    flex-direction: column;
    align-items: stretch;
  }

  .accordion-content p {
    flex: none;
    width: 100%;
  }

  .accordion-title span {
    display: block;
    width: 100%;
  }

  #faq-search {
    padding: 0.75rem 0.875rem;
  }

  .simple-date-table {
    width: 100%;
    font-size: 0.9em;
  }

  .simple-date-table td {
    display: block;
    width: 100%;
    text-align: center;
    border: none;
    padding: 6px 0;
  }

  .left-column,
  .right-column {
    text-align: center;
    border-right: none;
  }

  .simple-date-table tr {
    margin-bottom: 5px;
    display: block;
  }
}

/* Smaller screens */
@media (max-width: 600px) {

  #accordion .faq-filter-tab {
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
  }

  #accordion .faq-filter-tabs {
    gap: 0.5rem;
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {

  .open .accordion-content {
    animation: none;
  }

  .accordion-title,
  .accordion-title::after,
  #faq-search,
  #accordion .faq-filter-tab {
    transition: none;
  }
}

/* Preserve numbering in the FTR answers' ordered lists. */
#accordion .accordion-content ol {
  width: 100%;
  margin: 0;
  padding-left: 1.5rem;
}

#accordion .accordion-content ol > li {
  list-style: decimal;
}

/* Keep the Back to Top button hidden until the page has scrolled. */
#btn-back-to-top[hidden] {
  display: none !important;
}