/*!
 * Salient - Nested Toggles styling.
 * A thin layer on top of element-toggles.css that makes toggles inside
 * toggles look right (spacing, no double shadow, slight indent).
 */

/* A toggles-wrapper nested inside an open toggle's content area. */
.toggle > div .toggles {
	margin-top: 6px;
	margin-bottom: 0;
}

/* Give nested toggles a subtle visual hierarchy */
.toggle > div > .toggles > .toggle,
.toggle > div .wpb_wrapper > .toggles > .toggle {
	margin-bottom: 10px;
}

.toggle > div > .toggles > .toggle:last-child,
.toggle > div .wpb_wrapper > .toggles > .toggle:last-child {
	margin-bottom: 0;
}

/* Remove shadow on nested toggle content so they don't "stack" visually */
body .toggle > div .toggle > div {
	box-shadow: none;
	-webkit-box-shadow: none;
}

/* Ensure inner-wrap parents don't clip nested content. The patch JS
   sets max-height to scrollHeight of the fully-expanded content, so
   children stay visible. Keep overflow hidden for the animation, but
   allow pointer-events/visibility once open. */
body .toggle[data-inner-wrap="true"].open > div {
	overflow: visible;
}

/* While a parent is transitioning, keep overflow hidden so the child
   doesn't spill. Browsers that don't support :not here fall back to
   the default .element-toggles.css rule. */
body .toggle[data-inner-wrap="true"]:not(.open) > div {
	overflow: hidden;
}