/* ==========================================================================
   RF Accordion Plus — enhancement layer for the Divi 5 Accordion module.

   Opt in by adding the CSS Class "rf-acc" to an Accordion module
   (Advanced tab -> CSS ID & Classes -> CSS Class). Optional add-ons:
     rf-multi  -> allow multiple items open at once
     rf-faq    -> output FAQPage JSON-LD for this accordion

   IMPORTANT: This layer intentionally does NOT set colors, backgrounds, or
   borders, so your native Divi design choices (icon color, open/closed toggle
   backgrounds, title/body text, borders) all still win. It only adds motion,
   spacing rhythm, depth, and focus states. The JS file handles the open/close
   animation and behavior.
   ========================================================================== */

/* Item rhythm + soft elevation (structure only — no color overrides). */
.et_pb_accordion.rf-acc-on .et_pb_toggle {
	margin: 0 0 12px !important;
	border-radius: 10px !important;
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.et_pb_accordion.rf-acc-on .et_pb_toggle:last-child { margin-bottom: 0 !important; }

.et_pb_accordion.rf-acc-on .et_pb_toggle:hover {
	box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08);
}

.et_pb_accordion.rf-acc-on .et_pb_toggle.et_pb_toggle_open {
	box-shadow: 0 8px 28px rgba(17, 24, 39, 0.10);
}

/* Title: clear affordance + accessible focus ring. */
.et_pb_accordion.rf-acc-on .et_pb_toggle_title {
	cursor: pointer;
	transition: color 0.2s ease;
}

.et_pb_accordion.rf-acc-on .et_pb_toggle_title:focus-visible {
	outline: 2px solid #2ea3f2;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Ease Divi's own toggle icon (it still draws/colors it; we just smooth it). */
.et_pb_accordion.rf-acc-on .et_pb_toggle_title:before,
.et_pb_accordion.rf-acc-on .et_pb_toggle_title:after {
	transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* Content: JS animates height. Force display:block (we hide via height, not
   display) so the reveal can animate AND the answer text stays in the DOM for
   crawlers even before a click. The !important overrides Divi's inline
   display:none on closed items. */
.et_pb_accordion.rf-acc-on .et_pb_toggle .et_pb_toggle_content {
	display: block !important;
	overflow: hidden;
	transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
	will-change: height;
}

.et_pb_accordion.rf-acc-on .et_pb_toggle_close .et_pb_toggle_content { opacity: 0; }
.et_pb_accordion.rf-acc-on .et_pb_toggle_open  .et_pb_toggle_content { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.et_pb_accordion.rf-acc-on .et_pb_toggle,
	.et_pb_accordion.rf-acc-on .et_pb_toggle_content,
	.et_pb_accordion.rf-acc-on .et_pb_toggle_title:before,
	.et_pb_accordion.rf-acc-on .et_pb_toggle_title:after {
		transition: none !important;
	}
}