/*
 * WV Public Info Sync front-end styles.
 * Ported from the legacy template inline styles. Legacy raster background
 * images are replaced with inline SVG data URIs, so the plugin ships no binary
 * image assets. See findings F-1 and F-2.
 *
 * The layout uses flex gap, not negative margins, so no row overruns a narrow
 * theme content card. The result list matches the legacy WorldVenture Workers
 * page: proportional theme font, red title link, wrapped excerpt, no divider.
 * See findings F-8, N-1..N-6.
 */

.wv-public-info,
.wv-public-info * {
	box-sizing: border-box;
}

/*
 * The wrapper takes the width of the host content card. It sets no max-width, so
 * it never exceeds the card and never clips a row. See finding F-8.
 */
.wv-public-info {
	padding: 0 15px;
}

/* --- Search and filter rows: gap flex, no negative margins. --- */
.wv-public-info .search_section,
.wv-public-info .filters_ddls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 24px 0 0;
}

/* The section heading takes its own full-width row above the controls. */
.wv-public-info .search_section h1,
.wv-public-info .filters_ddls h1 {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0 0 12px;
}

/*
 * The search magnifier is restored as an inline SVG data URI. It applies to the
 * keyword-search heading only. The opportunity filter-bar heading is a form
 * title, not a search box, so it carries no icon. See finding F-1.
 */
.wv-public-info .search_section h1 {
	padding-left: 60px;
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 25px 25px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
}

/* The keyword field grows. The button sizes to content. Neither overflows. */
.wv-public-info .search_field_wrapper {
	flex: 1 1 320px;
	min-width: 0;
	padding: 0;
}

.wv-public-info .search_btn_wrapper {
	flex: 0 0 auto;
	padding: 0;
}

.wv-public-info input#search_term {
	width: 100%;
	border: solid 2px #000;
	box-shadow: none;
}

.wv-public-info .search_btn_wrapper #wv_op_btn,
.wv-public-info #filter_selected_results {
	padding: 10px 20px;
	background-color: #9d1c22;
	color: #fff;
	border: none;
	height: 48px;
}

/*
 * The filter dropdowns fill the row evenly. The three-part selector outranks a
 * common theme select-width rule. See findings F-13 and F-9.
 */
.wv-public-info .filters_ddls .fancyddl {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	padding: 0;
	margin: 0 0 12px;
}

.wv-public-info .filters_ddls .fancyddl select {
	width: 100%;
	min-width: 0;
	height: 48px;
}

.wv-public-info .filters_ddls .fancyddl.fancyddl_extra {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* --- Browse headings: one flex row, no floats. --- */
.wv-public-info .filters_section {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
}

.wv-public-info .browser_by_country_section,
.wv-public-info .browser_by_category_section {
	flex: 0 0 50%;
	max-width: 50%;
	margin-top: 10px;
}

/*
 * The browse headings become click targets only when the accordion script runs.
 * The script adds the wv-js-accordion class. Without the script the two grids
 * stay open, so the pointer cursor and the caret must not appear. See F-3.
 */
.wv-public-info .wv-js-accordion .heading_section_country,
.wv-public-info .wv-js-accordion .heading_section_category {
	cursor: pointer;
}

.wv-public-info .wv-js-accordion .heading_section_country h2::after,
.wv-public-info .wv-js-accordion .heading_section_category h2::after {
	content: " \25B8";
	color: #9d1c22;
}

.wv-public-info .wv-js-accordion .heading_section_country[aria-expanded="true"] h2::after,
.wv-public-info .wv-js-accordion .heading_section_category[aria-expanded="true"] h2::after {
	content: " \25BE";
}

/* --- Browse grids: gap flex, full-width flex items below the heading row. --- */
.wv-public-info .filter_section_country,
.wv-public-info .filter_section_category {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin: 0;
	flex: 0 0 100%;
	max-width: 100%;
}

/*
 * A class display rule outranks the plain [hidden] attribute, so the collapsed
 * panels need this explicit rule. The accordion script sets [hidden] to close a
 * grid. See finding F-3.
 */
.wv-public-info .filter_section_country[hidden],
.wv-public-info .filter_section_category[hidden] {
	display: none;
}

.wv-public-info .filter_grid_box {
	flex: 0 0 calc(25% - 15px);
	max-width: calc(25% - 15px);
	min-width: 0;
	padding: 0;
	margin-bottom: 30px;
}

.wv-public-info .filter_grid_box h3 {
	font-weight: 400;
}

.wv-public-info ul.country_sub_list,
.wv-public-info ul.category_sub_list {
	margin: 0;
}

/*
 * The legacy left-arrow bullet is restored as a CSS glyph, not the raster image.
 * The 30px indent keeps the sub-list hierarchy readable. See finding F-2.
 */
.wv-public-info ul.country_sub_list li,
.wv-public-info ul.category_sub_list li {
	list-style: none;
	position: relative;
	padding: 10px 0 10px 30px;
	border-bottom: 1px solid #e2e2e2;
	margin: 0;
}

.wv-public-info ul.country_sub_list li::before,
.wv-public-info ul.category_sub_list li::before {
	content: "\203A";
	position: absolute;
	left: 10px;
	top: 10px;
	color: #9d1c22;
	font-weight: 700;
}

.wv-public-info ul.country_sub_list li a,
.wv-public-info ul.category_sub_list li a {
	font-size: 15px;
}

/*
 * Result list. It matches the legacy Workers page: proportional theme font, a
 * red title link, a wrapped excerpt, and row spacing with no divider. The title
 * link takes no explicit color, so it inherits the theme link color. See N-1..N-3.
 */
.wv-public-info .filtered_result_section {
	clear: both;
	width: 100%;
}

.wv-public-info .result_row {
	width: 100%;
	margin: 0 0 22px;
	padding: 0;
}

.wv-public-info .result_row .right_section {
	width: 100%;
}

.wv-public-info .result_row .post_title,
.wv-public-info .result_row .post_title h3 {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-family: inherit;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
}

.wv-public-info .result_row .post_title a {
	text-decoration: none;
}

.wv-public-info .result_row .post_title a:hover,
.wv-public-info .result_row .post_title a:focus {
	text-decoration: underline;
}

/* The excerpt wraps in the proportional theme font. This defeats a theme
 * white-space:nowrap or monospace rule that clips the text. See finding N-1. */
.wv-public-info .result_row .post_content {
	margin: 0;
	padding: 0;
	max-width: 75ch;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 400;
	color: #333;
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* --- Pagination: visible and branded. --- */
.wv-public-info .wv_pagination {
	clear: both;
	margin: 24px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wv-public-info .wv_pagination .page-numbers {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid #d0d0d0;
	color: #9d1c22;
	text-decoration: none;
	line-height: 1;
}

.wv-public-info .wv_pagination a.page-numbers:hover {
	background: #f3f3f3;
}

.wv-public-info .wv_pagination .page-numbers.current {
	background: #9d1c22;
	color: #fff;
	border-color: #9d1c22;
}

.wv-public-info .wv_pagination .page-numbers.dots {
	border-color: transparent;
	color: #333;
}