/* ==========================================================================
   Malu Compact Search Icon
   Animates ps_searchbar to icon-only by default; expands on click.

   Hummingbird: desktop only (≥768px) — mobile already uses offcanvas.
   Classic:     desktop only (≥768px).
   ========================================================================== */

/* ── Mobile: suppress the theme's own .search__mobile so our module's
   .ps-searchbar--mobile is the single mobile search trigger ─────────────── */

@media (max-width: 767px) {
  .search__mobile {
    display: none !important;
  }
}

/* ── Mobile offcanvas — prevent full-viewport stretch ────────────────────── */
/* Production theme.css sets .offcanvas { bottom: 0 } which stretches any
   fixed offcanvas to full viewport height. The theme fixes this for its own
   .search__offcanvas via bottom:inherit; we need the same for ours. */
#maluSearchCanvas {
  bottom: auto;
}

/* ── Mobile offcanvas search input — remove browser/Bootstrap focus ring ──── */
#maluSearchCanvas .js-search-input:focus {
  outline: none;
  box-shadow: none;
}

/* ── Mobile offcanvas search form — reset compact styles so the full form
   renders correctly inside the offcanvas (no collapsed-width behaviour) ──── */
@media (max-width: 767px) {
  #maluSearchCanvas .ps-searchbar__form {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: visible;
    gap: 0.5rem;
    padding: 0 0.25rem;
  }

  #maluSearchCanvas .ps-searchbar__input {
    flex: 1;
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
  }

  /* Keep Cancel button pinned to the top when autocomplete results expand.
     Bootstrap's default align-items:center would push it down as results grow. */
  #maluSearchCanvas .offcanvas-header {
    align-items: flex-start;
  }

  /* Stretch the search widget to fill the available header space. */
  #maluSearchCanvas .ps-searchbar__container,
  #maluSearchCanvas .ps-searchbar {
    width: 100%;
    min-width: 0;
  }

  /* The dropdown must escape the narrow flex item (Cancel button takes ~90px).
     Setting the search widget to position:static makes the fixed offcanvas the
     containing block, so left:0/right:0 spans the full offcanvas width. */
  #maluSearchCanvas .ps-searchbar {
    position: static !important;
  }

  #maluSearchCanvas .ps-searchbar__results {
    padding: 1rem;
  }

  /* Cap autocomplete result list height and make it scrollable so Cancel
     stays visible and the offcanvas never overflows the viewport.
     Full width so the scrollbar sits at the right edge of the screen. */
  #maluSearchCanvas .ps-searchbar__dropdown {
    position: absolute;
    left: 0;
    right: 0;
    max-height: 55vh;
    overflow-y: auto;
    background-color: var(--bs-body-bg, #fff);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
  }
}

/* ── Hummingbird ─────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  /* Remove the 19rem min-width the compiled theme CSS sets.
     position:relative anchors the dropdown so it can be taken out of flow. */
  .malu-search-compact .ps-searchbar {
    position: relative;
    min-width: 0;
  }

  /* Dropdown floats above page content — prevents autocomplete results from
     stretching the header when position:static is the theme default.
     All rules below mirror Hummingbird's own compiled CSS so they work on
     older theme versions that lack them. */
  .malu-search-compact .ps-searchbar__dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    z-index: 1050;
    min-width: 19rem;
    max-width: 30rem;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
    overflow: hidden;
  }

  .malu-search-compact .ps-searchbar__results {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin: 0;
    max-height: 21rem;
    overflow-y: auto;
    padding: 1rem;
  }

  .malu-search-compact .ps-searchbar__result-link {
    align-items: center;
    border-radius: var(--bs-border-radius, .375rem);
    display: flex;
    text-decoration: none;
  }

  .malu-search-compact .ps-searchbar__result-image {
    flex-shrink: 0;
    width: 4rem;
    border-radius: var(--bs-border-radius, .375rem);
  }

  .malu-search-compact .ps-searchbar__result-name {
    margin: 0;
    padding: .5rem 1rem;
    color: var(--bs-body-color, #212529);
  }

  /* Animate the form width — the dropdown is a sibling of the form,
     not inside it, so overflow:hidden here won't clip autocomplete results.
     display:flex + align-items:center centers the icon vertically regardless
     of whether the theme uses position:absolute or static on the magnifier. */
  .malu-search-compact .ps-searchbar__form {
    display: flex;
    align-items: center;
    width: 2.5rem;
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Show cursor on the icon to signal it's clickable */
  .malu-search-compact .ps-searchbar__magnifier {
    flex-shrink: 0;
    cursor: pointer;
  }

  /* Input invisible but still in the DOM. flex:1 + min-width:0 lets it fill
     the remaining form width correctly in both collapsed and expanded states,
     overriding Bootstrap form-control's width:100% which would otherwise
     overflow the flex container when the icon is also a flex item. */
  .malu-search-compact .ps-searchbar__input {
    flex: 1;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease 0.1s; /* slight delay: let width open first */
  }

  /* Hide clear button until expanded */
  .malu-search-compact .ps-searchbar__clear {
    display: none !important;
  }

  /* ── Expanded state (JS adds .malu-open to .ps-searchbar) ── */

  .malu-search-compact .ps-searchbar.malu-open .ps-searchbar__form {
    width: 19rem;
    gap: 0.5rem;
    padding: 0 0.75rem;
  }

  .malu-search-compact .ps-searchbar.malu-open .ps-searchbar__input {
    opacity: 1;
    pointer-events: auto;
  }

  /* Show clear button only when open AND has text (JS adds .malu-has-value) */
  .malu-search-compact .ps-searchbar.malu-open.malu-has-value .ps-searchbar__clear {
    display: flex !important;
  }
}

/* ── Classic ─────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  #search_widget.malu-search-compact form {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.1s ease;
  }

  #search_widget.malu-search-compact .material-icons.search {
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
  }

  #search_widget.malu-search-compact input[name="s"],
  #search_widget.malu-search-compact .material-icons.clear {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease 0.1s;
  }

  /* ── Expanded state (JS adds .malu-open to #search_widget) ── */

  #search_widget.malu-search-compact.malu-open form {
    width: 280px;
    height: auto;
  }

  #search_widget.malu-search-compact.malu-open input[name="s"],
  #search_widget.malu-search-compact.malu-open .material-icons.clear {
    opacity: 1;
    pointer-events: auto;
  }
}