/* Extra breathing room above the footer, but only on pages that actually have a
   tv-key-faq block — scoped via :has() rather than editing footer.css directly, same
   technique promo-bar.css/highlight-panel.css use for their own page-specific spacing. */
body:has(.tv-key-faq) .footer-wrapper {
  margin-top: 40px;
}

.tv-key-faq .tv-key-faq-heading {
  margin: 0;
  padding: 30px 0 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 42px;
  color: #f04c23;
  text-align: center;
}

/* `dark` variant — matches the STB Dongle product page's own dark FAQ section exactly
   (colors/behavior confirmed against the live page's computed styles): a full-bleed dark
   charcoal PANEL behind the whole block (confirmed edge to edge at every viewport width
   tested, not just a contained/centered box — same `100vw` breakout technique used by
   `generic-hero-section`/`video-banner` to escape the page's `main > .section` max-width/
   padding), with the accordion's own content column staying at its normal (100%/66%)
   width and centered on top of that panel — same two-layer structure the source page
   uses. Gray (not black) question/answer text, an orange chevron, and only the currently
   open item getting its own slightly-darker rounded card — closed items stay flat against
   the panel background. Add `(Dark)` to the block name so it becomes `tv-key-faq dark`. */
.tv-key-faq.dark {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background: #2d2d2d;
}

.tv-key-faq.dark .tv-key-faq-heading {
  color: #fff;
  font-weight: 500;
}

.tv-key-faq .tv-key-faq-list {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 54px;
}

.tv-key-faq .tv-key-faq-item {
  border: none;
}

.tv-key-faq .tv-key-faq-item:first-child {
  margin-top: 18px;
}

.tv-key-faq .tv-key-faq-question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 35px 25px 20px;
  border-bottom: 1px solid rgb(0 0 0 / 50%);
  cursor: pointer;
  list-style: none;
}

.tv-key-faq.dark .tv-key-faq-question {
  padding-right: 25px;
  padding-left: 25px;
  border-bottom-color: rgb(255 255 255 / 10%);
}

/* Suppress the native disclosure triangle in every engine — ::-webkit-details-marker
   for older WebKit/Blink, ::marker for the modern standard one (Chrome's own default
   summary marker is a ::marker, not just ::-webkit-details-marker, so both are needed
   or the native triangle renders alongside our own ::after chevron below). */
.tv-key-faq .tv-key-faq-question::-webkit-details-marker {
  display: none;
}

.tv-key-faq .tv-key-faq-question::marker {
  content: '';
  display: none;
}

.tv-key-faq .tv-key-faq-question-text {
  flex: 1;
  padding-right: 16px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.32px;
}

.tv-key-faq.dark .tv-key-faq-question-text {
  color: rgb(130 130 130);
}

.tv-key-faq .tv-key-faq-question::after {
  content: '';
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background: url("/icons/arrow-down.png") no-repeat center / contain;
  filter: brightness(0);
  transition: transform 0.3s ease;
}

.tv-key-faq.dark .tv-key-faq-question::after {
  background-color: #f04c23;
  mask: url("/icons/arrow-down.png") no-repeat center / contain;
  filter: none;
}

.tv-key-faq .tv-key-faq-item[open] .tv-key-faq-question {
  border-bottom: none;
}

.tv-key-faq .tv-key-faq-item[open] .tv-key-faq-question::after {
  transform: rotate(180deg);
}

.tv-key-faq.dark .tv-key-faq-item[open] {
  background: #242424;
  border-radius: 10px;
}

.tv-key-faq .tv-key-faq-answer {
  padding: 25px 16px 25px 25px;
  padding-top: 0;
  color: #000;
  font-size: 13px;
}

.tv-key-faq.dark .tv-key-faq-answer {
  padding-left: 25px;
  color: rgb(130 130 130);
}

.tv-key-faq .tv-key-faq-answer p {
  width: 90%;
  margin: 0;
  color: #000;
  font-size: 13px;
  line-height: 160%;
  letter-spacing: 0.32px;
}

.tv-key-faq.dark .tv-key-faq-answer p {
  color: rgb(130 130 130);
}

.tv-key-faq .tv-key-faq-answer a,
.tv-key-faq.dark .tv-key-faq-answer a {
  color: #f04c23;
}

.tv-key-faq .tv-key-faq-load-more {
  display: block;
  margin: 0 auto 32px;
  padding: 10px 30px;
  border: 1px solid #4f4f4f;
  border-radius: 4px;
  background: transparent;
  color: rgb(0 0 0 / 50%);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.tv-key-faq.dark .tv-key-faq-load-more {
  color: #f04c23;
}

@media (width >= 600px) {
  body:has(.tv-key-faq) .footer-wrapper {
    margin-top: 160px;
  }

  .tv-key-faq .tv-key-faq-heading {
    padding: 20px 0 18px;
    font-size: 34px;
  }

  .tv-key-faq .tv-key-faq-list {
    width: 66%;
  }

  .tv-key-faq .tv-key-faq-question {
    padding: 35px 0 20px;
  }

  .tv-key-faq.dark .tv-key-faq-question {
    padding-right: 25px;
    padding-left: 25px;
  }

  .tv-key-faq .tv-key-faq-question-text {
    font-size: 16px;
  }

  .tv-key-faq .tv-key-faq-answer {
    padding: 40px;
    padding-top: 0;
    font-size: 16px;
  }

  .tv-key-faq.dark .tv-key-faq-answer {
    padding-left: 25px;
  }

  .tv-key-faq .tv-key-faq-answer p {
    font-size: 16px;
  }
}