/* ============================================================
 * rfm-pattern-library — patterns.css
 * ============================================================
 * CSS for classes that block patterns reference. This file ships
 * with the plugin so patterns render correctly even on a parent
 * theme that doesn't define these classes.
 *
 * Each parent theme can override these with brand-specific CSS in
 * its own main.css. The plugin's CSS is intentionally low-specificity
 * and uses brand tokens (CSS variables) so child themes adapt
 * automatically.
 * ============================================================ */

/* Eyebrow label — small caps, brand red, 12px (used in many patterns) */
.rfm-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green, #16A34A);
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
}

/* Cluster card — used in homepage Browse-by-Topic sections */
.mef-cluster-card,
.rfm-cluster-card {
	background: var(--wp--preset--color--bg-soft, #FAF7F2);
	border-left: 4px solid var(--wp--preset--color--green, #16A34A);
	border-radius: 4px;
	padding: 1.5rem;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
.mef-cluster-card:hover,
.rfm-cluster-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Pricing card — used in pricing-3tier */
.rfm-pricing-card {
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
.rfm-pricing-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.rfm-pricing-card--featured {
	transform: scale(1.02);
}
.rfm-pricing-card--featured:hover {
	transform: scale(1.02) translateY(-3px);
}
@media (max-width: 768px) {
	.rfm-pricing-card--featured {
		transform: none;
	}
}

/* FAQ accordion (native <details>) — minimal styling, parent themes can elaborate */
.rfm-faq-accordion details {
	border-top: 1px solid var(--wp--preset--color--line, #E2E8F0);
	padding: 1rem 0;
}
.rfm-faq-accordion details:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line, #E2E8F0);
}
.rfm-faq-accordion summary {
	font-weight: 700;
	cursor: pointer;
	padding: 0.5rem 0;
	list-style: none;
}
.rfm-faq-accordion summary::-webkit-details-marker {
	display: none;
}
.rfm-faq-accordion summary::after {
	content: '+';
	float: right;
	font-size: 1.5em;
	color: var(--wp--preset--color--green, #16A34A);
	transition: transform 0.2s;
}
.rfm-faq-accordion details[open] summary::after {
	content: '−';
}