/* The "Card Blocks Search" block / [ulc_search] shortcode. Self-contained (its
   own copies of the colours from ulc-frontend.css), since it's loaded on its
   own in the block editor and can sit outside any .ulc-wrap on the page. */
.ulc-search-block {
	--ulc-ink: #1b1f27;
	--ulc-muted: #6b7280;
	--ulc-border: #e6e8ec;
	--ulc-accent-default: #014aae;
	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	margin-top: 0;
	margin-bottom: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ulc-search-block *,
.ulc-search-block *::before,
.ulc-search-block *::after { box-sizing: inherit; }

.ulc-search-block.aligncenter { margin-left: auto; margin-right: auto; }
.ulc-search-block.alignright { margin-left: auto; margin-right: 0; float: none; }
.ulc-search-block.alignleft { margin-left: 0; margin-right: auto; float: none; }
.ulc-search-block.alignwide,
.ulc-search-block.alignfull { max-width: none; }

.ulc-search-block .ulc-search-field {
	position: relative;
	display: flex;
	align-items: center;
}

.ulc-search-block .ulc-search-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	margin-top: -9px;
	color: var(--ulc-muted);
	pointer-events: none;
	transition: color .15s ease;
}
.ulc-search-block .ulc-search-field:focus-within .ulc-search-icon { color: var(--ulc-accent-default); }

.ulc-search-block .ulc-search-input {
	display: block;
	width: 100%;
	height: 52px;
	min-height: 0;
	margin: 0;
	padding: 0 50px 0 48px;
	border: 1px solid var(--ulc-border);
	border-radius: 999px;
	background: #fff;
	color: var(--ulc-ink);
	font: inherit;
	font-size: 15px;
	line-height: normal;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, .05 );
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.ulc-search-block .ulc-search-input::placeholder { color: var(--ulc-muted); opacity: 1; }
.ulc-search-block .ulc-search-input:hover { border-color: #cfd3da; }
.ulc-search-block .ulc-search-input:focus {
	outline: none;
	border-color: var(--ulc-accent-default);
	box-shadow: 0 0 0 4px rgba( 1, 74, 174, .14 );
}
/* The block has its own clear button, so hide the browser's built-in one. */
.ulc-search-block .ulc-search-input::-webkit-search-cancel-button,
.ulc-search-block .ulc-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.ulc-search-block .ulc-search-clear {
	position: absolute;
	right: 11px;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: -15px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f0f1f3;
	color: var(--ulc-muted);
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.ulc-search-block .ulc-search-clear[hidden] { display: none; }
.ulc-search-block .ulc-search-clear:hover,
.ulc-search-block .ulc-search-clear:focus { background: #e3e5e9; color: var(--ulc-ink); }

/* Dropdown of suggested categories and tools, shown just under the search
   box. ulc-search.js moves this element out of the block to the end of
   <body> and positions it (top / left / width) against the box, so it always
   floats above the rest of the page. Left inside the block it would be
   trapped by the layer or overflow clipping of whatever section the block
   sits in (page-builder rows and columns especially) and get covered by the
   content below. That's also why nothing here is scoped to .ulc-search-block. */
.ulc-search-results {
	--ulc-ink: #1b1f27;
	--ulc-muted: #6b7280;
	--ulc-border: #e6e8ec;
	--ulc-accent-default: #014aae;
	position: fixed;
	z-index: 999999;
	box-sizing: border-box;
	margin: 0;
	padding: 8px;
	max-height: 420px;
	overflow-y: auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	border: 1px solid var(--ulc-border);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 32px rgba( 16, 24, 40, .14 );
	text-align: left;
}
.ulc-search-results *,
.ulc-search-results *::before,
.ulc-search-results *::after { box-sizing: inherit; }
.ulc-search-results[hidden] { display: none; }

.ulc-search-results .ulc-search-heading {
	margin: 0;
	padding: 8px 12px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ulc-muted);
}
.ulc-search-results .ulc-search-message {
	margin: 0;
	padding: 12px;
	font-size: 14px;
	color: var(--ulc-muted);
}

.ulc-search-results .ulc-search-option,
.ulc-search-results .ulc-search-option:visited {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 12px;
	color: var(--ulc-ink);
	text-decoration: none;
	box-shadow: none;
}
.ulc-search-results .ulc-search-option:hover,
.ulc-search-results .ulc-search-option:focus,
.ulc-search-results .ulc-search-option.is-active {
	background: #f3f6fb;
	color: var(--ulc-ink);
	text-decoration: none;
	outline: none;
}

.ulc-search-results .ulc-search-option-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--ulc-border);
	border-radius: 9px;
	background: #f6f7f9;
	color: var(--ulc-muted);
	overflow: hidden;
}
.ulc-search-results .ulc-search-option-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ulc-search-results .ulc-search-option-glyph { display: flex; }

.ulc-search-results .ulc-search-option-text {
	flex: 1 1 auto;
	min-width: 0; /* lets the lines below truncate instead of widening the row */
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.ulc-search-results .ulc-search-option-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ulc-search-results .ulc-search-option-sub {
	font-size: 12px;
	line-height: 1.4;
	color: var(--ulc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ulc-search-results .ulc-search-option-side {
	flex: none;
	max-width: 40%;
	padding: 3px 9px;
	border-radius: 999px;
	background: #f0f1f3;
	color: var(--ulc-ink);
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Visually hidden label — themes usually define this class, but not all do. */
.ulc-search-block .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}