/* =========================================================================
   advanced-search.css
   All styling used exclusively by the Advanced Search panel:
     - Filter bar / category toggle pills
     - Result tabs (News & Updates / Other Matching Pages & Documents)
     - Tab-pane crossfade animation
     - Pagination controls
     - News & Updates result cards (modern animated card redesign)

   Previously split between an inline <style> block in sso_main_login.jsp
   and a JS-injected <style> tag in portal.js. Consolidated here so all
   Advanced Search styling lives in one place.
   ========================================================================= */

/* --- Result rows: CSS-only hover lift (no per-row JS listeners) --------- */
.advanced-search-hoverable {
    transition: transform 0.2s, box-shadow 0.2s;
}

.advanced-search-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- Category filter pills ---------------------------------------------- */
.advanced-search-toggle {
    border: 1px solid #c8d6e5;
    background-color: #fff;
    color: #1a237e;
    border-radius: 999px;
    padding: 0.32rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.advanced-search-toggle:hover {
    background-color: #f0f6ff;
    border-color: #1a237e;
}

.advanced-search-toggle.active {
    background-color: #1a237e;
    border-color: #1a237e;
    color: #fff;
}

/* --- Result tabs ---------------------------------------------------------
   Selectors are deliberately scoped AND given higher specificity
   (#advancedSearchTabs.advanced-search-tabs ...) so they reliably win over
   the unrelated, source-order-later dark .nav-tabs .nav-link rule used by
   the PDF viewer elsewhere on the page — same specificity + later in the
   stylesheet was letting that rule silently override this one. */
#advancedSearchTabs.advanced-search-tabs {
    border-bottom: 1px solid #dee2e6;
    gap: 0.4rem;
}

#advancedSearchTabs.advanced-search-tabs .nav-link {
    background-color: #f1f5fb;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #495057;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.55rem 1rem;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

#advancedSearchTabs.advanced-search-tabs .nav-link:hover {
    background-color: #e3edfb;
    color: #1a237e;
}

#advancedSearchTabs.advanced-search-tabs .nav-link.active {
    background-color: #1a237e;
    border-color: #1a237e;
    color: #fff;
}

#advancedSearchTabs.advanced-search-tabs .nav-link.active:hover {
    background-color: #1a237e;
    color: #fff;
}

#advancedSearchTabs.advanced-search-tabs .nav-link .badge {
    background-color: #d7e3f5;
    color: #1a237e;
    font-weight: 600;
    font-size: 0.72rem;
    transition: background-color 0.25s ease, color 0.25s ease;
}

#advancedSearchTabs.advanced-search-tabs .nav-link.active .badge {
    background-color: #fff;
    color: #1a237e;
}

/* --- Tab-pane switch animation -------------------------------------------
   Bootstrap's .fade only animates opacity and skips the transition on the
   pane being shown unless .show is added on the next frame, so both states
   are explicitly defined here for a visible crossfade + slide. */
.advanced-search-tab-content {
    background: #fff;
}

.advanced-search-tab-content .tab-pane {
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(4px);
}

.advanced-search-tab-content .tab-pane.show {
    transform: translateY(0);
}

/* --- Pagination, matched to brand blue ----------------------------------- */
#advancedSearchNewsPagination .page-link,
#advancedSearchSitePagination .page-link {
    color: #1a237e;
}

#advancedSearchNewsPagination .page-item.active .page-link,
#advancedSearchSitePagination .page-item.active .page-link {
    background-color: #1a237e;
    border-color: #1a237e;
}

/* =========================================================================
   News & Updates result cards
   Modern animated card redesign (previously injected at runtime by
   portal.js as the #advSearchNewsCardStyle <style> tag).
   ========================================================================= */
.adv-news-card {
    position: relative;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    animation: advNewsCardFadeIn .35s ease both;
}

.adv-news-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #1a237e, #42a5f5);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .25s ease;
}

.adv-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(21, 101, 192, 0.12);
    border-color: #d6e4f7;
}

.adv-news-card:hover::before {
    transform: scaleY(1);
}

.adv-news-card .adv-news-title {
    color: #1d2733;
    transition: color .2s ease;
}

.adv-news-card:hover .adv-news-title {
    color: #1a237e;
}

.adv-news-card .adv-news-badge {
    background: #fdecea;
    color: #d32f2f;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .2rem .55rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.adv-news-card .adv-news-date {
    color: #6b7280;
    font-size: .82rem;
}

.adv-news-card .adv-news-action-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #e5e9ef;
    background: #f8f9fb;
    color: #495057;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.adv-news-card .adv-news-action-btn:hover {
    transform: translateY(-2px) scale(1.06);
    background: #1a237e;
    color: #fff;
    box-shadow: 0 6px 14px rgba(21, 101, 192, 0.28);
}

.adv-news-card .adv-news-action-btn.adv-news-download:hover {
    background: #2e7d32;
    box-shadow: 0 6px 14px rgba(46, 125, 50, .28);
}

.adv-news-card .adv-news-action-btn.adv-news-share:hover {
    background: #6a1b9a;
    box-shadow: 0 6px 14px rgba(106, 27, 154, .28);
}

@keyframes advNewsCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .adv-news-card,
    .adv-news-card .adv-news-action-btn {
        animation: none !important;
        transition: none !important;
    }
}