/* Story page: picture captions written in CKEditor, the date row and the Listen control (_ReadAloud). */

/* CKEditor writes <figure class="image"><img><figcaption>…</figcaption></figure> into the story body. */
.article-content figure.image,
.article-content figure {
    margin: 1.75rem auto;
    max-width: 100%;
}
.article-content figure.image img,
.article-content figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .4rem;
}
.article-content figure figcaption,
.article-caption {
    display: block;
    margin: .7rem 0 0;
    padding: 0 .25rem .2rem .75rem;
    border-left: 3px solid #f5c127;
    font-family: 'Maven Pro', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #4a4a57;
    text-align: left;
}
.article-caption-container { margin: .25rem 0 .5rem; }

/* Date · reading time · Listen */
.article-flex-div-1 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.article-flex-div-1 time.article-date { white-space: nowrap; }

.ra-controls { display: inline-flex; align-items: center; gap: .35rem; }
.ra-btn, .ra-stop {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid #000a44;
    background: transparent;
    color: #000a44;
    border-radius: 2rem;
    font-family: 'Maven Pro', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.ra-btn { padding: .35rem .8rem .35rem .55rem; }
.ra-stop { padding: .35rem; }
.ra-btn .material-icons, .ra-stop .material-icons { font-size: 1.15rem; }
.ra-btn:hover, .ra-btn.ra-active { background: #000a44; color: #fff; }
.ra-stop:hover { background: #c40000; border-color: #c40000; color: #fff; }
.ra-stop[hidden] { display: none; }
.ra-unsupported .ra-controls { display: none; }

.video-dark-theme .ra-btn, .video-dark-theme .ra-stop { border-color: #fff; color: #fff; }
.video-dark-theme .ra-btn:hover, .video-dark-theme .ra-btn.ra-active { background: #fff; color: #13102c; }

/* What is being read */
.article-content .ra-reading {
    background: linear-gradient(90deg, rgba(245, 193, 39, .18), rgba(245, 193, 39, .05));
    box-shadow: -4px 0 0 #f5c127;
    border-radius: .2rem;
    transition: background-color .3s;
}
::highlight(ra-word) {
    background-color: #f5c127;
    color: #000a44;
}