/**
 * kids-blocks scoping & safety overrides.
 *
 * The bundled Elementor/ThemeREX CSS is keyed on the original `.elementor-element-*`
 * classes, so the reproduced markup styles itself. These rules only cover the wrapper
 * and a few editor-context safeguards.
 */

.kids-block {
	position: relative;
	isolation: isolate;
}

/* Wave border decoration for background-capable blocks */
.kb-wave {
	position: absolute;
	left: 0;
	right: 0;
	overflow: hidden;
	line-height: 0;
	z-index: 2;
}
.kb-wave--top  { top: -1px; }
.kb-wave--bottom { bottom: -1px; transform: rotate(180deg); }
.kb-wave svg { display: block; width: 100%; height: 45px; }
.kb-wave svg path { fill: currentColor; }

/* Background overlay for image backgrounds */
.kb-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: rgba(0,0,0,var(--kb-overlay-opacity,0));
}

/* Animation revealed state — mirror animate.css defaults in case the bundle order
   leaves `.animated` undefined for a given keyframe. */
.kids-block .animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

/* Swiper slides need an explicit flex behaviour before JS initialises. */
.kids-block .swiper-slide {
	flex-shrink: 0;
}

/* Inside the block editor canvas, neutralise the theme/admin body constraints so the
   full-bleed sections preview at their real width. */
.block-editor-block-list__layout .kids-block {
	max-width: none;
}

/* In the editor preview the scroll-reveal JS doesn't run against the ServerSideRender
   markup, so force `.elementor-invisible` elements visible there (frontend keeps the
   reveal-on-scroll behaviour). */
.block-editor-writing-flow .kids-block .elementor-invisible,
.block-editor-block-list__layout .kids-block .elementor-invisible {
	visibility: visible !important;
}

/* Keep collapsed accordion panels hidden before JS attaches (progressive enhancement). */
.kids-block .trx-addons-accordion-item:not(.trx-addons-accordion-item-active) .trx-addons-accordion-tab-content {
	display: none;
}