/* ALMC Search Rank - dropdown badge, search highlight, row subtitle and the
 * spelling-correction line. */

/*
 * The match highlight: a tint of the brand green instead of the flat grey slab.
 *
 * !important is what it takes without editing an Elementor template: every
 * widget bakes its own highlight colour into its page CSS as
 * `.elementor-100017824 .elementor-element.elementor-element-e1a2d78
 * .jet-ajax-search__results-item mark { background: rgb(179,197,184) }`,
 * a three-class selector this stylesheet cannot outrank, once per widget.
 */
.jet-ajax-search mark,
.jet-ajax-search__results-area mark,
.jet-ajax-search__results-item mark {
	background: rgba( 91, 144, 105, 0.18 ) !important;
	color: inherit;
	padding: 0 3px;
	border-radius: 3px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/*
 * The row subtitle (excerpt line and "También:" line) rebuilt server side in
 * class-almc-search-rank-ajax.php reads in normal sentence case. The same
 * per-widget page CSS that bakes the mark colour above also bakes
 * `text-transform: uppercase` onto these rows' text, at the same
 * three-class specificity - so it takes the same !important to outrank.
 */
.jet-ajax-search__item-content,
.jet-ajax-search__results-item .jet-ajax-search__item-content,
.jet-search-title-fields,
.jet-search-title-fields *,
.jet-ajax-search__results-item .jet-search-title-fields,
.jet-ajax-search__results-item .jet-search-title-fields * {
	text-transform: none !important;
}

/* The molecular group badge, in place of the row thumbnail. */
.almc-group-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 3px;
	flex: 0 0 auto;
}

.almc-group-badge__logo {
	display: block;
	width: 44px;
	height: 44px;
	max-width: none;
	object-fit: contain;
}

.almc-group-badge__name {
	display: inline-block;
	max-width: 76px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	padding: 1px 6px;
	border-radius: 9px;
	text-align: center;
}

/*
 * The spelling-correction line. It is served inside the response's own
 * `results_navigation.in_header`, which jet-search.js drops into the results
 * header holder, so it needs no script and no new asset of its own. The header
 * is a flex row; the line takes a whole row of its own above the counter.
 */
.jet-ajax-search__results-header,
.jet-ajax-search__results-header .jet-ajax-search__navigation-holder {
	flex-wrap: wrap;
}

/*
 * The holder it lands in is a flex row that ends at the right edge, so a
 * full-width child overflows to the left unless the row is allowed to wrap and
 * the line is pinned to the start of its own row.
 */
.almc-search-notice {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	order: -1;
	margin-right: auto;
	box-sizing: border-box;
	padding: 6px 2px 4px;
	font-size: 13px;
	line-height: 1.35;
	text-align: left;
	text-transform: none !important;
	letter-spacing: 0;
	color: inherit;
	opacity: 0.92;
}

.almc-search-notice__term {
	font-weight: 700;
}

.almc-search-notice a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

.jet-ajax-search__results-header .almc-search-notice {
	margin: 0;
}

/*
 * On the search results page the same line follows the "Resultados para: ..."
 * heading, so it inherits the heading block's own colour and alignment.
 */
.almc-search-notice-wrap {
	display: block;
	width: 100%;
}

h1 .almc-search-notice,
h2 .almc-search-notice,
h3 .almc-search-notice,
.almc-search-notice-wrap .almc-search-notice {
	display: block;
	width: 100%;
	padding: 8px 0 0;
	font-size: 0.42em;
	line-height: 1.4;
	color: inherit;
	font-weight: 400;
	text-align: inherit;
	opacity: 0.9;
}
