/**
 * Mutual Fund Insights WCAG 2.2 AA overrides.
 * Applied to post-24245 (MF Update) and post-24272 (MF Flows Tracker).
 * Load after insights-mf-parity.css.
 */

/* ─── SC 1.4.3: Inactive tab label (#7A7A7A → #595959, 7.0:1 on white) ─────
   Post CSS applies .elementor-heading-title { color: var(--e-global-color-text) }
   which beats a class-only selector. Match double-class specificity + !important.
   Widgets: b80a47a (Flows link on Update page), 4f0cc34 (Update link on Flows page). */
.elementor-24245 a.insight-mf-tab-link.elementor-heading-title,
.elementor-24272 a.insight-mf-tab-link.elementor-heading-title,
.elementor-24245 .elementor-element.elementor-element-b80a47a .elementor-heading-title,
.elementor-24272 .elementor-element.elementor-element-4f0cc34 .elementor-heading-title {
  color: #595959 !important;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: block;
  cursor: pointer;
}

/* Active (aria-current) tab keeps white text on navy — must follow inactive gray rule. */
.elementor-24245 a.insight-mf-tab-link.elementor-heading-title[aria-current="page"],
.elementor-24272 a.insight-mf-tab-link.elementor-heading-title[aria-current="page"] {
  color: #ffffff !important;
  cursor: default;
}

.elementor-24245 .insight-mf-tab-link:hover,
.elementor-24272 .insight-mf-tab-link:hover {
  color: #244c9b !important;
}

/* ─── SC 1.4.3: Card description text (#7A7A7A → #595959) ───────────────────
   insights-mf-parity.css uses `.elementor-24272 .insight-mf-card .insight-mf-desc`
   (3 classes). Match that specificity here so the override wins regardless of
   whether the inner content uses <p> tags or bare <div> elements.              */
.elementor-24245 .insight-mf-card .insight-mf-desc,
.elementor-24272 .insight-mf-card .insight-mf-desc,
.elementor-24245 .insight-mf-card .insight-mf-desc p,
.elementor-24272 .insight-mf-card .insight-mf-desc p,
.elementor-24245 .insight-mf-card .insight-mf-desc div,
.elementor-24272 .insight-mf-card .insight-mf-desc div {
  color: #595959 !important;
}

/* ─── SC 1.4.3 + 1.4.11: Active tab — navy bg + white text ──────────────────
   Accent (#A7BFFD/#A8C1FF) with primary text (#2460C5) fails SC 1.4.11 / 1.4.3.
   Override widget-wrap to #244C9B (8.13:1 vs white).
   af37493 = active tab on Update page; bf0b8b0 = active tab on Flows page.     */
.elementor-24245 .elementor-element.elementor-element-af37493:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-24245 .elementor-element.elementor-element-af37493 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #244c9b !important;
}

.elementor-24272 .elementor-element.elementor-element-bf0b8b0:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-24272 .elementor-element.elementor-element-bf0b8b0 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #244c9b !important;
}

.elementor-24245 .elementor-element.elementor-element-af37493 .elementor-heading-title,
.elementor-24245 .elementor-element.elementor-element-af37493 a.elementor-heading-title,
.elementor-24245 .elementor-element.elementor-element-4f0cc34 .elementor-heading-title,
.elementor-24272 .elementor-element.elementor-element-bf0b8b0 .elementor-heading-title,
.elementor-24272 .elementor-element.elementor-element-bf0b8b0 a.elementor-heading-title,
.elementor-24272 .elementor-element.elementor-element-1b36f73 .elementor-heading-title {
  color: #ffffff !important;
}

/* ─── Focus indicator — "Open an Account" on dark hero ────────────────────── */
.elementor-24245 .elementor-element-1546caa .elementor-button-wrapper:focus-within,
.elementor-24272 .elementor-element-1546caa .elementor-button-wrapper:focus-within {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* ─── Focus indicator — inactive tab link ─────────────────────────────────── */
.elementor-24245 .insight-mf-tab-link:focus-visible,
.elementor-24272 .insight-mf-tab-link:focus-visible {
  outline: 3px solid #244c9b;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Focus indicator — current-page tab link (navy active column) ────────── */
.elementor-24245 a[aria-current="page"].elementor-heading-title:focus-visible,
.elementor-24272 a[aria-current="page"].elementor-heading-title:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}