/*
 * WT Membership Directory, front end (1.8.0).
 *
 * Replaces includes/wt-member-style.css, which stays on disk unchanged for pages
 * still held in a cache that load it.
 *
 * The 1.7.x class names (.wt-membershipList, .membershipListLeft/Right,
 * .wtMemberImg, .grid-container, .grid-item, h4.wt_member_name, .wt_seach_box,
 * #search_text) are still on the same elements because site CSS targets them.
 * Layout hangs off flexbox and grid instead of the old 35%/65% floats, so a list
 * with photos off has no empty column: the photo column is not printed, and the
 * details take the row.
 *
 * Units: boxes in px (a theme with a 10px root would shrink rem boxes), spacing
 * in rem, and text left to the theme apart from the 16px search floor.
 */

/* ------------------------------------------------------------------ wrapper */

.wt-member-directory {
	margin: 0 0 1.5rem;
}

/* A column flexbox that doesn't stretch its children shrinks the directory to
   its content, one narrow column: Breakdance's sections and a core Stack group
   (align-items: flex-start) do, in the block editor too, where the flex item is
   the block's editor wrapper. Ignored anywhere else. */
.wt-member-directory,
.wt-member-directory-block,
.wp-block-wt26-member-directory {
	align-self: stretch;
}

/* Breakdance's Post Content and Rich Text elements are a plain div in that
   flexbox, sized to its content, so a directory inside one has no width to fill. */
.breakdance .bde-rich-text:has(.wt-member-directory) {
	width: 100%;
}

.wt-member-directory[aria-busy="true"] .ajax_response {
	opacity: 0.6;
}

/* ------------------------------------------------------------------ search */

.wt-member-directory .wt-member-search,
.search_input.wt_seach_box {
	margin-top: 20px;
}

.search_input.wt_seach_box .wt-member-search__input,
.search_input.wt_seach_box input#search_text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	min-height: 50px;
	height: auto;
	margin: 10px auto;
	padding: 12px 16px;
	border: 1px solid;
	/* iOS zooms the whole page when a focused input's text is under 16px; the em
	   half lets the box follow a theme whose body text is larger. */
	font-size: max(1em, 16px);
	line-height: 1.4;
}

.search_input.wt_seach_box .wt-member-search__input:focus-visible,
.search_input.wt_seach_box input#search_text:focus-visible {
	/* Divi removes every outline; a keyboard user still needs to see where they are. */
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Enfold styles every text input through an id: #top input[type="text"] (13px
   text, 8px 6px padding, a 20px bottom margin, no outline) and, per colour set,
   #top .main_color input[type="text"] (a #ebebeb edge on #f8f8f8 with #969696
   text, 1.12:1, measured on a DEV site). No class selector above outranks
   those, and only the first box has the search_text id, so the box all but
   vanished and a second directory's box came out small and off-centre. This
   #top copy wins there without !important, so a site's own CSS for the box
   still works on every other theme. The edge and text follow the section's
   text colour; the background stays Enfold's. */
#top .search_input.wt_seach_box .wt-member-search__input {
	min-height: 50px;
	height: auto;
	margin: 10px auto;
	padding: 12px 16px;
	border: 1px solid currentColor;
	color: inherit;
	font-size: max(1em, 16px);
	line-height: 1.4;
}

#top .search_input.wt_seach_box .wt-member-search__input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Visually hidden, for themes without .screen-reader-text. */
.wt-member-search__label:not(:focus):not(:active),
.wt-member-status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ map */

.wt-member-map,
#mapCanvas {
	width: 100%;
	height: 350px;
	z-index: 1;
}

.wt-map-pin {
	background: none !important;
	border: none !important;
}

.leaflet-popup-content .info_content p {
	margin: 0 0 5px;
}

/* ------------------------------------------------------------------ results */

/*
 * The 1.7.x names (.ajax_response, .grid-container, .grid-item,
 * .list-view-container) are generic, and other plugins use them too: the Divi
 * Event Calendar Module's Divi 5 bundle sets .grid-container to twelve columns
 * on every page, after this file. So every rule here pairs the old name with one
 * of the directory's own classes. Two classes beat a single-class rule whatever
 * the load order, and none of these rules reach another plugin's elements.
 */
.wt-member-directory .ajax_response,
.wt-member-archive .ajax_response {
	margin: 30px 0;
}

.list-view-container.wt-member-results {
	clear: both;
	display: block;
}

/* A list card: photo column (only when photos are on) and the details. */
.wt-member-card--list,
.wt-member-card--single {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 24px;
	padding: 25px 0;
	clear: both;
}

/* The guard. A site that copied 1.7.x's float rules (35% / 65%) would otherwise
   wake them up and bring the empty column back. Four classes and !important
   outrank the three-class customer selectors seen in the wild. */
.wt-member-card.wt-membershipList > .membershipListLeft.wt-member-card__photo,
.wt-member-card.wt-membershipList > .membershipListRight.wt-member-card__body {
	float: none !important;
	width: auto !important;
}

.wt-member-card__photo {
	flex: 0 1 220px;
	min-width: 120px;
	max-width: 100%;
}

.wt-member-card__body {
	flex: 1 1 280px;
	min-width: 0;
}

/* Natural size, never stretched: a small photo (or the 125px no-image picture)
   stays as sharp as 1.7.6 showed it; a large one shrinks to the column. */
.wt-member-card__photo .wtMemberImg {
	display: block;
	width: auto;
	max-width: 100% !important;
	height: auto;
	margin: 0 0 10px;
}

h4.wt_member_name,
.membershipListRight h4 {
	margin-bottom: 0;
}

.wt-member-card__person {
	margin: 0;
}

.wt-member-card__details {
	margin-top: 0.25em;
}

.wt-member-card__notes {
	margin-top: 0.75em;
}

.membershipListRight a {
	overflow-wrap: anywhere;
}

/* A grid of cards: up to three across, fewer as the space narrows. */
.grid-container.wt-member-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 20px) / 3)), 1fr));
	gap: 10px;
}

/* 1.7.x also set font-size: 30px here. The card holds only the photo and the
   name, so it changed nothing on themes that size headings in px or rem, and on
   one that sizes them in em (Genesis wt-corporate) it made names 54px. */
.grid-item.wt-member-card--grid {
	background-color: rgba(255, 255, 255, 0.8);
	padding: 5px;
	text-align: center;
}

.wt-member-card--grid .wtMemberImg {
	display: block;
	max-width: 90%;
	height: auto;
	margin: 0 auto 10px;
}

.wt_no_display_massage {
	margin: 40px auto;
	display: block;
	text-align: center;
}

/* ------------------------------------------------------------------ Load More */

.load-more-container,
.load-more-container-1 {
	text-align: center;
}

.load-more-container .load-more-members,
.load-more-container-1 .load-more-members-2 {
	font-size: 20px;
	padding: 0.3em 1em;
	line-height: 1.7em !important;
	background-color: transparent;
	border: 1px solid;
	border-radius: 25px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	min-width: 210px;
	margin-top: 32px;
}

.load-more-container .load-more-members:focus-visible,
.load-more-container-1 .load-more-members-2:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.load-more-members[disabled],
.load-more-members-2[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ------------------------------------------------------------------ single listing */

.wt22_member_backlink {
	padding: 30px 0;
}

.wt23_directions_link p {
	padding: 20px 0;
	font-weight: bold;
	font-size: 16px;
}

/* ------------------------------------------------------------------ small screens */

/* As in 1.7.x: on a phone the photo sits above the details and both are centred. */
@media only screen and (max-width: 879px) {
	.wt-member-card--list,
	.wt-member-card--single {
		flex-direction: column;
		align-items: center;
	}

	/* Sized with align-self rather than width, which the guard above holds at auto. */
	.wt-member-card--list > .wt-member-card__photo,
	.wt-member-card--single > .wt-member-card__photo {
		flex-basis: auto;
		max-width: 220px;
		align-self: center;
	}

	.wt-member-card--list > .wt-member-card__body,
	.wt-member-card--single > .wt-member-card__body {
		flex-basis: auto;
		align-self: stretch;
		text-align: center;
	}
}

/* ------------------------------------------------------------------ print */

@media print {
	.wt-member-map,
	.wt-member-search,
	.load-more-container,
	.load-more-container-1 {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ builder previews */

/* Where the map will be, in the block editor and the page builders. */
.wt-member-map--preview {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 16px;
	border: 2px dashed currentColor;
	opacity: 0.7;
	text-align: center;
}

.wt-member-map--preview p {
	margin: 0;
}