/********************************************************************************************************/
/* SCHOOL CONTENT PAGE                                                                                  */
/*                                                                                                      */
/* How a school's own prose is set: the pages under School Information, and anything else a school       */
/* writes and publishes through the Content Manager.                                                    */
/*                                                                                                      */
/* THIS IS A FILE RATHER THAN A <style> BLOCK ON PURPOSE. The WYSIWYG editor previews content by         */
/* loading real stylesheets into its editing frame, so rules that live inside a page can never reach     */
/* it - the editor would show something other than what ships. Everything that decides how content       */
/* LOOKS belongs here; the page shell around it stays with the page.                                     */
/*                                                                                                      */
/* Every rule is written against both .school-content-page and .school-content-editor. The first is the  */
/* live page; the second is the class put on the editor's body, so the same declarations apply in both   */
/* places without being written twice.                                                                   */
/********************************************************************************************************/

.school-content-page,
.school-content-editor {
    color: black;
    font-size: 14px;
    line-height: 1.7;
}

.school-content-page {
    /* The shell is already white and padded; this only needs the gap under the toolbar. Margin
       rather than padding so it takes the shell's white. */
    padding: 0 0 40px 0;
    margin: 18px 0 0 0;
    min-height: 400px;
}

/* The editing frame has no shell, so it supplies its own. */
.school-content-editor {
    background-color: white;
    padding: 12px;
    margin: 0;
}

    /* The heading band runs to the edge of the sheet rather than inside its padding. */
    .school-content-page h2:first-child,
    .school-content-editor h2:first-child {
        margin-top: 0;
    }

    .school-content-page h2,
    .school-content-editor h2 {
        padding: 2px 0px 2px 10px;
        background-color: #0571b8;
        color: white;
        font-size: 17px;
        font-weight: bold;
        display: block;
        width: 100%;
        margin: 20px 0 10px 0;
        box-sizing: border-box;
        text-transform: uppercase;
        line-height: 30px;
    }

    .school-content-page h3,
    .school-content-editor h3 {
        font-size: 15px;
        font-weight: bold;
        text-transform: uppercase;
        margin: 20px 0 6px 0;
    }

    .school-content-page h4,
    .school-content-editor h4 {
        font-size: 13px;
        font-weight: bold;
        margin: 14px 0 4px 0;
    }

    .school-content-page p,
    .school-content-editor p {
        margin: 0 0 12px 0;
    }

    .school-content-page ul,
    .school-content-page ol,
    .school-content-editor ul,
    .school-content-editor ol {
        margin: 0 0 12px 0;
        padding-left: 26px;
    }

    .school-content-page img,
    .school-content-editor img {
        max-width: 100%;
        height: auto;
    }

    .school-content-page table,
    .school-content-editor table {
        border-collapse: collapse;
        margin-bottom: 12px;
    }

        .school-content-page table td,
        .school-content-page table th,
        .school-content-editor table td,
        .school-content-editor table th {
            padding: 4px 8px;
            vertical-align: top;
        }

/********************************************************************************************************/
/* EXPANDABLE ITEMS                                                                                     */
/*                                                                                                      */
/* Native <details>, so it works with no script, is reachable by keyboard, and announces itself as       */
/* expanded or collapsed without any aria of our own.                                                   */
/********************************************************************************************************/

.school-content-page details.FacilityItem,
.school-content-editor details.FacilityItem {
    border: 1px solid #d8d8d8;
    border-bottom: none;
}

    .school-content-page details.FacilityItem:last-of-type,
    .school-content-editor details.FacilityItem:last-of-type {
        border-bottom: 1px solid #d8d8d8;
        margin-bottom: 16px;
    }

    .school-content-page details.FacilityItem > summary,
    .school-content-editor details.FacilityItem > summary {
        cursor: pointer;
        padding: 10px 12px;
        font-weight: bold;
        background-color: #f6f9fc;
        list-style: none;
    }

        /* Replace the default marker with one that says which way it will go. */
        .school-content-page details.FacilityItem > summary::-webkit-details-marker,
        .school-content-editor details.FacilityItem > summary::-webkit-details-marker {
            display: none;
        }

        .school-content-page details.FacilityItem > summary::before,
        .school-content-editor details.FacilityItem > summary::before {
            content: "\002B";
            display: inline-block;
            width: 16px;
            font-weight: bold;
            color: #0571b8;
        }

.school-content-page details.FacilityItem[open] > summary::before,
.school-content-editor details.FacilityItem[open] > summary::before {
    content: "\2212";
}

.school-content-page details.FacilityItem > summary:focus-visible,
.school-content-editor details.FacilityItem > summary:focus-visible {
    outline: 2px solid #0571b8;
    outline-offset: -2px;
}

.school-content-page details.FacilityItem .FacilityDetail,
.school-content-editor details.FacilityItem .FacilityDetail {
    padding: 8px 12px 12px 28px;
}

    .school-content-page details.FacilityItem .FacilityDetail p,
    .school-content-editor details.FacilityItem .FacilityDetail p {
        margin: 0 0 6px 0;
    }