/* =====================================================================
   Quarter Results — Sectors page "Professional" layer
   Loaded AFTER sectors-professional.css. Renders the new inline SVG
   sector icons at the right size/contrast in each context, matching the
   homepage icon language. Intentionally conservative: it sizes/centers
   the SVGs without changing the existing container boxes.
   ===================================================================== */

/* Nav pills: icon follows the pill's own text color so it stays correctly
   contrasted in both the default and active (accent-filled) states. */
.sector-nav-item .sector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    line-height: 0;
}
.sector-nav-item .sector-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Sector cards (the "All sectors" grid) */
.sector-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0052cc;
    line-height: 0;
}
.sector-card-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}

/* Sector detail header */
.sector-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0052cc;
    line-height: 0;
}
.sector-detail-icon svg {
    width: 40px;
    height: 40px;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .sector-nav-item,
    .sector-card,
    .sector-card-icon {
        transition: none !important;
    }
}