/* ═══════════════════════════════════════════════
   Ákotí Accordion v2 — PURE HTML/CSS
   Zero JavaScript. Uses <details name="group">.

   Usage:
     <div class="aka2">
       <details name="faq" class="aka2-item" open>
         <summary class="aka2-trigger">
           <span class="aka2-icon">🏘</span>
           <span class="aka2-label">What is Ákotí?</span>
           <span class="aka2-arrow">▾</span>
         </summary>
         <div class="aka2-body">
           <p>A Nigerian-rooted design system...</p>
         </div>
       </details>
       <details name="faq" class="aka2-item">
         <summary>Second item</summary>
         <div class="aka2-body"><p>Content...</p></div>
       </details>
     </div>

   - Same name="" = exclusive (one open at a time)
   - Different name="" or no name = multiple open
   - Add "open" attribute to default-open an item
   ═══════════════════════════════════════════════ */

/* Enable height animation to/from auto */
.aka2 {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Item container */
.aka2-item {
  border: 1px solid rgba(26, 47, 94, 0.1);
  border-radius: 20px 6px 20px 6px;
  overflow: hidden;
  transition: border-radius 0.35s, border-color 0.35s;
}

.aka2-item[open] {
  border-radius: 6px 20px 6px 20px;
  border-color: rgba(168, 200, 232, 0.3);
}

/* Pillar accent on open */
.aka2-item[open] {
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #a8c8e8, #e8b4b8) 1;
}

/* Trigger / Summary */
.aka2-trigger,
.aka2-item > summary {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #1e1e24;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none; /* remove default marker */
  transition: background 0.2s;
  user-select: none;
}

.aka2-item > summary::-webkit-details-marker { display: none; }
.aka2-item > summary::marker { content: ''; }

.aka2-item > summary:hover,
.aka2-trigger:hover {
  background: rgba(168, 200, 232, 0.06);
}

.aka2-item[open] > summary,
.aka2-item[open] > .aka2-trigger {
  background: rgba(168, 200, 232, 0.08);
}

/* Icon */
.aka2-icon {
  width: 28px;
  height: 28px;
  border-radius: 12px 4px 12px 4px;
  background: rgba(26, 47, 94, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.3s;
}

.aka2-item[open] .aka2-icon {
  background: #a8c8e8;
  color: #0f1b3d;
  border-radius: 4px 12px 4px 12px;
}

/* Label takes up remaining space */
.aka2-label {
  flex: 1;
}

/* Arrow */
.aka2-arrow {
  color: #8a8a96;
  font-size: 12px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aka2-item[open] .aka2-arrow {
  transform: rotate(180deg);
  color: #a8c8e8;
}

/* Body — animated height */
.aka2-body {
  padding: 0 18px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: #4a4a56;
}

.aka2-body p {
  margin: 0 0 8px;
}

.aka2-body p:last-child {
  margin: 0;
}

/* ═══ ENTRY/EXIT ANIMATION ═══ */

/* Content wrapper — use grid for animatable height */
.aka2-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              padding 0.35s;
  padding-top: 0;
  padding-bottom: 0;
}

.aka2-body > * {
  overflow: hidden;
  min-height: 0;
}

.aka2-item[open] .aka2-body {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 16px;
}

/* ═══ VARIANT: Bordered ═══ */
.aka2-bordered .aka2-item {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

/* ═══ VARIANT: Flush (no gaps, stacked) ═══ */
.aka2-flush {
  gap: 0;
}

.aka2-flush .aka2-item {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

.aka2-flush .aka2-item:first-child {
  border-top: 1px solid rgba(26, 47, 94, 0.1);
  border-radius: 16px 6px 0 0;
}

.aka2-flush .aka2-item:last-child {
  border-radius: 0 0 16px 6px;
}

.aka2-flush .aka2-item[open] {
  border-radius: 0;
  border-image: none;
  border-left: 3px solid #a8c8e8;
}