/*
 * Seeds & Needs board — public-facing, so phone widths matter (UI-UX-STANDARDS "public" split).
 * Type floors: body >=18px, subtext >=16px. Colour encodes function; no monochrome buttons.
 * No max-width on any text element (hard rule 4).
 */

.wabc-board {
	font-family: "Segoe UI", Candara, system-ui, sans-serif;
	font-size: 18px;
	color: #212121;
	max-width: none;
}

.wabc-board p,
.wabc-board li {
	font-size: 18px;
	line-height: 1.55;
	max-width: none;
}

/* ---------------------------------------------------------------- notices */

.wabc-notice {
	border-left: 6px solid #1565c0;
	background: #eef4fb;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
}

.wabc-notice--signedin {
	border-left-color: #1b7a3d;
	background: #eaf5ee;
}

.wabc-notice--warn {
	border-left-color: #b3261e;
	background: #fdecea;
}

.wabc-notice strong {
	display: block;
	font-size: 19px;
	margin-bottom: 0.25rem;
}

.wabc-notice p {
	margin: 0;
}

/* ---------------------------------------------------------------- compose */

.wabc-compose {
	background: #f7f5ef;
	border: 2px solid #868d95;
	border-radius: 6px;
	padding: 1.25rem 1.5rem 1.5rem;
	margin: 0 0 2rem;
}

.wabc-compose__title,
.wabc-list__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 1rem;
}

.wabc-form__row {
	margin-bottom: 1rem;
}

.wabc-label {
	display: block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #3c4249;
	margin-bottom: 0.35rem;
}

/* Scoped through .wabc-board (0,2,0) on purpose: Astra's dynamic per-post CSS targets
   input[type="text"] / select at (0,1,1) AND loads after this file, so a bare .wabc-input
   (0,1,0) loses. Measured on the deployed page, the theme was forcing height:40px and
   font-size:16px, which clipped the select's and the title input's own text — descenders
   gone. Never assume these rules apply; check the computed style on the rendered page.

   Border must clear 3:1 on BOTH surfaces a control lands on: the page white and the
   compose panel's #f7f5ef fill. #8e959d was 2.78:1 on the panel. */
.wabc-board .wabc-input {
	width: 100%;
	font-family: inherit;
	font-size: 18px;
	line-height: 1.4;
	height: auto;
	min-height: 48px;
	padding: 0.6rem 0.7rem;
	border: 2px solid #767c84;
	border-radius: 4px;
	background: #fff;
	color: #212121;
	box-sizing: border-box;
}

/* rows= already sizes it; this only stops the theme collapsing it. */
.wabc-board textarea.wabc-input {
	min-height: 7rem;
}

.wabc-board .wabc-input:focus {
	outline: 3px solid #1565c0;
	outline-offset: 1px;
	border-color: #1565c0;
}

.wabc-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 0.5rem;
}

.wabc-hint {
	font-size: 16px;
	color: #565a60;
	margin: 0.75rem 0 0;
}

/* ---------------------------------------------------------------- buttons */

.wabc-board .wabc-btn {
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.65rem 1.1rem;
	min-height: 44px;
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
}

.wabc-board .wabc-btn:focus-visible {
	outline: 3px solid #12395e;
	outline-offset: 2px;
}

/* Create / post = green. Same category, same colour, product-wide. */
.wabc-board .wabc-btn--create {
	background: #1b7a3d;
	border-color: #14602f;
	color: #fff;
}

.wabc-board .wabc-btn--create:hover {
	background: #14602f;
}

/* Offering help = the same green meaning, ranked below the primary post action by
   an outlined fill rather than a solid one. Text #14602f on white is 6.9:1. */
.wabc-board .wabc-btn--offer {
	background: #fff;
	border-color: #14602f;
	color: #14602f;
}

.wabc-board .wabc-btn--offer:hover {
	background: #eaf5ee;
	border-color: #0f4a24;
	color: #0f4a24;
}

/* Asking a question = blue (enquiry, not commitment). */
.wabc-board .wabc-btn--question {
	background: #1565c0;
	border-color: #0f4c94;
	color: #fff;
}

.wabc-board .wabc-btn--question:hover {
	background: #0f4c94;
}

/* Status changes by the owning church = slate, distinct from both actions above. */
.wabc-board .wabc-btn--fulfilled,
.wabc-board .wabc-btn--closed,
.wabc-board .wabc-btn--reopen {
	background: #fff;
	border-color: #5a6572;
	color: #33404d;
}

.wabc-board .wabc-btn--fulfilled:hover,
.wabc-board .wabc-btn--closed:hover,
.wabc-board .wabc-btn--reopen:hover {
	background: #eceff2;
	border-color: #33404d;
}

.wabc-board .wabc-btn[disabled] {
	opacity: 0.65;
	cursor: default;
}

.wabc-form__status {
	font-size: 16px;
	font-weight: 600;
}

.wabc-form__status.is-working { color: #1565c0; }
.wabc-form__status.is-ok      { color: #1b7a3d; }
.wabc-form__status.is-error   { color: #b3261e; }

/* ------------------------------------------------------------------ items */

.wabc-count {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	background: #33404d;
	color: #fff;
	border-radius: 999px;
	padding: 0.15rem 0.6rem;
	line-height: 1.5;
	vertical-align: middle;
}

.wabc-empty {
	color: #565a60;
	font-style: normal;
}

.wabc-toggle {
	background: #eef4fb;
	border-left: 6px solid #1565c0;
	padding: 0.75rem 1rem;
	margin: 0 0 1.5rem;
}

.wabc-toggle a {
	font-weight: 700;
	color: #0f4c94;
}

.wabc-item {
	border: 2px solid #868d95;
	border-left-width: 6px;
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	background: #fff;
}

/* A need is sought (amber edge); a seed is offered (green edge). */
.wabc-item--need { border-left-color: #c77700; }
.wabc-item--seed { border-left-color: #1b7a3d; }

.wabc-item--fulfilled,
.wabc-item--closed {
	background: #f6f7f8;
}

.wabc-item__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.wabc-chip {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	border: 2px solid transparent;
}

.wabc-chip--need {
	background: #fff3e0;
	border-color: #c77700;
	color: #7a4a00;
}

.wabc-chip--seed {
	background: #eaf5ee;
	border-color: #1b7a3d;
	color: #12572b;
}

.wabc-chip--status-open {
	background: #eef4fb;
	border-color: #1565c0;
	color: #0f4c94;
}

.wabc-chip--status-fulfilled {
	background: #eaf5ee;
	border-color: #1b7a3d;
	color: #12572b;
}

.wabc-chip--status-closed {
	background: #eceff2;
	border-color: #5a6572;
	color: #33404d;
}

.wabc-chip--offers {
	background: #1b7a3d;
	border-color: #14602f;
	color: #fff;
}

.wabc-item__title {
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 0.3rem;
}

.wabc-item__church {
	font-size: 16px;
	font-weight: 600;
	color: #3c4249;
	margin: 0 0 0.75rem;
}

.wabc-item__date {
	font-weight: 400;
	color: #565a60;
}

.wabc-item__body {
	margin: 0 0 1rem;
}

/* -------------------------------------------------------------- responses */

.wabc-responses {
	border-top: 2px solid #d8dee4;
	padding-top: 1rem;
	margin-top: 1rem;
}

.wabc-responses__title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #4a5560;
	margin: 0 0 0.75rem;
}

.wabc-response {
	border-left: 4px solid #c9cdd3;
	padding: 0.5rem 0 0.5rem 0.9rem;
	margin-bottom: 0.9rem;
}

.wabc-response--offer    { border-left-color: #1b7a3d; }
.wabc-response--question { border-left-color: #1565c0; }

.wabc-response__meta {
	font-size: 16px;
	color: #3c4249;
	margin: 0 0 0.2rem;
}

.wabc-response__who {
	color: #565a60;
}

.wabc-response__msg {
	margin: 0;
}

.wabc-form--respond {
	border-top: 2px solid #d8dee4;
	padding-top: 1rem;
	margin-top: 1rem;
}

@media (max-width: 640px) {
	.wabc-compose,
	.wabc-item {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.wabc-board .wabc-btn {
		width: 100%;
	}
}