/**
 * Accent Divider Utility
 *
 * Adds an accent divider below any Elementor Heading widget.
 * Applied via the "Accent Divider" select in the heading's Zededa style section,
 * which uses prefix_class to add .has-accent-divider--{color} to the wrapper.
 *
 * Alignment strategy:
 *   DEFAULT → left (margin-inline: 0). Matches the browser/LTR default so headings
 *   with no explicit alignment show a correctly-positioned left divider.
 *
 *   Elementor's heading align control uses `selectors: { '{{WRAPPER}}': 'text-align: {{VALUE}};' }`
 *   with NO prefix_class, so no elementor-align-* classes are ever added. Instead it
 *   generates a <style> tag rule — NOT an inline style attribute — which means
 *   CSS attribute selectors like [style*="text-align: center"] can never match.
 *
 *   Two mechanisms cover each alignment:
 *
 *   CENTER  → has-accent-divider--center — added by PHP maybe_add_divider_class() (frontend)
 *             OR by JS syncHeadingDividerAlign() via getComputedStyle() (Elementor editor)
 *   RIGHT   → has-accent-divider--end    — same dual mechanism
 *   LEFT    → has-accent-divider--start  — same dual mechanism (CSS default, class optional)
 *
 * Uses design tokens for single source of truth (same tokens as hero divider).
 * Figma: node 1900:689
 *
 * Animation: see divider-animate.css (shared across all divider types).
 *
 * @package Zededa
 */

/* Divider rendered as ::after pseudo-element — inherently hidden from screen readers */
.has-accent-divider--orange .elementor-heading-title::after,
.has-accent-divider--sunrise .elementor-heading-title::after,
.has-accent-divider--aqua .elementor-heading-title::after,
.has-accent-divider--blush .elementor-heading-title::after,
.has-accent-divider--spring .elementor-heading-title::after {
	content: '';
	display: block;
	width: var(--border-divider-width);
	height: var(--border-divider-height);
	margin-top: var(--spacing-lg);
	margin-inline: 0; /* default: left-aligned */
}

/* Center — PHP hook (frontend) or JS syncHeadingDividerAlign() (editor) */
.has-accent-divider--center .elementor-heading-title::after {
	margin-inline: auto;
}

/* Left — explicit PHP hook (frontend) or JS syncHeadingDividerAlign() (editor) */
.has-accent-divider--start .elementor-heading-title::after {
	margin-inline: 0;
}

/* Orange (default) */
.has-accent-divider--orange .elementor-heading-title::after {
	background-color: var(--color-brand-primary);
}

/* Sunrise gold */
.has-accent-divider--sunrise .elementor-heading-title::after {
	background-color: var(--color-brand-sunrise);
}

/* Aqua (CTA background) */
.has-accent-divider--aqua .elementor-heading-title::after {
	background-color: var(--color-navigation-cta-background);
}

/* Blush (magenta accent) */
.has-accent-divider--blush .elementor-heading-title::after {
	background-color: var(--color-brand-blush);
}

/* Spring green */
.has-accent-divider--spring .elementor-heading-title::after {
	background-color: var(--color-brand-spring);
}

/* Right — PHP hook (frontend) or JS syncHeadingDividerAlign() (editor) */
.has-accent-divider--end .elementor-heading-title::after {
	margin-inline-start: auto;
	margin-inline-end: 0;
}