/*
 * DMF Expandable Card — base styles.
 *
 * Colors and typography are intentionally not set here. Per the plugin's
 * "no baked-in styling" convention, those come from Elementor's per-instance
 * Style tab controls (which generate inline CSS targeting these classes).
 */

.dmf-expandable-card {
	display: block;
	position: relative;
	box-sizing: border-box;
	/* overflow: hidden ensures any child backgrounds/borders are clipped to
	 * the card's rounded corners (without this, a colored summary or body
	 * background would visibly poke past the rounded card edges). */
	overflow: hidden;
}

/* Header (clickable summary row) ------------------------------------------ */

.dmf-expandable-card__header {
	display: flex;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	user-select: none;
	outline: none;
}

/* Remove the default disclosure triangle across browsers. */
.dmf-expandable-card__header::-webkit-details-marker { display: none; }
.dmf-expandable-card__header::marker { content: ""; }

/* Visible keyboard focus on the summary. */
.dmf-expandable-card__header:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Badge ------------------------------------------------------------------- */

.dmf-expandable-card__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	line-height: 1;
	text-align: center;
}

.dmf-expandable-card__badge svg,
.dmf-expandable-card__badge i {
	display: inline-block;
	line-height: 1;
}

/* Heading ----------------------------------------------------------------- */

.dmf-expandable-card__heading {
	flex: 1 1 auto;
	min-width: 0; /* allow flex item to shrink below content size for long words */
	display: block;
	line-height: 1.3;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* Toggle icon ------------------------------------------------------------- */

.dmf-expandable-card__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	transition: color 0.2s ease;
}

.dmf-expandable-card__toggle svg,
.dmf-expandable-card__toggle i {
	display: inline-block;
	line-height: 1;
}

/* Expand icon shown when closed; collapse icon shown when [open]. */
.dmf-expandable-card__toggle--collapse { display: none; }

.dmf-expandable-card[open] .dmf-expandable-card__toggle--expand   { display: none; }
.dmf-expandable-card[open] .dmf-expandable-card__toggle--collapse { display: inline-flex; }

/* Body -------------------------------------------------------------------- */

.dmf-expandable-card__body {
	/* JS animates the height property during open/close; we constrain overflow
	 * so the in-flight animation never leaks. When idle (open or closed) the
	 * inline style is removed by the JS, letting natural height behavior win. */
	overflow: hidden;
}

.dmf-expandable-card__body > :first-child { margin-top: 0; }
.dmf-expandable-card__body > :last-child  { margin-bottom: 0; }