/*
 * PNW Acquainted plugin styles. Built on the Foxiz theme's own variables so it follows
 * the site's fonts, gold accent and dark mode: --g-color (gold), --flex-gray-* (tints),
 * --solid-white (surface), --body-fcolor (text), --h1-family (Marcellus).
 */
.pnwa {
	--pnwa-accent: var(--g-color, #ca9954);
	--pnwa-text: var(--body-fcolor, #111);
	--pnwa-muted: var(--meta-fcolor, #6b6b6b);
	--pnwa-line: var(--flex-gray-15, rgba(0, 0, 0, 0.12));
	--pnwa-tint: var(--flex-gray-7, rgba(0, 0, 0, 0.04));
	--pnwa-surface: var(--solid-white, #fff);
	--pnwa-display: var(--h1-family, "Marcellus", Georgia, serif);
	--pnwa-radius: 6px;
	color: var(--pnwa-text);
}

/* ---------- Get Involved archive ---------- */
.pnwa-archive { padding-top: 48px; padding-bottom: 72px; }
.pnwa-hero { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.pnwa-eyebrow {
	margin: 0 0 8px;
	color: var(--pnwa-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.pnwa-title {
	margin: 0 0 12px;
	font-family: var(--pnwa-display);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 400;
	line-height: 1.15;
}
.pnwa-lede { margin: 0; color: var(--pnwa-muted); font-size: 17px; line-height: 1.6; }

.pnwa-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 auto 36px;
	padding: 14px 0;
	border-top: 1px solid var(--pnwa-line);
	border-bottom: 1px solid var(--pnwa-line);
}
.pnwa-filters select {
	min-width: 170px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--pnwa-line);
	border-radius: var(--pnwa-radius);
	background: var(--pnwa-surface);
	color: var(--pnwa-text);
	font-size: 14px;
}
.pnwa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.pnwa-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--pnwa-line);
	border-radius: 999px;
	color: var(--pnwa-text);
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.pnwa-chip:hover, .pnwa-chip.is-on { border-color: var(--pnwa-accent); color: var(--pnwa-accent); }
.pnwa-chip.is-on { background: color-mix(in srgb, var(--pnwa-accent) 10%, transparent); }

.pnwa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}
.pnwa-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pnwa-line);
	border-radius: var(--pnwa-radius);
	background: var(--pnwa-surface);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.pnwa-card:hover { border-color: var(--pnwa-accent); transform: translateY(-2px); }
.pnwa-card-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pnwa-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 20px 22px; }
.pnwa-card-body .pnwa-eyebrow { margin: 0; }
.pnwa-card-title { margin: 0; font-family: var(--pnwa-display); font-size: 21px; font-weight: 400; line-height: 1.3; }
.pnwa-card-title a { color: inherit; text-decoration: none; }
.pnwa-card-title a:hover { color: var(--pnwa-accent); }
.pnwa-meta { margin: 0; color: var(--pnwa-muted); font-size: 13px; }
.pnwa-excerpt { margin: 0; font-size: 15px; line-height: 1.55; }
.pnwa-ways { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 8px 0 0; list-style: none; }
.pnwa-way {
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--pnwa-tint);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.pnwa-way--volunteer { background: color-mix(in srgb, var(--pnwa-accent) 16%, transparent); }

.pnwa-empty { padding: 48px 0; color: var(--pnwa-muted); text-align: center; }
.pnwa-archive .pagination, .pnwa-archive .nav-links { margin-top: 36px; text-align: center; }

.pnwa-suggest { max-width: 760px; margin: 72px auto 0; padding-top: 40px; border-top: 1px solid var(--pnwa-line); }
.pnwa-suggest h2 { margin: 0 0 6px; font-family: var(--pnwa-display); font-size: 28px; font-weight: 400; }
.pnwa-suggest > p { margin: 0 0 24px; color: var(--pnwa-muted); }

/* ---------- Single initiative: help panel ---------- */
.pnwa-help-panel {
	margin: 40px 0 8px;
	padding: 26px 28px;
	border: 1px solid var(--pnwa-line);
	border-left: 3px solid var(--pnwa-accent);
	border-radius: var(--pnwa-radius);
	background: var(--pnwa-surface);
}
.pnwa-help-panel h2 { margin: 0 0 14px; font-family: var(--pnwa-display); font-size: 26px; font-weight: 400; }
.pnwa-help-panel .pnwa-ways { margin: 0 0 16px; padding: 0; }
.pnwa-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 20px; font-size: 15px; }
.pnwa-dl dt { color: var(--pnwa-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
.pnwa-dl dd { margin: 0; }
.pnwa-small { margin: 14px 0 0; font-size: 14px; }

/* ---------- Buttons ---------- */
.pnwa-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--pnwa-radius);
	background: var(--pnwa-accent);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.2s ease;
}
/* The site's custom CSS sets `.entry-content a { color: gold !important }`; win that for buttons. */
.entry-content .pnwa a.pnwa-btn, .pnwa a.pnwa-btn { color: #fff !important; }
.pnwa-btn:hover { filter: brightness(0.92); }
.pnwa-btn:disabled { opacity: 0.6; cursor: wait; }
.pnwa-btn--small { min-height: 40px; padding: 0 16px; }

/* ---------- Forms ---------- */
.pnwa-form { max-width: 760px; margin: 0 auto; }
.pnwa-group { margin: 0 0 32px; padding: 0; border: 0; }
.pnwa-group > legend {
	width: 100%;
	margin: 0 0 16px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--pnwa-line);
	font-family: var(--pnwa-display);
	font-size: 24px;
}
.pnwa-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.pnwa-field { grid-column: 1 / -1; min-width: 0; }
.pnwa-field.is-half { grid-column: auto; }
.pnwa-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.pnwa-req { color: var(--pnwa-accent); }
.pnwa-form input[type="text"],
.pnwa-form input[type="email"],
.pnwa-form input[type="url"],
.pnwa-form input[type="tel"],
.pnwa-form select,
.pnwa-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--pnwa-line);
	border-radius: var(--pnwa-radius);
	background: var(--pnwa-surface);
	color: var(--pnwa-text);
	font: inherit;
	font-size: 15px;
}
.pnwa-form textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.pnwa-form input:focus, .pnwa-form select:focus, .pnwa-form textarea:focus {
	border-color: var(--pnwa-accent);
	outline: 2px solid color-mix(in srgb, var(--pnwa-accent) 30%, transparent);
	outline-offset: 0;
}
.pnwa-form input[type="file"] { width: 100%; padding: 10px; border: 1px dashed var(--pnwa-line); border-radius: var(--pnwa-radius); font-size: 14px; }
.pnwa-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.pnwa-check input { margin-top: 4px; accent-color: var(--pnwa-accent); }
.pnwa-chips .pnwa-label { width: 100%; }
.pnwa-chip input { accent-color: var(--pnwa-accent); }
.pnwa-help { margin: 6px 0 0; color: var(--pnwa-muted); font-size: 13px; }
.pnwa-error { margin: 6px 0 0; color: #b42318; font-size: 13px; font-weight: 600; }
.pnwa-field.has-error input,
.pnwa-field.has-error select,
.pnwa-field.has-error textarea { border-color: #b42318; }
.pnwa-alert { margin: 0 0 24px; padding: 12px 16px; border-radius: var(--pnwa-radius); background: #fdecea; color: #7a1a12; font-weight: 600; }
.pnwa-submit { margin: 8px 0 0; }
.pnwa-thanks {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 30px;
	border: 1px solid var(--pnwa-line);
	border-left: 3px solid var(--pnwa-accent);
	border-radius: var(--pnwa-radius);
}
.pnwa-thanks p { margin: 0; }
.pnwa-thanks-head { margin-bottom: 6px !important; font-family: var(--pnwa-display); font-size: 24px; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.pnwa-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Revised guide posts (classes used in content/STYLE.md) ---------- */
.pnwa-updated { color: var(--meta-fcolor, #6b6b6b); font-size: 14px; }
.entry-content .pnwa-links a { font-weight: 600; }

@media (max-width: 640px) {
	.pnwa-fields { grid-template-columns: 1fr; }
	.pnwa-field.is-half { grid-column: 1 / -1; }
	.pnwa-filters select { flex: 1 1 100%; }
	.pnwa-help-panel { padding: 22px 20px; }
}