/* PCC Maps — shared building blocks (buttons, badges) used across the
 * single-route view, the library, the submission form, the sidebar
 * panel, and My Downloads. Pulled into its own file and enqueued
 * everywhere PCC Maps renders anything, rather than living only in
 * frontend.css — that file used to be the only place
 * `.pcc-button`/`.pcc-badge` were defined, which meant they were
 * undefined (falling back to the theme's own default button/badge
 * styling) on pages other than a single route's own page.
 *
 * Colours/fonts now read from design-tokens.css (loaded first) —
 * Phase 6 brought the plugin's palette in line with the "Peak CC
 * Routes UX" design handoff (a deliberately close match to the
 * existing brand orange/greens; the ride-type blue and the near-black
 * shifted slightly to the handoff's "ink" tone, used consistently
 * for headings/dark surfaces throughout the redesign). */

.pcc-button,
a.pcc-button {
	display: inline-block;
	padding: 0.6em 1.4em;
	background: var(--pcc-accent);
	color: #fff !important;
	text-decoration: none;
	border-radius: var(--pcc-radius-sm);
	font-family: var(--pcc-font-display);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.85em;
	border: none;
	cursor: pointer;
	line-height: 1.4;
	transition: background 0.15s ease;
}

.pcc-button:hover,
a.pcc-button:hover {
	background: var(--pcc-accent-hover);
	color: #fff !important;
}

.pcc-button-dark,
a.pcc-button-dark {
	background: var(--pcc-ink);
}
.pcc-button-dark:hover,
a.pcc-button-dark:hover {
	background: #16232a;
}

.pcc-button-outline,
a.pcc-button-outline {
	background: transparent;
	color: var(--pcc-accent) !important;
	border: 1px solid var(--pcc-accent);
}
.pcc-button-outline:hover,
a.pcc-button-outline:hover {
	background: var(--pcc-red-tint);
	color: var(--pcc-accent) !important;
}

.pcc-badge {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: var(--pcc-radius-pill);
	font-family: var(--pcc-font-display);
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff !important;
	background: var(--pcc-muted);
}

.pcc-badge-type-road { background: var(--pcc-ink); }
.pcc-badge-type-gravel { background: var(--pcc-ink); }

.pcc-badge-difficulty-green { background: var(--pcc-green); }
.pcc-badge-difficulty-blue { background: var(--pcc-blue); }
.pcc-badge-difficulty-red { background: var(--pcc-red); }
.pcc-badge-difficulty-black { background: var(--pcc-black); }

.pcc-badge-new {
	background: var(--pcc-accent);
}