/**
 * Autocomplete dropdown styles.
 *
 * Scoped to .cnstrc-autocomplete-dropdown so nothing bleeds out into the
 * rest of the page. The dropdown is absolutely-positioned relative to the
 * closest positioned ancestor — the JS inserts it immediately after the
 * search input, so wrap the input in a position:relative container if the
 * theme doesn't already do that (Elementor's off-canvas widget does).
 *
 * Class inventory (matches what autocomplete.js renders):
 *   .cnstrc-autocomplete-dropdown  — the outer container / panel
 *   .cnstrc-section-label          — "Suggestions" / "Articles" headings
 *   .cnstrc-suggestion-item        — a keyword suggestion row
 *   .cnstrc-content-item           — an article result row
 *   .cnstrc-content-item__title    — title text span inside a content item
 *   .cnstrc-active                 — keyboard-focused item (added via JS)
 */

/* ---------------------------------------------------------------------------
   Dropdown panel
--------------------------------------------------------------------------- */

/* Remove any bottom margin the theme applies to the input so the dropdown
   sits flush against it without a gap. */
.e-search-input,
[data-cnstrc-search-input] {
	margin-bottom: 0 !important;
}

.cnstrc-autocomplete-dropdown {
	position: absolute;
	top: 100%;         /* flush below the input */
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	border: 1px solid #d8d8d8;
	border-top: none;  /* input bottom-border acts as the top edge */
	border-radius: 0 0 4px 4px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.12 );
	max-height: 420px;
	overflow-y: auto;

	/* Typography baseline — theme fonts will inherit naturally */
	font-size: 14px;
	line-height: 1.4;
	color: #222;
	font-family: Arial;
}

/* ---------------------------------------------------------------------------
   Section labels
--------------------------------------------------------------------------- */
.cnstrc-autocomplete-dropdown .cnstrc-section-label {
	padding: 8px 14px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #888;

	/* Separator above every label except the very first one */
	border-top: 1px solid #ececec;
}

.cnstrc-autocomplete-dropdown .cnstrc-section-label:first-child {
	border-top: none;
}

/* ---------------------------------------------------------------------------
   Shared item styles (suggestion + content)
--------------------------------------------------------------------------- */
.cnstrc-autocomplete-dropdown .cnstrc-suggestion-item,
.cnstrc-autocomplete-dropdown .cnstrc-content-item {
	display: block;
	padding: 9px 14px;
	cursor: pointer;
	transition: background 0.1s ease, color 0.1s ease;
	border-top: 1px solid #f2f2f2;

	/* Prevent long titles from overflowing the panel */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cnstrc-autocomplete-dropdown .cnstrc-suggestion-item:first-of-type,
.cnstrc-autocomplete-dropdown .cnstrc-content-item:first-of-type {
	border-top: none;
}

/* ---------------------------------------------------------------------------
   Hover & focus (keyboard) states
--------------------------------------------------------------------------- */
.cnstrc-autocomplete-dropdown .cnstrc-suggestion-item:hover,
.cnstrc-autocomplete-dropdown .cnstrc-suggestion-item.cnstrc-active,
.cnstrc-autocomplete-dropdown .cnstrc-content-item:hover,
.cnstrc-autocomplete-dropdown .cnstrc-content-item.cnstrc-active {
	background: #f6f6f6;
	color: #000;
}

/* ---------------------------------------------------------------------------
   Suggestion items — search icon prefix
--------------------------------------------------------------------------- */
.cnstrc-autocomplete-dropdown .cnstrc-suggestion-item::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	vertical-align: middle;
	opacity: 0.45;

	/* Inline SVG magnifying glass so there's no extra HTTP request */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23222' stroke-width='1.5'/%3E%3Cline x1='10.5' y1='10.5' x2='14' y2='14' stroke='%23222' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------------------------------------------------------------------
   Content items — article title
--------------------------------------------------------------------------- */
.cnstrc-autocomplete-dropdown .cnstrc-content-item__title {
	display: block;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}