/* =========================================================
   SearchPosse – Premium CSS (safe + stable)
   Fixes:
   - search buttons overlap / duplicate look
   - long horizontal “ghost line” on right
   - prevent horizontal overflow
   - keep autocomplete snug under input
   ========================================================= */

:root{
  --sp-text: rgba(255,255,255,.92);
  --sp-muted: rgba(255,255,255,.62);
  --sp-border: rgba(255,255,255,.14);
  --sp-glass: rgba(255,255,255,.06);
  --sp-glass-2: rgba(255,255,255,.10);
  --sp-accent: #ff9800;
  --sp-accent-soft: rgba(255,152,0,.22);
  --sp-shadow: 0 14px 40px rgba(0,0,0,.45);

  --sp-maxw: 720px;
  --sp-radius: 18px;
  --sp-pad: 16px;
}

/* Global hardening */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  color: var(--sp-text);
  overflow-x: hidden; /* kill sideways jank */
  background:
    radial-gradient(1200px 600px at 50% 35%, rgba(255,255,255,.05), rgba(0,0,0,0)),
    radial-gradient(900px 450px at 50% 80%, rgba(255,152,0,.06), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
}

/* Make top links behave and not hang off screen */
#links_on_top, #links, .links_on_top, .links{
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  z-index: 50 !important;
  margin: 0 !important;
}
#links_on_top a, #links a, .links_on_top a, .links a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin-left: 8px !important;
  border-radius: 999px !important;
  border: 1px solid var(--sp-border) !important;
  background: rgba(0,0,0,.20) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--sp-text) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Homepage wrapper */
.search-home{
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 84px var(--sp-pad) 110px; /* bottom room for CTA + footer */
  gap: 18px;
}

/* Logo */
.logo-wrapper{ display:flex; justify-content:center; }
.logo{
  display:block;
  width: min(520px, calc(100vw - 2*var(--sp-pad)));
  height: auto;
  max-height: 90px;
  object-fit: contain;
}

/* ---- HARD FIX: search form structure ---- */
/* Remove any theme “panel strip” effect */
.search-home form#search{
  width: min(var(--sp-maxw), calc(100vw - 2*var(--sp-pad))) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Search bar is a strict flex row */
.search-home .search_bar{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Input must not push layout wide */
.search-home #q,
.search-home input[name="q"]{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 56px !important;
  padding: 0 18px !important;

  border-radius: var(--sp-radius) !important;
  border: 1px solid var(--sp-border) !important;
  background: var(--sp-glass) !important;
  color: var(--sp-text) !important;

  outline: none !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;

  /* important: stop native search decorations from making weird lines */
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Buttons container must NOT stretch (this is where overlap comes from) */
.search-home .search_buttons{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Buttons are fixed squares */
.search-home .search_buttons button,
.search-home .search_button,
.search-home .clear{
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;

  border-radius: 14px !important;
  border: 1px solid var(--sp-border) !important;
  background: var(--sp-glass) !important;
  color: var(--sp-text) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.20) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* 🔥 Kill the “ghost line” — it’s almost always a ::before/::after from the theme */
.search-home .search_buttons::before,
.search-home .search_buttons::after,
.search-home .search_button::before,
.search-home .search_button::after,
.search-home .clear::before,
.search-home .clear::after{
  content: none !important;
  display: none !important;
}

/* Ensure SVG icons don’t stretch into lines */
.search-home .search_button svg,
.search-home .clear svg{
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
}

/* Focus glow */
.search-home #q:focus,
.search-home input[name="q"]:focus{
  border-color: rgba(255,152,0,.55) !important;
  box-shadow: 0 0 0 6px var(--sp-accent-soft), 0 10px 26px rgba(0,0,0,.22) !important;
}

/* Autocomplete: tight under input */
.search-home .autocomplete{
  width: min(var(--sp-maxw), calc(100vw - 2*var(--sp-pad))) !important;
  margin: 10px auto 0 !important;
  padding: 10px 0 !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,.22) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sp-shadow) !important;
}
.search-home .autocomplete ul{ margin:0; padding:0; }
.search-home .autocomplete li{
  list-style:none;
  padding: 10px 14px;
}

/* CTA row */
.cta-row{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 84px; /* above footer */
  z-index: 45;

  display: flex;
  gap: 14px;
  justify-content: center;
  width: min(var(--sp-maxw), calc(100vw - 2*var(--sp-pad)));
}

.tagline-btn{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;

  border-radius: 999px;
  border: 1px solid var(--sp-border);
  background: var(--sp-glass);
  color: var(--sp-text);
  text-decoration:none;

  letter-spacing:.08em;
  text-transform:uppercase;
  font-size: 12px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}

.tagline-btn.secondary{
  opacity:.55;
  cursor:not-allowed;
}

/* Footer: keep it neat */
footer{
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  padding: 12px var(--sp-pad);
  z-index: 40;

  border-top: 1px solid var(--sp-border);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Mobile tweaks */
@media (max-width: 520px){
  :root{ --sp-pad: 12px; }

  .search-home{ padding-top: 74px; padding-bottom: 130px; }

  .cta-row{
    flex-direction: column;
    bottom: 90px;
  }

  .search-home .search_bar{ gap: 8px !important; }

  .search-home #q,
  .search-home input[name="q"]{ height: 52px !important; }

  .search-home .search_buttons button,
  .search-home .search_button,
  .search-home .clear{
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
  }
}