/**
 * UMMReadAloud — the sentence being read, and the button that starts it.
 * See assets/js/umm-read-aloud.js.
 */

/* The sentence being read (CSS Custom Highlight API). Explicit colours on both
   sides, so it stays readable on a dark page and under high contrast. */
::highlight(umm-reading) {
    background-color: #fde047;
    color: #111827;
}

/* Browsers without the Highlight API mark the paragraph instead. */
.umm-reading-block {
    background-color: #fef9c3 !important;
    color: #111827 !important;
    box-shadow: -4px 0 0 #eab308;
}

/* While something is being read, its text takes a click to continue from there. */
html.umm-reading-active [data-umm-reading-root] p,
html.umm-reading-active [data-umm-reading-root] li,
html.umm-reading-active [data-umm-reading-root] h1,
html.umm-reading-active [data-umm-reading-root] h2,
html.umm-reading-active [data-umm-reading-root] h3 {
    cursor: pointer;
}

/* A "read this" button while it is reading. */
[data-umm-read].is-reading {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}

[data-umm-read].is-reading .dashicons {
    color: #fff !important;
}

@media print {
    ::highlight(umm-reading) { background-color: transparent; color: inherit; }
    .umm-reading-block { background-color: transparent !important; box-shadow: none; }
}