/* ==========================================================================
   Numbered Accordion — numbered step cards that expand to reveal rich-text
   body content (12px). Site root font-size is 10px, so 1rem = 10px.
   Accordion uses grid-rows 0fr/1fr, gated by html.js-animate (content stays
   open in the builder / with JS off).
   ========================================================================== */

.numbered-accordion {
  --na-card-bg: #f0eefb;
  --na-number-bg: #d7d3f3;
  --na-number-color: var(--blue, #282f41);
  --na-title-color: var(--blue, #282f41);
  --na-icon-bg: #dedafe;
  --na-icon-color: var(--blue, #282f41);
  --na-body-color: var(--blue, #282f41);
  --na-radius: 18px;
  --na-transition: 300ms;
  display: block;
}

.numbered-accordion__item {
  background: var(--na-card-bg);
  border-radius: var(--na-radius);
  padding: 3rem 4rem;
  margin-bottom: 2rem;
}
.numbered-accordion__item:last-child {
  margin-bottom: 0;
}

/* --- Head (number + title + chevron) --------------------------------------- */
.numbered-accordion__head {
  margin: 0;
}
.numbered-accordion__toggle {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--na-title-color);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.numbered-accordion__toggle--static {
  cursor: default;
}
.numbered-accordion__toggle:focus-visible {
  outline: 2px solid var(--na-icon-bg);
  outline-offset: 4px;
}

.numbered-accordion__number {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--na-number-bg);
  color: var(--na-number-color);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.numbered-accordion__title {
  font-size: clamp(2.2rem, 1.4rem + 1.6vw, 2.8rem); /* ~22–28px */
  font-weight: 800;
  line-height: 1.15;
  color: var(--na-title-color);
}

.numbered-accordion__icon {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: var(--na-icon-bg);
  color: var(--na-icon-color);
  font-size: 1.8rem;
}
.numbered-accordion__icon svg {
  display: block;
  transform: rotate(-90deg); /* default (no JS = open) → points up */
  transition: transform var(--na-transition) ease;
}

/* --- Panel + collapsible body ---------------------------------------------- */
.numbered-accordion__panel {
  display: grid;
  grid-template-rows: 1fr; /* open by default (no JS / builder) */
  transition: grid-template-rows var(--na-transition) ease;
}
.numbered-accordion__content {
  overflow: hidden;
  min-height: 0;
}
.numbered-accordion__body {
  padding-top: 2.5rem;
  font-size: 1.2rem; /* 12px body text */
  line-height: 1.7;
  color: var(--na-body-color);
}

/* --- JS-enhanced states (html.js-animate set before first paint) ----------- */
.js-animate .numbered-accordion__panel {
  grid-template-rows: 0fr;
}
.js-animate .numbered-accordion__item.is-open .numbered-accordion__panel {
  grid-template-rows: 1fr;
}
.js-animate .numbered-accordion__icon svg {
  transform: rotate(90deg); /* closed → points down */
}
.js-animate .numbered-accordion__item.is-open .numbered-accordion__icon svg {
  transform: rotate(-90deg); /* open → points up */
}

/* --- Body rich text -------------------------------------------------------- */
.numbered-accordion__body > :first-child {
  margin-top: 0;
}
.numbered-accordion__body > :last-child {
  margin-bottom: 0;
}
.numbered-accordion__body p {
  margin: 0 0 1.2em;
}
.numbered-accordion__body strong {
  font-weight: 700;
}
.numbered-accordion__body ul,
.numbered-accordion__body ol {
  margin: 0 0 1.2em;
  padding-left: 1.6em;
}
.numbered-accordion__body ul {
  list-style: disc;
}
.numbered-accordion__body li {
  margin: 0 0 0.4em;
}
.numbered-accordion__body a {
  color: var(--na-icon-color);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .numbered-accordion__panel,
  .numbered-accordion__icon svg {
    transition: none;
  }
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .numbered-accordion__item {
    padding: 2rem;
  }
  .numbered-accordion__toggle {
    gap: 1.2rem;
  }
  .numbered-accordion__number {
    width: 4.4rem;
    height: 4.4rem;
    font-size: 1.8rem;
  }
  .numbered-accordion__icon {
    width: 4rem;
    height: 4rem;
  }
  .numbered-accordion__body {
    padding-top: 2rem;
  }
}