/**
 * Umansheli Organizations — front-end styles.
 *
 * Written RTL-first (the site is Hebrew). Uses logical properties
 * (margin-inline, padding-inline, border-inline) so the same rules stay correct
 * if a block is ever rendered LTR. Inherits the theme's design tokens when
 * present, with sensible fallbacks so the plugin looks right on any theme.
 */

/* ------------------------------------------------------------------
   Organization grid
------------------------------------------------------------------ */
.umansheli-org-grid {
	display: grid;
	grid-template-columns: repeat(var(--umansheli-columns, 3), minmax(0, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}
@media (max-width: 780px) {
	.umansheli-org-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
	.umansheli-org-grid { grid-template-columns: 1fr; }
}

.umansheli-org-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius, 10px);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.umansheli-org-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
}

/* The filter script toggles the [hidden] attribute. `display: flex` above
   would otherwise beat the user-agent rule for [hidden] and the card would
   stay visible, so this has to win explicitly. */
.umansheli-org-card[hidden] { display: none; }

/* --- compact header: small logo beside the name --- */
.umansheli-org-card__head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.6rem;
}

.umansheli-org-card__logo {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--color-border, #e5e7eb);
}
.umansheli-org-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.umansheli-org-card__logo--placeholder {
	background: linear-gradient(135deg, var(--color-accent, #243355), #34496f);
	border-color: transparent;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
}

.umansheli-org-card__heading { min-width: 0; }

.umansheli-org-card__body {
	padding: 0.95rem 1rem;
	flex: 1;
}

.umansheli-org-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}
.umansheli-org-card__title a {
	color: inherit;
	text-decoration: none;
}
.umansheli-org-card__title a:hover { text-decoration: underline; }

.umansheli-org-card__city {
	display: block;
	font-size: 0.78rem;
	color: var(--color-muted, #646b7d);
	margin-top: 0.1rem;
}

.umansheli-org-card__field {
	margin: 0 0 0.45rem;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: var(--color-muted, #646b7d);
}

/* Clamp to two lines so every card in a row is the same height regardless of
   how much description an organization wrote. */
.umansheli-org-card__excerpt {
	margin: 0;
	font-size: 0.87rem;
	color: var(--color-muted, #646b7d);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.umansheli-org-card__volunteer {
	position: relative;
	z-index: 2;
	padding: 0 1rem 0.85rem;
}
.umansheli-org-card__volunteer a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	background: var(--color-accent, #243355);
	color: #fff;
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}
.umansheli-org-card__volunteer a:hover {
	background: var(--color-accent-hover, #1a253d);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}
.umansheli-org-card__volunteer .icon { flex: none; }

.umansheli-org-card__actions {
	display: flex;
	gap: 0.9rem;
	flex-wrap: wrap;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--color-border, #e5e7eb);
	font-size: 0.8rem;
	font-weight: 500;
}
.umansheli-org-card__actions a {
	color: var(--color-accent, #243355);
	text-decoration: none;
}
.umansheli-org-card__actions a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   Organization details block
------------------------------------------------------------------ */
.umansheli-org-details {
	background: var(--color-surface, #f4f5f6);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius, 10px);
	padding: 1.25rem 1.5rem;
	margin: 2rem 0;
}
.umansheli-org-details__title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}
.umansheli-org-details dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1rem;
	margin: 0;
	font-size: 0.95rem;
}
.umansheli-org-details dt {
	font-weight: 600;
	color: var(--color-muted, #646b7d);
}
.umansheli-org-details dd { margin: 0; }
@media (max-width: 500px) {
	.umansheli-org-details dl { grid-template-columns: 1fr; gap: 0.1rem; }
	.umansheli-org-details dd { margin-block-end: 0.6rem; }
}

/* ------------------------------------------------------------------
   Organization volunteer information
------------------------------------------------------------------ */
.umansheli-org-volunteer {
	margin: 1.25rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(200, 103, 52, 0.28);
	border-radius: var(--radius, 10px);
	background: rgba(200, 103, 52, 0.06);
}
.umansheli-org-volunteer__title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}
.umansheli-org-volunteer dl { margin: 0; }
.umansheli-org-volunteer dt {
	margin-top: 0.9rem;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--color-orange-ink, #b45d2f);
}
.umansheli-org-volunteer dt:first-child { margin-top: 0; }
.umansheli-org-volunteer dd {
	margin: 0.2rem 0 0;
	color: var(--color-text, #1c2333);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
   Volunteer form
------------------------------------------------------------------ */
.umansheli-form-wrap {
	max-width: 720px;
	margin: 2rem auto;
}

.umansheli-form-title { margin-block-end: 0.5rem; }
.umansheli-form-intro {
	color: var(--color-muted, #646b7d);
	margin-block-end: 1.5rem;
}

.umansheli-form-expectations {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 1rem;
	margin: 0 0 1.5rem;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(36, 51, 85, 0.15);
	border-radius: 10px;
	background: rgba(36, 51, 85, 0.05);
	color: var(--color-accent, #243355);
	font-size: 0.88rem;
	font-weight: 500;
	list-style: none;
}
.umansheli-form-expectations li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.umansheli-form-expectations li::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--color-highlight, #c86734);
}

.umansheli-form-success {
	padding: clamp(1.75rem, 5vw, 3rem);
	border: 1px solid rgba(36, 51, 85, 0.16);
	border-radius: var(--radius, 10px);
	background: var(--color-bg, #fff);
	box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
	text-align: center;
}
.umansheli-form-success:focus { outline: 2px solid var(--color-accent, #243355); outline-offset: 3px; }
.umansheli-form-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-block-end: 0.8rem;
	border-radius: 50%;
	background: var(--color-accent, #243355);
	color: #fff;
}
.umansheli-form-success__eyebrow {
	margin: 0 0 0.2rem;
	color: var(--color-orange-ink, #b45d2f);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.umansheli-form-success h2 { margin: 0 0 0.6rem; }
.umansheli-form-success > p:not(.umansheli-form-success__eyebrow) {
	max-width: 34rem;
	margin: 0 auto;
	color: var(--color-muted, #646b7d);
}
.umansheli-form-success__steps {
	display: grid;
	gap: 0.65rem;
	max-width: 34rem;
	margin: 1.5rem auto;
	padding: 0;
	list-style: none;
	text-align: right;
	counter-reset: volunteer-success-step;
}
.umansheli-form-success__steps li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 8px;
	background: var(--color-surface, #f4f5f6);
	color: var(--color-text, #1c2333);
	font-size: 0.9rem;
	counter-increment: volunteer-success-step;
}
.umansheli-form-success__steps li::before {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--color-accent, #243355);
	color: #fff;
	content: counter(volunteer-success-step);
	font-size: 0.75rem;
	font-weight: 700;
}
.umansheli-form-success__privacy { font-size: 0.82rem; }
.umansheli-form-success__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-block-start: 1.5rem;
}
.umansheli-success-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.25rem;
	border-radius: 8px;
	background: var(--color-accent, #243355);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.umansheli-success-button:hover { background: var(--color-accent-hover, #1a253d); color: #fff; }
.umansheli-success-link { color: var(--color-accent, #243355); font-weight: 600; }

.umansheli-form-progress {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-block: 1.5rem;
}
.umansheli-form-progress span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 8px;
	color: var(--color-muted, #646b7d);
	font-size: 0.82rem;
	font-weight: 500;
}
.umansheli-form-progress b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--color-surface, #f4f5f6);
	font-size: 0.75rem;
}
.umansheli-form-progress .is-active {
	border-color: var(--color-accent, #243355);
	background: rgba(36, 51, 85, 0.05);
	color: var(--color-accent, #243355);
}
.umansheli-form-progress .is-active b {
	background: var(--color-accent, #243355);
	color: #fff;
}

.umansheli-form-step__heading {
	margin-block-end: 1.25rem;
}
.umansheli-form-step__heading h3 {
	margin: 0 0 0.2rem;
	font-size: 1.15rem;
}
.umansheli-form-step__heading p {
	margin: 0;
	color: var(--color-muted, #646b7d);
	font-size: 0.88rem;
}
.umansheli-form-organization {
	margin-block-end: 1.25rem;
	padding: 1rem;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 10px;
	background: var(--color-surface, #f4f5f6);
}
.umansheli-form-organization .umansheli-hint { margin-block-end: 0; }

.umansheli-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
}
@media (max-width: 600px) {
	.umansheli-form-grid { grid-template-columns: 1fr; }
}
.umansheli-field--wide { grid-column: 1 / -1; }

.umansheli-field label,
.umansheli-field legend {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	margin-block-end: 0.35rem;
}

.umansheli-field input[type="text"],
.umansheli-field input[type="email"],
.umansheli-field input[type="tel"],
.umansheli-field input[type="number"],
.umansheli-field textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--color-text, #1c2333);
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #d8d8d2);
	border-radius: 8px;
}
.umansheli-field input:focus,
.umansheli-field textarea:focus {
	outline: 2px solid var(--color-accent, #243355);
	outline-offset: 1px;
	border-color: transparent;
}

.umansheli-field textarea { resize: vertical; }

.umansheli-required { color: #b32d2e; }

.umansheli-hint {
	display: block;
	margin-block-start: 0.25rem;
	font-size: 0.8rem;
	color: var(--color-muted, #646b7d);
}

.umansheli-field fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.umansheli-checkboxes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.5rem;
}

.umansheli-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400 !important;
	font-size: 0.92rem;
	line-height: 1.4;
	cursor: pointer;
}
.umansheli-checkbox input { margin-block-start: 0.2rem; }

.umansheli-submit {
	margin-block-start: 1.5rem;
	background: var(--color-accent, #243355);
	color: #fff;
	border: 0;
	padding: 0.7rem 1.6rem;
	border-radius: 8px;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease;
}
.umansheli-submit:hover { background: var(--color-accent-hover, #1a253d); }

.umansheli-step-next,
.umansheli-step-back {
	margin-block-start: 1.5rem;
	border-radius: 8px;
	padding: 0.7rem 1.6rem;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 500;
	cursor: pointer;
}
.umansheli-step-next {
	border: 0;
	background: var(--color-accent, #243355);
	color: #fff;
}
.umansheli-step-next:hover { background: var(--color-accent-hover, #1a253d); }
.umansheli-step-back {
	border: 1px solid var(--color-border, #e5e7eb);
	background: transparent;
	color: var(--color-accent, #243355);
}
.umansheli-step-back:hover { border-color: var(--color-accent, #243355); }
.umansheli-form-step__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.umansheli-form-step__actions .umansheli-submit { margin-block-start: 1.5rem; }

.umansheli-form-faq {
	margin-block-start: 2.5rem;
	border-top: 1px solid var(--color-border, #e5e7eb);
	padding-block-start: 1.25rem;
}
.umansheli-form-faq h3 {
	margin: 0 0 0.65rem;
	font-size: 1.05rem;
}
.umansheli-form-faq details {
	border-bottom: 1px solid var(--color-border, #e5e7eb);
	padding: 0.75rem 0;
}
.umansheli-form-faq summary {
	cursor: pointer;
	color: var(--color-accent, #243355);
	font-weight: 600;
}
.umansheli-form-faq p {
	margin: 0.5rem 0 0;
	color: var(--color-muted, #646b7d);
	font-size: 0.9rem;
}
@media (max-width: 500px) {
	.umansheli-form-progress { grid-template-columns: 1fr; }
	.umansheli-form-step__actions { flex-wrap: wrap; }
	.umansheli-form-expectations { display: grid; gap: 0.5rem; }
	.umansheli-form-success__actions { flex-direction: column; }
}

/* The honeypot must be unreachable for humans but not display:none, which some
   bots detect and skip. */
.umansheli-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   Notices
------------------------------------------------------------------ */
.umansheli-notice {
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	margin-block-end: 1.5rem;
	font-size: 0.95rem;
	border-inline-start: 4px solid;
}
.umansheli-notice ul {
	margin: 0.5rem 0 0;
	padding-inline-start: 1.2rem;
}
.umansheli-notice p { margin: 0; }

.umansheli-notice--success {
	background: #edf7ed;
	border-color: #2f7d32;
	color: #1e4620;
}
.umansheli-notice--error {
	background: #fdecea;
	border-color: #b32d2e;
	color: #611a15;
}

.umansheli-empty {
	color: var(--color-muted, #646b7d);
	font-style: italic;
}

/* ------------------------------------------------------------------
   Organization picker on the volunteer form
------------------------------------------------------------------ */
.umansheli-field select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--color-text, #1c2333);
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #d8d8d2);
	border-radius: 8px;
}
.umansheli-field select:focus {
	outline: 2px solid var(--color-accent, #243355);
	outline-offset: 1px;
	border-color: transparent;
}

/* Shown when the form is pinned to one organization. */
.umansheli-orgpick--locked {
	margin: 0;
	padding: 0.75rem 1rem;
	background: rgba(200, 103, 52, 0.08);
	border: 1px solid rgba(200, 103, 52, 0.25);
	border-radius: 8px;
	font-size: 0.95rem;
}

/* Icons inside cards line up with their label rather than sitting on the
   baseline. Defined here so cards keep their icon spacing on any theme. */
.umansheli-org-card .has-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.umansheli-org-card .icon { flex: none; }
.umansheli-org-card__city .icon { opacity: 0.75; }

/* ------------------------------------------------------------------
   Whole-card link
   ------------------------------------------------------------------
   The title's anchor is stretched over the entire card, so clicking anywhere
   opens that organization. Only one link is stretched, so the card is still a
   single tab stop with a single accessible name — a separate "view" button
   would be a second stop to the same destination.
------------------------------------------------------------------ */
.umansheli-org-card { position: relative; }

.umansheli-org-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Transparent rather than absent so it still receives clicks in IE-era
	   rendering modes and, more usefully, so it can take a focus ring. */
	background: transparent;
	border-radius: inherit;
}

/* Contact links must sit above the stretched link to stay clickable. */
.umansheli-org-card__actions {
	position: relative;
	z-index: 2;
}

/* Keyboard focus lands on the title link but should outline the whole card,
   since the whole card is what activates. */
.umansheli-org-card:focus-within {
	border-color: var(--color-accent, #243355);
	box-shadow: 0 0 0 3px rgba(36, 51, 85, 0.15);
}
.umansheli-org-card__link:focus-visible { outline: none; }

/* Text selection inside a stretched-link card is awkward by nature; keeping
   the cursor honest at least signals what will happen. */
.umansheli-org-card { cursor: pointer; }
.umansheli-org-card__actions a { cursor: pointer; }

/* The "opens" cue. Sits at the far edge of the card header and leans toward
   the reading direction on hover. */
.umansheli-org-card__go {
	margin-inline-start: auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--color-muted, #646b7d);
	background: transparent;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.umansheli-org-card:hover .umansheli-org-card__go,
.umansheli-org-card:focus-within .umansheli-org-card__go {
	background: var(--color-accent, #243355);
	color: #fff;
	transform: translateX(-3px); /* toward the RTL reading direction */
}

@media (prefers-reduced-motion: reduce) {
	.umansheli-org-card__go { transition: none; }
	.umansheli-org-card:hover .umansheli-org-card__go { transform: none; }
}