/**
 * DocSearch Clone - Algolia-style theme
 * Matches the visual appearance of official Algolia DocSearch
 */

/* Import Inter font for authentic look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Modal styling */
.docsearch-modal-content {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    border-radius: 12px;
    border: none;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Header styling */
.docsearch-header {
    background: #fff;
    border-bottom: 1px solid #e1e5e9;
    padding: 16px 20px;
}

.docsearch-searchbox {
    flex: 1;
    margin-right: 16px;
}

.docsearch-input {
    height: 48px;
    font-size: 16px;
    border: none;
    box-shadow: none;
    background: transparent;
    padding-left: 0;
}

.docsearch-input:focus {
    outline: none;
    box-shadow: none;
}

.docsearch-input::placeholder {
    color: #969faf;
}

/* Dropdown/Results area */
.docsearch-dropdown {
    max-height: 400px;
    padding: 0;
    background: #fff;
}

.docsearch-suggestions {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual suggestion styling */
.docsearch-suggestion {
    display: block;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f3f6;
    cursor: pointer;
    transition: background-color 0.1s ease;
    text-decoration: none;
    color: inherit;
}

.docsearch-suggestion:hover,
.docsearch-suggestion.active {
    background-color: #f6f8fa;
    text-decoration: none;
    color: inherit;
}

.docsearch-suggestion-title {
    font-size: 14px;
    font-weight: 500;
    color: #1a202c;
    margin-bottom: 4px;
    line-height: 1.4;
}

.docsearch-suggestion-path {
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.docsearch-suggestion-content {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.4;
}

/* Highlight matches */
.docsearch-suggestion mark {
    background: #ffe484;
    color: #1a202c;
    padding: 0;
    font-weight: 500;
}

/* Footer with keyboard hints */
.docsearch-footer {
    background: #f6f8fa;
    border-top: 1px solid #e1e5e9;
    padding: 12px 20px;
    justify-content: center;
}

.docsearch-commands {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: #6b7280;
}

.docsearch-commands-key {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    margin-right: 4px;
}

/* Empty state */
.docsearch-empty {
    padding: 40px 20px;
    text-align: center;
}

.docsearch-empty .fa {
    color: #d1d5db;
}

/* Loading state */
.docsearch-loading {
    padding: 40px 20px;
    text-align: center;
}

/* Modal responsiveness */
@media (max-width: 768px) {
    .modal-lg {
        max-width: 100%;
        margin: 0;
        height: 100vh;
    }
    
    .docsearch-modal-content {
        height: 100vh;
        border-radius: 0;
    }
    
    .docsearch-dropdown {
        max-height: calc(100vh - 120px);
    }
}

/* Search input trigger styling */
.docsearch {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23969faf' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    padding-left: 40px;
    cursor: pointer;
}

.docsearch:focus {
    cursor: text;
}

/* Animation for modal */
.modal.fade .modal-dialog {
    transform: translateY(-10px);
    transition: transform 0.2s ease-out;
}

.modal.show .modal-dialog {
    transform: translateY(0);
}

/* Scrollbar styling for results */
.docsearch-dropdown::-webkit-scrollbar {
    width: 6px;
}

.docsearch-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.docsearch-dropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.docsearch-dropdown::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Focus states for accessibility */
.docsearch-suggestion:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
}