/**
 * Diamond Brothers Addons — shared design tokens.
 *
 * Both widgets inherit the site's own look by default rather than shipping a
 * palette of their own:
 *
 *   - Typography is `inherit`, so the theme's body font, size and line-height
 *     flow straight through. Elementor's typography controls override it.
 *   - Colours resolve through Elementor's global colour variables first (the
 *     site's design system when a kit is configured), then fall back to
 *     `currentColor` / transparent so nothing is ever painted a colour the
 *     theme did not choose. Elementor's colour controls override those.
 *
 * The result: dropped onto any page it already matches the site, and every
 * value stays adjustable from the Elementor panel.
 */

.dba-faq,
.dba-cc {
	/* Colour tokens — each defers to the site's global palette. */
	--dba-heading-color: var( --e-global-color-primary, currentColor );
	--dba-text-color: var( --e-global-color-text, currentColor );
	--dba-accent-color: var( --e-global-color-accent, currentColor );
	--dba-border-color: currentColor;
	--dba-border-alpha: 0.15;

	/* Rhythm tokens. */
	--dba-gap-sm: 0.5em;
	--dba-gap-md: 1em;
	--dba-gap-lg: 1.5em;
	--dba-radius: 4px;
	--dba-transition: 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );

	box-sizing: border-box;
	font-family: inherit;
	color: var( --dba-text-color );
}

.dba-faq *,
.dba-faq *::before,
.dba-faq *::after,
.dba-cc *,
.dba-cc *::before,
.dba-cc *::after {
	box-sizing: inherit;
}

/**
 * Rich-text blocks (the WYSIWYG answers, the FAQ intro, the category
 * description). Only the outer spacing is normalised — headings, lists and
 * links keep whatever the theme gives them.
 */
.dba-rte > *:first-child {
	margin-top: 0;
}

.dba-rte > *:last-child {
	margin-bottom: 0;
}

.dba-rte img {
	max-width: 100%;
	height: auto;
}

.dba-rte ul,
.dba-rte ol {
	padding-inline-start: 1.25em;
}

.dba-rte table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
}

/**
 * Editor-only notice, shown in place of a widget that has nothing to render.
 * Never reaches the front end.
 */
.dba-notice {
	padding: 12px 16px;
	border: 1px dashed rgba( 125, 125, 125, 0.5 );
	border-radius: var( --dba-radius, 4px );
	background: rgba( 125, 125, 125, 0.06 );
	color: inherit;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.85;
}

/**
 * Focus ring. Uses :focus-visible so a mouse click never leaves an outline
 * behind, while keyboard users always get one.
 */
.dba-faq [data-dba-faq-toggle]:focus-visible,
.dba-cc [data-dba-cc-toggle]:focus-visible {
	outline: 2px solid var( --dba-accent-color, currentColor );
	outline-offset: 2px;
}

/* Respect a reduced-motion preference for every animated property here. */
@media ( prefers-reduced-motion: reduce ) {
	.dba-faq *,
	.dba-cc * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}