/**
 * Plugin Name: ServeLink Static Search Block
 * Description: Custom incremental search block for ECT products with static data
 * Version: 1.0.0
 * Last updated: May 3, 2025
 * Author: ServeLink
 * Author URI: https://servelink.com
 * @copyright  (c) 2025 ServeLink
 *
 * @package    servelink_static_search_block
 * @author     ServeLink
 * @version    1.0.0
 * @license    Proprietary
 * @link       https://servelink.com
 */

/*  Container & Layout  */
.servelink-search-form {
  position: relative;
}
.servelink-search-form .kadence-search-container {
  display: flex;
  position: relative;
  width: 100%;
}

/*  Visually Hidden Label  */
.servelink-search-form .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/*  Search Field  */
.servelink-search-field {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  width: 170px;
  transition: width 0.3s ease-in-out;
}
.servelink-search-field:focus {
  width: 250px;
}

/*  Submit Button  */
.servelink-search-submit {
  background-color: #7d7d7d;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 0 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.servelink-search-submit:hover {
  background-color: #04853f;
}

/*  Dropdown Position & Animation  */
#serveLinkSearchResults {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99;
  background-color: var(--global-palette9,#fff);
  border: 1px solid var(--global-palette7,#edf2f7);
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0,0,0,0.07);
  max-height: 300px;
  overflow-y: auto;

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
#serveLinkSearchResults.open {
  opacity: 1;
  transform: translateY(0);
}

/*  Result Items  */
#serveLinkSearchResults a {
  display: block;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--global-palette7,#edf2f7);
  transition: background-color 0.2s ease-in-out;
}
#serveLinkSearchResults a:last-child {
  border-bottom: none;
}
#serveLinkSearchResults a:hover,
#serveLinkSearchResults a:focus {
  background-color: var(--global-palette1,#f7fafc);
}

/*  Responsive Width  */
@media (max-width: 767px) {
  #serveLinkSearchResults { width: 250px; }
}