/* ==========================================================================
   Round 5 · FAQ A · "Ledger"
   A ruled list between two ink rules. The control is a bare ink plus drawn
   with two bars, no circle and no font glyph; its vertical bar folds away
   into a minus when the answer opens. Warm paper deepens toward the close.
   Kajabi's own mechanics stay: the .block click toggles .collapsed on
   .accordion-title (collapsed = closed). One pseudo-element replaces the
   Font Awesome ::after, so there is never a second icon.
   ========================================================================== */

#encore-theme #section-1637331684959 {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 56%, #F4ECE0 100%);
}

#encore-theme #section-1637331684959 .block-type--accordion > .block {
  border-bottom: 1px solid var(--line);
  transition: border-color .25s ease;
}

#encore-theme #block-1707866014783 > .block { border-top: 2px solid var(--ink); }
#encore-theme #section-1637331684959 #block-1636465407049 > .block { border-bottom: 2px solid var(--ink); }

#encore-theme #section-1637331684959 .block-type--accordion > .block .accordion-title {
  gap: 24px;
  padding: 24px 2px 24px 0;
  border-radius: 2px;
}

/* The ink plus. */
#encore-theme #section-1637331684959 .block-type--accordion > .block .accordion-title::after {
  content: "";
  flex: 0 0 18px;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 18px no-repeat;
  color: var(--ink);
  font-size: 0;
  transition: background-size .3s var(--ease), transform .3s var(--ease), color .2s ease;
}

/* Hover restates the full background: the inherited hover uses the
   shorthand (orange fill), which would otherwise erase the drawn bars. */
#encore-theme #section-1637331684959 .block-type--accordion > .block:hover .accordion-title::after {
  background:
    linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 18px no-repeat;
  border-color: transparent;
  color: var(--teal-2);
}

/* Open: the vertical bar folds away, leaving the minus. */
#encore-theme #section-1637331684959 .block-type--accordion > .block .accordion-title:not(.collapsed)::after,
#encore-theme #section-1637331684959 .block-type--accordion > .block:hover .accordion-title:not(.collapsed)::after {
  background-size: 18px 2px, 2px 0;
  transform: rotate(180deg);
}

/* Open row: the question takes teal, its rule darkens to ink. */
#encore-theme #section-1637331684959 .block-type--accordion > .block .accordion-title:not(.collapsed) h5 { color: var(--teal-3); }

#encore-theme #section-1637331684959 .block-type--accordion > .block:has(.accordion-title:not(.collapsed)) {
  border-bottom-color: var(--ink);
}

#encore-theme #section-1637331684959 .accordion-body {
  padding: 0 64px 28px 0;
  max-width: 68ch;
}

/* Keyboard: a firm teal ring around the whole question line. */
#encore-theme #section-1637331684959 .accordion-title:focus { outline: none; }

#encore-theme #section-1637331684959 .accordion-title:focus-visible {
  outline: 3px solid var(--teal-2);
  outline-offset: 4px;
}

#encore-theme #section-1637331684959 .accordion-title:focus-visible h5 { color: var(--teal-3); }

@media (max-width: 599px) {
  #encore-theme #section-1637331684959 .block-type--accordion > .block .accordion-title { gap: 16px; padding: 20px 0; }
  #encore-theme #section-1637331684959 .block-type--accordion > .block .accordion-title::after { flex-basis: 16px; width: 16px; height: 16px; margin-right: 2px; background-size: 16px 2px, 2px 16px; }
  #encore-theme #section-1637331684959 .block-type--accordion > .block .accordion-title:not(.collapsed)::after { background-size: 16px 2px, 2px 0; }
  #encore-theme #section-1637331684959 .accordion-body { padding-right: 0; }
  #encore-theme #section-1637331684959 .accordion-title:focus-visible { outline-offset: 2px; }
}