/* Autosuggest dropdown shared by the header search overlay and the course listing page's own search box (see assets/js/course-search-suggest.js). Appended to and positioned via getBoundingClientRect (left/top/ width set inline by JS) rather than nested in the search box itself — both search boxes use overflow:hidden for their pill shape, which would otherwise clip a dropdown positioned with plain CSS inside them. z-index is above the search overlay's own 1000 so it still shows there too. */ .cras-suggest-dropdown { display: none; position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14); z-index: 1100; max-height: 360px; overflow-y: auto; } .cras-suggest-dropdown.is-open { display: block; } .cras-suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-decoration: none; color: #1a1a1a; font-family: 'Inter', sans-serif; font-size: 14px; border-bottom: 1px solid #f2f2f2; transition: background 0.15s; } .cras-suggest-item:last-child { border-bottom: none; } .cras-suggest-item:hover, .cras-suggest-item.is-active { background: #faf3f3; } .cras-suggest-item img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .cras-suggest-noimg { width: 40px; height: 40px; border-radius: 8px; background: #f5f5f5; color: #b3b3b3; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; } .cras-suggest-name { flex: 1; line-height: 1.35; }