/*
 * Product page documentation accordion.
 *
 * Verbatim port of the rules in site/assets/css/pages.css (lines ~1110-1178)
 * that style .accordion / .accordion__toggle / .accordion__icon /
 * .accordion__content / .accordion__title.
 *
 * Those rules are absent from the theme's own main.css, which styles a
 * differently-named control (.accordion__btn / .accordion__panel) and leaves
 * the static page's markup unstyled. The values below are copied from the
 * static build so the rendered accordion matches site/product-b5-b7598.html
 * exactly - padding, type size, icon geometry, colours and the
 * max-height/opacity transition included.
 *
 * main.css and pages.css stay byte-identical to the static build.
 */

.accordion {
  border-top: 1px solid var(--c-line);
  background: #fff;
}

.accordion__item {
  border-bottom: 1px solid var(--c-line);
}

.accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 28px var(--pad-x);
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.accordion__title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-ink);
}

.accordion__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--c-ink);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.accordion__icon::before {
  width: 16px;
  height: 1.5px;
}

.accordion__icon::after {
  width: 1.5px;
  height: 16px;
  transition: opacity .2s;
}

/* Open state hides the vertical stroke, turning + into −. */
.accordion__toggle.is-open .accordion__icon::after {
  opacity: 0;
}

/*
 * The panel animates with max-height + opacity; it is not display:none and not
 * the hidden attribute. product-accordion.js therefore only toggles is-open /
 * is-closed and must NOT set panel.hidden, or the transition is skipped.
 */
.accordion__content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
}

.accordion__content.is-open {
  max-height: 2000px;
  opacity: 1;
}

.accordion__content.is-closed {
  max-height: 0;
  opacity: 0;
}

.accordion__content > p {
  padding: 0 var(--pad-x) 24px;
  color: var(--c-ink-2);
  line-height: 1.8;
}

/* The prose wrapper used for the per-product collection copy. */
.accordion__content > .prose {
  padding: 0 var(--pad-x) 24px;
  color: var(--c-ink-2);
  line-height: 1.8;
}

.accordion__content > .prose > :first-child {
  margin-top: 0;
}

/* Visible keyboard focus, since the toggle is a bare button. */
.accordion__toggle:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: -2px;
}

/*
 * doc-strip: the two-column block inside the technical panel. The static CSS
 * at pages.css:628 gives it a tinted full-bleed background, but that rule
 * targets the standalone .doc-strip used on some pages; inside the accordion
 * the panel supplies the padding, so only the grid is needed here.
 */
.accordion__content .doc-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px) {
  .accordion__content .doc-strip {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion__content,
  .accordion__icon::after {
    transition: none;
  }
}