/* Collapsible sections: right-side arrow indicators without layout shift */
/* Requirements: keep arrows inside summary header area, no CLS/CLP increase */

/* Base: ensure summary uses flex to align content and provide right slot */
.section-collapsible > summary.card-header,
.brand-card-header,
.wo-sec > summary.card-header,
.card > summary.card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* keep text/content aligned to the left by default */
  text-align: left;
}

/* Right arrow container: absolute to the right, reserving space via padding to avoid CLS */
.section-collapsible > summary.card-header,
.brand-card-header,
.wo-sec > summary.card-header,
.card > summary.card-header {
  padding-right: 2rem !important; /* reserve visual space for the arrow */
}

/* Arrow: use a pseudo-element, no extra DOM. Slight opacity to keep it subtle. */
.section-collapsible > summary.card-header::after,
.brand-card-header::after,
.wo-sec > summary.card-header::after,
.card > summary.card-header::after {
  content: '\25B6'; /* right-pointing triangle */
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform .15s ease-in-out;
  opacity: .9;
  pointer-events: none;
}

/* When open, rotate so the triangle points down (expanded) */
.section-collapsible[open] > summary.card-header::after,
.wo-sec[open] > summary.card-header::after,
.card[open] > summary.card-header::after {
  transform: translateY(-50%) rotate(90deg); /* triangle points down */
}

/* Support for details elements without card class but using brand-card-header */
.brand-card-header { padding-right: 2rem !important; }

/* Respect brand backgrounds: ensure sufficient contrast in dark/light */
html[data-theme='dark'] .brand-card-header::after,
html[data-theme='dark'] .card > summary.card-header::after {
  opacity: .95;
}

/* Ensure summary itself remains focusable and keyboard-accessible */
summary.card-header {
  outline-offset: 2px;
}