/* ===== Details styles (front + editor) ===== */

/* Reset-ish: make the summary clickable area nice */
.wp-block-details > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: .5rem;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* === Style: Highlight === */
.wp-block-details.is-style-highlight > summary {
  background: var(--details-highlight-bg, var(--wp--preset--color--accent, #ffea80));
  color: var(--details-highlight-fg, var(--wp--preset--color--contrast, #111));
  font-weight: 700;
}
.wp-block-details.is-style-highlight > summary::before {
  content: '▸';
  display: inline-block;
  transform-origin: center;
  transition: transform .2s ease;
}
.wp-block-details.is-style-highlight[open] > summary {
  background: var(--details-highlight-open-bg, rgba(0,0,0,.06));
}
.wp-block-details.is-style-highlight[open] > summary::before {
  content: '▾';
  transform: none;
}

/* === Style: Muted (dark) === */
.wp-block-details.is-style-muted > summary {
  background: var(--details-muted-bg, var(--wp--preset--color--contrast, #222));
  color: var(--details-muted-fg, var(--wp--preset--color--base, #fff));
  font-weight: 600;
}
.wp-block-details.is-style-muted > summary::before {
  content: '▸';
  display: inline-block;
  transform-origin: center;
  transition: transform .2s ease;
  opacity: .9;
}
.wp-block-details.is-style-muted[open] > summary {
  background: var(--details-muted-open-bg, #000);
  color: var(--details-muted-open-fg, var(--wp--preset--color--base, #fff));
}
.wp-block-details.is-style-muted[open] > summary::before {
  content: '▾';
}

/* === Style: Outline (bordered, uses theme colors) === */
.wp-block-details.is-style-outline > summary {
  background: var(--details-outline-bg, transparent);
  color: var(--details-outline-fg, inherit);
  border: 1px solid var(--details-outline-border, currentColor);
}
.wp-block-details.is-style-outline > summary::before {
  content: '▸';
  display: inline-block;
  transform-origin: center;
  transition: transform .2s ease;
  opacity: .75;
}
.wp-block-details.is-style-outline[open] > summary {
  background: var(--details-outline-open-bg, rgba(0,0,0,.04));
}
.wp-block-details.is-style-outline[open] > summary::before {
  content: '▾';
  opacity: 1;
}

/* Body spacing */
.wp-block-details.is-style-highlight,
.wp-block-details.is-style-muted,
.wp-block-details.is-style-outline {
  --details-body-padding: .5rem .5rem 1rem .5rem;
}
.wp-block-details.is-style-highlight > *:not(summary),
.wp-block-details.is-style-muted > *:not(summary),
.wp-block-details.is-style-outline > *:not(summary) {
  padding: var(--details-body-padding);
}

/* Focus ring for keyboard users */
.wp-block-details > summary:focus {
  outline: 2px solid var(--wp--preset--color--accent, currentColor);
  outline-offset: 2px;
}

/* Typography hooks: allow Global Styles controls to work */
.wp-block-details > summary {
  font-size: inherit; /* inherits from WP typography controls */
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}