/* Shared search + map tile styling used on home and dashboard. */
/* =========================
   Find Crags module (Search + Map in one tile)
   ========================= */

#find-crags{
  margin-bottom: var(--section-gap);
  border: var(--border-subtle);
}

.find-tile{
  background: var(--surface-1);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}

/* --- Header strip (searchbar flush to edges) --- */
.find-head{
  padding: 0; /* no padding */
  border-bottom: none;
  background: var(--surface-1);
}

/* Remove standalone spacing/animation offsets when used as tile header */
#find-crags #search-container{
  margin: 0;
  padding-top: 0;
  max-width: none;     /* allow full width inside tile */
  width: 100%;
  opacity: 1;          /* kill the fade-in “invisible header” effect */
  animation: none;     /* no slide-in for embedded header */
}

/* Make the bar touch tile edges */
#find-crags #search-wrapper{
  border-radius: 0;   /* flush header look */
  border-left: none;
  border-right: none;
  border-top: none;
  box-shadow: none;   /* header strip should be “flat” */
}

/* --- Body (map padded) --- */
.find-body{
  padding: 10px;
}

#find-crags #map{
  border-radius: 3px;
  height: 500px;
}


/* =========================
   Shared Search UI (SLIM)
   ========================= */

/* Tokens */
:root{
  --search-h: 46px;
  --search-radius: 12px;
  --search-border: rgba(255,255,255,0.10);
  --search-border-focus: rgba(106,79,179,0.65);
  --search-shadow: 0 10px 22px rgba(0,0,0,0.20);
  --search-placeholder: rgba(245, 238, 255, 0.55);
}

/* Outer container */
#search-container{
  position: relative;
  width: 100%;
  max-width: var(--content-narrow);
  margin: 0 auto 0.9rem;
  z-index: 1000;

  animation: slideInFromTop 0.8s ease-out forwards;
  opacity: 0;
  animation-fill-mode: forwards;

  padding-top: 6px;
}

/* Frame */
#search-wrapper{
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;

  height: var(--search-h);

  border: 1px solid var(--search-border);
  border-radius: var(--search-radius);

  background: var(--surface-1);
  box-shadow: var(--search-shadow);

  overflow: visible; /* ensures rounded corners */
}

/* When suggestions are visible */
#search-wrapper.open{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

/* Input */
#search{
  flex: 1 1 auto;
  min-width: 0;

  background: transparent;
  color: var(--text-main);

  border: none;
  outline: none;

  font-size: 0.98rem;
  padding: 0 14px;
}

#search::placeholder{
  color: var(--search-placeholder);
  opacity: 1;
}

/* Focus state */
#search-wrapper:focus-within{
  border-color: var(--search-border-focus);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
    0 0 0 2px rgba(106,79,179,0.20);
}

/* Button */
#search-btn{
  flex: 0 0 auto;
  width: 54px;

  border: none;
  cursor: pointer;

  border-left: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);

  display: grid;
  place-items: center;
}

#search-btn:hover{ background: rgba(255,255,255,0.05); }
#search-btn:active{ background: rgba(255,255,255,0.07); }

/* Icon */
#search-btn img{
  width: 26px;
  height: 26px;
  display: block;

  /* keep your white filter */
  filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(10%) hue-rotate(0deg) brightness(108%) contrast(101%);
}

/* Dropdown */
#suggestions{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  background: var(--surface-1);
  border: 1px solid var(--search-border);
  border-top: none;

  border-bottom-left-radius: var(--search-radius);
  border-bottom-right-radius: var(--search-radius);

  list-style: none;
  padding: 6px 0;
  margin: 0;

  max-height: 280px;
  overflow-y: auto;

  box-shadow: 0 18px 32px rgba(0,0,0,0.28);
  z-index: 2000;
}

#suggestions[hidden]{ display:none; }
/* Suggestion rows */
.suggestion-header{
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

#suggestions li{
  padding: 0.52rem 0.85rem;
  font-size: 0.95rem;
  color: var(--text-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;            /* critical for ellipsis inside flex */
}

#suggestions li:hover{
  background: rgba(255,255,255,0.04);
}

/* Text truncation */
.suggestion-text{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-primary{ font-weight: 600; }
.suggestion-secondary{
  opacity: 0.65;
  font-size: 0.86em;
}


/* Final layout guards */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;   /* keep consistent with the earlier rule */
  overflow-y: auto;   /* keep consistent with the earlier rule */
}


/* ===== Header: prevent accidental internal scrolling (SAFE) ===== */
header#site-header{
  overflow: visible !important;
  max-height: none !important;
}

/* only these header wrappers should never clip */
#header-left,
#header-right,
#header-right-inner,
#header-link{
  overflow: visible !important;
  max-height: none !important;
}