/* ==============================================
   KIEZ-SUCHE - Neo-Brutalism Stichwortsuche
   ============================================== */

/* --- Search Toggle Button (Header) --- */
.search-toggle-btn {
   background: none;
   border: none;
   cursor: pointer;
   font-size: 1.25rem;
   color: var(--color-ink);
   padding: 0.4rem;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: color var(--transition-fast);
}

.search-toggle-btn:hover {
   color: var(--text-muted);
}

/* --- Search Overlay (Container fuer Input + Dropdown) --- */
.search-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
}

.search-overlay.is-open {
   opacity: 1;
   pointer-events: auto;
}

/* Sticky input bar at top */
.search-overlay-inner {
   padding: 1rem 1.25rem;
   background: var(--bg-card);
   border-bottom: var(--brutal-border);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   flex-shrink: 0;
}

/* Center the input row */
.search-overlay-center {
   max-width: 720px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   width: 100%;
}

.search-overlay-inner .search-input-wrapper {
   flex: 1;
   position: relative;
}

.search-overlay-inner .search-icon {
   position: absolute;
   left: 0.85rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-muted);
   font-size: 1.1rem;
   pointer-events: none;
}

.search-overlay-inner input[type="search"] {
   width: 100%;
   padding: 0.7rem 0.85rem 0.7rem 2.6rem;
   font-size: 1rem;
   font-family: var(--font-sans);
   border: var(--brutal-border);
   border-radius: 0;
   background: var(--bg-body);
   color: var(--color-ink);
   outline: none;
   transition: box-shadow var(--transition-fast);
   -webkit-appearance: none;
}

.search-overlay-inner input[type="search"]:focus {
   box-shadow: var(--brutal-shadow);
}

.search-overlay-inner input[type="search"]::placeholder {
   color: var(--text-muted);
   font-style: italic;
}

/* Webkit search cancel button */
.search-overlay-inner input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
}

.search-close-btn {
   background: none;
   border: var(--brutal-border);
   cursor: pointer;
   font-size: 1.25rem;
   color: var(--color-ink);
   padding: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.search-close-btn:hover {
   background: var(--color-yellow);
   box-shadow: var(--brutal-shadow);
}

/* --- Results Dropdown (scrollt unter dem Input) --- */
.search-dropdown {
   overflow-y: auto;
   max-height: calc(100vh - 80px); /* Platz fuer Input-Bar */
   background: var(--bg-card);
   display: none;
   overscroll-behavior: contain;
}

.search-dropdown.is-open {
   display: block;
}

/* Restflaeche unter den Ergebnissen: abgedunkelt, schliesst bei Klick */
.search-overlay-backdrop-area {
   flex: 1;
   background: rgba(0, 0, 0, 0.3);
   cursor: pointer;
}

.search-dropdown-inner {
   max-width: 720px;
   margin: 0 auto;
   padding: 0 1.25rem 1rem;
}

/* Status messages */
.search-status {
   padding: 1.5rem 0;
   text-align: center;
   color: var(--text-muted);
   font-size: 0.9rem;
}

.search-status i {
   display: block;
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
}

/* --- Result Groups --- */
.search-group {
   margin-bottom: 0.25rem;
}

.search-group-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.6rem 0;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--text-muted);
   border-bottom: 1px solid var(--border-color-light);
}

.search-group-icon {
   width: 22px;
   height: 22px;
   border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.75rem;
   border: 1.5px solid var(--color-ink);
   flex-shrink: 0;
}

.search-group-count {
   margin-left: auto;
   background: var(--bg-surface-3);
   border: 1.5px solid var(--border-color-light);
   padding: 0.1rem 0.45rem;
   font-size: 0.65rem;
   font-weight: 600;
}

/* Type-specific group icon colors */
.search-group[data-type="Ort"] .search-group-icon { background: var(--type-place-bg); }
.search-group[data-type="Termin"] .search-group-icon { background: var(--type-event-bg); }
.search-group[data-type="Expert*in"] .search-group-icon { background: var(--type-expert-bg); }
.search-group[data-type="Projekt"] .search-group-icon { background: var(--type-project-bg); }
.search-group[data-type="Marktplatz"] .search-group-icon { background: var(--type-marketplace-bg); }
.search-group[data-type="KiezTalk"] .search-group-icon { background: var(--type-discussion-bg); }
.search-group[data-type="Ratgeber"] .search-group-icon { background: var(--type-guide-bg); }

/* --- Individual Result Items --- */
.search-result-item {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 0.6rem 0.4rem;
   text-decoration: none;
   color: var(--color-ink);
   border-bottom: 1px solid color-mix(in srgb, var(--border-color-light), transparent 50%);
   transition: background var(--transition-fast);
   /* Button reset */
   background: none;
   border: none;
   border-bottom: 1px solid color-mix(in srgb, var(--border-color-light), transparent 50%);
   width: 100%;
   text-align: left;
   cursor: pointer;
   font-family: inherit;
   font-size: inherit;
}

.search-result-item:last-child {
   border-bottom: none;
}

.search-result-item:hover {
   background: var(--bg-surface-3);
}

.search-result-info {
   flex: 1;
   min-width: 0;
}

.search-result-title {
   font-size: 0.9rem;
   font-weight: 600;
   line-height: 1.3;
   margin: 0;
   color: var(--text-main);
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.search-result-meta {
   font-size: 0.75rem;
   color: var(--text-main);
   opacity: 0.6;
   margin-top: 0.15rem;
   display: flex;
   align-items: center;
   gap: 0.4rem;
   flex-wrap: wrap;
}

.search-result-meta span {
   display: inline-flex;
   align-items: center;
   gap: 0.2rem;
}

.search-result-teaser {
   font-size: 0.8rem;
   color: var(--text-main);
   opacity: 0.7;
   margin-top: 0.25rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-height: 1.4;
}

.search-result-arrow {
   color: var(--text-muted);
   font-size: 1rem;
   flex-shrink: 0;
   margin-top: 0.2rem;
}

/* Highlight matched terms */
.search-highlight {
   background: color-mix(in srgb, var(--color-yellow), transparent 30%);
   color: var(--color-text-on-yellow);
   font-weight: 700;
   padding: 0 1px;
}

/* --- Show All Results Link --- */
.search-show-all {
   display: block;
   text-align: center;
   padding: 0.85rem;
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--color-text-on-yellow);
   text-decoration: none;
   border: var(--brutal-border);
   background: var(--color-yellow);
   margin-top: 0.5rem;
   transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.search-show-all:hover {
   box-shadow: var(--brutal-shadow);
   transform: translateY(-1px);
}

/* --- Full Results Page (suche.php) --- */
.search-page-header {
   margin-bottom: 1.5rem;
}

.search-page-input-row {
   display: flex;
   gap: 0.75rem;
   align-items: stretch;
   max-width: 600px;
}

.search-page-input-row .search-input-wrapper {
   flex: 1;
   position: relative;
}

.search-page-input-row .search-icon {
   position: absolute;
   left: 0.85rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-muted);
   font-size: 1.1rem;
   pointer-events: none;
}

.search-page-input-row input[type="search"] {
   width: 100%;
   padding: 0.75rem 0.85rem 0.75rem 2.6rem;
   font-size: 1rem;
   font-family: var(--font-sans);
   border: var(--brutal-border);
   border-radius: 0;
   background: var(--bg-card);
   color: var(--color-ink);
   outline: none;
   -webkit-appearance: none;
}

.search-page-input-row input[type="search"]:focus {
   box-shadow: var(--brutal-shadow);
}

.search-page-input-row .btn {
   flex-shrink: 0;
}

.search-page-summary {
   margin-top: 1rem;
   font-size: 0.9rem;
   color: var(--text-muted);
}

.search-page-summary strong {
   color: var(--color-ink);
}

/* Full page result groups */
.search-page-group {
   margin-bottom: 1.5rem;
}

.search-page-group-header {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.65rem 0.85rem;
   font-size: 0.8rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   border: var(--brutal-border);
   margin-bottom: 0;
}

.search-page-group-header .search-group-icon {
   width: 26px;
   height: 26px;
   font-size: 0.85rem;
}

.search-page-group-header .search-group-count {
   font-size: 0.7rem;
}

.search-page-group-items {
   border: var(--brutal-border);
   border-top: none;
   background: var(--bg-card);
}

.search-page-result {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   padding: 0.85rem 1rem;
   text-decoration: none;
   color: var(--color-ink);
   border-bottom: 1px solid var(--border-color-light);
   transition: background var(--transition-fast);
   /* Button reset */
   background: none;
   border: none;
   border-bottom: 1px solid var(--border-color-light);
   width: 100%;
   text-align: left;
   cursor: pointer;
   font-family: inherit;
   font-size: inherit;
}

.search-page-result:last-child {
   border-bottom: none;
}

.search-page-result:hover {
   background: var(--bg-surface-3);
}

.search-page-result .search-result-title {
   font-size: 0.95rem;
   -webkit-line-clamp: 2;
}

.search-page-result .search-result-teaser {
   -webkit-line-clamp: 3;
}

/* Type-specific group header colors */
.search-page-group[data-type="Ort"] .search-page-group-header { background: var(--type-place-bg); }
.search-page-group[data-type="Termin"] .search-page-group-header { background: var(--type-event-bg); }
.search-page-group[data-type="Expert*in"] .search-page-group-header { background: var(--type-expert-bg); }
.search-page-group[data-type="Projekt"] .search-page-group-header { background: var(--type-project-bg); }
.search-page-group[data-type="Marktplatz"] .search-page-group-header { background: var(--type-marketplace-bg); }
.search-page-group[data-type="KiezTalk"] .search-page-group-header { background: var(--type-discussion-bg); }
.search-page-group[data-type="Ratgeber"] .search-page-group-header { background: var(--type-guide-bg); }

/* Empty state on results page */
.search-page-empty {
   text-align: center;
   padding: 3rem 1rem;
   color: var(--text-muted);
}

.search-page-empty i {
   font-size: 2.5rem;
   margin-bottom: 0.75rem;
   display: block;
}

.search-page-empty p {
   font-size: 0.95rem;
   margin-bottom: 0.5rem;
}

.search-page-empty .search-page-empty-hint {
   font-size: 0.85rem;
   opacity: 0.7;
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
   .search-overlay-inner {
      padding: 0.75rem 1rem;
   }

   .search-overlay-inner input[type="search"] {
      font-size: 16px; /* Prevents iOS zoom */
   }

   .search-dropdown-inner {
      padding: 0 1rem 0.75rem;
   }

   .search-result-teaser {
      display: none; /* Spart Platz auf Mobile */
   }

   .search-page-input-row {
      max-width: 100%;
   }
}