/* Read Aloud component (ERP micro-site). Uses the ERP theme tokens from erp.css. */
.read-aloud-btn,
.read-aloud-stop {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 30px;
  height: 30px;
  margin: 0 0 0 8px;
  padding: 0;
  border: 1px solid rgba(246, 190, 0, .55);
  border-radius: 50%;
  background: rgba(246, 190, 0, .12);
  color: var(--erp-primary-dark, #d9a700);
  font: 600 13px/1 Roboto, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
/* 44x44px touch target without enlarging the visible icon */
.read-aloud-btn::before,
.read-aloud-stop::before {
  content: "";
  position: absolute;
  inset: -7px;
}
.read-aloud-btn i,
.read-aloud-stop i { font-size: 12px; pointer-events: none; }
.read-aloud-btn:hover,
.read-aloud-stop:hover { background: var(--erp-primary, #F6BE00); border-color: var(--erp-primary, #F6BE00); color: var(--erp-dark, #1b1a1a); }
.read-aloud-btn:focus-visible,
.read-aloud-stop:focus-visible { outline: 2px solid var(--erp-primary, #F6BE00); outline-offset: 3px; }
.read-aloud-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Playing / paused: filled button (shape + icon change, not color alone) */
.read-aloud-btn.read-aloud-active { background: var(--erp-primary, #F6BE00); border-color: var(--erp-primary, #F6BE00); color: var(--erp-dark, #1b1a1a); }
.read-aloud-btn.read-aloud-paused { background: transparent; border-style: dashed; color: var(--erp-primary-dark, #d9a700); }
.read-aloud-stop { margin-left: 6px; border-color: rgba(27, 26, 26, .25); background: #fff; color: var(--erp-dark, #1b1a1a); }
.read-aloud-stop i { font-size: 10px; }

/* "Listen" pill for blocks without a heading */
.read-aloud-row { display: flex; align-items: center; margin: 10px 0 0; }
.erp-grid > .read-aloud-row, .erp-roles > .read-aloud-row, [data-read-label] > .read-aloud-row { grid-column: 1 / -1; margin: 0 0 4px; }
.read-aloud-btn--pill { width: auto; height: 30px; margin-left: 0; padding: 0 12px; border-radius: 16px; }

/* Headings: keep the button on the same line as the last word where possible */
h1 > .read-aloud-btn, h2 > .read-aloud-btn { top: -3px; }
.erp-cat__title > .read-aloud-btn { top: -1px; }

/* On dark backgrounds use the bright accent */
.erp-hero .read-aloud-btn, .erp-section--dark .read-aloud-btn:not(.erp-pf__detail .read-aloud-btn),
.erp-cta .read-aloud-btn { color: var(--erp-primary, #F6BE00); background: rgba(246, 190, 0, .1); }
.erp-hero .read-aloud-btn.read-aloud-active, .erp-section--dark .read-aloud-btn.read-aloud-active:not(.erp-pf__detail .read-aloud-btn),
.erp-cta .read-aloud-btn.read-aloud-active { color: var(--erp-dark, #1b1a1a); background: var(--erp-primary, #F6BE00); }

/* Block currently being read: subtle accent, no animation */
.read-aloud-reading {
  background-color: rgba(246, 190, 0, .08) !important;
  box-shadow: inset 3px 0 0 var(--erp-primary, #F6BE00);
  border-radius: 6px;
}
.erp-hero .read-aloud-reading, .erp-section--dark .read-aloud-reading:not(.erp-pf__detail),
.erp-cta .read-aloud-reading { background-color: rgba(246, 190, 0, .06) !important; }

@media (prefers-reduced-motion: reduce) {
  .read-aloud-btn, .read-aloud-stop { transition: none; }
}

/* On yellow (primary-colored) cards use dark styling so the button stays visible */
.feature-item-custom .read-aloud-btn, .bg-primary .read-aloud-btn, .erp-stats .read-aloud-btn {
  color: var(--erp-dark, #1b1a1a); background: rgba(255, 255, 255, .35); border-color: rgba(27, 26, 26, .45);
}
.feature-item-custom .read-aloud-btn.read-aloud-active, .bg-primary .read-aloud-btn.read-aloud-active {
  color: #fff; background: var(--erp-dark, #1b1a1a); border-color: var(--erp-dark, #1b1a1a);
}
.feature-item-custom .read-aloud-reading, .feature-item-custom.read-aloud-reading { box-shadow: inset 3px 0 0 var(--erp-dark, #1b1a1a); }