/* =============================================================================
   p-q-g-search.css  —  free-text search styles
   In-page search bar  ·  nav bar toggle  ·  p-f-g filter bar slot
   Version: 3.0.0
   ============================================================================= */


/* ════════════════════════════════════════════════════════════════════════════
   1.  IN-PAGE STANDALONE SEARCH BAR  (.prjct-search-bar)
   ════════════════════════════════════════════════════════════════════════════ */

.prjct-search-bar {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin:      0 0 28px;
    position:    relative;
}

.prjct-search-input {
    flex:           1 1 auto;
    min-width:      0;
    padding:        10px 44px 10px 14px;
    font-size:      1rem;
    font-family:    inherit;
    color:          inherit;
    background:     #fff;
    border:         1.5px solid rgba(0,0,0,0.18);
    border-radius:  6px;
    outline:        none;
    transition:     border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
}
.prjct-search-input::placeholder { color: rgba(0,0,0,0.35); }
.prjct-search-input:focus {
    border-color: currentColor;
    box-shadow:   0 0 0 3px rgba(0,0,0,0.06);
}

.prjct-search-bar .prjct-search-clear {
    position:    absolute;
    right:       10px;
    top:         50%;
    transform:   translateY(-50%);
    width:       28px;
    height:      28px;
    padding:     0;
    display:     flex;
    align-items: center;
    justify-content: center;
    background:  transparent;
    border:      none;
    cursor:      pointer;
    color:       rgba(0,0,0,0.40);
    font-size:   1.1rem;
    line-height: 1;
    transition:  color 0.1s;
}
.prjct-search-bar .prjct-search-clear:hover { color: rgba(0,0,0,0.75); }

.prjct-search-empty {
    display:    none;
    padding:    32px 0;
    text-align: center;
    color:      rgba(0,0,0,0.45);
    font-size:  0.95rem;
}

@media (max-width: 768px) {
    .prjct-search-bar   { margin-bottom: 18px; }
    .prjct-search-input { font-size: 0.95rem; padding: 9px 40px 9px 12px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   2.  P-F-G FILTER BAR SEARCH SLOT  (.prjct-filter-search)
   Sits at the END of .prjct-filter-groups, styled to match the pill buttons.
   ════════════════════════════════════════════════════════════════════════════ */

.prjct-filter-search {
    display:     flex;
    align-items: center;
    position:    relative;
    margin-left: auto;   /* push to right edge of filter bar */
    flex-shrink: 0;
}

/* Input styled to match .prjct-pill */
.prjct-filter-search-input {
    padding:        0.6rem 2.4rem 0.6rem 1rem;
    font-size:      0.875rem;
    font-weight:    500;
    font-family:    inherit;
    color:          var(--prjct-ink, #1a1a1a);
    background:     var(--prjct-surface-alt, #e8e6e0);
    border:         1px solid var(--prjct-border, #ddd9d0);
    border-radius:  var(--prjct-radius, 6px);
    outline:        none;
    white-space:    nowrap;
    width:          160px;
    transition:     width 0.25s ease, background 0.15s, border-color 0.15s;
    -webkit-appearance: none;
}
.prjct-filter-search-input::placeholder {
    color: var(--prjct-ink-muted, #888);
    font-weight: 400;
}
.prjct-filter-search-input:focus {
    width:        220px;
    background:   #fff;
    border-color: var(--prjct-ink, #1a1a1a);
    outline:      none;
}

/* Clear (×) inside filter bar search */
.prjct-filter-search .prjct-search-clear {
    position:    absolute;
    right:       8px;
    top:         50%;
    transform:   translateY(-50%);
    background:  transparent;
    border:      none;
    cursor:      pointer;
    color:       rgba(0,0,0,0.35);
    font-size:   1rem;
    line-height: 1;
    padding:     0;
    display:     flex;
    transition:  color 0.1s;
}
.prjct-filter-search .prjct-search-clear:hover { color: rgba(0,0,0,0.7); }

@media (max-width: 768px) {
    /* On mobile the filter groups scroll horizontally — keep it compact */
    .prjct-filter-search-input       { width: 120px; font-size: 14px; }
    .prjct-filter-search-input:focus { width: 160px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   3.  NAV BAR TOGGLE  (.hh-search-widget inside .hh-header-inner)
   Inherits --hh-bg / --hh-ink from hh-style-inline-css.
   ════════════════════════════════════════════════════════════════════════════ */

.hh-search-widget {
    position:    relative;
    display:     flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.hh-search-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    padding:         0;
    background:      transparent;
    border:          none;
    border-radius:   50%;
    cursor:          pointer;
    color:           var(--hh-ink, #d6d6d6);
    transition:      background 0.15s, color 0.15s;
    flex-shrink:     0;
}
.hh-search-toggle:hover,
.hh-search-widget.is-open .hh-search-toggle {
    background: rgba(255,255,255,0.12);
    color:      #fff;
}

.hh-search-panel {
    position:   absolute;
    top:        50%;
    right:      44px;
    transform:  translateY(-50%);
    display:    flex;
    align-items: center;
    gap:        6px;
    background: var(--hh-bg, #6f7608);
    padding:    4px 4px 4px 12px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    white-space: nowrap;
    animation:  hh-search-open 0.18s ease forwards;
    z-index:    20;
}
.hh-search-panel[hidden] { display: none !important; }

@keyframes hh-search-open {
    from { opacity: 0; transform: translateY(-50%) scaleX(0.85); }
    to   { opacity: 1; transform: translateY(-50%) scaleX(1); }
}

.hh-search-input {
    width:       200px;
    padding:     7px 10px;
    font-size:   0.875rem;
    font-family: inherit;
    color:       var(--hh-ink, #fff);
    background:  rgba(255,255,255,0.12);
    border:      1px solid rgba(255,255,255,0.25);
    border-radius: 5px;
    outline:     none;
    transition:  background 0.15s, border-color 0.15s;
    -webkit-appearance: none;
}
.hh-search-input::placeholder { color: rgba(255,255,255,0.50); }
.hh-search-input:focus {
    background:   rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.55);
}

.hh-search-clear {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    padding:         0;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    color:           rgba(255,255,255,0.55);
    font-size:       1rem;
    line-height:     1;
    transition:      color 0.1s;
    flex-shrink:     0;
}
.hh-search-clear:hover { color: #fff; }

@media (max-width: 480px) {
    .hh-search-panel { right: 40px; }
    .hh-search-input { width: 140px; font-size: 0.8rem; }
}