/*
 * search.css
 * Chirpy-inspired search bar for the topbar.
 * Targets the markup in base.html:
 *   #search-trigger   — magnifier icon button (mobile only)
 *   #search           — <search> wrapper containing the input
 *   #search-input     — [data-stork="sitesearch"] text field
 *   #search-cancel    — "Cancel" text button (mobile only)
 *   [data-stork="sitesearch-output"] — Stork results dropdown
 *
 * Breakpoints (no Bootstrap dependency):
 *   < 768 px   mobile  — trigger shows, search hidden until activated
 *   ≥ 768 px   tablet+ — search always visible, trigger/cancel hidden
 */

/* ─── CSS custom properties (inherits from your theme vars if defined) ─── */
:root {
    --search-bg:            rgba(255, 255, 255, 0.08);
    --search-bg-focus:      rgba(255, 255, 255, 0.14);
    --search-border:        rgba(255, 255, 255, 0.18);
    --search-border-focus:  rgba(255, 255, 255, 0.45);
    --search-text:          var(--text-color, #e8e8e8);
    --search-placeholder:   rgba(255, 255, 255, 0.4);
    --search-icon:          rgba(255, 255, 255, 0.5);
    --search-icon-focus:    rgba(255, 255, 255, 0.85);
    --search-radius:        0.5rem;
    --search-height:        2.1rem;
    --search-width-base:    14rem;
    --search-width-focus:   20rem;
    --search-transition:    0.25s ease;
  
    --results-bg:           var(--surface);
    --results-border:       rgba(255, 255, 255, 0.1);
    --results-shadow:       0 8px 32px rgba(0, 0, 0, 0.45);
    --results-hover:        rgba(255, 255, 255, 0.07);
    --results-highlight:    #7aa2f7;
    --results-excerpt:      rgba(255, 255, 255, 0.55);
    --results-radius:       0.6rem;
  }
  
  /* Light mode overrides */
  [data-mode="light"] {
    --search-bg:            rgba(0, 0, 0, 0.05);
    --search-bg-focus:      rgba(0, 0, 0, 0.08);
    --search-border:        rgba(0, 0, 0, 0.14);
    --search-border-focus:  rgba(0, 0, 0, 0.35);
    --search-text:          var(--text-color, #1e1e2e);
    --search-placeholder:   rgba(0, 0, 0, 0.35);
    --search-icon:          rgba(0, 0, 0, 0.38);
    --search-icon-focus:    rgba(0, 0, 0, 0.7);
  
    --results-bg:           #ffffff;
    --results-border:       rgba(0, 0, 0, 0.1);
    --results-shadow:       0 8px 32px rgba(0, 0, 0, 0.15);
    --results-hover:        rgba(0, 0, 0, 0.04);
    --results-highlight:    #3b82f6;
    --results-excerpt:      rgba(0, 0, 0, 0.5);
  }
  
  
  /* ─── Topbar layout ─────────────────────────────────────────────────────── */
  
  #topbar .topbar-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;   /* anchor for the results dropdown */
  }
  
  
  /* ─── Search trigger button (mobile magnifier) ──────────────────────────── */
  
  #search-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--search-radius);
    color: var(--search-icon);
    cursor: pointer;
    transition: color var(--search-transition),
                background var(--search-transition);
    flex-shrink: 0;
  }
  
  #search-trigger:hover,
  #search-trigger:focus-visible {
    color: var(--search-icon-focus);
    background: var(--search-bg-focus);
    outline: none;
  }
  
  
  /* ─── <search> wrapper ───────────────────────────────────────────────────── */
  
  #search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: var(--search-height);
    padding: 0 0.65rem;
    background: var(--search-bg);
    border: 1px solid var(--search-border);
    border-radius: var(--search-radius);
    transition: background var(--search-transition),
                border-color var(--search-transition),
                width var(--search-transition);
    width: var(--search-width-base);
    overflow: hidden;
  }
  
  #search:focus-within {
    background: var(--search-bg-focus);
    border-color: var(--search-border-focus);
    width: var(--search-width-focus);
  }
  
  /* leading icon inside <search> */
  #search > .fa-search {
    font-size: 0.8rem;
    color: var(--search-icon);
    flex-shrink: 0;
    transition: color var(--search-transition);
    pointer-events: none;
  }
  
  #search:focus-within > .fa-search {
    color: var(--search-icon-focus);
  }

  #search:focus-within > .stork-close-button {
    left: calc(var(--search-width-focus) - var(--search-width-base) * 1.1);
  }
  
  
  /* ─── Search input ───────────────────────────────────────────────────────── */
  
  #search-input {
    flex: 1;
    height: 100%;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--search-text);
    caret-color: var(--results-highlight);
  }
  
  #search-input::placeholder {
    color: var(--search-placeholder);
  }
  
  /* remove native clear button in webkit */
  #search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .stork-close-button {
    background: none;
    border: none;
    padding: 0.25rem 0.1rem;
    font-size: 0.875rem;
    color: var(--results-highlight);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity var(--search-transition);
    position: relative;
    right:1em;
  }
  
  
  /* ─── Cancel button (mobile) ─────────────────────────────────────────────── */
  
  #search-cancel {
    display: none;          /* hidden at all sizes until mobile-active state */
    background: none;
    border: none;
    padding: 0.25rem 0.1rem;
    font-size: 0.875rem;
    color: var(--results-highlight);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity var(--search-transition);
  }
  
  #search-cancel:hover {
    opacity: 0.75;
  }
  
  
  /* ─── Stork results dropdown ─────────────────────────────────────────────── */
  
  [data-stork="sitesearch-output"] {
    position: absolute;
    top: calc(100% + 0.4rem);
    width: 45%;
    right: 0;
    z-index: 9999;
  }
  
  /* Stork injects .stork-output; style it to match the theme */
  .stork-output-visible {
    background: var(--results-bg);
    border: 1px solid var(--results-border);
    border-radius: var(--results-radius);
    box-shadow: var(--results-shadow);
    overflow: hidden;
  }
  
  .stork-output:empty {
    display: none;
  }

  .stork-output-visible .stork-message {
    padding: 1rem;
    font-weight: bold;
    border-bottom: 1px solid var(--results-border);
}
  
  /* result list */
  .stork-output-visible ul.stork-results {
    list-style: none;
    margin: 0;
    padding: 0.3rem 0;
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    
  }
  
  /* individual result */
  .stork-output-visible li.stork-result {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--results-border);
  }
  
  .stork-output-visible li.stork-result a {
    display: block;
    padding: 0.6rem 1rem;
    text-decoration: none;
    transition: background var(--search-transition);
  }
  
  .stork-output-visible li.stork-result a:hover,
  .stork-output-visible li.stork-result.stork-highlighted a {
    background: var(--results-hover);
  }
  
  /* result title */
  .stork-output-visible .stork-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--search-text);
    margin-bottom: 0.15rem;
  }
  
  /* excerpt / snippet below title */
  .stork-output-visible .stork-excerpt {
    display: block;
    font-size: 0.775rem;
    color: var(--results-excerpt);
    text-overflow: ellipsis;
    line-height: 1rem;
  }
  
  /* highlighted match characters */
  .stork-output-visible mark {
    background: none;
    color: var(--results-highlight);
    font-weight: 700;
  }
  
  /* result count / attribution footer */
  .stork-output-visible .stork-attribution {
    display: block;
    padding: 0.35rem 1rem;
    font-size: 0.7rem;
    color: var(--results-excerpt);
    border-top: 1px solid var(--results-border);
    text-align: right;
  }
  
  
  /* ─── Responsive: ≥ 768px (tablet / desktop) ────────────────────────────── */
  @media (min-width: 768px) {
    /* trigger button only exists for mobile — hide it */
    #search-trigger {
      display: none;
    }
  
    /* search bar always visible */
    #search {
      display: flex;
    }
  
    /* cancel button never needed on desktop */
    #search-cancel {
      display: none !important;
    }
  }
  
  
  /* ─── Responsive: < 768px (mobile) ─────────────────────────────────────── */
  @media (max-width: 767.98px) {
    /* show the magnifier trigger */
    #search-trigger {
      display: flex;
    }
  
    /* search bar hidden by default on mobile */
    #search {
      display: none;
      width: 0;
      border-color: transparent;
      background: transparent;
    }
  
    /* activated state — toggled by JS adding .search-active to <header> */
    #topbar.search-active #search-trigger {
      display: none;
    }
  
    #topbar.search-active #search {
      display: flex;
      flex: 1;
      width: auto;          /* fills available space */
    }
  
    #topbar.search-active #search-cancel {
      display: block;
    }
  
    /* results take full width on mobile */
    [data-stork="sitesearch-output"] {
        left: 0;
        right: 0;
        width: 90%;
        margin: 0 auto;
    }
  }