/* ===================== */
/*      Accordion        */
/* ===================== */

/* Container */
.accordion-container {
  width: 80vmin;
  margin: auto;
  padding: 2vmin;
}

/* Items */
.accordion-item {
  border-bottom: 0.2vmin solid var(--dark-colour);
}
.accordion-item:last-child {
  border-bottom: none;
}

/* Header button */
.accordion-item button {
  width: 100%;
  background: none;
  border: none;
  padding: 2vmin 0;
  font-size: 2.5vmin;
  text-align: left;
  cursor: pointer;
  color: var(--dark-colour);
  position: relative;
}

.accordion-item button:focus-visible {
  outline: 0.4vmin solid var(--yellow-colour);
  outline-offset: 0.5vmin;
  border-radius: 0.6vmin;
}

/* Plus / minus icon */
.accordion-item button .icon {
  position: absolute;
  right: 1vmin;
  top: 50%;
  transform: translateY(-50%);
  width: 3vmin;
  height: 3vmin;
  border: 0.2vmin solid var(--dark-colour);
  border-radius: 50%;
}
.accordion-item button .icon::before,
.accordion-item button .icon::after {
  content: '';
  position: absolute;
  background-color: var(--dark-colour);
}
.accordion-item button .icon::before {
  top: 50%;
  left: 30%;
  width: 40%;
  height: 0.3vmin;
  transform: translateY(-50%);
}
.accordion-item button .icon::after {
  top: 30%;
  left: 50%;
  width: 0.3vmin;
  height: 40%;
  transform: translateX(-50%);
}
.accordion-item button[aria-expanded='true'] .icon::after {
  opacity: 0; /* minus state */
}

/* Title text */
.accordion-title {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 2vmin;
  color: var(--dark-colour);
  line-height: 1.2;
}

/* Panel content */
.accordion-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  transition: none;
  will-change: max-height, opacity;
}

/* Expanded state:
   Use a generous max-height so it never “caps out” mid-anim. */

.accordion-item button[aria-expanded='true'] + .accordion-content,
.accordion-item.open .accordion-content {
  opacity: 1;
  max-height: 120vmin; /* big enough not to clip */
  padding-bottom: 2vmin;
  transition: opacity 200ms ease-in-out, max-height 200ms ease-in-out;
}

/* Typography inside panels — scoped so it won’t touch button labels elsewhere */
.accordion-content p {
  margin-top: 1.5vmin;
  width: 90%;
}
.accordion-content p:first-child {
  margin-top: 0;
}
.accordion-content p,
.accordion-content ul {
  font-size: 1.75vmin;
  font-weight: 100;
  line-height: 2.5vmin;
  text-align: left;
  color: var(--grey-colour);
  text-wrap: balance; /* nicer wrapping without forcing everything */
}
.accordion-content ul {
  padding-left: 3vmin;
}
.accordion-content li {
  margin-bottom: 1vmin;
}
.accordion-content a {
  color: var(--dark-colour);
  text-decoration: none;
}
.accordion-content a:hover {
  text-decoration: underline;
}

/* “Explore all” link (if used under an accordion) */
#explore-all-demos {
  cursor: pointer;
  user-select: none;
}
#explore-all-demos:hover {
  color: var(--yellow-colour);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .accordion-content,
  .accordion-item button[aria-expanded='true'] + .accordion-content,
  .accordion-item.open .accordion-content {
    transition: none !important;
  }
}