/* =====================================================================
   Quarter Results — Homepage "Professional" layer
   Loaded LAST on index.php so it refines the base index.css.
   Goals: calmer motion, a disciplined single-accent palette, and a
   premium icon/card system suited to a financial audience.
   ===================================================================== */

:root {
    --qr-pro-navy: #0b1220;
    --qr-pro-ink: #0f172a;
    --qr-pro-accent: #0052cc;
    --qr-pro-accent-strong: #003d99;
    --qr-pro-accent-tint: #eef4ff;
    --qr-pro-accent-tint-2: #e0ecff;
    --qr-pro-border: #e6ebf2;
    --qr-pro-border-hover: #cdddff;
    --qr-pro-muted: #64748b;
    --qr-pro-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    --qr-pro-shadow-lift: 0 14px 30px rgba(2, 32, 84, 0.10);
}

/* ---------------------------------------------------------------------
   1. Calm the looping motion — professional = composed, not flashy.
   Entrance fades are kept; the perpetual pulse/sweep/glow loops are not.
--------------------------------------------------------------------- */
.hero-badge { animation: none; }
.hero-badge::before { display: none; }
.hero::after { animation: none; opacity: 0.5; }
.search-container::before { animation: none; opacity: 0.7; }

.hero-badge {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

/* Tighten the hero type for a more authoritative feel */
.hero-content h1 { letter-spacing: -0.025em; }
.hero-subtitle { opacity: 0; color: rgba(255, 255, 255, 0.88); font-weight: 400; }

/* ---------------------------------------------------------------------
   2. Section headers — single deep-accent underline
--------------------------------------------------------------------- */
.section-header h2::after {
    background: var(--qr-pro-accent);
    width: 48px;
    height: 3px;
}

/* ---------------------------------------------------------------------
   3. Sector cards + icon badges (the main visual upgrade)
--------------------------------------------------------------------- */
.sectors .sector-card {
    padding: 1.75rem 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--qr-pro-border);
    box-shadow: var(--qr-pro-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Drop the top accent bar; the inverting icon badge carries the accent */
.sectors .sector-card::before { display: none; }

.sectors .sector-card:hover {
    transform: translateY(-4px);
    border-color: var(--qr-pro-border-hover);
    box-shadow: var(--qr-pro-shadow-lift);
}

.sectors .sector-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--qr-pro-accent-tint) 0%, var(--qr-pro-accent-tint-2) 100%);
    border: 1px solid #d6e4ff;
    color: var(--qr-pro-accent);
    font-size: 0; /* neutralize old emoji sizing */
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sectors .sector-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.sectors .sector-card:hover .sector-icon {
    background: var(--qr-pro-accent);
    border-color: var(--qr-pro-accent);
    color: #ffffff;
    transform: translateY(-1px);
}

.sectors .sector-card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--qr-pro-ink);
}

.sectors .sector-card p {
    color: var(--qr-pro-muted);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------
   4. Featured result cards — consistent radius + restrained shadow
--------------------------------------------------------------------- */
.featured-results .result-card {
    border-radius: 16px;
    box-shadow: var(--qr-pro-shadow);
}
.featured-results .result-card:hover {
    box-shadow: var(--qr-pro-shadow-lift);
}

/* ---------------------------------------------------------------------
   5. Buttons / links — unify on the brand accent
--------------------------------------------------------------------- */
.view-all-btn {
    background: var(--qr-pro-accent);
    border-color: var(--qr-pro-accent);
}
.view-all-btn:hover {
    background: var(--qr-pro-accent-strong);
    border-color: var(--qr-pro-accent-strong);
}

.hero-cta-primary { color: var(--qr-pro-accent-strong); border-radius: 12px; }
.hero-cta-secondary { border-color: rgba(255, 255, 255, 0.45); }

.pillar-link,
.section-description a { color: var(--qr-pro-accent); }

/* ---------------------------------------------------------------------
   6. Accessibility — respect reduced-motion AND make sure fade-in
   elements (which start at opacity:0) are never left invisible.
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-content,
    .h1-line,
    .hero-subtitle,
    .hero-cta-group,
    .search-section,
    .quick-links,
    .stat-item {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    .sectors .sector-card,
    .featured-results .result-card,
    .sectors .sector-icon {
        transition: none !important;
    }
}