/* WCAG Accessibility Overrides for Impact Investing Report */

/* ── Issue 181: Replace image-of-text plus/equal with styled characters ── */
.plus_icon_text,
.equal_icon_text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: 300;
  color: #ffffff;
  line-height: 1;
  width: 100%;
}

/* ── Issue 203: Visible focus ring when the modal dialog receives initial focus ── */
/* Plain :focus (not :focus-visible) is used deliberately — the dialog is
   focused programmatically from a click handler, and browsers' focus-visible
   heuristic often suppresses the ring for script-triggered focus that follows
   a pointer event. A modal opening is a significant context change, so the
   ring should always show regardless of input modality. */
.popup_box:focus {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* ── Issue 185: Focus rings for buttons and links ── */
/* app.min.css sets `.btn_default { outline: none !important; }` (line ~1390),
   which silently defeats a non-important override regardless of specificity —
   this rule must also be !important to actually win. */
.btn_default:focus-visible,
.open_popup:focus-visible,
a.btn_default:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid #363157 !important;
  outline-offset: 2px !important;
}

/* ── Issue 188: Contrast fixes ── */
/* #BD8876 on #FBFAEB was 2.9:1 — replace with accessible dark colour */
.bg_biege .text_primary,
.section_common .section_sub_title,
.section_common .sidebar_index,
.sidebar_index {
  color: #7d5040; /* 5.8:1 on #FBFAEB */
}

/* Stage of investment section headings/body: #BD8876 on #FBFAEB was 2.9:1 */
#section_3 .section_title,
#section_3 .section_desc p,
#section_3 .section_sub_title,
#section_4 .section_title,
#section_4 .section_desc p,
#section_4 .section_sub_title,
#section_5 .section_title,
#section_5 .section_desc p,
#section_5 .section_sub_title,
#section_6 .section_title,
#section_6 .section_desc p,
#section_6 .section_sub_title {
  color: #5c3320 !important; /* 7.5:1 on #FBFAEB */
}

/* Section 1 banner question text: .text_man_reg on darkened bg #7d4a37 */
.section1_1 .sec_1_1_right p {
  color: #ffffff !important; /* 6.9:1 on #7d4a37 */
}

/* Section 1 banner intro text: #FCFAFA on #A67971 was 3.6:1 — background is
   lighter/warmer here than the right column's #7d4a37, so white text only
   reaches ~3.76:1 (still fails AA); use near-black instead for ~5.6:1 */
.section1_1 .sec_1_1_left p {
  color: #000000 !important;
}

/* Stage of investment percentage text: #CBC7E5 on #6A6793 was 3.2:1 */
#section_3 .text_reg,
#section_3 .series_item .text_reg {
  color: #ffffff !important; /* 5.2:1 on #6A6793 */
}


/* Archetypes expanded content text: #FFFFFF on #BD8876 was 3.1:1 — bg darkened above covers this */

/* Footer copyright — #B98573 on #FBFAEB was 3.1:1 */
footer .text_xs {
  color: #7d5040; /* accessible shade */
}

/* ── Issue 196: Active sidebar item — not colour alone ── */
.sidebar_item.active .sidebar_text,
.sidebar_item[aria-current="true"] .sidebar_text {
  font-weight: 700;
  text-decoration: underline;
}

/* ── Issue 198: Sidebar step-number contrast ── */
/* The badge appears over varying section backgrounds:
   #ADABBA (section 1), #454C76 (sections 2-3), #FBFAEB (sections 4+).
   White text on #ADABBA gives only 2.2:1 — fails. Fix: lock the badge to a
   solid dark background so contrast is always 12.25:1 regardless of scroll pos. */
.sidebar_index {
  background-color: #363157 !important;
  color: #ffffff !important;
}

/* ── Sidebar item spacing — li wrapper fix ── */
/* Original design had .sidebar_item as a direct child of .sidebar_inner so
   margin-bottom:30px spaced between items. After wrapping in <li> the margin
   acts inside the <li> rather than between items. Move spacing to <li> and
   cancel the original margin on .sidebar_item so it doesn't double up. */
#index_page #sidebar_menu .sidebar_inner li {
  margin-bottom: 30px;
}
#index_page #sidebar_menu .sidebar_inner li:last-child {
  margin-bottom: 0;
}
/* Higher specificity (adds element selector) overrides original margin-bottom:30px
   on .sidebar_item so spacing is controlled only by the <li> above. */
#index_page #sidebar_menu .sidebar_inner li .sidebar_item {
  margin-bottom: 0;
}

/* ── Issue 195: Sidebar hover content also appears on focus ── */
/* Must match/exceed the base rule's specificity (#index_page #sidebar_menu
   .sidebar_inner .sidebar_item .sidebar_text = 2 IDs + 3 classes); the
   previous #sidebar_menu .sidebar_item:focus .sidebar_text version (1 ID)
   was silently losing to it, so :focus never actually revealed the text. */
#index_page #sidebar_menu .sidebar_inner .sidebar_item:focus .sidebar_text,
#index_page #sidebar_menu .sidebar_inner .sidebar_item:focus-within .sidebar_text {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

/* ── Issue 189 / 190: Reflow at 320px and 200% zoom ── */
@media (max-width: 360px) {
  #scrollDownArea {
    position: static !important;
    margin-top: 1rem;
  }
  .banner_text {
    padding-bottom: 0.5rem;
  }
}

@media (max-width: 480px) {
  #section_7 .bar_graph_wrap {
    overflow-x: auto;
  }
  #section_7 .bar_graph_inner {
    min-width: 600px;
  }
}

/* ── SR-only utility (if not already present) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Issue 192/193: Archetype toggle button styling ── */
.archetypes_box_desc .icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.archetypes_box_desc .icon-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Issue 183: Video pause button — pill style matching OverviewPressclub ── */
#section_1 {
  position: relative;
}
.video_pause_btn {
  position: absolute;
  top: 100px;
  right: 20px;
  width: fit-content;
  background: none;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, color 0.2s ease;
  pointer-events: all;
}
.video_pause_btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.video_pause_btn:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}
.video_pause_btn .video_btn_icon {
  font-size: 11px;
  line-height: 1;
}
.video_pause_btn .video_btn_text {
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Form label visibility ── */
/* .popup_box background is #363157 — same color as before, making labels
   invisible against the dialog. White gives ~11:1 contrast on that background. */
.form_item label {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  color: #ffffff;
}

/* ── Form field errors ── */
.field-error,
.field-error label {
  display: block;
  color: #c0392b;
  font-size: 12px;
  margin-top: 4px;
}
.field-error:empty { display: none; }
input[aria-invalid="true"] {
  border-color: #c0392b;
  outline: 2px solid #c0392b;
}

/* ── CAPTCHA description ── */
#captcha-desc {
  font-size: 12px;
  color: #363157;
  margin-bottom: 8px;
}

/* ── CAPTCHA: visible focus ring on keyboard focus ── */
/* The checkbox itself renders inside a cross-origin Google iframe we can't
   style directly, and its own internal focus styling isn't reliable across
   browsers. :focus-within on the wrapper activates whenever that iframe
   holds focus (a focused iframe matches :focus in the parent document),
   giving a focus indicator that doesn't depend on Google's widget at all. */
.g-recaptcha:focus-within {
  outline: 3px solid #363157;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── CSS outline on all interactive elements ── */
.icon-btn:focus-visible,
.icon-btn.icon:focus-visible {
  outline: 2px solid #363157;
  outline-offset: 2px;
}