/* --- 1. TITLE & SEARCH BAR STYLING --- */

/* New dedicated class for the title */
.search-page-title {
    font-size: 25px;
    color: var(--heading-color);
    background: linear-gradient(to left, var(--gradient-start), var(--gradient-end));
    text-align: center;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
    -webkit-background-clip: text;
    background-clip: text;
}

.custom-search-wrapper { 
    max-width: 600px; 
    margin: 0 auto 3rem auto;
}

.search-form { display: flex; position: relative; }

/* Hide the Native Browser Clear Button */
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

.search-input { 
    width: 100%; 
    /* Right padding increased to 90px to fit both the X and the Search Icon */
    padding: 1rem 72px 1rem 1.25rem; 
    font-size: 20px; 
    border-radius: 99px; 
    border: 2px solid var(--border-color); 
    background: var(--sidebar-bg); 
    color: var(--text-color); 
    outline: none; 
    transition: box-shadow 0.2s; 
}
.search-input:focus { box-shadow: 0 0 0 2.2px var(--link-color); }

/* Custom Clear 'X' Button Styling */
.search-clear-btn {
    display: none; /* Hidden by default via JS */
    position: absolute;
    right: 50px; /* Positioned to the left of the search icon */
    top: 50%;
    transform: translateY(-50%);
    
    /* Reset Button Styles */
    background: transparent;
    border: none;
    cursor: pointer;
    
    /* Font Styling for the X */
    font-family: Arial, sans-serif; 
    font-weight: 700; 
    font-size: 21px; 
    color: #ff6782; 
    
    /* Circle Layout */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
    padding: 0;
    z-index: 2;
}

.search-clear-btn:hover {
    color: #b04559; 
}

.search-submit-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--bg-color); color: var(--meta-text-color); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.search-submit-btn:hover { background: var(--bg-color); }

/* --- 2. GRID FIXES --- */
.ais-Hits-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
@media (min-width: 992px) { .ais-Hits-list { grid-template-columns: repeat(4, 1fr); } }
.ais-Hits-item { width: 100%; margin: 0; padding: 0; }

/* --- 3. PAGINATION STYLING --- */
.ais-Pagination-list { display: flex; justify-content: center; gap: 1px; list-style: none; padding: 0; margin-top: 3rem; }
.ais-Pagination-link { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--sidebar-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 50%; text-decoration: none; font-weight: 600; transition: all 0.2s; }
.ais-Pagination-link:hover { background: var(--bg-color); border-color: var(--link-color); color: var(--link-color); }
.ais-Pagination-item--selected .ais-Pagination-link { background: var(--link-color); color: #fff; border-color: var(--link-color); }
.ais-Pagination-item--disabled .ais-Pagination-link { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* --- 4. EDITABLE CSS FOR CARD TEXT --- */
.article-card-small .card-content { padding: 1rem; display: flex; flex-direction: column; flex-grow: 1; }
.card-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--meta-text-color); text-transform: uppercase; margin-bottom: 0.5rem; }
.card-category { color: var(--link-color); text-decoration: none; }
.card-category:hover { text-decoration: underline; }
.card-meta-separator { color: var(--border-color); opacity: 0.5; }
.card-title { font-size: 25px; font-weight: 700; line-height: 1.4; margin: 0 0 0.5rem 0; margin-top: 10px;  flex-grow: 1; }
.card-title a { color: var(--link-color); text-decoration: none; transition: color 0.2s; }
.card-title a:hover { color: var(--text-color); text-decoration: underline; }
.card-description { font-size: 0.875rem; color: var(--meta-text-color); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ais-Highlight-highlighted, .ais-Snippet-highlighted { background: #fde047; color: #111827; font-style: normal; font-weight: 600; }
.dark-mode .ais-Highlight-highlighted, .dark-mode .ais-Snippet-highlighted { background: #a16207; color: #f8fafc; }