/*
 * Talents Chrétiens — suggestions under the public search field, and the invitation
 * shown by the directory when no search has been made yet.
 */

/*
 * Both search bars clip their contents (rounded corners with overflow:hidden), so the list
 * is placed against the window instead of inside the bar. Its position is set in script
 * from the field's own box, and followed on scroll and resize.
 */
.tc-sugg {
	position: fixed;
	z-index: 1200;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid rgba(11, 19, 43, .10);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(11, 19, 43, .14);
	padding: 5px;
}
.tc-sugg-item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 9px 11px;
	border: 0;
	border-radius: 7px;
	background: none;
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	color: var(--navy, #0B132B);
	cursor: pointer;
}
.tc-sugg-item:hover,
.tc-sugg-item.is-active { background: var(--gold-lt, #F4EEDF); }
.tc-sugg-name { font-weight: 600; }
.tc-sugg-hint {
	font-size: 12px;
	color: var(--soft, #3D4F63);
	font-weight: 400;
}
.tc-sugg-hint::before { content: "— "; }

/* The directory, before anything has been searched for. */
.results-invite { text-align: center; }
.annuaire-invite-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 20px auto 0;
	max-width: 620px;
}
.annuaire-invite-form input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid rgba(11, 19, 43, .14);
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	color: var(--navy, #0B132B);
	background: #fff;
}
.annuaire-invite-form input:focus {
	outline: none;
	border-color: var(--gold, #C6A756);
	box-shadow: 0 0 0 3px rgba(198, 167, 86, .18);
}
.annuaire-invite-form .r-cta {
	flex: 0 0 auto;
	padding: 12px 22px;
	border: 0;
	border-radius: 9px;
	background: var(--gold, #C6A756);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.annuaire-invite-form .r-cta:hover { background: var(--gold-dk, #A8893C); }
.annuaire-invite-or {
	margin: 24px 0 10px;
	font-size: 12.5px;
	color: var(--soft, #3D4F63);
}
.annuaire-invite-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

/* Visually hidden, still read aloud. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 600px) {
	/*
	 * Stacked on a phone. The two fields must be told to size themselves again: in a column
	 * the `flex: 1 1 200px` above applies to the HEIGHT, which turned the town field into a
	 * 200px-tall box and left the two fields different widths.
	 */
	.annuaire-invite-form {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}
	.annuaire-invite-form input,
	.annuaire-invite-form .r-cta {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
	}
}

/* A search with both fields empty does not submit; the field says so briefly. */
@keyframes tc-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}
.tc-shake {
	animation: tc-shake .25s ease-in-out 1;
	outline: 2px solid rgba(198, 167, 86, .55);
	outline-offset: 1px;
	border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
	.tc-shake { animation: none; }
}