/* Suggestion dropdown for the headless Places autocomplete (HHPlaces). The is each page's own Tailwind field — untouched. Only the dropdown is ours. Colors reference the compiled Tailwind theme vars (--color-*) so there's a single source of truth, in light + dark (.dark on ). */ .hh-ac-wrap { position: relative; display: block; width: 100%; min-width: 0; /* fill flex rows (e.g. the homepage input + Near Me button) */ } .hh-ac-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin: 0.25rem 0 0; padding: 0.25rem; max-height: 18rem; overflow-y: auto; list-style: none; background-color: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } .hh-ac-menu[hidden] { display: none; } .hh-ac-menu, .hh-ac-option { text-align: left; /* don't inherit centered text from centered hero sections */ } .hh-ac-option { display: flex; flex-direction: column; gap: 0.0625rem; padding: 0.5rem 0.625rem; border-radius: 0.375rem; cursor: pointer; } .hh-ac-option--active, .hh-ac-option:hover { background-color: var(--color-gray-100); } .hh-ac-main { font-size: 0.875rem; line-height: 1.25rem; color: var(--color-gray-900); } .hh-ac-secondary { font-size: 0.75rem; line-height: 1rem; color: var(--color-gray-500); } /* Dark theme — matches our dark panels/inputs. */ .dark .hh-ac-menu { background-color: var(--color-surface-800); border-color: rgb(255 255 255 / 0.1); } .dark .hh-ac-option--active, .dark .hh-ac-option:hover { background-color: rgb(255 255 255 / 0.06); } .dark .hh-ac-main { color: var(--color-white); } .dark .hh-ac-secondary { color: var(--color-gray-400); }