/**
 * Knowledge Corner WCAG 2.2 AA overrides.
 * Applied to post-24317 (Investment Basics for All), post-24343 (For Investors),
 * post-24369 (For Traders), post-24385 (For Mutual Fund Investors).
 * Load as afterCss on each Knowledge Corner page.
 */

/* ─── Fix #3: Text contrast — inactive tab links (#7A7A7A → #595959, 7.0:1) ──
   Post CSS applies .elementor-heading-title { color: … } which beats a class-only
   selector. Add the .elementor-heading-title class to the selector to match post
   CSS specificity, then !important as final fallback.                            */
.elementor-24317 a.insight-kc-tab-link.elementor-heading-title:not([aria-current="page"]),
.elementor-24343 a.insight-kc-tab-link.elementor-heading-title:not([aria-current="page"]),
.elementor-24369 a.insight-kc-tab-link.elementor-heading-title:not([aria-current="page"]),
.elementor-24385 a.insight-kc-tab-link.elementor-heading-title:not([aria-current="page"]) {
  color: #595959 !important;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: block;
  cursor: pointer;
}

.elementor-24317 .insight-kc-tab-link:hover:not([aria-current="page"]),
.elementor-24343 .insight-kc-tab-link:hover:not([aria-current="page"]),
.elementor-24369 .insight-kc-tab-link:hover:not([aria-current="page"]),
.elementor-24385 .insight-kc-tab-link:hover:not([aria-current="page"]) {
  color: #244c9b;
}

/* ─── Fix #3: Article date contrast (#878782 → #595959, 7.0:1) ──────────── */
.elementor-24317 .insight-kc-date,
.elementor-24343 .elementor-element-6e63014 .elementor-heading-title,
.elementor-24369 .insight-kc-date,
.elementor-24385 .insight-kc-date {
  color: #595959;
}

/* ─── Fix #4: Non-text contrast — active tab background ─────────────────────
   #A8C1FF is 1.8:1 vs white (fails SC 1.4.11 ≥3:1).
   Override to #244C9B (8.59:1 vs white).
   Active col per page: af37493 (Inv Basics), bf0b8b0 (For Investors),
   1af5402 (For Traders), dbc870c (For MF Investors).                          */

/* Investment Basics for All — active tab af37493 */
.elementor-24317 .elementor-element.elementor-element-af37493:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-24317 .elementor-element.elementor-element-af37493 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #244c9b !important;
}
.elementor-24317 .elementor-element.elementor-element-af37493 .elementor-heading-title,
.elementor-24317 .elementor-element.elementor-element-af37493 span.elementor-heading-title,
.elementor-24317 .elementor-element.elementor-element-af37493 a.elementor-heading-title {
  color: #ffffff !important;
}

/* For Investors — active tab bf0b8b0 */
.elementor-24343 .elementor-element.elementor-element-bf0b8b0:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-24343 .elementor-element.elementor-element-bf0b8b0 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #244c9b !important;
}
.elementor-24343 .elementor-element.elementor-element-bf0b8b0 .elementor-heading-title,
.elementor-24343 .elementor-element.elementor-element-bf0b8b0 span.elementor-heading-title,
.elementor-24343 .elementor-element.elementor-element-bf0b8b0 a.elementor-heading-title {
  color: #ffffff !important;
}

/* For Traders — active tab 1af5402 */
.elementor-24369 .elementor-element.elementor-element-1af5402:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-24369 .elementor-element.elementor-element-1af5402 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #244c9b !important;
}
.elementor-24369 .elementor-element.elementor-element-1af5402 .elementor-heading-title,
.elementor-24369 .elementor-element.elementor-element-1af5402 span.elementor-heading-title,
.elementor-24369 .elementor-element.elementor-element-1af5402 a.elementor-heading-title {
  color: #ffffff !important;
}

/* For Mutual Fund Investors — active tab dbc870c */
.elementor-24385 .elementor-element.elementor-element-dbc870c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-24385 .elementor-element.elementor-element-dbc870c > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #244c9b !important;
}
.elementor-24385 .elementor-element.elementor-element-dbc870c .elementor-heading-title,
.elementor-24385 .elementor-element.elementor-element-dbc870c span.elementor-heading-title,
.elementor-24385 .elementor-element.elementor-element-dbc870c a.elementor-heading-title {
  color: #ffffff !important;
}

/* ─── Fix #5: Focus indicator — "Open an Account" on dark hero ──────────────
   globals.css puts a black ring on .elementor-button-wrapper:focus-within.
   On the dark navy hero black gives ~2:1. Override to white (21:1).           */
.elementor-24317 .elementor-element.elementor-element-1546caa .elementor-button-wrapper:focus-within,
.elementor-24343 .elementor-element.elementor-element-1546caa .elementor-button-wrapper:focus-within,
.elementor-24369 .elementor-element.elementor-element-1546caa .elementor-button-wrapper:focus-within,
.elementor-24385 .elementor-element.elementor-element-1546caa .elementor-button-wrapper:focus-within {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* ─── Focus indicator — inactive tab links ───────────────────────────────── */
.elementor-24317 .insight-kc-tab-link:focus-visible,
.elementor-24343 .insight-kc-tab-link:focus-visible,
.elementor-24369 .insight-kc-tab-link:focus-visible,
.elementor-24385 .insight-kc-tab-link:focus-visible {
  outline: 3px solid #244c9b;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Focus indicator — current-page tab link ────────────────────────────── */
.elementor-24317 a[aria-current="page"].elementor-heading-title:focus-visible,
.elementor-24343 a[aria-current="page"].elementor-heading-title:focus-visible,
.elementor-24369 a[aria-current="page"].elementor-heading-title:focus-visible,
.elementor-24385 a[aria-current="page"].elementor-heading-title:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}