/*
 * C4mulo5 – Accordion List
 * Modern, theme-friendly styles (no theme overrides outside this section).
 */

.c4mulo5-accordion-list .c4mulo5-accordion {
  max-width: 980px;
  margin: 0 auto;
}

.c4mulo5-accordion-list .c4mulo5-accordion-item {
  width: 100%;
}

.c4mulo5-accordion-details {
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  margin: 0 0 16px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.c4mulo5-accordion-details:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.c4mulo5-accordion-details[open] {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  border-color: rgba(0, 0, 0, 0.16);
}

.c4mulo5-accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.25;
  background: rgba(0, 0, 0, 0.02);
  user-select: none;
}

/* Remove native marker */
.c4mulo5-accordion-title::-webkit-details-marker { display: none; }
.c4mulo5-accordion-title::marker { content: ""; }

.c4mulo5-accordion-title-text {
  flex: 1;
  user-select: text; /* allow selecting/editing the title text in the Customizer */
  word-break: break-word;
}

/* Arrow indicator */
.c4mulo5-accordion-title::after {
  content: "\25BE"; /* small down triangle */
  font-size: 16px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 150ms ease;
  opacity: 0.85;
}

.c4mulo5-accordion-details[open] .c4mulo5-accordion-title::after {
  transform: rotate(-180deg);
}

.c4mulo5-accordion-content {
  padding: 2px 20px 18px 20px;
}

.c4mulo5-accordion-content p:last-child {
  margin-bottom: 0;
}

/* Small screens: keep spacing compact */
@media (max-width: 768px) {
  .c4mulo5-accordion-title { padding: 14px 14px; }
  .c4mulo5-accordion-content { padding: 2px 14px 14px 14px; }
}


/* TinyMCE inline (Customizer only): keep focus outline tidy */
.c4mulo5-accordion-content.mce-content-body { outline: none; }
.c4mulo5-accordion-content:focus { outline: 2px dashed rgba(0,0,0,0.18); outline-offset: 2px; }