/*
 * Elite Search — Frontend Styles (Elite Elevators Header Theme + Dropdown)
 *
 * Covers:
 *   • Search trigger button (header icon)
 *   • Search dropdown (anchored below trigger, NOT full-screen modal)
 *   • Dropdown caret arrow
 *   • Search form (shared — dropdown + inline/sidebar)
 *   • AJAX suggestions dropdown
 *   • Popular-searches quick-links
 *   • Sidebar widget wrapper
 *   • Search results page
 *   • Result cards
 *   • No-results state
 *   • Pagination
 *   • Keyword highlight <mark>
 *
 * Colors matched to Elite Elevators header:
 *   Background : #0a0a0a  (pure black header)
 *   Text       : #ffffff  (white nav links)
 *   Gold Accent: #C89620  (Contact Us button)
 *
 * @package EliteSearch
 * @version 2.1.0
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Design Tokens — Elite Elevators Black + Gold
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Gold accent (matched from "Contact Us" button) */
  --es-primary:        #C89620;
  --es-primary-dark:   #A67C18;
  --es-primary-light:  rgba(200, 150, 32, 0.15);
  --es-accent:         #E0A830;        /* hover / brighter gold */

  /* Black-based surfaces (matched from header) */
  --es-text:           #FFFFFF;
  --es-text-muted:     #A0A0A0;
  --es-surface:        #141414;        /* dropdown card — near-black like header */
  --es-surface-2:      #0a0a0a;        /* input background — pure header black */
  --es-bg:             #0a0a0a;        /* matches site header bg */
  --es-border:         rgba(200, 150, 32, 0.25); /* gold-tinted border */

  /* Shadows */
  --es-shadow-sm:      0 2px 12px rgba(0, 0, 0, 0.45);
  --es-shadow-md:      0 8px 32px  rgba(0, 0, 0, 0.55);
  --es-shadow-lg:      0 20px 60px rgba(0, 0, 0, 0.70);

  /* Shape */
  --es-radius-sm:      8px;
  --es-radius-md:      12px;
  --es-radius-lg:      18px;
  --es-radius-pill:    999px;

  /* Motion */
  --es-transition:     0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --es-font:           'Inter', 'Outfit', system-ui, -apple-system, sans-serif;

  /* Dropdown geometry */
  --es-dropdown-width: 380px;
  --es-input-height:   48px;
  --es-caret-size:     10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Trigger Button (header icon)
   ───────────────────────────────────────────────────────────────────────────── */
.elite-search-trigger {
  position:         relative;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            38px;
  height:           38px;
  padding:          0;
  background:       transparent;
  border:           none;
  border-radius:    var(--es-radius-pill);
  /* Always white so it shows on the black header — both normal and sticky scroll */
  color:            #ffffff;
  cursor:           pointer;
  transition:       background var(--es-transition),
                    color var(--es-transition);
}

.elite-search-trigger:hover,
.elite-search-trigger:focus-visible {
  background: rgba(200, 150, 32, 0.18); /* gold tint on hover */
  color:      var(--es-primary);
  outline:    none;
}

.elite-search-trigger.is-active {
  color:      var(--es-primary);
  background: rgba(200, 150, 32, 0.18);
}

.elite-search-icon {
  font-size:   18px;
  line-height: 1;
  display:     block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Dropdown Panel
   Uses position:fixed so it escapes any overflow:hidden on the sticky header.
   JS calculates and sets top/left/right via inline style on open.
   ───────────────────────────────────────────────────────────────────────────── */



.elite-search-popup {
  /* Fixed so it always escapes overflow:hidden on sticky/absolute headers */
  position:      fixed;
  z-index:       999999;
  width:         var(--es-dropdown-width);
  max-width:     calc(100vw - 16px);
  background:    var(--es-surface);
  border:        1.5px solid var(--es-border);
  border-radius: var(--es-radius-lg);
  box-shadow:    var(--es-shadow-lg);

  /* top / right are set by JS via inline style */

  /* Hidden by default */
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transform:      translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition:     transform var(--es-transition),
                  opacity   var(--es-transition),
                  visibility var(--es-transition);
}

.elite-search-popup.is-open {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateY(0) scale(1);
}

/* ── Caret / arrow ───────────────────────────────────────────────────────── */
.elite-search-popup__caret {
  position: absolute;
  top:      calc(var(--es-caret-size) * -1);
  right:    18px;
  width:    0;
  height:   0;
  border-left:  var(--es-caret-size) solid transparent;
  border-right: var(--es-caret-size) solid transparent;
  border-bottom: var(--es-caret-size) solid var(--es-border);
}

.elite-search-popup__caret::after {
  content:  '';
  position: absolute;
  top:      2px;
  left:     calc(var(--es-caret-size) * -1 + 1px);
  width:    0;
  height:   0;
  border-left:   calc(var(--es-caret-size) - 1px) solid transparent;
  border-right:  calc(var(--es-caret-size) - 1px) solid transparent;
  border-bottom: calc(var(--es-caret-size) - 1px) solid var(--es-surface);
}

/* ── Dropdown inner content ──────────────────────────────────────────────── */
.elite-search-popup__inner {
  padding: 20px 18px 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Search Form (shared — dropdown + inline/sidebar)
   ───────────────────────────────────────────────────────────────────────────── */
.elite-search-form__field {
  position:      relative;
  display:       flex;
  align-items:   center;
  background:    var(--es-surface-2);
  border:        1.5px solid var(--es-border);
  border-radius: var(--es-radius-md);
  transition:    border-color var(--es-transition), box-shadow var(--es-transition);
  overflow:      hidden;
}

.elite-search-form__field:focus-within {
  border-color: var(--es-primary);
  box-shadow:   0 0 0 3px var(--es-primary-light);
}

.elite-search-form__input {
  flex:            1;
  height:          var(--es-input-height);
  padding:         0 14px;
  font-family:     var(--es-font);
  font-size:       15px;
  color:           var(--es-text);
  background:      transparent;
  border:          none;
  outline:         none;
  appearance:      none;
  -webkit-appearance: none;
}

.elite-search-form__input::placeholder {
  color: var(--es-text-muted);
}

/* Remove browser's native search × button */
.elite-search-form__input::-webkit-search-cancel-button,
.elite-search-form__input::-webkit-search-decoration {
  display: none;
}

.elite-search-form__submit,
.elite-search-form__clear {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           44px;
  height:          var(--es-input-height);
  background:      transparent;
  border:          none;
  cursor:          pointer;
  color:           var(--es-text-muted);
  transition:      color var(--es-transition), background var(--es-transition);
}

.elite-search-form__submit {
  background:    var(--es-primary);
  color:         #fff;
  border-radius: 0 calc(var(--es-radius-md) - 2px) calc(var(--es-radius-md) - 2px) 0;
  transition:    background var(--es-transition);
}

.elite-search-form__submit:hover,
.elite-search-form__submit:focus-visible {
  background: var(--es-primary-dark);
  outline:    none;
}

.elite-search-form__clear:hover {
  color: var(--es-accent);
}

.elite-search-form__clear[hidden] {
  display: none;
}

/* Inline variant (sidebar) */
.elite-search-form--inline .elite-search-form__input {
  height:    46px;
  font-size: 14px;
}

.elite-search-form--inline .elite-search-form__submit,
.elite-search-form--inline .elite-search-form__clear {
  height: 46px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   AJAX Suggestions (inside dropdown)
   ───────────────────────────────────────────────────────────────────────────── */
.elite-search-suggestions {
  margin-top:    10px;
  border-radius: var(--es-radius-md);
  overflow:      hidden;
  background:    var(--es-surface-2);
  border:        1.5px solid var(--es-border);
  display:       none;
}

.elite-search-suggestions.is-visible {
  display:   block;
  animation: es-fade-in 0.16s ease;
}

.elite-suggestion-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 14px;
  cursor:      pointer;
  transition:  background var(--es-transition);
  text-decoration: none;
  color:           var(--es-text);
  border-bottom:   1px solid var(--es-border);
}

.elite-suggestion-item:last-child {
  border-bottom: none;
}

.elite-suggestion-item:hover,
.elite-suggestion-item:focus-visible,
.elite-suggestion-item.is-highlighted {
  background: var(--es-primary-light);
  color:      var(--es-primary);
  outline:    none;
}

.elite-suggestion-item__thumb {
  width:         32px;
  height:        32px;
  border-radius: var(--es-radius-sm);
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--es-surface);
}

.elite-suggestion-item__thumb-placeholder {
  width:            32px;
  height:           32px;
  border-radius:    var(--es-radius-sm);
  background:       var(--es-primary-light);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  color:            var(--es-primary);
}

.elite-suggestion-item__title {
  flex:          1;
  font-size:     13px;
  font-weight:   500;
  font-family:   var(--es-font);
  line-height:   1.3;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

.elite-suggestion-item__type {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--es-primary);
  background:     var(--es-primary-light);
  padding:        2px 6px;
  border-radius:  var(--es-radius-pill);
  flex-shrink:    0;
}

/* Inline (sidebar) suggestions */
.elite-search-suggestions--inline {
  position:   relative;
  z-index:    10;
  box-shadow: var(--es-shadow-md);
}

/* Loading state */
.elite-search-suggestions__loading {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     12px 14px;
  font-size:   13px;
  color:       var(--es-text-muted);
}

.elite-search-suggestions__spinner {
  width:            16px;
  height:           16px;
  border:           2px solid rgba(200, 150, 32, 0.25);
  border-top-color: var(--es-primary);
  border-radius:    50%;
  animation:        es-spin 0.7s linear infinite;
  flex-shrink:      0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Popular / Quick-links
   ───────────────────────────────────────────────────────────────────────────── */
.elite-search-popular {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         6px;
  margin-top:  14px;
  padding-top: 12px;
  border-top:  1px solid var(--es-border);
}

.elite-search-popular__label {
  font-size:      11px;
  font-weight:    600;
  color:          var(--es-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width:          100%;
  margin-bottom:  2px;
}

.elite-search-popular__tag {
  display:         inline-flex;
  align-items:     center;
  padding:         4px 11px;
  font-size:       12px;
  font-weight:     500;
  color:           var(--es-primary);
  background:      var(--es-primary-light);
  border-radius:   var(--es-radius-pill);
  text-decoration: none;
  transition:      background var(--es-transition),
                   color      var(--es-transition),
                   transform  var(--es-transition);
}

.elite-search-popular__tag:hover {
  background: var(--es-primary);
  color:      #fff;
  transform:  translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Sidebar Widget
   ───────────────────────────────────────────────────────────────────────────── */
.elite-search-widget {
  font-family:   var(--es-font);
  background:    #ffffff;
  border-radius: 12px;
  padding:       30px;
  margin-bottom: 30px;
}

.elite-search-widget__title {
  font-size:      22px;
  font-weight:    700;
  color:          #000000;
  margin:         0 0 25px;
  position:       relative;
  padding-bottom: 12px;
}

.elite-search-widget__title::after {
  content:  "";
  position: absolute;
  left:     0;
  bottom:   0;
  width:    40px;
  height:   2px;
  background-color: #000000;
}

/* Override form styles for inline widget to match design */
.elite-search-form--inline .elite-search-form__field {
  background:    #ffffff;
  border:        1px solid #000000;
  border-radius: 8px;
}

.elite-search-form--inline .elite-search-form__input {
  color: #000000;
}

.elite-search-form--inline .elite-search-form__input::placeholder {
  color: #666666;
}

.elite-search-form--inline .elite-search-form__submit {
  background: transparent;
  color:      #000000;
  border-radius: 0;
}

.elite-search-form--inline .elite-search-form__submit:hover,
.elite-search-form--inline .elite-search-form__submit:focus-visible {
  background: transparent;
  color:      var(--es-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Search Results Page
   ───────────────────────────────────────────────────────────────────────────── */
.elite-results-page {
  font-family: var(--es-font);
  min-height:  60vh;
  padding:     48px 0 80px;
}

.elite-results-container {
  max-width: 860px;
  margin:    0 auto;
  padding:   0 20px;
}

/* Results Header */
.elite-results-header {
  margin-bottom:  40px;
  padding-bottom: 32px;
  border-bottom:  2px solid var(--es-border);
}

.elite-results-header__meta {
  display:       flex;
  align-items:   center;
  gap:           6px;
  margin-bottom: 8px;
}

.elite-results-header__keyword-label {
  font-size:   13px;
  color:       var(--es-text-muted);
  font-weight: 500;
}

.elite-results-header__keyword {
  font-size:   13px;
  font-weight: 700;
  color:       var(--es-primary);
}

.elite-results-header__title {
  font-size:   28px;
  font-weight: 800;
  color:       var(--es-text);
  margin:      0 0 24px;
  line-height: 1.2;
}

.elite-results-header__search {
  max-width: 520px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Result Cards
   ───────────────────────────────────────────────────────────────────────────── */
.elite-results-list {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

.elite-result-card {
  display:       flex;
  align-items:   flex-start;
  gap:           24px;
  background:    var(--es-surface);
  border:        1.5px solid var(--es-border);
  border-radius: var(--es-radius-md);
  padding:       24px;
  transition:    box-shadow   var(--es-transition),
                 transform    var(--es-transition),
                 border-color var(--es-transition);
}

.elite-result-card:hover {
  box-shadow:   var(--es-shadow-md);
  transform:    translateY(-2px);
  border-color: var(--es-primary);
}

.elite-result-card__thumb-link {
  flex-shrink: 0;
}

.elite-result-card__thumb {
  width:         120px;
  height:        90px;
  object-fit:    cover;
  border-radius: var(--es-radius-sm);
  display:       block;
}

.elite-result-card__thumb-placeholder {
  width:           120px;
  height:          90px;
  border-radius:   var(--es-radius-sm);
  background:      linear-gradient(135deg, var(--es-primary-light) 0%, rgba(166, 124, 24, 0.12) 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--es-primary);
  flex-shrink:     0;
}

.elite-result-card__body {
  flex:      1;
  min-width: 0;
}

.elite-result-card__type {
  display:        inline-block;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--es-primary);
  background:     var(--es-primary-light);
  padding:        3px 9px;
  border-radius:  var(--es-radius-pill);
  margin-bottom:  8px;
}

.elite-result-card__title {
  font-size:   17px;
  font-weight: 700;
  margin:      0 0 8px;
  line-height: 1.35;
  color:       var(--es-text);
}

.elite-result-card__title-link {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--es-transition);
}

.elite-result-card__title-link:hover {
  color: var(--es-primary);
}

.elite-result-card__excerpt {
  font-size:   14px;
  line-height: 1.65;
  color:       var(--es-text-muted);
  margin:      0 0 12px;
  display:             -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.elite-result-card__meta {
  display:       flex;
  align-items:   center;
  gap:           14px;
  font-size:     12px;
  color:         var(--es-text-muted);
  margin-bottom: 14px;
}

.elite-result-card__date::before {
  content: '📅 ';
}

.elite-result-card__read-time::before {
  content: '⏱ ';
}

.elite-result-card__cta {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       13px;
  font-weight:     700;
  color:           var(--es-primary);
  text-decoration: none;
  padding:         6px 16px;
  border:          1.5px solid var(--es-primary);
  border-radius:   var(--es-radius-pill);
  transition:      background var(--es-transition),
                   color      var(--es-transition),
                   transform  var(--es-transition);
}

.elite-result-card__cta:hover {
  background: var(--es-primary);
  color:      #fff;
  transform:  translateX(3px);
}

/* Keyword highlight */
mark.elite-highlight {
  background:    var(--es-primary-light);
  color:         var(--es-primary);
  border-radius: 3px;
  padding:       0 2px;
  font-style:    normal;
}

/* ─────────────────────────────────────────────────────────────────────────────
   No Results State
   ───────────────────────────────────────────────────────────────────────────── */
.elite-no-results {
  text-align: center;
  padding:    64px 32px;
}

.elite-no-results__icon {
  color:         var(--es-primary-light);
  margin-bottom: 24px;
}

.elite-no-results__icon svg {
  stroke:  var(--es-primary);
  opacity: 0.35;
}

.elite-no-results__heading {
  font-size:   26px;
  font-weight: 800;
  color:       var(--es-text);
  margin:      0 0 12px;
}

.elite-no-results__body {
  font-size:   15px;
  color:       var(--es-text-muted);
  max-width:   480px;
  margin:      0 auto 28px;
  line-height: 1.7;
}

.elite-no-results__browse {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         12px 28px;
  background:      var(--es-primary);
  color:           #fff;
  border-radius:   var(--es-radius-pill);
  font-weight:     700;
  font-size:       14px;
  text-decoration: none;
  transition:      background var(--es-transition), transform var(--es-transition);
}

.elite-no-results__browse:hover {
  background: var(--es-primary-dark);
  transform:  translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Pagination
   ───────────────────────────────────────────────────────────────────────────── */
.elite-results-pagination {
  margin-top: 48px;
}

.elite-results-pagination .page-numbers {
  display:         inline-flex;
  flex-wrap:       wrap;
  gap:             6px;
  list-style:      none;
  margin:          0;
  padding:         0;
  justify-content: center;
}

.elite-results-pagination .page-numbers li {
  margin: 0;
}

.elite-results-pagination .page-numbers a,
.elite-results-pagination .page-numbers span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       38px;
  height:          38px;
  padding:         0 10px;
  border-radius:   var(--es-radius-sm);
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  transition:      background var(--es-transition), color var(--es-transition);
  color:           var(--es-text-muted);
  border:          1.5px solid var(--es-border);
  background:      var(--es-surface);
}

.elite-results-pagination .page-numbers a:hover {
  background:   var(--es-primary-light);
  color:        var(--es-primary);
  border-color: var(--es-primary);
}

.elite-results-pagination .page-numbers .current {
  background:   var(--es-primary);
  color:        #fff;
  border-color: var(--es-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Animations
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes es-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes es-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .elite-result-card {
    flex-direction: column;
    gap:            16px;
  }

  .elite-result-card__thumb,
  .elite-result-card__thumb-placeholder {
    width:  100%;
    height: 180px;
  }

  .elite-results-header__title {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}