/* =============================================================
   VedicSageFindAstrologer.css
   Corporate navy / gold / neutral theming for the public
   FindAstrologer area (Index, Search, AstrologerDetail, cards).

   Scoped under .vs-fa-page so it never leaks into the
   authenticated app or other public pages. Mirrors the
   VedicSageAuth.css pattern (dedicated scoped sheet + root scope).

   Replaces the legacy "Vedic blue + bright gold + rainbow"
   palette with the approved VedicSage corporate identity.
   Semantic status colors (live green, offline red, rating
   stars, success greens) are intentionally preserved.
   ============================================================= */

/* ---------- Corporate tokens (scoped) ---------- */
.vs-fa-page {
    --vs-navy-deep: #0E2A47;
    --vs-navy-royal: #123B68;
    --vs-gold: #C89A3D;
    --vs-gold-dark: #A87F2E;
    --vs-gold-surface: #F5EDD8;
    --vs-text-navy-dark: #0A1F38;
    --vs-text-muted: #555770;
    --vs-border: #D4D8E2;
    --vs-bg-blue-grey: #E8EEF6;
    background-color: #F8FAFC;
}

/* ---------- Hero / search header (was SaaS-blue gradient) ---------- */
.vs-fa-page .search-header,
.vs-fa-page .hero-search-section {
    background: var(--vs-navy-deep) !important;
    background-image: none !important;
}

/* Detail profile header (was blue radial gradient) */
.vs-fa-page .profile-header-bg {
    background: radial-gradient(circle at 50% 50%, #0E2A47 0%, #123B68 100%) !important;
}

/* ---------- Gold keyword / accents (was bright #ffdb58 gradient) ---------- */
.vs-fa-page .text-vedic-gold {
    color: var(--vs-gold) !important;
    background: none !important;
    -webkit-text-fill-color: var(--vs-gold) !important;
    filter: none !important;
}
.vs-fa-page .header-text::after {
    background: var(--vs-gold) !important;
}
.vs-fa-page .quick-summary-box {
    border-left-color: var(--vs-gold) !important;
}
.vs-fa-page .hero-badge {
    color: var(--vs-gold) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ---------- Primary buttons (was #1c84c6 / #3b7dd8) ---------- */
.vs-fa-page .btn-primary,
.vs-fa-page .astrologer-card .btn-primary {
    background-color: var(--vs-navy-royal) !important;
    border-color: var(--vs-navy-royal) !important;
    color: #ffffff !important;
}
.vs-fa-page .btn-primary:hover,
.vs-fa-page .btn-primary:focus,
.vs-fa-page .astrologer-card .btn-primary:hover,
.vs-fa-page .astrologer-card .btn-primary:focus {
    background-color: var(--vs-navy-deep) !important;
    border-color: var(--vs-gold) !important;
    color: #ffffff !important;
}

/* Gold CTA (Call / search button) — corporate gold + navy text */
.vs-fa-page .btn-vedic-gold,
.vs-fa-page .btn-vedic-gold-refined {
    background-color: var(--vs-gold) !important;
    border-color: var(--vs-gold) !important;
    color: var(--vs-navy-deep) !important;
}
.vs-fa-page .btn-vedic-gold:hover,
.vs-fa-page .btn-vedic-gold:focus,
.vs-fa-page .btn-vedic-gold-refined:hover,
.vs-fa-page .btn-vedic-gold-refined:focus {
    background-color: var(--vs-gold-dark) !important;
    border-color: var(--vs-gold-dark) !important;
    color: var(--vs-navy-deep) !important;
}

/* ---------- Primary text (was SaaS blue) ---------- */
.vs-fa-page .text-primary {
    color: var(--vs-navy-royal) !important;
}
.vs-fa-page a.text-primary:hover {
    color: var(--vs-navy-deep) !important;
}
.vs-fa-page .bg-primary-subtle {
    background-color: var(--vs-bg-blue-grey) !important;
    border-color: var(--vs-border) !important;
    color: var(--vs-navy-royal) !important;
}
.vs-fa-page .border-primary-subtle {
    border-color: var(--vs-border) !important;
}

/* ---------- Explicit legacy blues in FindAstrologers.css ---------- */
.vs-fa-page .read-more-btn { color: var(--vs-navy-royal) !important; }
.vs-fa-page .badge-brand-glass:hover { color: var(--vs-navy-royal) !important; }
.vs-fa-page .input-icon-refined { color: var(--vs-navy-royal) !important; }
.vs-fa-page .sort-select:focus { border-color: var(--vs-navy-royal) !important; }
.vs-fa-page .verified-icon {
    background-color: var(--vs-navy-royal) !important;
    border-color: #ffffff !important;
}
.vs-fa-page .hover-lift:hover { border-color: var(--vs-gold) !important; }
.vs-fa-page .bg-blue-subtle {
    background-color: var(--vs-bg-blue-grey) !important;
    color: var(--vs-navy-royal) !important;
}

/* ---------- Skill-tag variants (was rainbow) -> uniform navy/gold ---------- */
.vs-fa-page .variant-1 .skill-initial-icon,
.vs-fa-page .variant-2 .skill-initial-icon,
.vs-fa-page .variant-3 .skill-initial-icon,
.vs-fa-page .variant-4 .skill-initial-icon,
.vs-fa-page .variant-5 .skill-initial-icon {
    background: var(--vs-navy-royal) !important;
}
.vs-fa-page .variant-1,
.vs-fa-page .variant-2,
.vs-fa-page .variant-3,
.vs-fa-page .variant-4,
.vs-fa-page .variant-5 {
    background-color: var(--vs-gold-surface) !important;
    border-color: var(--vs-border) !important;
}

/* ---------- Language gem pills (was rainbow) -> uniform navy ---------- */
.vs-fa-page .badge-lang-gem,
.vs-fa-page .gem-en,
.vs-fa-page .gem-ta,
.vs-fa-page .gem-hi,
.vs-fa-page .gem-ml,
.vs-fa-page .gem-kn,
.vs-fa-page .gem-te {
    background: var(--vs-navy-royal) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ---------- Accessibility: visible focus ring ---------- */
.vs-fa-page a:focus-visible,
.vs-fa-page button:focus-visible,
.vs-fa-page .btn:focus-visible {
    outline: 2px solid var(--vs-gold-dark);
    outline-offset: 2px;
}