/* Details styles "Accordion", "FAQ", "Numbered" + default look (loaded only with details blocks) */
.wp-block-details {
  & > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--wp--preset--color--ink);
    transition: color 200ms ease;

    &::-webkit-details-marker { display: none; }

    &::before {
      content: "+";
      flex: 0 0 auto;
      width: 14px;
      font-weight: 400;
      font-size: 20px;
      line-height: 1;
      color: var(--wp--preset--color--teal);
    }

    &:hover { color: var(--wp--preset--color--teal); }
    &:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 3px; }
  }

  &[open] > summary::before { content: "–"; }

  & > :not(summary) { margin-block: 0; }
  & > summary + * { margin-top: 14px; }
  & > * + :not(summary) { margin-top: 12px; }
}

/* smooth opening */
.wp-block-details {
  interpolate-size: allow-keywords;

  &::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 300ms var(--wp--custom--ease-out), content-visibility 300ms allow-discrete;
  }

  &[open]::details-content { block-size: auto; }
}

/* "Accordion": grey boxes on top of each other (product details: downloads, technical data, accessories) */
.wp-block-details.is-style-accordion {
  background: var(--wp--preset--color--grey);
  padding: 0 20px;

  & > summary { padding-block: 14px; }
  & > :last-child:not(summary) { margin-bottom: 20px; }
}

.wp-block-details.is-style-accordion + .wp-block-details.is-style-accordion { margin-top: 8px; }

/* "FAQ": question with a line below, a thin plus on the right that turns into × */
.wp-block-details.is-style-faq {
  border-bottom: 1px solid var(--wp--custom--line);
  padding-block: 16px;

  & > summary {
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    font-size: 15px;

    &::before {
      content: "";
      order: 2;
      flex: 0 0 12px;
      height: 12px;
      margin-top: 6px;
      background:
        linear-gradient(var(--wp--preset--color--teal), var(--wp--preset--color--teal)) center / 12px 1.5px no-repeat,
        linear-gradient(var(--wp--preset--color--teal), var(--wp--preset--color--teal)) center / 1.5px 12px no-repeat;
      transition: transform 260ms var(--wp--custom--ease-out);
    }
  }

  &[open] > summary::before { content: ""; transform: rotate(45deg); }
  & > summary + * { margin-top: 10px; }
  & > :not(summary) { font-size: 14.5px; max-width: 70ch; }
}

/* "Numbered": number (counted per group of items), bold title, short text below; body indented under the title.
   Summary: "<strong>Title</strong> short text". */
:where(*):has(> .wp-block-details.is-style-numbered) { counter-reset: sg-acc; }

.wp-block-details.is-style-numbered {
  counter-increment: sg-acc;
  border-bottom: 1px solid var(--wp--custom--teal-wash);
  padding-block: 14px;

  /* block layout (not grid): the text after the bold title would become its own grid cell */
  & > summary {
    display: block;
    position: relative;
    padding: 0 32px 0 64px;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--wp--custom--body);

    &::before {
      content: counter(sg-acc, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: 0;
      width: 52px;
      font-size: 24px;
      line-height: 1.1;
      color: var(--wp--preset--color--teal);
    }

    &::after {
      content: "";
      position: absolute;
      right: 4px;
      top: 0;
      width: 9px;
      height: 9px;
      margin-top: 6px;
      border-right: 1.5px solid var(--wp--preset--color--teal);
      border-bottom: 1.5px solid var(--wp--preset--color--teal);
      transform: rotate(45deg);
      transition: transform 260ms var(--wp--custom--ease-out), margin-top 260ms var(--wp--custom--ease-out);
    }

    & strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--wp--preset--color--ink); }
    &:hover strong { color: var(--wp--preset--color--teal); }
  }

  &[open] > summary::after { transform: rotate(-135deg); margin-top: 10px; }
  & > :not(summary) { padding: 0 32px 0 64px; font-size: 14px; }
  & > summary + * { margin-top: 10px; }
  & > :last-child:not(summary) { margin-bottom: 4px; }
}

@media (max-width: 480px) {
  .wp-block-details.is-style-numbered > :not(summary) { padding-inline: 0; }
}

.wp-block-details.is-style-faq + .wp-block-details.is-style-faq { margin-top: 0; }

:is(.is-layout-constrained, .is-layout-flow, .sg-section__in) > * + .wp-block-details.is-style-faq:first-of-type {
  border-top: 1px solid var(--wp--custom--line);
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-details::details-content { transition: none; }
}