/*
 * Pages written in the panel. The editor's markup, laid out inside the
 * website's content area.
 */

/*
 * The band across the top of a page keeps the shape the design drew it in —
 * its own banner is 2149 by 498 — so a picture uploaded in any shape is filled
 * into that band rather than setting the height itself.
 */
.cyclingbanner {
    aspect-ratio: 2149 / 250;
    overflow: hidden;
}

.cyclingbanner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-content > :first-child {
    margin-top: 0;
}

.page-content > :last-child {
    margin-bottom: 0;
}

/*
 * Headings, paragraphs and lists are left to the design's own stylesheet, so a
 * page written in the panel reads exactly like the pages it was drawn from.
 */
.page-content img {
    max-width: 100%;
    height: auto;
}

.page-content > p img,
.page-content > img {
    border-radius: 0.5rem;
}

/* Links to uploaded documents read as files, not as ordinary links. */
.page-content a[href$=".pdf"]::before,
.page-content a[href$=".doc"]::before,
.page-content a[href$=".docx"]::before,
.page-content a[href$=".xls"]::before,
.page-content a[href$=".xlsx"]::before,
.page-content a[href$=".ppt"]::before,
.page-content a[href$=".pptx"]::before {
    content: "\1F4C4";
    margin-right: 0.35rem;
    text-decoration: none;
}

.page-content blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 4px solid #f29338;
    color: #687188;
}

/*
 * The editor writes alignment and indentation as classes rather than inline
 * styles, so the site has to understand them for the content to read as it did
 * in the panel.
 */
.page-content .ql-align-center {
    text-align: center;
}

.page-content .ql-align-right {
    text-align: right;
}

.page-content .ql-align-justify {
    text-align: justify;
}

.page-content .ql-indent-1 {
    padding-left: 3rem;
}

.page-content .ql-indent-2 {
    padding-left: 6rem;
}

.page-content .ql-indent-3 {
    padding-left: 9rem;
}