/*
 * Protera — header live-suggest dropdown styles.
 *
 * Imported from search-suggest.js (so Vite picks it up as part of the
 * Protera web bundle). Minimal markup contract — see
 * themes/Web/Protera/Resources/views/components/search-suggest.blade.php
 * for the DOM structure these rules target.
 */

/* Alpine x-cloak — hide elements until Alpine initializes. Without this
   rule, the dropdown markup briefly flashes during the initial Alpine
   pass on every page load. Web.css does not yet ship one, so we declare
   it here alongside the dropdown. */
[x-cloak] {
    display: none !important;
}

.search-suggest {
    position: relative;
}

.search-suggest-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1050; /* above Bootstrap navbar */
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
    padding: 6px 0;
}

.search-suggest-loading,
.search-suggest-empty {
    padding: 16px 18px;
    color: #6b7280;
    font-size: 14px;
}

.search-suggest-group + .search-suggest-group {
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
    padding-top: 4px;
}

.search-suggest-group-label {
    padding: 8px 18px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0;
}

.search-suggest-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    color: #1f2937;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease-in-out;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    font: inherit;
}

.search-suggest-row:hover,
.search-suggest-row.is-highlighted {
    background: #f3f4f6;
    color: #0f172a;
    text-decoration: none;
}

.search-suggest-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 18px;
}

.search-suggest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-suggest-body {
    flex: 1 1 auto;
    min-width: 0;
}

.search-suggest-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-suggest-subtitle {
    display: block;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.search-suggest-meta {
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}

.search-suggest-mark {
    background: #d4f4ea;
    color: #0f5132;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

.search-suggest-row.is-highlighted .search-suggest-mark {
    background: #b6ecd6;
    color: #064e2c;
}

/* Mobile — slightly tighter padding so the dropdown fits better. */
@media (max-width: 575.98px) {
    .search-suggest-dropdown {
        border-radius: 6px;
    }
    .search-suggest-row {
        padding: 8px 14px;
    }
    .search-suggest-group-label {
        padding-left: 14px;
        padding-right: 14px;
    }
}
