/* ==========================================================================
   ACCORDION — shared component (LP01 FAQ · LP02 FAQ)
   --------------------------------------------------------------------------
   Pairs with assets/js/components/accordion.js (WAI-ARIA pattern).
   • Each question is a card with a topic icon; the open card gains a teal
     edge on its inline-start side and the +/× glyph morphs.
   • Height animates with CSS grid-template-rows 0fr → 1fr (no JS
     measuring); answers stay visible until JS adds .is-enhanced.
   Sections only style their own layout around it.
   ========================================================================== */

.accordion {
  display: grid;
  gap: var(--space-sm);
}

.qa {
  position: relative;
  border-radius: var(--r-card);
  border: 1px solid var(--c-ink-a10);
  background-color: var(--c-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

/* Teal edge on the inline-start side when open */
.qa::before {
  content: "";
  position: absolute;
  inset-block: 1rem;
  inset-inline-start: -1px;
  inline-size: 3px;
  border-radius: var(--r-pill);
  background-color: var(--c-teal);
  transform: scaleY(0);
  transition: transform 0.4s var(--ease-out);
}

.qa.is-open {
  border-color: rgba(0, 169, 182, 0.35);
  box-shadow: var(--shadow-md);
}

.qa.is-open::before {
  transform: scaleY(1);
}

.qa__heading {
  font-size: inherit;
}

.qa__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  inline-size: 100%;
  min-block-size: 3.5rem;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--r-card);
  font-family: var(--ff-display);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-ink);
  text-align: start;
}

.qa__trigger:focus-visible {
  outline-offset: -2px;   /* keep the global ring inside the card edge */
}

.qa__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 12px;
  background-color: var(--c-teal-a12);
  color: var(--c-deep-teal);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.qa__icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.qa.is-open .qa__icon {
  background-color: var(--c-navy);
  color: var(--c-teal);
}

.qa__question {
  flex: 1;
}

/* Plus → close morph */
.qa__toggle {
  position: relative;
  flex-shrink: 0;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--c-ink-a20);
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              rotate 0.4s var(--ease-in-out);
}

.qa__toggle::before,
.qa__toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0.75rem;
  block-size: 2px;
  margin-block-start: -1px;
  margin-inline-start: -0.375rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink);
  transition: background-color var(--dur-micro) var(--ease-out);
}

.qa__toggle::after {
  rotate: 90deg;
}

.qa.is-open .qa__toggle {
  rotate: 45deg;
  border-color: var(--c-teal);
  background-color: var(--c-teal);
}

.qa.is-open .qa__toggle::before,
.qa.is-open .qa__toggle::after {
  background-color: var(--c-navy);
}

/* Answer panel — smooth height via grid rows */
.qa__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.accordion.is-enhanced .qa__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-in-out);
}

.accordion.is-enhanced .qa.is-open .qa__panel {
  grid-template-rows: 1fr;
}

.qa__inner {
  overflow: hidden;
  min-block-size: 0;
}

.qa__inner p {
  padding-block-end: var(--space-lg);
  padding-inline: calc(var(--space-lg) + 2.5rem + var(--space-md)) var(--space-lg);
  color: var(--c-slate);
  opacity: 1;
  transition: opacity 0.35s var(--ease-out);
}

.accordion.is-enhanced .qa:not(.is-open) .qa__inner p {
  opacity: 0;
}

@media (max-width: 29.99rem) {
  .qa__trigger {
    padding-inline: var(--space-md);
  }

  .qa__inner p {
    padding-inline: var(--space-md);
  }
}