/* ==========================================================================
   Tunstall Funding Options accordion  —  [tunstall_funding]
   ONLY the numbered accordion (one open at a time). The heading and side image
   are built separately in Elementor. Scoped under .tfo so it never leaks.
   ========================================================================== */

.tfo {
  --tfo-body: #030303; /* title + body text */
  --tfo-accent: #ED1C29; /* numbers + Learn More button */
  --tfo-accent-lift: #f5333c; /* CTA hover (lighter, matches Buy Now) */
  --tfo-accent-press: #c0151f; /* CTA active */
  --tfo-line: oklch(0.9 0.005 255); /* row hairlines */
  --tfo-num-w: 2.75rem; /* number column width — title + body align past it */
  --tfo-gap: clamp(1rem, 3vw, 2.5rem); /* gap between number and title */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color: var(--tfo-body);
  font-family: 'Roboto', sans-serif;
}

.tfo *,
.tfo *::before,
.tfo *::after {
  box-sizing: border-box;
}

/* --- Accordion ------------------------------------------------------------ */
.tfo__list {
  display: flex;
  flex-direction: column;
}

.tfo__head-wrap {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.tfo__head {
  display: flex;
  align-items: center;
  gap: var(--tfo-gap);
  width: 100%;
  padding: clamp(1rem, 2.2vw, 1.5rem) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--tfo-body);
  font: inherit;
}
.tfo__num {
  flex: none;
  width: var(--tfo-num-w);
  font-size: clamp(1.35rem, 1rem + 1vw, 1.7rem);
  font-weight: 700;
  color: var(--tfo-accent);
  font-variant-numeric: tabular-nums;
}
.tfo__title {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem);
  font-weight: 700;
  color: var(--tfo-body);
}

/* Smooth height with the grid-rows 0fr -> 1fr technique (no JS measuring). */
.tfo__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.tfo__item.is-open .tfo__panel {
  grid-template-rows: 1fr;
}
.tfo__panel-inner {
  overflow: hidden;
  /* Indent the body so it lines up under the title (past the number column). */
  padding-left: calc(var(--tfo-num-w) + var(--tfo-gap));
}
.tfo__item.is-open .tfo__panel-inner {
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.tfo__body {
  margin: 0 0 1.1rem;
  max-width: 46ch;
  color: var(--tfo-body);
}
.tfo__body :is(p, ul, ol) {
  margin: 0 0 0.75rem;
}
.tfo__body :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

/* --- Learn More button — matches the Buy Now CTA (red, white, lift on hover).
   Selectors are scoped as `.tfo a.tfo__btn` so they out-specify Elementor's
   global link styles (e.g. `.elementor-kit-8 a`) without needing !important. */
.tfo a.tfo__btn {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--tfo-accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.2s var(--ease);
}
.tfo a.tfo__btn:hover,
.tfo a.tfo__btn:focus {
  background: var(--tfo-accent-lift);
  color: #fff;
  transform: translateY(-1px);
}
.tfo a.tfo__btn:active {
  background: var(--tfo-accent-press);
  color: #fff;
  transform: translateY(0);
}

/* --- Focus ---------------------------------------------------------------- */
.tfo :is(a, button):focus-visible {
  outline: 2px solid var(--tfo-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .tfo__panel {
    transition: none;
  }
}