/* Cora Child Pages — front-end + editor styles */

.wp-block-cora-child-pages {
	position: relative;
}

.wp-block-cora-child-pages .ccp-list {
	display: flex;
	gap: 1em 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wp-block-cora-child-pages .ccp-item {
	margin: 0;
}
.wp-block-cora-child-pages .ccp-item a {
	color: var( --wp--style--color--link, currentColor );
	text-decoration: none;
}
.wp-block-cora-child-pages .ccp-item a:hover,
.wp-block-cora-child-pages .ccp-item.is-current a {
	text-decoration: underline;
}

/* Orientation */
.wp-block-cora-child-pages.is-orientation-horizontal .ccp-list { flex-direction: row; flex-wrap: wrap; }
.wp-block-cora-child-pages.is-orientation-vertical .ccp-list { flex-direction: column; }

/* The mobile dropdown trigger — hidden on desktop / in the editor by default. */
.wp-block-cora-child-pages .ccp-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	padding: 0.6em 0.9em;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
}
.wp-block-cora-child-pages .ccp-toggle-icon {
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
	flex: 0 0 auto;
}
.wp-block-cora-child-pages.is-open .ccp-toggle-icon { transform: rotate( -135deg ); }

/* --- Mobile behaviours (WP's tablet/mobile breakpoint) --- */
@media ( max-width: 781.98px ) {

	/* Scroll: horizontal lists scroll sideways instead of wrapping. */
	.wp-block-cora-child-pages.is-mobile-scroll.is-orientation-horizontal .ccp-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.wp-block-cora-child-pages.is-mobile-scroll.is-orientation-horizontal .ccp-item {
		flex: 0 0 auto;
	}

	/* Dropdown: collapse the list behind a tap-to-open button. */
	.wp-block-cora-child-pages.is-mobile-dropdown .ccp-toggle {
		display: flex;
	}
	.wp-block-cora-child-pages.is-mobile-dropdown .ccp-list {
		display: none;
		position: absolute;
		z-index: 20;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		margin-top: 4px;
		padding: 4px;
		border: 1px solid currentColor;
		border-radius: 4px;
		background: var( --wp--preset--color--base, #fff );
	}
	.wp-block-cora-child-pages.is-mobile-dropdown.is-open .ccp-list {
		display: flex;
	}
	.wp-block-cora-child-pages.is-mobile-dropdown .ccp-item a {
		display: block;
		padding: 0.5em 0.6em;
	}
}

/* Editor-only placeholder (shown when 'auto' has no resolvable post yet, e.g. in
 * the template editor). Hidden on the front end since the block renders nothing. */
.ccp-placeholder {
	padding: 0.8em 1em;
	border: 1px dashed currentColor;
	border-radius: 4px;
	opacity: 0.6;
	font-style: italic;
}