/* ============================================================
   CANON SEARCH — Smooth, Subtle, Apple-Style Motion
   ============================================================ */

/* Shared sticky offset (desktop default) */
:root {
  --search-stick-top: calc(var(--nav-height) + 16px);
}

/* Mobile tweaks */
@media (max-width: 767px) {
  :root {
    --search-stick-top: calc(var(--nav-height) + 22px);
  }
}

/* ---------------------------------------
   SEARCH AREA — Sticky container
   --------------------------------------- */
.search-area {
  position: sticky;
  top: var(--search-stick-top);

  display: flex;
  justify-content: center;
  width: 100%;

  margin-top: 26px;
  margin-bottom: 32px;

  padding-left: max(env(safe-area-inset-left), 12px);
  padding-right: max(env(safe-area-inset-right), 12px);

  pointer-events: none; /* prevents blocking taps */
  z-index: 900;

  transition:
    margin-top 0.45s cubic-bezier(.28, .84, .42, 1),
    top        0.45s cubic-bezier(.28, .84, .42, 1);
}

/* When search becomes "stuck" */
.search-area.is-stuck {
  margin-top: 12px !important;
}

/* ---------------------------------------
   SEARCH BOX (glass pill)
   --------------------------------------- */
.search-box {
  pointer-events: auto;

  display: flex;
  align-items: center;
  gap: 0.55rem;

  width: min(720px, 92vw);
  max-width: 720px;

  padding: 0.75rem 1rem;
  border-radius: 999px;

  background: var(--search-glass-bg);
  border: 1px solid var(--search-glass-border);

  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);

  box-shadow:
    inset 0 0 2px var(--search-glass-inset),
    0 8px 22px var(--search-glass-shadow);

  transition:
    width     0.45s cubic-bezier(.28, .84, .42, 1),
    padding   0.45s cubic-bezier(.28, .84, .42, 1),
    transform 0.45s cubic-bezier(.28, .84, .42, 1);
}

/* Stuck state: gentle shrink + lift */
.search-area.is-stuck .search-box {
  width: min(600px, 86vw);
  padding: 0.70rem 0.9rem;
  transform: translateY(-1px);
}

/* ---------------------------------------
   INPUT
   --------------------------------------- */
.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--text-color);
}

.search-box input::placeholder {
  color: rgba(0,0,0,0.45);
}

body.night .search-box input {
  color: #f5f5f7;
}
body.night .search-box input::placeholder {
  color: rgba(245,245,245,0.45);
}

/* ---------------------------------------
   BUTTON
   --------------------------------------- */
.search-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  color: var(--text-color);
  background: rgba(0,0,0,0.08);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background 0.25s ease, transform 0.2s ease;
}

body.night .search-btn {
  background: rgba(255,255,255,0.1);
}

/* Neutralise button hover movement */
.search-btn:hover {
  transform: none !important;
  opacity: 1 !important;
}

/* ---------------------------------------
   MOBILE TUNING
   --------------------------------------- */
@media (max-width: 767px) {

  .search-area {
    margin-top: 20px;
  }

  .search-area.is-stuck {
    margin-top: 10px !important;
  }

  .search-box {
    width: min(600px, 94vw);
    padding: 0.70rem 0.95rem;
  }

  .search-area.is-stuck .search-box {
    width: min(520px, 90vw);
    padding: 0.62rem 0.9rem;
  }
}

/* Performance */
.search-area,
.search-box {
  will-change: transform, width, padding, top, margin-top;
}

.search-icon {
  width: 18px;
  height: 18px;
  fill: currentColor !important; /* <- restore visibility */
  display: block;
}
/* Ensure search sits UNDER nav + mobile menu */
.search-area {
  z-index: 400; /* lower than mobile menu (950) and nav (1000) */
}