/**
 * FerventWord
 *
 * @package   ferventword
 * @author    Jerry Simmons <jerry@ferventsolutions.com>
 * @copyright 2026 Jerry Simmons
 * @license   GPL-2.0+
 **/

/**
 * Breakpoints: 1079px / 779px / 389px  (page width 1280px)
 *
 * Colors come from the tokens in ferventword.css. Surfaces and text use the
 * theme-aware groups so this page works in both schemes; nothing is hardcoded.
 **/


/*** LAYOUT ***/
.fwui_teachings_browse {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	grid-gap: 30px;
	margin-top: 20px;
}
.fwui_teachings_browse_rail {
	flex: 0 0 250px;
	max-width: 250px;
}
.fwui_teachings_browse_results {
	flex: 1 1 auto;
	min-width: 0; /* let long titles wrap instead of stretching the flex item */
}


/*** SEARCH FORM ***/
.fwui_teachings_search_form {
	margin-bottom: 20px;
}
.fwui_teachings_search_field_block {
	display: flex;
	flex-flow: row nowrap;
	grid-gap: 10px;
}
body.fwbg .fwui_teachings_search_field_block input[type="search"] {
	background-color: var( --fw-surface );
	border: solid 1px var( --fw-black-rule );
	border-radius: 4px;
	color: var( --fw-black-text );
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
}
body.fwbg .fwui_teachings_search_button {
	background-color: var( --fw-red );
	border: solid 1px var( --fw-red );
	border-radius: 4px;
	color: #F8F8F8; /* fixed: sits on the fixed bold red surface in both schemes */
	cursor: pointer;
	padding: 10px 22px;
}

.fwui_teachings_search_modes {
	display: flex;
	flex-flow: row wrap;
	grid-gap: 16px;
	margin-top: 10px;
}
body.fwbg .fwui_teachings_search_mode {
	color: var( --fw-black-text-65 );
	font-size: 85%;
	text-decoration: none;
}
body.fwbg .fwui_teachings_search_mode.active {
	border-bottom: solid 2px var( --fw-red-text );
	color: var( --fw-red-text );
}


/*** ACTIVE FILTER CHIPS ***/
.fwui_teachings_active_filters {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	grid-gap: 10px;
	margin-bottom: 15px;
}
body.fwbg .fwui_teachings_filter_chip {
	background-color: var( --fw-blue-light );
	border: solid 1px var( --fw-blue-text );
	border-radius: 4px;
	color: var( --fw-blue-text );
	font-size: 80%;
	padding: 5px 12px;
	text-decoration: none;
}
.fwui_teachings_filter_chip_x {
	font-size: 120%;
	margin-left: 8px;
}
body.fwbg .fwui_teachings_filter_clear {
	color: var( --fw-red-text );
	font-size: 80%;
}


/*** RESULTS ***/
body.fwbg .fwui_teachings_results_summary {
	color: var( --fw-black-text-65 );
	font-size: 85%;
	margin-bottom: 15px;
}
body.fwbg .fwui_teachings_no_results {
	background-color: var( --fw-surface );
	border: solid 1px var( --fw-black-rule );
	color: var( --fw-black-text );
	padding: 25px;
	text-align: center;
}
.fwui_teachings_result {
	margin-bottom: 10px;
}
body.fwbg .fwui_teachings_result_snippet {
	background-color: var( --fw-surface );
	border: solid 1px var( --fw-black-rule );
	border-top: none;
	color: var( --fw-black-text-85 );
	font-size: 90%;
	margin: -10px 0px 0px 0px;
	padding: 12px 15px;
}
body.fwbg .fwui_teachings_result_snippet mark {
	background-color: var( --fw-yellow-light );
	color: var( --fw-black-text );
	font-weight: 600;
	padding: 0px 2px;
}

/* The row carries its own bottom margin, which would break the snippet join */
.fwui_teachings_result .fwui_teaching_row {
	margin-bottom: 0px;
}

.fwui_teaching_row_image {
	height: auto;
	max-width: 100%;
}


/*** FACET RAIL ***/
body.fwbg .fwui_teachings_rail_heading {
	border-bottom: solid 2px var( --fw-red-text );
	color: var( --fw-black-text );
	font-size: 1.1em;
	margin-bottom: 10px;
	padding-bottom: 6px;
}
/**
 * Each facet type is a collapsed <details>. Opening one shows every option at full
 * length -- no inner scrollbar, deliberately. Bible Book runs to about 2,000px, which
 * is why the accordion in trait-fwui-teachings-browse.js keeps only one open.
 */
body.fwbg .fwui_teachings_facet_group {
	border-bottom: solid 1px var( --fw-black-rule );
}

body.fwbg .fwui_teachings_facet_summary {
	align-items: center;
	color: var( --fw-black-text );
	cursor: pointer;
	display: flex;
	font-size: .95em;
	grid-gap: 8px;
	justify-content: space-between;
	list-style: none; /* hide the default disclosure triangle, we draw our own */
	padding: 10px 4px;
}
body.fwbg .fwui_teachings_facet_summary::-webkit-details-marker {
	display: none;
}
body.fwbg .fwui_teachings_facet_summary_label::before {
	content: '\25B8';  /* right-pointing triangle, flips to down when open */
	display: inline-block;
	margin-right: 8px;
}
body.fwbg .fwui_teachings_facet_group[open] > .fwui_teachings_facet_summary_label::before,
body.fwbg .fwui_teachings_facet_group[open] .fwui_teachings_facet_summary_label::before {
	content: '\25BE';
}
body.fwbg .fwui_teachings_facet_summary_value {
	color: var( --fw-black-text-65 );
	flex: 0 0 auto;
	font-size: 85%;
}
body.fwbg .fwui_teachings_facet_summary.active .fwui_teachings_facet_summary_value {
	color: var( --fw-blue-text );
	font-weight: 600;
}

.fwui_teachings_facet_list {
	list-style: none;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
.fwui_teachings_facet_item {
	margin: 0px;
}
body.fwbg .fwui_teachings_facet_link {
	color: var( --fw-black-text-85 );
	display: flex;
	flex-flow: row nowrap;
	font-size: 85%;
	justify-content: space-between;
	grid-gap: 8px;
	padding: 5px 8px;
	text-decoration: none;
}
body.fwbg .fwui_teachings_facet_link:hover {
	background-color: var( --fw-blue-light );
}
body.fwbg .fwui_teachings_facet_link.active {
	background-color: var( --fw-blue-light );
	color: var( --fw-blue-text );
	font-weight: 600;
}
body.fwbg .fwui_teachings_facet_count {
	color: var( --fw-black-text-65 );
	flex: 0 0 auto;
}


/*** PAGINATION ***/
.fwui_teachings_pagination {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	grid-gap: 6px;
	justify-content: center;
	margin-top: 25px;
}
body.fwbg .fwui_teachings_page_link {
	background-color: var( --fw-surface );
	border: solid 1px var( --fw-black-rule );
	border-radius: 4px;
	color: var( --fw-black-text );
	font-size: 85%;
	padding: 7px 13px;
	text-decoration: none;
}
body.fwbg .fwui_teachings_page_link.active {
	background-color: var( --fw-red );
	border-color: var( --fw-red );
	color: #F8F8F8; /* fixed: the active chip is a fixed bold red surface */
}
body.fwbg .fwui_teachings_page_gap {
	color: var( --fw-black-text-65 );
	padding: 0px 4px;
}


@media( max-width: 1079px ) {
	.fwui_teachings_browse {
		flex-flow: column nowrap;
	}
	/* Rail stacks above the results and runs full width. The sections are collapsed,
	   so it costs only a few rows before the first result. */
	.fwui_teachings_browse_rail {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}
}

@media( max-width: 779px ) {
	.fwui_teachings_browse {
		grid-gap: 20px;
	}
	.fwui_teachings_search_field_block {
		flex-flow: row wrap;
	}
	body.fwbg .fwui_teachings_search_field_block input[type="search"] {
		flex: 1 1 100%;
	}
	body.fwbg .fwui_teachings_search_button {
		flex: 1 1 100%;
	}
}