/* Fil: css/page-autocomplete.css */

/* 1) Overlay på hele siden, skjult som standard */
body.search-active::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  pointer-events: none;
}

/* Container for søgefeltet */
.page-search-autocomplete {
  position: relative;
  max-width: 800px;
  width: 100%;
  z-index: 101; /* Over overlay */
}

/* Wrapper (holder positionering for dropdown) */
.page-search-autocomplete .search-wrapper {
  position: relative;
  width: 100%;
  z-index: 101; /* Over overlay */
}

/* Selve søge-inputtet med hvid baggrund og ikon */
.page-search-autocomplete #page-search-input {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px 8px 40px;       /* 40px venstre padding til ikonet */
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 100px;
  background-color: #ffffff;        /* Hvid baggrund */
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" fill="%23666" viewBox="0 0 24 24">\
<path d="M10.5 3a7.5 7.5 0 015.996 12.093l4.206 4.206a1 1 0 01-1.414 1.414l-4.206-4.206A7.5 7.5 0 1110.5 3zm0 2a5.5 5.5 0 100 11 5.5 5.5 0 000-11z"/>\
</svg>');
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
  z-index: 101; /* Over overlay */
}

/* Dropdown-listen for forslag (skjult som standard) */
.page-search-autocomplete .autocomplete-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  max-height: 400px;
  overflow-y: auto;
  z-index: 101; /* Over overlay */
}

/* Vis dropdown når klassen er sat */
.page-search-autocomplete .autocomplete-suggestions.show-suggestions {
  display: block;
}

/* Hvert forslag som flexbox-item */
.page-search-autocomplete .autocomplete-suggestions li {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

/* Fjern nederste kant på sidste item */
.page-search-autocomplete .autocomplete-suggestions li:last-child {
  border-bottom: none;
}

/* Thumbnail-billede */
.page-search-autocomplete .autocomplete-suggestions li img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 12px;
}

/* Placeholder, hvis ingen thumbnail */
.page-search-autocomplete .autocomplete-suggestions li .no-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #ddd;
  margin-right: 12px;
}

/* Tekst-wrapper */
.page-search-autocomplete .autocomplete-suggestions li .text-wrap {
  flex: 1;
}

/* Titel */
.page-search-autocomplete .autocomplete-suggestions li .title {
  display: block;
  font-size: 14px;
  color: #222;
  font-weight: 600;
}

/* Hover-effekt */
.page-search-autocomplete .autocomplete-suggestions li:hover {
  background: #f5f5f5;
}

/* Ingen resultater */
.page-search-autocomplete .autocomplete-suggestions .no-results {
  padding: 8px;
  color: #666;
  cursor: default;
}

/* Gør så <a> fylder hele li’en */
.autocomplete-suggestions li .suggestion-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* MOBIL-TILPASNING: fyld hele skærmbredden */
@media (max-width: 768px) {
  .page-search-autocomplete .autocomplete-suggestions {
    position: fixed !important;
    /* Flyt dropdown’en højere ved at reducere top-værdien */
    top: 100px !important;      
    left: 50% !important;
    transform: translateX(-50%) !important; /* fjern vertical translate for at undgå centring i midten */
    width: 90vw !important;
    max-width: 90vw !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }

body.search-active {
  overflow: hidden;
}
}