/* Custom Toggle Block Module - module.css */

.custom-toggle-wrapper {
  width: 100%;
}

.toggle-container {
  display: flex;
  flex-direction: column;
}

.toggle-item {
  position: relative;
}

/* Toggle Header Styles */
.toggle-header {
  position: relative;
  user-select: none;
  outline: none;
}

/*.toggle-header:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}*/

/* Hover Effects */
.toggle-header:hover {
  {% if module.hover_effects.enable_hover_effects and module.hover_effects.title_hover_background.color %}
    background-color:  !important;
  {% endif %}
}

.toggle-header:hover .toggle-icon {
  {% if module.toggle_icon_settings.icon_hover_color_enable and module.toggle_icon_settings.icon_hover_color_custom.color %}
    color:  !important;
  {% endif %}
}

/* Icon Animations */
.toggle-icon {
  display: inline-block;
  transition: transform 0.3s ease, color 0.2s ease;
}
/* Icon rotation for chevron/arrow icons (only when no separate open/closed icons) */
.toggle-item[data-is-open="true"] .toggle-icon:not(.text-symbol):not(.custom-icon):not([data-open-icon]) {
  transform: rotate(180deg);
}
/* Custom icon rotation (only when no separate open/closed icons) */
.toggle-item[data-is-open="true"] .toggle-icon.custom-icon:not([data-open-src]) {
  transform: rotate(180deg);
}

/* Text symbol changes */
.toggle-item[data-is-open="true"] .toggle-icon.text-symbol {
  /* Text will be changed via JavaScript */
}

/* Custom icon rotation */
.toggle-item[data-is-open="true"] .toggle-icon.custom-icon {
  transform: rotate(180deg);
}
.toggle-icon.text-symbol {
	width: 25px;
	height: 25px;
	text-align: center;
	font-family: Montserrat, sans-serif;
	font-weight: normal;
}
/* Content Animations */
.toggle-content {
  transition: max-height 0.3s ease, padding 0.3s ease;
  will-change: max-height;
}

.toggle-content-inner {
  /* Content wrapper for proper padding during animation */
}
/*closed state background for title */
.toggle-header {
	{% if module.title_styling.title_background_color.color %}
		background-color: rgba(, ) !important;
	  {% endif %}
/* background-color: rgba(, );*/
}
/* Open state background for title */
.toggle-item[data-is-open="true"] .toggle-header {
  {% if module.title_styling.title_background_color_open.color %}
    background-color:  !important;
  {% endif %}
}

/* Performance optimizations */
.toggle-content {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Accessibility improvements */
.toggle-header[aria-expanded="false"] + .toggle-content {
  visibility: hidden;
}

.toggle-header[aria-expanded="true"] + .toggle-content {
  visibility: visible;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .toggle-header {
    /* Slightly larger touch targets on mobile */
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  
  .toggle-content-inner {
    /* Adjust content padding on mobile if needed */
  }
}

/* Smooth focus transitions */
.toggle-header {
  transition: box-shadow 0.2s ease;
}

.toggle-header:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}

/* Print styles */
@media print {
  .toggle-content {
    max-height: none !important;
    overflow: visible !important;
  }
  
  .toggle-item[data-is-open="false"] .toggle-content {
    display: block !important;
    max-height: none !important;
  }
  
  .toggle-icon {
    display: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .toggle-header {
    border: 2px solid currentColor;
  }
  
  .toggle-content {
    border: 1px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .toggle-content,
  .toggle-icon,
  .toggle-header {
    transition: none !important;
    animation: none !important;
  }
}

/* Loading state (prevents flash of unstyled content) */
.custom-toggle-wrapper:not(.initialized) .toggle-content {
  transition: none;
}

.custom-toggle-wrapper.initialized .toggle-content {
  transition: max-height var(--animation-duration, 300ms) var(--animation-easing, ease-out);
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles if needed */
}

/* Hover state improvements for better UX */
.toggle-header {
  cursor: pointer;
  position: relative;
}

.toggle-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/*.toggle-header:hover::before {
  opacity: 1;
}*/

/* Ensure proper stacking context */
.toggle-item {
  position: relative;
  z-index: 1;
}

.toggle-header {
  position: relative;
  z-index: 2;
}

.toggle-content {
  position: relative;
  z-index: 1;
}