/* ==========================================================================
   Rotary Members — directory
   Scoped under .rcm so nothing leaks into the theme and the theme's own
   styles have a hard time leaking in.
   ========================================================================== */

/* Declared at root as well as .rcm — see the note in the events plugin: a
   template rendering part of this outside the wrapper loses every colour, and
   the failure is silent. */
:root,
.rcm {
	/* Rotary's published palette, April 2025. Exact, unadjusted.
	   Royal #17458F (PMS 286C) · Azure #0067C8 (PMS 2175C) · Gold #F7A81B
	   (PMS 130C). Gold never carries text on a light background — 1.9:1 is
	   unreadable — so --rcm-gold-text is used where gold must be a word. */
	--rcm-royal: #17458F;
	--rcm-azure: #0067C8;
	--rcm-gold: #F7A81B;
	--rcm-gold-text: #9A6100;
	--rcm-ink: #14202E;
	--rcm-body: #3C4A5A;
	--rcm-muted: #6B7A8C;
	--rcm-line: #D7DFE8;
	--rcm-mist: #EEF3F8;
	--rcm-radius: 10px;
}

.rcm__heading { text-align: center; margin-block: 0 1.5rem; }

/* ---------- Filters ---------- */
.rcm-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 1.8rem;
}
.rcm-search,
.rcm-select {
	font: inherit;
	font-size: 0.95rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--rcm-line);
	border-radius: 6px;
	background: #fff;
	color: var(--rcm-ink);
}
.rcm-search { flex: 1 1 260px; min-width: 0; }
.rcm-search:focus,
.rcm-select:focus { border-color: var(--rcm-royal); outline: 2px solid rgba(23,69,143,.18); }
.rcm-count { font-size: 0.88rem; color: var(--rcm-muted); margin: 0; }

/* ---------- Grid ---------- */
.rcm-grid {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rcm[data-columns="2"] .rcm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rcm[data-columns="3"] .rcm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rcm[data-columns="5"] .rcm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1000px) { .rcm-grid,
	.rcm[data-columns="3"] .rcm-grid,
	.rcm[data-columns="5"] .rcm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rcm-grid,
	.rcm[data-columns="3"] .rcm-grid,
	.rcm[data-columns="5"] .rcm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .rcm-grid,
	.rcm[data-columns="2"] .rcm-grid,
	.rcm[data-columns="3"] .rcm-grid,
	.rcm[data-columns="5"] .rcm-grid { grid-template-columns: 1fr; } }

/* ---------- Card ---------- */
.rcm-card {
	background: #fff;
	border: 1px solid var(--rcm-line);
	border-radius: var(--rcm-radius);
	padding: 1.5rem 1.2rem 1.3rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	transition: box-shadow .16s ease, transform .16s ease;
}
.rcm-card:hover { box-shadow: 0 10px 28px rgba(20,32,46,.09); transform: translateY(-2px); }
.rcm-card[hidden] { display: none; }

.rcm-card__photo {
	width: 116px;
	height: 116px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--rcm-gold);
	background: var(--rcm-mist);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.rcm-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcm-card__initials {
	font-size: 2.1rem;
	font-weight: 800;
	color: var(--rcm-royal);
	letter-spacing: .03em;
}

.rcm-card__name { font-size: 1.05rem; margin: 0 0 .2rem; color: var(--rcm-ink); line-height: 1.3; }
.rcm-card__role {
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--rcm-royal);
	margin: 0 0 .5rem;
}
.rcm-card__job { font-size: .92rem; color: var(--rcm-body); margin: 0 0 .4rem; line-height: 1.5; }
.rcm-card__company { color: var(--rcm-muted); }
.rcm-card__since { font-size: .82rem; color: var(--rcm-muted); margin: 0 0 .6rem; }

.rcm-card__contact {
	margin-top: auto;
	padding-top: .8rem;
	border-top: 1px solid var(--rcm-line);
	display: flex;
	flex-direction: column;
	gap: .25rem;
	font-size: .88rem;
	word-break: break-word;
}
.rcm-card__gated {
	margin-top: auto;
	padding-top: .8rem;
	border-top: 1px solid var(--rcm-line);
	font-size: .85rem;
}
.rcm-card__gated a { color: var(--rcm-muted); }
.rcm-card__more { margin: .8rem 0 0; font-size: .88rem; font-weight: 600; }

.rcm-noresults { text-align: center; color: var(--rcm-muted); padding: 2rem 0; }

/* ---------- Single ---------- */
.rcm-single__head {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
	margin-bottom: 2rem;
}
@media (max-width: 700px) { .rcm-single__head { grid-template-columns: 1fr; } }
.rcm-single__photo img { width: 100%; height: auto; border-radius: var(--rcm-radius); }
.rcm-single__role {
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--rcm-royal);
	margin: 0 0 .5rem;
}
.rcm-single__job { font-size: 1.1rem; margin: 0 0 .2rem; }
.rcm-single__company { color: var(--rcm-muted); margin: 0 0 .5rem; }
.rcm-single__since { font-size: .9rem; color: var(--rcm-muted); }
.rcm-single__contact { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: .35rem; }

.rcm-empty {
	background: #FFF6E0;
	border: 1px dashed #D98B00;
	color: #7A5200;
	padding: 1rem 1.2rem;
	border-radius: 6px;
	font-size: .9rem;
}

/* Directory closed to the public */
.rcm-gate {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
	background: #fff;
	border: 1px solid var(--rcm-line);
	border-radius: var(--rcm-radius);
	padding: 2.5rem 2rem;
}
.rcm-gate__lead { font-size: 1.2rem; font-weight: 700; color: var(--rcm-ink); margin: 0 0 .8rem; }
.rcm-gate p { color: var(--rcm-muted); margin: 0 0 1rem; }
.rcm-gate__btn {
	display: inline-block;
	background: var(--rcm-royal);
	color: #fff !important;
	font-weight: 700;
	padding: .75rem 1.8rem;
	border-radius: 6px;
	text-decoration: none !important;
}

/* ==========================================================================
   Member profile
   ========================================================================== */
.rcm-profile__head {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
	margin-bottom: 2.5rem;
}
@media (max-width: 720px) { .rcm-profile__head { grid-template-columns: 1fr; gap: 1.5rem; } }

.rcm-profile__photo {
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	background: var(--rcm-mist);
	display: grid;
	place-items: center;
	border: 3px solid var(--rcm-gold);
}
.rcm-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.rcm-profile__initials { font-size: 3.4rem; font-weight: 800; color: var(--rcm-royal); }

.rcm-profile__role {
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rcm-royal);
	margin: 0 0 .4rem;
}
.rcm-profile__name { font-size: 1.9rem; margin: 0 0 .4rem; color: var(--rcm-ink); line-height: 1.15; }
.rcm-profile__job { font-size: 1.1rem; color: var(--rcm-ink); margin: 0; }
.rcm-profile__company { color: var(--rcm-muted); margin: 0 0 1.2rem; }

.rcm-profile__facts { display: grid; gap: .7rem; margin: 0 0 1.4rem; }
.rcm-profile__facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; }
.rcm-profile__facts dt {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rcm-muted);
	padding-top: .15rem;
}
.rcm-profile__facts dd { margin: 0; color: var(--rcm-ink); }
.rcm-profile__ri { margin-left: .6rem; font-size: .88rem; }
@media (max-width: 520px) { .rcm-profile__facts > div { grid-template-columns: 1fr; gap: .1rem; } }

.rcm-profile__contact { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .3rem; }
.rcm-profile__addr { color: var(--rcm-muted); font-size: .93rem; line-height: 1.5; }

.rcm-profile__social { display: flex; flex-wrap: wrap; gap: .8rem; }
.rcm-profile__social a {
	font-size: .85rem;
	font-weight: 600;
	padding: .35rem .9rem;
	border: 1px solid var(--rcm-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--rcm-royal);
}
.rcm-profile__social a:hover { background: var(--rcm-royal); color: #fff; border-color: var(--rcm-royal); }

.rcm-profile__bio, .rcm-profile__ach { margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--rcm-line); }
.rcm-profile__bio h3, .rcm-profile__ach h3 { font-size: 1.3rem; margin: 0 0 1rem; color: var(--rcm-ink); }

.rcm-ach + .rcm-ach { margin-top: 1.5rem; }
.rcm-ach h4 {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--rcm-royal);
	margin: 0 0 .6rem;
}
.rcm-ach ul { list-style: none; padding: 0; margin: 0; }
.rcm-ach li {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 1rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--rcm-line);
}
.rcm-ach li:last-child { border-bottom: 0; }
.rcm-ach__y { font-weight: 700; color: var(--rcm-muted); font-variant-numeric: tabular-nums; font-size: .92rem; }
.rcm-ach__w { color: var(--rcm-ink); }
@media (max-width: 520px) { .rcm-ach li { grid-template-columns: 1fr; gap: .1rem; } }

/* ==========================================================================
   Membership enquiry form
   ========================================================================== */
.rcm-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem 1.2rem; align-items: stretch; }
.rcm-form__wide { grid-column: 1 / -1; }
/* Same alignment fix as the events plugin: each field pushes its input to the
   bottom of its cell so a two-line label cannot drop its own input below its
   neighbours. */
.rcm-form label {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}
.rcm-form label > span {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--rcm-ink, #14202E);
	margin-bottom: .35rem;
	min-height: 2.4em;
	display: flex;
	align-items: flex-end;
}
.rcm-form__wide > span, .rcm-form__check > span { min-height: 0; }
.rcm-form label em { color: #C0392B; font-style: normal; }
.rcm-form input, .rcm-form textarea {
	width: 100%; font: inherit; font-size: 1rem; padding: .7rem .85rem;
	border: 1px solid var(--rcm-line); border-radius: 6px; background: #fff; color: var(--rcm-ink);
}
.rcm-form input:focus, .rcm-form textarea:focus {
	border-color: var(--rcm-royal); outline: 2px solid rgba(23,69,143,.15);
}
.rcm-form__privacy { font-size: .85rem; color: var(--rcm-muted); margin: 1.1rem 0 0; }
.rcm-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Matches the events plugin: gold surface, ink text, royal on hover. */
.rcm-btn,
button.rcm-btn,
form.rcm-form button.rcm-btn {
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	padding: .8rem 1.8rem;
	background: #F7A81B;
	background: var(--rcm-gold, #F7A81B);
	color: #14202E;
	color: var(--rcm-ink, #14202E);
	border: 2px solid #F7A81B;
	border-color: var(--rcm-gold, #F7A81B);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color .16s, border-color .16s, color .16s;
}
.rcm-btn:hover,
button.rcm-btn:hover,
form.rcm-form button.rcm-btn:hover {
	background: #17458F;
	background: var(--rcm-royal, #17458F);
	border-color: #17458F;
	border-color: var(--rcm-royal, #17458F);
	color: #fff;
}
.rcm-btn:focus-visible { outline: 3px solid var(--rcm-royal); outline-offset: 3px; }
.rcm-done { background: #EDF7EE; border: 1px solid #C3E3C6; border-radius: 10px; padding: 1.5rem; }
.rcm-done__lead { font-size: 1.2rem; font-weight: 800; color: #1E5C25; margin: 0 0 .5rem; }

.rcm-form__check { display: flex; flex-direction: row; align-items: center; gap: .6rem; height: auto; }
.rcm-form__check input { width: auto; }
.rcm-form__check span { margin: 0; font-weight: 600; font-size: .95rem; }

/* ==========================================================================
   Full application form
   ========================================================================== */
.rcm-form--long .rcm-fs + .rcm-fs { margin-top: 2.2rem; }
.rcm-fs {
	border: 0;
	padding: 0;
	margin: 0;
}
.rcm-fs legend {
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--rcm-royal, #17458F);
	padding: 0 0 .8rem;
	border-bottom: 2px solid var(--rcm-gold, #F7A81B);
	margin-bottom: 1.1rem;
	width: 100%;
}
.rcm-fs__help {
	font-size: .92rem;
	color: var(--rcm-muted, #6B7A8C);
	margin: 0 0 1.1rem;
	line-height: 1.6;
	max-width: 60ch;
}
.rcm-form select {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	padding: .7rem .85rem;
	border: 1px solid var(--rcm-line, #D7DFE8);
	border-radius: 6px;
	background: #fff;
	color: var(--rcm-ink, #14202E);
}

.rcm-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: .6rem 1.4rem;
}
/*
 * A tick box or radio sits BESIDE its label, not above it.
 *
 * .rcm-form label sets a column layout so that inputs line up across the grid
 * regardless of label length. That rule is (0,1,1) and .rcm-check was (0,1,0),
 * so the column layout won and every radio ended up stacked above its own
 * text. Matching the element as well as the class settles it without
 * !important.
 */
.rcm-check,
.rcm-form label.rcm-check,
.rcm-form .rcm-checks label,
.rcm-form .rcm-radios label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: .6rem;
	height: auto;
	font-size: .95rem;
	line-height: 1.5;
	justify-content: flex-start;
}
.rcm-form label.rcm-check > span,
.rcm-form .rcm-checks label > span,
.rcm-form .rcm-radios label > span {
	min-height: 0;
	display: inline;
	margin-bottom: 0;
	font-weight: 400;
	font-size: .95rem;
	letter-spacing: 0;
	text-transform: none;
}
.rcm-form label.rcm-check > input,
.rcm-form .rcm-checks input,
.rcm-form .rcm-radios input {
	width: auto;
	flex: 0 0 auto;
	margin-top: .2rem;
}
.rcm-check input { width: auto; margin-top: .25rem; flex: 0 0 auto; }
.rcm-check > span { min-height: 0; display: inline; font-weight: 400; }

.rcm-check--consent {
	margin-top: 1.8rem;
	padding: 1rem 1.2rem;
	background: var(--rcm-mist, #EEF3F8);
	border-radius: 8px;
}

.rcm-radios { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.rcm-radios .rcm-check { height: auto; }