/* Pest Encyclopedia — reuses the active theme's CSS custom properties
   (--color-*, --radius, --shadow-*, --font-*) so entries feel native to
   the site rather than a bolted-on plugin page. Falls back to sane
   defaults if a theme without those tokens is ever active. */

.nps-pe-price-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	background: var(--color-bg-alt, #f1f3f2);
	border: 1px solid var(--color-border, #e3e7e4);
	border-radius: 999px;
	padding: 8px 20px;
	margin-top: 6px;
}
.nps-pe-price-badge__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text-secondary, #6b7570);
}
.nps-pe-price-badge__value {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-text, #16201c);
}
.nps-pe-price-badge__note {
	font-size: 0.85rem;
	color: var(--color-text-secondary, #6b7570);
	margin-top: 6px;
	max-width: 46ch;
}
.nps-pe-price-badge__note a {
	color: var(--color-accent-text, #8a6620);
	text-decoration: underline;
}

.pest-entry-section {
	padding-block: 28px;
	border-top: 1px solid var(--color-border, #e3e7e4);
}
.pest-entry-section:first-of-type { border-top: 0; }
.pest-entry-section h2 {
	font-family: var(--font-display, inherit);
	margin-bottom: 12px;
}
.pest-entry-section--highlight {
	background: var(--color-bg-alt, #f1f3f2);
	border-radius: var(--radius, 12px);
	padding: 28px;
	margin-block: 20px;
	border-top: 0;
}

.pest-archive { padding-block: clamp(40px, 6vw, 72px); }
.nps-pe-infinite-sentinel { height: 1px; }
.nps-pe-infinite-loading {
	text-align: center;
	color: var(--color-text-secondary, #6b7570);
	font-size: 0.9rem;
	margin-top: 24px;
}
.pest-archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}
.pest-archive__filter {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--color-border, #e3e7e4);
	color: var(--color-text, #16201c);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.pest-archive__filter:hover,
.pest-archive__filter.is-active {
	background: var(--color-accent, #d4a73d);
	border-color: var(--color-accent, #d4a73d);
	color: #1e2b26;
}

.nps-pe-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
@media (min-width: 600px) {
	.nps-pe-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
	.nps-pe-grid--archive { grid-template-columns: repeat(4, 1fr); }
}
.nps-pe-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 20px 14px;
	background: var(--color-bg, #fff);
	border-radius: var(--radius, 12px);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nps-pe-grid__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md, 0 6px 16px rgba(0,0,0,0.12));
}
.nps-pe-grid__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
}
.nps-pe-grid__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nps-pe-grid__label {
	font-weight: 700;
	color: var(--color-text, #16201c);
}
.nps-pe-grid__sci {
	font-size: 0.8rem;
	font-style: italic;
	color: var(--color-text-secondary, #6b7570);
}
.nps-pe-grid__price {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-accent-text, #8a6620);
}

.nps-pe-embed {
	background: var(--color-bg-alt, #f1f3f2);
	border-radius: var(--radius, 12px);
	padding: 24px;
	margin-block: 24px;
}
.nps-pe-embed h3 { margin-bottom: 8px; }
.nps-pe-embed h3 a { color: var(--color-text, #16201c); text-decoration: none; }
.nps-pe-embed__link {
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
	color: var(--color-accent-text, #8a6620);
	text-decoration: underline;
}