/*
 * HB Search dropdown. Restyle by overriding the --hbs-* custom properties on :root or .hb-search.
 * Fonts follow Elementor's Global Fonts (Site Settings → Global Fonts): Primary for headings and
 * result titles, Text for everything else. Override with --hbs-heading-font / --hbs-font.
 */
.hbs-host { position: relative; }

/*
 * Hello Elementor's reset gives focused inputs a 4px white box-shadow ring, which spills outside the
 * search pill. Drop it on the field and show keyboard focus on the whole host instead.
 */
.hbs-host input[type="search"]:focus,
.hbs-host input[type="search"]:focus-visible { box-shadow: none; outline: 0; }
.hbs-host:has(input[type="search"]:focus-visible) {
	outline: 2px solid var(--hbs-focus-ring, #ffef00);
	outline-offset: 2px;
}

.hbs-panel {
	position: absolute;
	top: calc(100% + var(--hbs-offset-y, 14px));
	right: var(--hbs-offset-x, -22px);
	width: var(--hbs-width, 640px);
	max-width: calc(100vw - 48px);
	max-height: var(--hbs-max-height, 70vh);
	overflow-y: auto;
	z-index: 10000;
	padding: 8px 0;
	background: var(--hbs-bg, #fff);
	color: var(--hbs-text, #1a1a1a);
	border-radius: var(--hbs-radius, 25px);
	box-shadow: var(--hbs-shadow, 0 12px 40px rgba(0, 0, 0, .25));
	font-family: var(--hbs-font, var(--e-global-typography-text-font-family, system-ui)), sans-serif;
	font-weight: var(--e-global-typography-text-font-weight, 400);
	font-size: 15px;
	line-height: 1.35;
	text-align: left;
}
.hbs-panel[hidden] { display: none; }

.hbs-corrected,
.hbs-empty { padding: 10px 24px; color: var(--hbs-muted, #666); }

.hbs-group + .hbs-group { border-top: 1px solid var(--hbs-divider, rgba(0, 0, 0, .08)); }
.hbs-group__title {
	padding: 12px 24px 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-family: var(--hbs-heading-font, var(--e-global-typography-primary-font-family, Georgia)), serif;
	color: var(--hbs-muted, #666);
}

/* a.hbs-* selectors outrank theme/Elementor-kit link colours (e.g. `.elementor-kit-N a`). */
.hbs-panel a.hbs-item,
.hbs-panel a.hbs-item:hover,
.hbs-panel a.hbs-item:focus {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 8px 24px;
	color: var(--hbs-text, #1a1a1a);
	text-decoration: none;
}
.hbs-item.is-active,
.hbs-see-all.is-active { background: var(--hbs-active-bg, rgba(0, 0, 0, .06)); }

.hbs-item__thumb {
	flex: 0 0 var(--hbs-thumb-size, 48px);
	width: var(--hbs-thumb-size, 48px);
	height: var(--hbs-thumb-size, 48px);
	border-radius: 8px;
	overflow: hidden;
	background: var(--hbs-thumb-bg, #eee);
}
.hbs-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hbs-item__body { display: flex; flex-direction: column; min-width: 0; }
.hbs-item__title {
	font-family: var(--hbs-heading-font, var(--e-global-typography-primary-font-family, Georgia)), serif;
	font-weight: var(--e-global-typography-primary-font-weight, 700);
}
.hbs-item__snippet {
	font-size: 13px;
	color: var(--hbs-muted, #666);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hbs-panel mark { background: var(--hbs-mark-bg, #ffef00); color: inherit; padding: 0 1px; border-radius: 2px; }

.hbs-panel a.hbs-see-all,
.hbs-panel a.hbs-see-all:hover,
.hbs-panel a.hbs-see-all:focus {
	display: block;
	padding: 6px 24px 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hbs-accent, #1a1a1a);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.hbs-panel {
		position: fixed;
		top: var(--hbs-mobile-top, 80px);
		left: 16px;
		right: 16px;
		width: auto;
		max-width: none;
	}
}