/* ====================
   2. Front-End Styles
   ==================== */

/* Hide body by default, smooth expand/collapse */
.wp-block-accordion-group:not(.is-editor) .wp-block-accordion-item .accordion-body {
  display: none;
  transition: max-height .3s ease;
}
.wp-block-accordion-group:not(.is-editor) .wp-block-accordion-item.is-open .accordion-body {
  display: block;
}

/* Cursor pointer for headers by default, but not if static open */
.wp-block-accordion-item .accordion-header {
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background .2s;
}
.wp-block-accordion-item.accordion-static-open .accordion-header {
  cursor: default !important;
  pointer-events: none;
  opacity: 0.85;
}

/* Optional: visually show static open state */
.wp-block-accordion-item.accordion-static-open { opacity: 0.92; }
.wp-block-accordion-item.accordion-static-open .accordion-header:after {
  content: '';
  /* optional static lock icon */
}

/* Horizontal layout (grid of items) */
.wp-block-accordion-group.is-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}
.wp-block-accordion-group.is-horizontal[data-items-per-row="1"] .wp-block-accordion-item { width: 100%; }
.wp-block-accordion-group.is-horizontal[data-items-per-row="2"] .wp-block-accordion-item { width: calc(100% / 2 - 16px); }
.wp-block-accordion-group.is-horizontal[data-items-per-row="3"] .wp-block-accordion-item { width: calc(100% / 3 - 16px); }
.wp-block-accordion-group.is-horizontal[data-items-per-row="4"] .wp-block-accordion-item { width: calc(100% / 4 - 16px); }
.wp-block-accordion-group.is-horizontal[data-items-per-row="5"] .wp-block-accordion-item { width: calc(100% / 5 - 12px); }
.wp-block-accordion-group.is-horizontal[data-items-per-row="6"] .wp-block-accordion-item { width: calc(100% / 6 - 10px); }
/* Tablet widths */
@media (max-width: 1024px) {
  .wp-block-accordion-group.is-horizontal[data-items-per-row-tablet="1"] .wp-block-accordion-item { width: 100%; }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-tablet="2"] .wp-block-accordion-item { width: calc(100% / 2 - 12px); }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-tablet="3"] .wp-block-accordion-item { width: calc(100% / 3 - 10px); }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-tablet="4"] .wp-block-accordion-item { width: calc(100% / 4 - 8px); }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-tablet="5"] .wp-block-accordion-item { width: calc(100% / 5 - 6px); }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-tablet="6"] .wp-block-accordion-item { width: calc(100% / 6 - 4px); }
}
/* Mobile widths */
@media (max-width: 767px) {
  .wp-block-accordion-group.is-horizontal[data-items-per-row-mobile="1"] .wp-block-accordion-item { width: 100%; }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-mobile="2"] .wp-block-accordion-item { width: calc(100% / 2 - 8px); }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-mobile="3"] .wp-block-accordion-item { width: calc(100% / 3 - 6px); }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-mobile="4"] .wp-block-accordion-item { width: calc(100% / 4 - 4px); }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-mobile="5"] .wp-block-accordion-item { width: calc(100% / 5 - 2px); }
  .wp-block-accordion-group.is-horizontal[data-items-per-row-mobile="6"] .wp-block-accordion-item { width: calc(100% / 6 - 1px); }
}

/* Maintain vertical stacking for vertical layout (front) */
.wp-block-accordion-group.is-vertical { display: block; }
.wp-block-accordion-group.is-vertical .wp-block-accordion-item { width: 100%; }
.wp-block-accordion-group.is-horizontal .wp-block-accordion-item { margin-left: auto; margin-right: auto; }

/* ===========================
   Horizontal: header | body row
   =========================== */

/* Make each accordion item a row with header (L) + body (R) */
.wp-block-accordion-group.is-horizontal .wp-block-accordion-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Header column */
.wp-block-accordion-group.is-horizontal .wp-block-accordion-item .accordion-header {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: var(--aa-header-width, 115px);
}

/* Body column grows */
.wp-block-accordion-group.is-horizontal .wp-block-accordion-item .accordion-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Optional: per-group header width control */
.wp-block-accordion-group.is-horizontal { --aa-header-width: 115px; }

/* Responsive: stack on small screens if desired */
@media (max-width: 767px) {
  .wp-block-accordion-group.is-horizontal .wp-block-accordion-item {
    flex-direction: column;
    gap: 8px;
  }
  .wp-block-accordion-group.is-horizontal .wp-block-accordion-item .accordion-header {
    min-width: 0;
    width: 100%;
    white-space: normal;
  }
}