/* ERPEXTRA Website — shared layout, components, animations */

/* ── Section layout ─────────────────────────────────────────── */
.erp-section {
	background: var(--erp-bg);
	padding: var(--erp-section-pad);
	transition: background 0.4s ease;
	font-family: var(--erp-font-alt);
}

.erp-container {
	max-width: var(--erp-container-max);
	margin: 0 auto;
	padding: var(--erp-container-pad);
}

/* ── Section headers ────────────────────────────────────────── */
.erp-header,
.erp-section-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.erp-title {
	color: var(--erp-text);
	line-height: 1.15;
	font-weight: 800;
	margin-bottom: 20px;
	font-family: var(--erp-font-body);
}

.erp-desc {
	color: var(--erp-text-soft);
	line-height: 1.7;
	font-weight: 300;
}

.erp-tag,
.erp-top-tag,
.erp-end-tag,
.erp-ft-tag,
.erp-section-tag,
.erp-faq-tag,
.erp-ct-tag,
.erp-jtn-tag,
.erp-wpu-tag,
.erp-pt-tag,
.erp-gr-tag,
.erp-cd-tag,
.erp-ss-tag,
.erp-hww-tag,
.erp-etep-tag,
.erp-ind-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--erp-accent);
	margin-bottom: 16px;
	background: var(--erp-tag-bg);
	padding: 5px 16px 5px 12px;
	border-radius: var(--erp-radius-pill);
	border: 1px solid var(--erp-border);
	font-family: var(--erp-font-body);
}

.erp-tag svg,
.erp-top-tag svg,
.erp-end-tag svg,
.erp-ft-tag svg,
.erp-section-tag svg,
.erp-faq-tag svg,
.erp-ct-tag svg,
.erp-jtn-tag svg,
.erp-wpu-tag svg,
.erp-pt-tag svg,
.erp-gr-tag svg,
.erp-cd-tag svg,
.erp-ss-tag svg,
.erp-hww-tag svg,
.erp-etep-tag svg,
.erp-ind-tag svg {
	flex-shrink: 0;
}

.erp-top-tag {
	margin-bottom: 24px;
}

.erp-end-tag {
	margin-bottom: 20px;
}

/* Simple overline label (no pill) — e.g. stats board */
.erp-overline {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--erp-accent);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-family: var(--erp-font-body);
}

/* ── Buttons ────────────────────────────────────────────────── */
.erp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 30px;
	border-radius: var(--erp-radius-md);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none !important;
	transition: var(--erp-transition);
	cursor: pointer;
	border: none;
	white-space: nowrap;
}

.erp-btn-primary {
	background: var(--erp-accent);
	color: var(--erp-on-accent) !important;
	box-shadow: 0 4px 14px var(--erp-accent-glow);
}

.erp-btn-primary:hover {
	filter: brightness(1.08);
	transform: translateY(-3px);
	box-shadow: 0 12px 30px var(--erp-accent-glow);
}

.erp-btn-outline,
.erp-btn-secondary {
	background: transparent;
	color: var(--erp-text) !important;
	border: 2px solid var(--erp-border);
}

.erp-btn-outline:hover,
.erp-btn-secondary:hover {
	border-color: var(--erp-accent);
	color: var(--erp-accent) !important;
	background: var(--erp-tag-bg);
	transform: translateY(-3px);
}

/* ── Cards ──────────────────────────────────────────────────── */
.erp-card {
	background: var(--erp-surface);
	border: 1px solid var(--erp-border);
	border-radius: var(--erp-radius-lg);
	transition: var(--erp-transition);
}

.erp-card:hover {
	border-color: var(--erp-border-2);
	transform: translateY(-4px);
	box-shadow: var(--erp-shadow);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
	.erp-section {
		padding: 72px 0;
	}

	.erp-container {
		padding: 0 20px;
	}

	.erp-header,
	.erp-section-header {
		margin-bottom: 48px;
	}
}

@media (max-width: 640px) {
	.erp-btn {
		width: 100%;
	}
}