/**
 * RTA Badges — Clean, theme-adaptive badge styles
 *
 * Styles:  minimal | pill | card | inline
 * Sizes:   xs | sm | md | lg
 * Align:   left | center | right
 */

/* ===== Base Reset ===== */
.rta-badges,
.rta-badges * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ===== Container ===== */
.rta-badges {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
	width: 100%;
}

/* Alignment */
.rta-align-center { justify-content: center; }
.rta-align-left   { justify-content: flex-start; }
.rta-align-right  { justify-content: flex-end; }

/* ===== Badge link ===== */
.rta-badge {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.rta-badge:hover {
	opacity: 0.7;
	transform: scale(1.03);
}

.rta-badge:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 4px;
}

/* ===== SVG sizing ===== */
.rta-badge svg,
.rta-badge .rta-img {
	display: block;
	height: auto;
	width: auto;
}

/* ===== Separator ===== */
.rta-separator {
	display: block;
	width: 1px;
	background: currentColor;
	opacity: 0.15;
	flex-shrink: 0;
}

/* ===== Size Scale ===== */

/* xs */
.rta-size-xs .rta-badge svg,
.rta-size-xs .rta-badge .rta-img {
	height: 18px;
}
.rta-size-xs .rta-separator { height: 14px; }
.rta-size-xs { gap: 8px; padding: 8px 0; }

/* sm (default) */
.rta-size-sm .rta-badge svg,
.rta-size-sm .rta-badge .rta-img {
	height: 24px;
}
.rta-size-sm .rta-separator { height: 18px; }
.rta-size-sm { gap: 10px; padding: 12px 0; }

/* md */
.rta-size-md .rta-badge svg,
.rta-size-md .rta-badge .rta-img {
	height: 32px;
}
.rta-size-md .rta-separator { height: 24px; }
.rta-size-md { gap: 14px; padding: 16px 0; }

/* lg */
.rta-size-lg .rta-badge svg,
.rta-size-lg .rta-badge .rta-img {
	height: 44px;
}
.rta-size-lg .rta-separator { height: 32px; }
.rta-size-lg { gap: 18px; padding: 20px 0; }

/* ===== Style: Minimal ===== */
.rta-style-minimal {
	color: rgba(255, 255, 255, 0.35);
}

/* Auto-detect light backgrounds: if parent has light bg, use dark color.
   Users can override via CSS custom property. */
.rta-style-minimal {
	color: var(--rta-color, rgba(255, 255, 255, 0.35));
}

/* ===== Style: Pill ===== */
.rta-style-pill {
	color: var(--rta-color, rgba(255, 255, 255, 0.5));
	background: var(--rta-bg, rgba(255, 255, 255, 0.06));
	border: 1px solid var(--rta-border, rgba(255, 255, 255, 0.08));
	border-radius: 100px;
	padding: 8px 20px;
	width: auto;
	display: inline-flex;
}

.rta-style-pill .rta-separator {
	opacity: 0.2;
}

/* ===== Style: Card ===== */
.rta-style-card {
	color: var(--rta-color, rgba(255, 255, 255, 0.45));
	background: var(--rta-bg, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--rta-border, rgba(255, 255, 255, 0.06));
	border-radius: 12px;
	padding: 16px 24px;
	width: auto;
	display: inline-flex;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.rta-style-card .rta-separator {
	opacity: 0.15;
}

/* ===== Style: Inline ===== */
.rta-style-inline {
	color: var(--rta-color, rgba(255, 255, 255, 0.3));
	display: inline-flex;
	padding: 0;
	width: auto;
}

/* ===== Single badge (individual shortcodes) ===== */
.rta-single-badge {
	display: inline-flex;
	align-items: center;
	color: var(--rta-color, rgba(255, 255, 255, 0.35));
}

.rta-single-badge a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.rta-single-badge a:hover {
	opacity: 0.7;
}

.rta-single-badge.rta-size-xs svg,
.rta-single-badge.rta-size-xs .rta-img { height: 18px; }
.rta-single-badge.rta-size-sm svg,
.rta-single-badge.rta-size-sm .rta-img { height: 24px; }
.rta-single-badge.rta-size-md svg,
.rta-single-badge.rta-size-md .rta-img { height: 32px; }
.rta-single-badge.rta-size-lg svg,
.rta-single-badge.rta-size-lg .rta-img { height: 44px; }

/* ===== Light theme helper ===== */
/* Add class .rta-light to a parent, or set the CSS variable */
.rta-light .rta-badges,
.rta-light .rta-single-badge {
	--rta-color: rgba(0, 0, 0, 0.3);
	--rta-bg: rgba(0, 0, 0, 0.03);
	--rta-border: rgba(0, 0, 0, 0.06);
}

/* Common light WordPress contexts */
.site-footer--light .rta-badges,
.footer-light .rta-badges,
.bg-white .rta-badges,
.bg-light .rta-badges {
	--rta-color: rgba(0, 0, 0, 0.3);
	--rta-bg: rgba(0, 0, 0, 0.03);
	--rta-border: rgba(0, 0, 0, 0.06);
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
	.rta-size-lg .rta-badge svg,
	.rta-size-lg .rta-badge .rta-img {
		height: 32px;
	}
	.rta-size-lg .rta-separator { height: 24px; }
	.rta-size-lg { gap: 14px; }

	.rta-size-md .rta-badge svg,
	.rta-size-md .rta-badge .rta-img {
		height: 26px;
	}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.rta-badge {
		transition: none;
	}
}

/* ===== Print ===== */
@media print {
	.rta-badges {
		color: #000 !important;
	}
}