/**
 * Vitalisite FSE - Accordion Styles
 * 
 * Styles for core/details block customization
 * 
 * @package Vitalisite_FSE
 * @since 1.0.0
 */

/* ==========================================================================
   Base Detail Styles
   ========================================================================== */

.vitalisite-accordion-item {
  border-bottom: 1px solid var(--wp--preset--color--border);
  margin-bottom: 0;
  padding: var(--wp--preset--spacing--30) 0;
  transition: all 0.3s ease;
}

.vitalisite-accordion-item summary {
  list-style: none; /* Hide default triangle */
  cursor: pointer;
  font-weight: 600;
  font-family: var(--wp--preset--font-family--primary);
  color: var(--wp--preset--color--main-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wp--preset--spacing--20) 0;
}

.vitalisite-accordion-item summary::-webkit-details-marker {
  display: none;
}

/* Custom Icon (Chevron) */
.vitalisite-accordion-item summary::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3D91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

.vitalisite-accordion-item[open] summary::after {
  transform: rotate(180deg);
}

.vitalisite-accordion-item[open] summary {
  color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Variant: Vitalisite Legacy (Boxed)
   ========================================================================== */

.vitalisite-accordion-variant-legacy .vitalisite-accordion-item {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--image-radius);
  margin-bottom: var(--wp--preset--spacing--30);
  padding: 0;
  background-color: var(--wp--preset--color--bg);
  overflow: hidden;
}

.vitalisite-accordion-variant-legacy .vitalisite-accordion-item summary {
  background-color: var(--wp--preset--color--surface);
  padding: var(--wp--preset--spacing--40);
  transition: background-color 0.3s ease;
}

.vitalisite-accordion-variant-legacy .vitalisite-accordion-item[open] summary {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--bg);
  margin-bottom: 0;
}

.vitalisite-accordion-variant-simple
  .vitalisite-accordion-item[open]
  .wp-block-group {
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--on-secondary);
  border-radius: var(--wp--custom--image-radius);
  margin-bottom: 0;
}

/* White chevron when active/primary background */
.vitalisite-accordion-variant-legacy
  .vitalisite-accordion-item[open]
  summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.wp-block-vitalisite-fse-accordion-item.vitalisite-accordion-item p {
  margin: 0;
  color: var(--wp--preset--color--main-text);
}

/* Custom Accordion Block Container */
.vitalisite-accordion-container {
  padding-top: 50px;
}

.vitalisite-accordion-container .vitalisite-accordion-item {
  margin-bottom: 4px !important;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
