@charset "UTF-8";
/*
 * FAQ Accordion Component
 * Modern CSS-only implementation using native <details>/<summary> elements
 * Accordion behavior: only one item open at a time (via name attribute)

     --Optional category heading
  <h3 class="faq-category">Hummingbird Healing Center</h3>

  <details class="faq-item">
    <summary class="faq-question">Where are you located?</summary>
    <div class="faq-answer">
      <div class="faq-answer-content">
        <p>The Hummingbird Center is located 14 KM outside of Iquitos, Peru.  We are 3 KM off the main road set in the Amazon jungle.  To get here, you will first need to fly into Lima, Peru, and then fly on to Iquitos. See our <a href="/travelling-to-iquitos">Traveling to Iquitos</a> page for details.</p>
      </div>
    </div>
  </details>

 */
.faq-section {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}

.faq-intro {
  margin-bottom: 1.5rem;
}
.faq-intro a {
  color: #0C434A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-intro a:hover {
  color: #2A6E73;
}

.faq-item {
  border-bottom: 1px solid rgba(12, 67, 74, 0.2);
}
.faq-item:first-of-type {
  border-top: 1px solid rgba(12, 67, 74, 0.2);
}

.faq-question {
  position: relative;
  padding: 1.5rem 0.75rem;
  padding-right: 2.5rem;
  font-family: "Spectral", Georgia, serif;
  font-size: clamp(
    1.125rem,
    0.986rem + 0.444vw,
    1.375rem
  );
  font-weight: 600;
  color: #0C434A;
  cursor: pointer;
}
.faq-question:focus {
  outline: 2px solid #2A6E73;
  outline-offset: 2px;
}
.faq-question:focus:not(:focus-visible) {
  outline: none;
}
.faq-question:focus-visible {
  outline: 2px solid #2A6E73;
  outline-offset: 2px;
}
.faq-question:hover {
  color: #2A6E73;
}

.faq-section .faq-item > summary.faq-question,
details.faq-item > summary.faq-question {
  display: block;
  list-style: none;
}
.faq-section .faq-item > summary.faq-question::before,
details.faq-item > summary.faq-question::before {
  content: none;
  display: none;
}
.faq-section .faq-item > summary.faq-question::-webkit-details-marker,
details.faq-item > summary.faq-question::-webkit-details-marker {
  display: none;
}
.faq-section .faq-item > summary.faq-question::marker,
details.faq-item > summary.faq-question::marker {
  display: none;
  content: none;
}

.faq-question::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 1.5em;
  height: 1.5em;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%230C434A" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 11.5H16.5V12.5H12.5V16.5H11.5V12.5H7.5V11.5H11.5V7.5H12.5V11.5Z"/><path fill-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12Z" clip-rule="evenodd"/></svg>');
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.faq-item[open] > .faq-question::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-answer > div, .faq-answer > p, .faq-answer > ul, .faq-answer > ol {
  overflow: hidden;
  min-height: 0;
}

.faq-item[open] > .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-content {
  overflow: hidden;
  min-height: 0; /* Required for grid 0fr collapse */
  padding: 0 0.5rem;
  padding-bottom: 1rem;
  background-color: #0C434A;
  color: #FFFFFF;
}
.faq-answer-content ul {
  color: #FFFFFF;
}
.faq-answer-content p {
  margin: 0;
  padding: 0.75rem 0.5rem;
  line-height: 1.6;
  color: #FFFFFF;
}
.faq-answer-content p:first-child {
  padding-top: 1rem;
}
.faq-answer-content p:last-child {
  padding-bottom: 0.5rem;
}
.faq-answer-content a:not(.btn) {
  color: #FFA68E;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-answer-content a:not(.btn):hover {
  color: #885C67;
}
.faq-answer-content a:not(.btn):focus {
  outline: 2px solid #FFA68E;
  outline-offset: 2px;
}
.faq-answer-content strong {
  font-weight: 600;
}
.faq-answer-content ul, .faq-answer-content ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}
.faq-answer-content li {
  margin-bottom: 0.25rem;
  line-height: 1.5;
}
.faq-answer-content li::before {
  content: "✧"; /* 12 pointed star */
  color: #FFFFFF; /* Example: earthy brown */
  font-size: 0.9em;
  font-weight: 700;
  margin-right: 0.6em;
  vertical-align: middle;
}

.faq-item--light .faq-answer-content {
  background-color: rgba(9, 221, 9, 0.12);
  color: #424242;
}
.faq-item--light .faq-answer-content a:not(.btn) {
  color: #0C434A;
}
.faq-item--light .faq-answer-content a:not(.btn):hover {
  color: #2A6E73;
}

.faq-category {
  margin: 0;
  padding: 1.5rem 0.75rem;
  padding-bottom: 0.75rem;
  font-family: "Spectral", Georgia, serif;
  font-size: clamp(
    1.375rem,
    1.167rem + 0.667vw,
    1.75rem
  );
  font-weight: 700;
  color: #2A6E73;
  border-bottom: 2px solid #2A6E73;
}
.faq-category:not(:first-child) {
  margin-top: 2rem;
}

.faq-category + .faq-item {
  border-top: 1px solid rgba(12, 67, 74, 0.2);
}

@media (min-width: 768px) {
  .faq-category {
    padding: 1.5rem;
    padding-bottom: 1rem;
  }
  .faq-question {
    padding: 1.5rem 1.5rem;
    padding-right: 3rem;
  }
  .faq-question::after {
    right: 1rem;
  }
  .faq-answer-content {
    padding: 0 1rem;
    padding-bottom: 1rem;
  }
  .faq-answer-content p {
    padding: 0.75rem 1rem;
  }
}

/*# sourceMappingURL=faq.css.map */