/* =============================================================
   GLOBAL HEADER SEARCH BAR
   File  : assets/css/global-search.css
   Scope : Astra theme — search inside primary nav
   ============================================================= */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --gs-accent       : #2563eb;       /* Primary blue                   */
  --gs-accent-hover : #1d4ed8;       /* Darker blue on hover           */
  --gs-bg           : #ffffff;       /* Dropdown / input background    */
  --gs-border       : #e5e7eb;       /* Subtle border                  */
  --gs-text         : #111827;       /* Primary text                   */
  --gs-muted        : #6b7280;       /* Meta / tag text                */
  --gs-hover-bg     : #f3f4f6;       /* Result item hover background   */
  --gs-shadow       : 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --gs-radius       : 100px;         /* Rounded pill input             */
  --gs-radius-drop  : 14px;          /* Dropdown card radius           */
  --gs-transition   : 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --gs-input-w      : 260px;         /* Expanded width                 */
  --gs-input-w-lg   : 320px;         /* Wide screen expanded width     */
}

/* ── Suppress transition flash on initial page load ────────── */
.gs-preload .gs-input {
  transition: none !important;
}

/* ── Wrapper injected after nav ────────────────────────────── */
.gs-wrapper {
  position  : relative;
  display   : flex;
  align-items: center;     /* Gap from last nav item */
  flex-shrink: 0;
}

/* ── Search Form ────────────────────────────────────────────── */
.gs-form {
  position : relative;
  display  : flex;
  align-items: center;
}

/* ── The Input ──────────────────────────────────────────────── */
.gs-input {
  width           : 0;
  max-width       : var(--gs-input-w);
  padding         : 9px 38px 9px 38px;
  border          : 1.5px solid transparent;
  border-radius   : var(--gs-radius);
  background      : transparent;
  color           : var(--gs-text);
  font-size       : 14px;
  font-family     : inherit;
  line-height     : 1.4;
  outline         : none;
  opacity         : 0;
  pointer-events  : none;
  transition      : width var(--gs-transition),
                    opacity var(--gs-transition),
                    border-color var(--gs-transition),
                    background var(--gs-transition),
                    box-shadow var(--gs-transition);
  white-space     : nowrap;
  overflow        : hidden;
}

/* Expanded state */
.gs-wrapper.is-open .gs-input {
  width        : 222px;
  opacity      : 1;
  pointer-events: auto;
  background   : var(--gs-bg);
  border-color : var(--gs-accent);
  box-shadow   : 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.gs-input::placeholder {
  color : var(--gs-muted);
}

/* ── Search Icon Button (toggle) ────────────────────────────── */
.gs-btn-toggle {
  position         : absolute;
  left             : 0;
  top              : 50%;
  transform        : translateY(-50%);
  z-index          : 2;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  width            : 36px;
  height           : 36px;
  border           : none;
  background       : transparent;
  cursor           : pointer;
  border-radius    : 50%;
  color            : var(--gs-muted);
  transition       : color var(--gs-transition),
                     background var(--gs-transition);
  padding          : 0;
  line-height      : 1;
}

.gs-btn-toggle:hover,
.gs-wrapper.is-open .gs-btn-toggle {
  color      : var(--gs-accent);
  background : rgba(37, 99, 235, 0.06);
}

.gs-btn-toggle svg {
  pointer-events: none;
  display       : block;
}

/* ── Close "×" Button ───────────────────────────────────────── */
.gs-btn-close {
  position         : absolute;
  right            : 6px;
  top              : 50%;
  transform        : translateY(-50%);
  z-index          : 2;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  width            : 24px;
  height           : 24px;
  border           : none;
  background       : transparent;
  cursor           : pointer;
  border-radius    : 50%;
  color            : var(--gs-muted);
  font-size        : 16px;
  line-height      : 1;
  padding          : 0;
  opacity          : 0;
  pointer-events   : none;
  transition       : opacity var(--gs-transition),
                     color var(--gs-transition),
                     background var(--gs-transition);
}

.gs-wrapper.is-open .gs-btn-close {
  opacity       : 1;
  pointer-events: auto;
}

.gs-btn-close:hover {
  color      : var(--gs-text);
  background : var(--gs-border);
}

/* ── Dropdown ───────────────────────────────────────────────── */
.gs-dropdown {
  position      : absolute;
  top           : calc(100% + 10px);
  left          : 0;
  right         : 0;
  min-width     : 340px;
  max-width     : 400px;
  background    : var(--gs-bg);
  border        : 1px solid var(--gs-border);
  border-radius : var(--gs-radius-drop);
  box-shadow    : var(--gs-shadow);
  overflow      : hidden;
  z-index       : 99999;
  /* Animation */
  opacity       : 0;
  transform     : translateY(-6px) scale(0.98);
  pointer-events: none;
  transition    : opacity var(--gs-transition),
                  transform var(--gs-transition);
}

.gs-dropdown.is-visible {
  opacity       : 1;
  transform     : translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Results list ───────────────────────────────────────────── */
.gs-results-list {
  list-style   : none;
  margin       : 0;
  padding      : 6px 0;
  max-height   : 368px;    /* ≈ 6 items */
  overflow-y   : auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gs-border) transparent;
}

.gs-results-list::-webkit-scrollbar        { width: 4px; }
.gs-results-list::-webkit-scrollbar-thumb  { background: var(--gs-border); border-radius: 4px; }

/* ── Single Result Item ─────────────────────────────────────── */
.gs-result-item {
  display         : flex;
  align-items     : center;
  gap             : 12px;
  padding         : 11px 16px;
  cursor          : pointer;
  border-left     : 3px solid transparent;
  transition      : background var(--gs-transition),
                    border-color var(--gs-transition);
  text-decoration : none;
  color           : inherit;
}

.gs-result-item:hover,
.gs-result-item.is-active {
  background   : var(--gs-hover-bg);
  border-left-color: var(--gs-accent);
}

.gs-result-info {
  flex      : 1;
  min-width : 0;          /* allow text-overflow on children */
}

.gs-result-title {
  display        : block;
  font-size      : 14px;
  font-weight    : 600;
  color          : var(--gs-text);
  line-height    : 1.35;
  white-space    : nowrap;
  overflow       : hidden;
  text-overflow  : ellipsis;
}

.gs-result-tag {
  display     : inline-flex;
  align-items : center;
  margin-top  : 3px;
  font-size   : 11px;
  font-weight : 500;
  color       : var(--gs-accent);
  background  : rgba(37, 99, 235, 0.08);
  padding     : 2px 8px;
  border-radius: 100px;
  line-height  : 1.6;
  max-width    : 100%;
  overflow     : hidden;
  white-space  : nowrap;
  text-overflow: ellipsis;
}

.gs-result-arrow {
  flex-shrink  : 0;
  color        : var(--gs-border);
  transition   : color var(--gs-transition), transform var(--gs-transition);
}

.gs-result-item:hover .gs-result-arrow,
.gs-result-item.is-active .gs-result-arrow {
  color     : var(--gs-accent);
  transform : translateX(3px);
}

/* ── Keyword highlight ──────────────────────────────────────── */
.gs-highlight {
  background  : rgba(37, 99, 235, 0.15);
  color       : var(--gs-accent);
  border-radius: 2px;
  font-weight : 700;
  padding     : 0 1px;
}

/* ── Loading spinner ────────────────────────────────────────── */
.gs-loading,
.gs-no-results {
  padding     : 18px 16px;
  text-align  : center;
  font-size   : 13px;
  color       : var(--gs-muted);
  display     : flex;
  align-items : center;
  justify-content: center;
  gap         : 8px;
}

.gs-spinner {
  width            : 16px;
  height           : 16px;
  border           : 2px solid var(--gs-border);
  border-top-color : var(--gs-accent);
  border-radius    : 50%;
  animation        : gs-spin 0.7s linear infinite;
  flex-shrink      : 0;
}

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

/* ── Dropdown footer (view all link) ────────────────────────── */
.gs-dropdown-footer {
  border-top  : 1px solid var(--gs-border);
  padding     : 10px 16px;
  display     : flex;
  justify-content: flex-end;
}

.gs-view-all {
  font-size      : 12px;
  font-weight    : 600;
  color          : var(--gs-accent);
  text-decoration: none;
  letter-spacing : 0.02em;
  transition     : color var(--gs-transition);
}

.gs-view-all:hover { color: var(--gs-accent-hover); }

/* =============================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ============================================================= */
@media (max-width: 1024px) {
  :root {
    --gs-input-w    : 220px;
  }
}

/* =============================================================
   RESPONSIVE — Mobile (≤ 921px) — Astra mobile breakpoint
   ============================================================= */
@media (max-width: 921px) {
  /* Search wrapper: full width bar at the top of the mobile menu */
  .gs-wrapper {
    order       : -1;         /* push to top when inside flex container  */
    margin-left : 0;
    width       : 100%;
    padding     : 12px 16px 8px;
    box-sizing  : border-box;
    border-bottom: 1px solid var(--gs-border);
    border-top  : none;
    display     : flex;
    /* display: none; */
  }

  .gs-form {
    width: 100%;
  }

  /* Always show the input fully expanded on mobile */
  .gs-input {
    width         : 100% !important;
    max-width     : 100% !important;
    opacity       : 1 !important;
    pointer-events: auto !important;
    background    : var(--gs-hover-bg) !important;
    border-color  : var(--gs-border) !important;
    box-shadow    : none !important;
    padding-left  : 42px !important;
  }

  /* Search icon stays decorative — disable its toggle click */
  .gs-btn-toggle {
    pointer-events: none;
    color: var(--gs-muted) !important;
    background: transparent !important;
  }

  /* Always show the clear button */
  .gs-btn-close {
    opacity       : 1 !important;
    pointer-events: auto !important;
  }

  .gs-dropdown {
    left         : 0;
    right        : 0;
    min-width    : 0;
    border-radius: 0 0 var(--gs-radius-drop) var(--gs-radius-drop);
  }
}

/* =============================================================
   RESPONSIVE — Large (≥ 1280px)
   ============================================================= */
@media (min-width: 1280px) {
  :root {
    --gs-input-w : var(--gs-input-w-lg);
  }
}