/* Community Posts. Colors follow the theme's custom properties when it has them. */
/* Astra's page-builder layout sets max-width: none on content children, hence !important. */
.cmp { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; }

.cmp-form,
.cmp-notice,
.cmp-mine,
.cmp-invite {
	--cmp-accent: var(--hp-navy, #1e3a5f);
	--cmp-highlight: var(--hp-gold, #c8962a);
	--cmp-soft: var(--hp-gold-soft, #faf5e8);
	--cmp-border: var(--hp-border, #dde3ea);
	--cmp-muted: var(--hp-muted, #64748b);
	--cmp-radius: 10px;
	--cmp-error: #b42318;
}

.cmp-form { margin: 0 0 2.5em; }
.cmp-form__intro { color: var(--cmp-muted); margin-bottom: 1.5em; }

.cmp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 600px) {
	.cmp-form__row { grid-template-columns: 1fr; }
}

.cmp-field { margin-bottom: 1.25em; }
.cmp-field label { display: block; font-weight: 600; margin-bottom: 0.35em; }
.cmp-field__hint { font-weight: 400; color: var(--cmp-muted); font-size: 0.9em; }
.cmp-field input[type="text"],
.cmp-field input[type="email"],
.cmp-field select {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
	line-height: 1.4;
	height: auto;
	background: #fff;
}
.cmp-field input:focus,
.cmp-field select:focus { outline: 2px solid var(--cmp-accent); outline-offset: 1px; }
.cmp-field input[aria-invalid="true"],
.cmp-field select[aria-invalid="true"],
.cmp-field--editor.is-invalid .wp-editor-container { border-color: var(--cmp-error); }
.cmp-field__error { color: var(--cmp-error); font-size: 0.92em; margin: 0.35em 0 0; }

.cmp-field--editor .wp-editor-container { border: 1px solid var(--cmp-border); border-radius: 8px; overflow: hidden; }
.cmp-field--editor .mce-top-part::before { box-shadow: none; }
.cmp-field--editor .wp-editor-area { font: inherit; padding: 12px; }

/* Bots fill in every field; people never see this one. */
.cmp-field--trap {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cmp-form .cf-turnstile { margin-bottom: 1.25em; }
.cmp-form__submit button { cursor: pointer; }

.cmp-notice {
	margin: 0 0 1.5em;
	padding: 16px 20px;
	border-radius: var(--cmp-radius);
	border-left: 4px solid var(--cmp-accent);
	background: #f3f6fa;
}
.cmp-notice h2 { font-size: 1.3em; margin: 0 0 0.4em; }
.cmp-notice p:last-child { margin-bottom: 0; }
.cmp-notice--success { border-left-color: #2e7d32; background: #eef7ef; }
.cmp-notice--error { border-left-color: var(--cmp-error); background: #fdf0ef; }

.cmp-mine { margin: 0 0 2em; border-top: 1px solid var(--cmp-border); padding-top: 1.5em; }
.cmp-mine h2 { font-size: 1.35em; }
.cmp-mine__list { list-style: none; margin: 0 0 1em; padding: 0; }
.cmp-mine__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cmp-border);
}
.cmp-mine__title { flex: 1 1 260px; font-weight: 600; }
.cmp-mine__status { font-size: 0.85em; padding: 2px 10px; border-radius: 999px; background: #eef2f6; color: var(--cmp-muted); }
.cmp-mine__status--publish { background: #eef7ef; color: #2e7d32; }
.cmp-mine__status--pending { background: var(--cmp-soft); color: #7a5a06; }
.cmp-mine__actions { display: flex; gap: 12px; }
.cmp-mine__logout { font-size: 0.92em; }

.cmp-invite {
	margin: 2.5em 0 1em;
	padding: 18px 22px;
	border-radius: var(--cmp-radius);
	background: var(--cmp-soft);
	border-left: 4px solid var(--cmp-highlight);
}
.cmp-invite p { margin: 0 0 0.5em; }
.cmp-invite p:last-child { margin-bottom: 0; }
.cmp-invite__link { font-weight: 700; color: var(--cmp-accent); }
.cmp-invite__link::after { content: " \2192"; }
.cmp-invite-line {
	text-align: center;
	color: var(--hp-muted, #64748b);
	font-size: 0.95rem;
	margin: -4px auto 36px;
	padding: 0 20px;
}
.cmp-invite-line a { color: var(--hp-gold-dark, #a97d0c); font-weight: 600; white-space: nowrap; }
.cmp-invite-line a::after { content: " \2192"; }