/**
 * @file
 * Search suggestions dropdown for the topbar search form.
 *
 * Anchored to the <form> element (position: relative, declared in template.css:473).
 * Positioned to the right edge of the form and extending leftward so it stays
 * within the viewport when the input is in the top-right corner of the page.
 *
 * z-index hierarchy reference (template.css):
 *   header          → 99
 *   dropdown        → 200   (above header, below any modal/overlay)
 *   sticky overlays → 991
 *
 * Brand color: #4274F6 (hover/focus accent, from template.css topbar links).
 */

/* =============================================================================
   Dropdown container
   ============================================================================= */

#search-suggestions-dropdown {
  /* Anchor to the bottom of the form (position: relative set by template.css). */
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;

  /* Wider than the input so full career titles are readable.
     min-width ensures at least 260px; on wider viewports it can grow. */
  min-width: 15.625rem;
  width: auto;

  /* Stacking: above header (z-index 99), below sticky overlays (991). */
  z-index: 200;

  /* Visual */
  background-color: #fff;
  border: 1px solid rgba(77, 77, 79, 0.15);

  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -4px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px;

  /* Scrollable when results exceed visible area. */
  max-height: 320px;
  overflow-y: auto;

  /* Reset list styles. */
  margin: 0;
  list-style: none;

  /* Smooth appearance. */
  animation: uam-suggestions-fadein 0.12s ease-out;
}

@keyframes uam-suggestions-fadein {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   Individual suggestion item
   ============================================================================= */

#search-suggestions-dropdown li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#search-suggestions-dropdown li a {
  display: block;
  padding: .75rem 1rem;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Transition for smooth hover feedback. */
  transition: background-color 0.1s ease, color 0.1s ease;
}

#search-suggestions-dropdown li a:hover,
#search-suggestions-dropdown li a:focus {
  background-color: #fff5f5;
  outline: none;
}

/* Keyboard-focused item: visible focus ring for accessibility. */
#search-suggestions-dropdown li a:focus {
  outline: 2px solid #4274F6;
  outline-offset: -2px;
}

/* Separator between items (subtle). */
#search-suggestions-dropdown li+li {
  border-top: 1px solid #f2f2f2;
}

/* =============================================================================
   "Ver más resultados" footer item
   ============================================================================= */

#search-suggestions-dropdown li.search-suggestions-more {
  border-top: 1px solid #f0f4ff;
}

#search-suggestions-dropdown li.search-suggestions-more a {
  font-weight: 600;
  color: #cb2027;
  text-align: center;
  justify-content: center;
}

#search-suggestions-dropdown li.search-suggestions-more a:hover,
#search-suggestions-dropdown li.search-suggestions-more a:focus {
  background-color: #ffe5e6;
  color: #cb2027;
}

/* =============================================================================
   Responsive
   ============================================================================= */

/* On very small screens the dropdown should not overflow the viewport.
   Cap the width to the usable viewport width minus the topbar horizontal padding. */
@media (max-width: 420px) {
  #search-suggestions-dropdown {
    right: 0;
    left: auto;
    min-width: 200px;
    max-width: calc(100vw - 1rem);
  }

  #search-suggestions-dropdown li a {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}