/**
 * InnerBlocks Accordion - ELEMENTOR OPTIMIZED
 * Special version for use inside Elementor single post templates
 * 
 * KEY: No !important on max-height so JavaScript can control it
 */

/* ==========================================================================
   Container
   ========================================================================== */

.innerblocks-accordion-block,
.elementor-widget-container .innerblocks-accordion-block,
.elementor .innerblocks-accordion-block {
  border-top: 1px solid #e5e7eb !important;
  margin: 1.5em 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.elementor-widget-container .innerblocks-accordion-block,
.elementor-column .innerblocks-accordion-block {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   Accordion Items
   ========================================================================== */

.innerblocks-accordion-item,
.elementor .innerblocks-accordion-item {
  border-bottom: 1px solid #e5e7eb !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  list-style: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: visible !important;
  display: block !important;
  position: relative !important;
}

/* ==========================================================================
   Accordion Button/Title
   ========================================================================== */

.innerblocks-accordion-title,
.elementor .innerblocks-accordion-title,
button.innerblocks-accordion-title {
  /* Critical: Allow inline styles to work */
  all: unset !important;
  
  /* Re-apply our styles */
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px 16px !important;
  box-sizing: border-box !important;
  
  /* Typography */
  font-weight: 600 !important;
  font-size: inherit !important;
  line-height: 1.5 !important;
  color: #080808 !important;
  text-decoration: none !important;
  text-transform: none !important;
  
  /* Visual */
  background: #D7D3BF !important;
  background-color: #D7D3BF !important;
  transition: background 0.3s ease, color 0.3s ease !important;
  
  /* Interaction */
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  
  /* Positioning */
  position: relative !important;
  z-index: 1 !important;
}

/* Hover state */
.innerblocks-accordion-title:hover,
.elementor .innerblocks-accordion-title:hover {
  background: #C8C4AF !important;
  background-color: #C8C4AF !important;
  color: #ffffff !important;
}

/* Active (open) state */
.innerblocks-accordion-title.active,
.elementor .innerblocks-accordion-title.active {
  background: #C1BAA1 !important;
  background-color: #C1BAA1 !important;
  color: #ffffff !important;
}

/* Focus state */
.innerblocks-accordion-title:focus-visible {
  outline: 2px solid #C1BAA1 !important;
  outline-offset: 2px !important;
}

/* Kill all default states */
.innerblocks-accordion-title:hover,
.innerblocks-accordion-title:focus,
.innerblocks-accordion-title:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ==========================================================================
   Toggle Icon (Plus/Minus)
   ========================================================================== */

.innerblocks-accordion-title::after,
.elementor .innerblocks-accordion-title::after {
  content: "+" !important;
  
  /* Size & Shape */
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  border: 2px solid #080808 !important;
  
  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  
  /* Typography */
  font-size: 18px !important;
  line-height: 1 !important;
  color: #080808 !important;
  
  /* Visual */
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.innerblocks-accordion-title:hover::after,
.elementor .innerblocks-accordion-title:hover::after {
  background: #C8C4AF !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

.innerblocks-accordion-title.active::after,
.elementor .innerblocks-accordion-title.active::after {
  content: "−" !important;
  background: #C1BAA1 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* ==========================================================================
   Accordion Content - CRITICAL SECTION
   ========================================================================== */

.innerblocks-accordion-content,
.elementor .innerblocks-accordion-content {
  /* CRITICAL: No !important on max-height - JavaScript must be able to override it */
  max-height: 0;
  
  /* Everything else can have !important */
  overflow: hidden !important;
  transition: max-height 0.35s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* When opened by JavaScript, the inline style will set max-height */
.innerblocks-accordion-content.open,
.elementor .innerblocks-accordion-content.open {
  /* Don't force max-height here - let JavaScript control it */
  overflow: hidden !important;
}

.innerblocks-accordion-inner,
.elementor .innerblocks-accordion-inner {
  padding: 0 16px !important;
  margin: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.innerblocks-accordion-content.open .innerblocks-accordion-inner,
.elementor .innerblocks-accordion-content.open .innerblocks-accordion-inner {
  padding-top: 12px !important;
  padding-bottom: 18px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ==========================================================================
   Content Typography
   ========================================================================== */

.innerblocks-accordion-content p {
  margin: 0 0 1em !important;
}

.innerblocks-accordion-content p:last-child {
  margin-bottom: 0 !important;
}

.innerblocks-accordion-content ul,
.innerblocks-accordion-content ol {
  margin: 0 0 1em !important;
  padding-left: 1.5em !important;
}

.innerblocks-accordion-content ul:last-child,
.innerblocks-accordion-content ol:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Block Spacing for Inner Blocks
   ========================================================================== */

.innerblocks-accordion-inner > *,
.elementor .innerblocks-accordion-inner > * {
  margin-top: 0 !important;
  margin-bottom: 1em !important;
}

.innerblocks-accordion-inner > *:last-child,
.elementor .innerblocks-accordion-inner > *:last-child {
  margin-bottom: 0 !important;
}

.innerblocks-accordion-inner .wp-block-gallery,
.innerblocks-accordion-inner .wp-block-image {
  margin-bottom: 1em !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .innerblocks-accordion-title,
  .elementor .innerblocks-accordion-title {
    padding: 14px 12px !important;
    gap: 12px !important;
  }
  
  .innerblocks-accordion-inner,
  .elementor .innerblocks-accordion-inner {
    padding: 0 12px !important;
  }
  
  .innerblocks-accordion-content.open .innerblocks-accordion-inner,
  .elementor .innerblocks-accordion-content.open .innerblocks-accordion-inner {
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }
}

/* ==========================================================================
   Editor Styles
   ========================================================================== */

.editor-styles-wrapper .innerblocks-accordion-block {
  margin: 28px 0;
}

.block-editor-block-preview__content .innerblocks-accordion-title {
  pointer-events: none;
}

/* ==========================================================================
   Elementor-Specific Fixes
   ========================================================================== */

/* Fix for Elementor containers */
.elementor-element .innerblocks-accordion-block {
  width: 100% !important;
}

/* Fix for Elementor single post template */
.elementor-post__content .innerblocks-accordion-block {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure Elementor doesn't add extra padding */
.elementor-widget-theme-post-content .innerblocks-accordion-block {
  padding: 0 !important;
}