/**
 * Ajax Search Pro — Nelson Labs search page skin
 * ==============================================
 * Restyles ASP's native results output to match the previous custom search
 * design, so the switch from the hand-written search engine to ASP is not a
 * visual change.
 *
 * Loaded only on the "Custom Search Template" page (see nelsonlabs_asp_search_assets()
 * in functions.php), so it cannot affect the header search (instance 1) or the
 * Find-a-Test search (instance 3).
 *
 * ASP's native result markup (includes/views/results/vertical.php):
 *
 *   div.asp_w.asp_r.asp_r_6.vertical
 *     div.results
 *       div.resdrg
 *         div#asp-res-{ID}.item.post_type_{type}      <- post_type_* added by our filter
 *           span.result-badge                          <- injected by our hook
 *           div.asp_content
 *             a.asp_res_image_url > div.asp_image > img
 *             h3 > a.asp_res_url
 *             div.etc > span.asp_date
 *             div.asp_res_text
 *           div.result-meta > a.button                 <- injected by our hook
 *
 * Design tokens are lifted verbatim from style.css (.result-item, .result-badge,
 * .result-title, .result-excerpt, .result-meta .button) so the two stay in sync.
 */

/* ---------------------------------------------------------------------------
   0. Override ASP's own hide/animation rules
   ---------------------------------------------------------------------------
   Diagnosed on staging: ASP rendered 12 result items into the placeholder, but
   the page looked empty. Computed styles showed:

       .asp_r_6      display: none      <- ASP hides the container until it
                                           "shows" results; with resultsposition
                                           = hover that never fires here
       .item         opacity: 0         <- the asp_an_fadeIn animation never ran,
                                           because its container was display:none
       placeholder   height: 0px        <- consequence of the above

   The earlier rules were scoped `.search-wrapper .asp_r.asp_r_6` (0,3,0) and
   were losing to ASP's generated CSS. Everything below is now rooted on
   #wpdreams_asp_results_6 — an ID (1,0,0) outranks any class-based rule ASP
   emits, and it scopes to this instance's results only, so the header search
   (instance 1) and Find-a-Test (instance 3) are untouched.
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6,
#wpdreams_asp_results_6 .asp_r_6 {
	display: block !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
}

/* ASP's entry animations leave items at opacity:0 if they never play. */
#wpdreams_asp_results_6 .asp_r_6,
#wpdreams_asp_results_6 .asp_r_6 .item,
#wpdreams_asp_results_6 .asp_r_6 .asp_content {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
	-webkit-animation: none !important;
	transform: none !important;
}

#wpdreams_asp_results_6 .asp_r_6 .item {
	display: block !important;
	height: auto !important;
	max-height: none !important;
}

/* ---------------------------------------------------------------------------
   0b. Fixes from the first visual QA pass
   --------------------------------------------------------------------------- */

/* FONT — ASP hard-codes its own families via the instance's titlefont /
   descriptionfont / groupbytextfont settings ("font-family:Lato", "Open Sans"),
   which is why results rendered in a different face to the rest of the page.
   Inherit the theme's font instead. */
#wpdreams_asp_results_6,
#wpdreams_asp_results_6 .asp_r_6,
#wpdreams_asp_results_6 .asp_r_6 * {
	font-family: inherit !important;
}

/* ASP writes an inline pixel height onto .results (e.g. style="height:758px"),
   which crops the list and fixes the container size. */
#wpdreams_asp_results_6 .asp_r_6 .results {
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
}

/* GROUPING — instance 6 has group_by = "post_type", so ASP wraps results in
   .asp_results_group and injects headers ("Results from Testing Pages (10)").
   The previous design was a flat list with type badges.
   `display: contents` dissolves the wrapper so the items become direct flex
   children of .results and pick up its 16px gap. */
#wpdreams_asp_results_6 .asp_r_6 .asp_group_header {
	display: none !important;
}

#wpdreams_asp_results_6 .asp_r_6 .asp_results_group {
	display: contents !important;
}

/* Strip ASP's own item margins so .results' gap is the single source of spacing. */
#wpdreams_asp_results_6 .asp_r_6 .results .item {
	margin: 0 !important;
	float: none !important;
}

/* TAXONOMY TERMS AS RESULTS — the "More results" group returns find-a-test terms
   (.asp_r_term). They render with an empty badge and a Read More button whose
   href is "" — a dead link. Hidden here as a stopgap; the real fix is to turn
   them off in the instance settings (see dev/ROADMAP.md). */
#wpdreams_asp_results_6 .asp_r_6 .item.asp_r_term {
	display: none !important;
}

/* Empty badges (terms, or any type with no label) shouldn't leave a gap. */
#wpdreams_asp_results_6 .asp_r_6 .result-badge:empty {
	display: none !important;
}

/* ASP's loader sits at the end of the container. */
#wpdreams_asp_results_6 .asp_r_6 .asp_res_loader {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   1. Results container — strip ASP's chrome, become a plain flow column
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6 .asp_r_6 {
	position: static !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
	opacity: 1 !important;
	visibility: visible !important;
}

#wpdreams_asp_results_6 .asp_r_6 .results {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
}

/* ASP wraps items in a drag container and inserts spacers between them */
#wpdreams_asp_results_6 .asp_r_6 .resdrg {
	display: contents;
}

#wpdreams_asp_results_6 .asp_r_6 .asp_spacer,
#wpdreams_asp_results_6 .asp_r_6 .asp_v_spacer,
#wpdreams_asp_results_6 .asp_r_6 .asp_v_spacer_last,
#wpdreams_asp_results_6 .asp_r_6 .asp_results_top,
#wpdreams_asp_results_6 .asp_r_6 .asp_res_loader,
#wpdreams_asp_results_6 .asp_r_6 .clear {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   2. Result card  (mirrors .result-item)
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6 .asp_r_6 .results .item {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	box-sizing: border-box !important;
	border-radius: 5px !important;
	background: #fff !important;
	box-shadow: -4px 4px 9.6px 2px rgba(0, 0, 0, 0.04) !important;
	border: 0 !important;
	padding: 24px 28px !important;
	margin: 0 !important;
	gap: 0 !important;
	width: auto !important;
	height: auto !important;
	overflow: hidden;
	transition: background-color 0.3s;
}

#wpdreams_asp_results_6 .asp_r_6 .results .item .asp_content {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	overflow: visible !important;
}

/* ---------------------------------------------------------------------------
   3. Type badge  (mirrors .result-badge) — injected by our PHP hook
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge {
	display: block;
	padding: 0 !important;
	margin: 0 0 14px 0 !important;
	white-space: nowrap;
	color: #93c90e;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.26px;
	text-transform: uppercase;
}

#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge + .asp_content {
	padding-top: 0 !important;
}

/* Post type & category colour variants, matching style.css */
#wpdreams_asp_results_6 .asp_r_6 .results .item.post_type_post .result-badge,
#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge.blog,
#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge.blogs,
#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge.article,
#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge.articles,
#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge.published-articles,
#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge.whitepaper,
#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge.whitepapers,
#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge.seminars {
	color: #00afd7;
}

#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge.tradeshows {
	color: #004580;
}

/* ---------------------------------------------------------------------------
   4. Title  (mirrors .result-title)
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6 .asp_r_6 .results .item h3 {
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	font-size: 18px !important;
	line-height: 22px !important;
	font-weight: 700;
}

#wpdreams_asp_results_6 .asp_r_6 .results .item h3 a.asp_res_url {
	color: #000 !important;
	text-decoration: none !important;
	font-size: 18px !important;
	line-height: 22px !important;
	transition: color 0.3s;
}

#wpdreams_asp_results_6 .asp_r_6 .results .item h3 a.asp_res_url:hover {
	color: #00467d !important;
}

/* ---------------------------------------------------------------------------
   5. Excerpt  (mirrors .result-excerpt)
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6 .asp_r_6 .results .item .asp_res_text {
	margin: 0 !important;
	padding: 0 !important;
	color: #000 !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 300 !important;
	line-height: 22px !important;
	background: transparent !important;
}

/* ASP's date/author strip — hidden to match the previous design */
#wpdreams_asp_results_6 .asp_r_6 .results .item .etc {
	display: none !important;
}

/* Thumbnails are not part of the current search design */
#wpdreams_asp_results_6 .asp_r_6 .results .item .asp_image,
#wpdreams_asp_results_6 .asp_r_6 .results .item .asp_res_image_url {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   6. Read More button  (mirrors .result-meta .button) — injected by our PHP hook
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6 .asp_r_6 .results .item .result-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 !important;
	margin-top: 22px !important;
}

#wpdreams_asp_results_6 .asp_r_6 .results .item .result-meta .button {
	display: inline-block;
	text-align: center;
	background: #00afd7;
	border: 0;
	color: #fff;
	text-transform: none;
	text-decoration: none;
	border-radius: 30px;
	padding: 8px 24px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 21px !important;
	transition: background-color 0.3s;
}

#wpdreams_asp_results_6 .asp_r_6 .results .item .result-meta .button:hover,
#wpdreams_asp_results_6 .asp_r_6 .results .item .result-meta .button:focus {
	background: rgb(151, 203, 24);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   6b. "More results" / load-more button
   ---------------------------------------------------------------------------
   ASP has no numbered pagination — its only mechanism is this button, optionally
   with infinite scroll (Layout options → Highlighter and Load more feature).
   Styled to match the Read More pill so it reads as part of the design.

   NOTE: ASP warns that "Load more ajax results" does NOT work while Grouping is
   active, so `group_by` must be set to None for this to function at all.
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6 .asp_showmore_container {
	margin: 24px 0 0;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	text-align: center;
}

#wpdreams_asp_results_6 .asp_showmore_container[style*="display: none"],
#wpdreams_asp_results_6 .asp_showmore_container[style*="display:none"],
#wpdreams_asp_results_6 .asp_showmore_container p.showmore[style*="display: none"],
#wpdreams_asp_results_6 .asp_showmore_container p.showmore[style*="display:none"] {
	display: none !important;
}

#wpdreams_asp_results_6 .asp_showmore_container p.showmore {
	margin: 0;
	padding: 0;
	background: transparent !important;
}

#wpdreams_asp_results_6 a.asp_showmore {
	display: inline-block;
	text-align: center;
	background: #00afd7 !important;
	border: 0 !important;
	color: #fff !important;
	text-transform: none;
	text-decoration: none !important;
	border-radius: 30px;
	padding: 10px 28px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 21px !important;
	transition: background-color 0.3s;
}

#wpdreams_asp_results_6 a.asp_showmore:hover,
#wpdreams_asp_results_6 a.asp_showmore:focus {
	background: rgb(151, 203, 24) !important;
	color: #fff !important;
}

/* Loader shown while the next page is fetched (infinite scroll) */
#wpdreams_asp_results_6 .asp_moreres_loader {
	margin: 20px auto;
}

/* ---------------------------------------------------------------------------
   7. Pagination  (mirrors the previous #pagination-container)
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6 .asp_r_6 .asp_navigation,
#wpdreams_asp_results_6 .asp_pagination {
	display: flex !important;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	background: transparent !important;
	border: 0 !important;
}

#wpdreams_asp_results_6 .asp_pagination .asp_page,
#wpdreams_asp_results_6 .asp_r_6 .asp_navigation a {
	color: #000;
	font-size: 16px;
	line-height: 21px;
	text-decoration: none;
	padding: 2px 6px;
	border: 0;
	background: transparent;
	transition: color 0.3s;
}

#wpdreams_asp_results_6 .asp_pagination .asp_page.current,
#wpdreams_asp_results_6 .asp_pagination .asp_page:hover {
	font-weight: 700;
	color: #00467d;
}

/* ---------------------------------------------------------------------------
   8. "Showing results for …" header
   --------------------------------------------------------------------------- */

.search-wrapper .results-header-search #results-count {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   9. "Did you mean..." and No-Results banner
   --------------------------------------------------------------------------- */

#wpdreams_asp_results_6 .asp_nores,
#wpdreams_asp_results_6 .asp_r_6 .asp_nores,
div.asp_w.asp_r.asp_r_6 .asp_nores,
div.asp_r_6 .asp_nores {
	display: block !important;
	position: static !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0 0 40px 0 !important;
	text-align: left !important;
	color: #000 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
}

#wpdreams_asp_results_6 .asp_nores *,
#wpdreams_asp_results_6 .asp_r_6 .asp_nores *,
div.asp_r_6 .asp_nores * {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

#wpdreams_asp_results_6 .asp_nores .asp_nores_header,
#wpdreams_asp_results_6 .asp_r_6 .asp_nores_header,
div.asp_r_6 .asp_nores .asp_nores_header {
	display: inline !important;
	margin-right: 6px !important;
	color: #000 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
}

#wpdreams_asp_results_6 .asp_nores .asp_nores_header strong,
#wpdreams_asp_results_6 .asp_r_6 .asp_nores_header strong,
div.asp_r_6 .asp_nores .asp_nores_header strong {
	font-weight: 600 !important;
	color: #000 !important;
}

#wpdreams_asp_results_6 .asp_nores .asp_nores_kw_suggestions,
#wpdreams_asp_results_6 .asp_r_6 .asp_nores_kw_suggestions,
div.asp_r_6 .asp_nores .asp_nores_kw_suggestions {
	display: inline !important;
	color: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
}

#wpdreams_asp_results_6 .asp_nores .did-you-mean-label,
#wpdreams_asp_results_6 .asp_nores .asp_did_you_mean,
#wpdreams_asp_results_6 .asp_r_6 .did-you-mean-label,
#wpdreams_asp_results_6 .asp_r_6 .asp_did_you_mean,
div.asp_r_6 .asp_nores .did-you-mean-label,
div.asp_r_6 .asp_nores .asp_did_you_mean {
	color: #e04f38 !important;
	font-weight: 400 !important;
	margin-right: 6px !important;
}

#wpdreams_asp_results_6 .asp_nores .asp_keyword,
#wpdreams_asp_results_6 .asp_r_6 .asp_keyword,
div.asp_r_6 .asp_nores .asp_keyword {
	color: #00467d !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	margin-right: 6px !important;
	padding: 0 !important;
}

#wpdreams_asp_results_6 .asp_nores .asp_keyword:hover,
#wpdreams_asp_results_6 .asp_r_6 .asp_keyword:hover,
div.asp_r_6 .asp_nores .asp_keyword:hover {
	color: #00afd7 !important;
	text-decoration: underline !important;
}

#wpdreams_asp_results_6 .asp_nores.asp_nores_plain,
#wpdreams_asp_results_6 .asp_r_6 .asp_nores.asp_nores_plain,
.search-wrapper .no-results {
	text-align: center;
	padding: 40px 20px;
	color: #666;
	font-size: 1.1rem;
	background: transparent !important;
}

/* ---------------------------------------------------------------------------
   10. Mobile — match the stacked layout from the reference screenshots
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	#wpdreams_asp_results_6 .asp_r_6 .results {
		gap: 12px;
	}

	#wpdreams_asp_results_6 .asp_r_6 .results .item .asp_content {
		padding: 16px !important;
	}

	#wpdreams_asp_results_6 .asp_r_6 .results .item .result-badge {
		padding: 16px 16px 0;
	}

	#wpdreams_asp_results_6 .asp_r_6 .results .item .result-meta {
		padding: 0 16px 16px;
	}
}

/* ---------------------------------------------------------------------------
   11. Search Results Loading Skeleton (Zero-Layout-Shift Shimmer)
   --------------------------------------------------------------------------- */

@keyframes search-skel-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

.search-skeleton {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 24px;
	transition: opacity 0.2s ease;
}

.search-skeleton.search-skeleton-hidden {
	display: none !important;
}

.search-skel-card {
	background: #ffffff;
	border-radius: 8px;
	padding: 24px 28px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border: 1px solid #eef0f3;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.search-skel-shimmer {
	background: linear-gradient(
		90deg,
		#f2f3f5 0%,
		#f2f3f5 35%,
		#e7e9ec 50%,
		#f2f3f5 65%,
		#f2f3f5 100%
	);
	background-size: 200% 100%;
	animation: search-skel-shimmer 1.8s infinite ease-in-out;
	border-radius: 4px;
}

.search-skel-badge {
	width: 85px;
	height: 14px;
	border-radius: 3px;
}

.search-skel-title {
	width: 60%;
	height: 22px;
	border-radius: 4px;
}

.search-skel-desc {
	width: 95%;
	height: 14px;
	border-radius: 4px;
}

.search-skel-desc.short {
	width: 70%;
}

.search-skel-btn {
	width: 115px;
	height: 38px;
	border-radius: 20px;
	margin-top: 4px;
}

@media (max-width: 767px) {
	.search-skel-card {
		padding: 16px;
		gap: 10px;
	}
	.search-skel-title {
		width: 85%;
	}
}