/* Hero finder suggestions: a list of popular-search links stacked where
   the placeholder sits, one showing at a time. js/alder-suggest.js rotates
   them with a short vertical slide (transform and opacity only); without
   JS, or under reduced motion, the first one stays. The visible link is
   only as wide as its text and 44px tall, so a tap on it goes to its hub
   and a tap on the rest of the field focuses the input. Typing hides the
   list (.is-typing); the input's own placeholder is the fallback and goes
   transparent while the list shows. Loaded from homepage.tpl.php. */
.al-finder__sug {
  position: absolute; top: 0; bottom: 0; left: 54px; right: 60px;
  margin: 0; padding: 0; list-style: none; pointer-events: none; overflow: hidden;
}
.al-finder__sug li {
  position: absolute; inset: 0; display: flex; align-items: center; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateY(35%);
  transition: transform .3s cubic-bezier(.2, 0, 0, 1), opacity .3s, visibility 0s linear .3s;
}
.al-finder__sug li.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.al-finder__sug li.is-out { opacity: 0; visibility: visible; transform: translateY(-35%); }
/* 35%, not more: through the whole slide either the outgoing or the incoming link still covers the 44px tap band, so a tap during the 300ms never falls through to the input. */
.al-finder__sug a {
  pointer-events: auto; display: inline-flex; align-items: center; max-width: 100%; min-height: 44px;
  font: 400 16px/1 var(--al-sans); color: var(--al-muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-finder__sug a:hover { color: var(--al-ink); }
.al-finder__sug a:focus-visible { outline: 2px solid var(--al-brand); outline-offset: -2px; border-radius: 6px; }
/* The placeholder yields to the list; typing brings it back and hides the list. */
.al-finder:has(.al-finder__sug) .al-finder__input::placeholder { color: transparent; }
.al-finder.has-sug .al-finder__input::placeholder { color: transparent; }
.al-finder.is-typing .al-finder__sug { display: none; }
.al-finder.is-typing .al-finder__input::placeholder { color: var(--al-muted); }
/* Narrow phones (360 to 400): a 15px line and a tighter right reserve (the go button is 50px) so the longest suggestion fits the slot without an ellipsis. */
@media (max-width: 400px) {
  .al-finder__sug { right: 54px; }
  .al-finder__sug a { font-size: 15px; }
}
@media (min-width: 921px) {
  .al-finder__sug { left: 58px; right: 66px; }
  .al-finder__sug a { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-finder__sug li { transition: none; }
}