/**
 * Common styles for the fluffle/dl family of blocks
 * 
 * @since 2024-12-03
 * @author Designs and Codes, LLC
 */

.wp-block-fluffle-dl,
.wp-block-fluffle-dl-toc {
	display: flex;
	column-gap: var( --fluffle-block__dl__common-gap-column );
	row-gap: var( --fluffle-block__dl__common-gap-row );
	justify-content: start;
}

.wp-block-fluffle-dl {
	--fluffle-block__dl__common-gap-column: var( --fluffle-flexbox__gap-h, 30px );
	--fluffle-block__dl__common-gap-row: var( --fluffle-block__spacing-v, 1.5rem );
	--fluffle-block__dl__entry-gap-inner: 1rem;
	--fluffle-block__dl__entry-gap-outer: 1.25rem;
	--fluffle-block__dl__icon: initial;
	
	align-items: stretch;
	flex-flow: column nowrap;
	margin-block: var( --fluffle-block__spacing-v, 1.5rem );
	margin-inline: auto;
	inline-size: 100%;
}

.wp-block-fluffle-dl-body,
.wp-block-fluffle-dl-entry,
.wp-block-fluffle-dl-entry__description,
.wp-block-fluffle-dl-entry__term,
.wp-block-fluffle-dl-entry__term-text,
.wp-block-fluffle-dl-toc,
.wp-block-fluffle-dl-toc__list,
.wp-block-fluffle-dl-toc__list-item,
.wp-block-fluffle-dl-toc__summary {
	flex: 0 0 auto;
	margin: 0 !important;
	inline-size: 100%;
}

.wp-block-fluffle-dl-toc[data-orientation="block"] {
	align-items: stretch;
	flex-flow: column nowrap;
}

.wp-block-fluffle-dl-toc[data-orientation="inline"] {
	align-items: start;
	flex-flow: row wrap;
}

.wp-block-fluffle-dl-toc__list {
	list-style: none;
	display: flex;
	align-items: start;
	column-gap: var( --fluffle-block__dl__common-gap-column );
	flex-flow: column nowrap;
	justify-content: start;
	row-gap: calc( var( --fluffle-block__dl__common-gap-row ) / 2 );
	border: var( --fluffle__border-width, 1px ) var( --fluffle__border-style, solid ) var( --fluffle__border-color, currentcolor );
	border-radius: 0;
	padding-block: calc( var( --fluffle-block__dl__common-gap-row ) / 2 );
	padding-inline: calc( var( --fluffle-block__dl__common-gap-column ) / 2 );
}

.wp-block-fluffle-dl-toc__list[data-is-sticky] {
	position: sticky;
	inset-block-start: 0;
	background-color: inherit;
}

.wp-block-fluffle-dl-toc__list[data-layout="block"] {
	display: flex;
	align-items: stretch;
	flex-flow: column nowrap;
}

.wp-block-fluffle-dl-toc__list[data-layout="inline-fixed"] {
	display: grid;
	align-items: start;
	grid-auto-flow: column;
	grid-auto-rows: auto;
	grid-template-columns: repeat( auto-fit, minmax( calc( ( 700px - var( --fluffle-block__dl__common-gap-column ) ) / 2 ), 1fr ) );
}

.wp-block-fluffle-dl-toc__list[data-layout="inline-variable"] {
	display: flex;
	align-items: start;
	flex-flow: row wrap;
}

.wp-block-fluffle-dl-toc__list[data-layout="inline-variable"] > * {
	flex: 0 0 auto;
	inline-size: auto;
	max-inline-size: 100%;
}

@supports( container-type: inline-size ) {
	.wp-block-fluffle-dl {
		container-type: inline-size;
	}
	
	@container( inline-size >= 700px ) {
		.wp-block-fluffle-dl-toc[data-orientation="inline"] {
			flex-wrap: nowrap;
		}
		
		[data-orientation="inline"] > .wp-block-fluffle-dl-toc__list {
			flex: 1 1 0%;
		}
		
		[data-orientation="inline"] > .wp-block-fluffle-dl-toc__list[data-is-after] {
			order: 1;
		}
		
		[data-orientation="inline"] > .wp-block-fluffle-dl-toc__summary {
			flex: 2 2 0%;
		}
		
		.wp-block-fluffle-dl-toc__list[data-layout="inline-variable"] > * {
			max-inline-size: calc( ( 100% - var( --fluffle-block__dl__common-gap-column ) ) / 2 );
		}
	}
	
	@container( inline-size >= 910px ) {
		[data-orientation="inline"] > .wp-block-fluffle-dl-toc__summary {
			flex: 3 3 0%;
		}
	}
	
	@container( inline-size >= 1120px ) {
		[data-orientation="inline"] > .wp-block-fluffle-dl-toc__summary {
			flex: 4 4 0%;
		}
	}
}

@supports not( container-type: inline-size ){
	@media( min-width: 768px ) {
		.wp-block-fluffle-dl-toc[data-layout$="-after"] > .wp-block-fluffle-dl-toc__list {
			order: 1;
		}
		
		.wp-block-fluffle-dl-toc[data-layout^="aside-"] {
			flex-wrap: nowrap;
		}
		
		.wp-block-fluffle-dl-toc[data-layout^="aside-"] > .wp-block-fluffle-dl-toc__list {
			flex: 1 1 0%;
		}
		
		.wp-block-fluffle-dl-toc[data-layout^="aside-"] > .wp-block-fluffle-dl-toc__summary {
			flex: 2 2 0%;
		}
	}
	
	@media( min-width: 992px ) {
		.wp-block-fluffle-dl-toc[data-layout^="aside-"] > .wp-block-fluffle-dl-toc__summary {
			flex: 3 3 0%;
		}
	}
	
	@media( min-width: 1200px ) {
		.wp-block-fluffle-dl-toc[data-layout^="aside-"] > .wp-block-fluffle-dl-toc__summary {
			flex: 4 4 0%;
		}
	}
}

:where(
	.wp-block-fluffle-dl-summary-body, 
	.wp-block-fluffle-dl-entry__description
) > *:first-child {
	margin-block-start: 0 !important;
}

:where(
	.wp-block-fluffle-dl-summary-body, 
	.wp-block-fluffle-dl-entry__description
) > *:last-child {
	margin-block-end: 0 !important;
}

.wp-block-fluffle-dl-body {
	display: flex;
	column-gap: 0;
	flex-flow: column nowrap;
	justify-content: start;
}

.wp-block-fluffle-dl-body > * {
	margin: 0 !important;
}

.wp-block-fluffle-dl-body {
	--fluffle-block__dl__indent-description: 0px;
	--fluffle-block__dl__indent-entry: 0px;
	--fluffle-block__dl__indent-term: 0px;
	counter-reset: fluffle-block__dl__counter;
	list-style: none;
	align-items: start;
	row-gap: var( --fluffle-block__dl__entry-gap-outer );
}

:where( dl ).wp-block-fluffle-dl-body {
	--fluffle-block__dl__indent-description: calc( var( --fluffle__spacing-h__gutter, 30px ) / 2 );
}

.wp-block-fluffle-dl-body[data-is-bulleted] {
	--fluffle-block__dl__indent-term: 2em;
}

.wp-block-fluffle-dl-entry {
	--fluffle-block__dl__icon-default: none;
	counter-increment: fluffle-block__dl__counter;
	padding-inline-start: var( --fluffle-block__dl__indent-entry );
}

:where( [data-accordion] ) > .wp-block-fluffle-dl-entry,
:where( details ).wp-block-fluffle-dl-entry {
	--fluffle-block__dl__indent-description: 2em;
	--fluffle-block__dl__icon-default: "\25b6";
}

:where( [data-accordion] ) > .wp-block-fluffle-dl-entry:where( [open], [data-is-open] ),
:where( details ).wp-block-fluffle-dl-entry:where( [open], [data-is-open] ) {
	--fluffle-block__dl__icon-default: "\25BC";
}

:where( :not( details ).wp-block-fluffle-dl-entry:not( [data-is-open] ) ) > .wp-block-fluffle-dl-entry-description {
	display: none;
}

.wp-block-fluffle-dl-entry-term {
	display: flex;
	align-items: baseline;
	flex-flow: row nowrap;
	gap: 0;
	justify-content: start;
	margin: 0 !important;
	border: 0 !important;
	padding: 0 !important;
	inline-size: 100%;
}

:is( dt, summary ).wp-block-fluffle-dl-entry-term {
	font-weight: bold;
}

.wp-block-fluffle-dl-entry-term::before {
	content: var( --fluffle-block__dl__icon, var( --fluffle-block__dl__icon-default ) );
	flex: 0 0 auto;
	inline-size: max( 2em, var( --fluffle-block__dl__indent-term ) );
	text-align: center;
}

.wp-block-fluffle-dl-entry-term::marker {
	content: '';
}

.wp-block-fluffle-dl-entry-term::-webkit-details-marker {
	display: none;
}

.wp-block-fluffle-dl-entry-term-text {
	flex: 1 1 auto;
	margin: 0;
}

.wp-block-fluffle-dl-entry-description {
	margin-block-start: var( --fluffle-block__dl__entry-gap-inner ) !important;
	padding-inline-start: var( --fluffle-block__dl__indent-description );
}