/**
 * Accordion — Style 4: Filled Accent
 *
 * Headers sit on a light tint; the open header fills with the accent colour
 * and flips to white text — a bold, high-contrast FAQ.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-accordion.captwiki-style-4 .captwiki-accordion__item {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid transparent;
	transition: border-color 0.3s ease;
}

.captwiki-accordion.captwiki-style-4 .captwiki-accordion__button {
	background: color-mix( in srgb, var( --captwiki-acc-accent ) 8%, #ffffff );
}

.captwiki-accordion.captwiki-style-4 .captwiki-accordion__button:hover {
	background: color-mix( in srgb, var( --captwiki-acc-accent ) 16%, #ffffff );
}

.captwiki-accordion.captwiki-style-4 .captwiki-accordion__item.is-open {
	border-color: color-mix( in srgb, var( --captwiki-acc-accent ) 35%, transparent );
}

.captwiki-accordion.captwiki-style-4 .captwiki-accordion__item.is-open .captwiki-accordion__button {
	background: var( --captwiki-acc-accent );
	color: #ffffff;
}

.captwiki-accordion.captwiki-style-4 .captwiki-accordion__item.is-open .captwiki-accordion__icon,
.captwiki-accordion.captwiki-style-4 .captwiki-accordion__item.is-open .captwiki-accordion__indicator {
	color: #ffffff;
}

.captwiki-accordion.captwiki-style-4 .captwiki-accordion__panel {
	background: color-mix( in srgb, var( --captwiki-acc-accent ) 4%, #ffffff );
}

.captwiki-accordion.captwiki-style-4 .captwiki-accordion__content {
	padding-top: 16px;
}
