/************************************/
/* AUTHOR: Jenine Goodman-Grey      */
/* DATE: March 26, 2026              */
/* PURPOSE: CANVAS Course Templates */
/************************************/


hr {
    border-top: 3px solid #e4e8e8;
}

blockquote {
    border-left: 5px solid #e4e8e8;
}

blockquote p {
    font-size: 1.25rem;
}


#wiki_page_show, #course_syllabus, .user_content {
    font-size: 1.1rem;
}

#wiki_page_show h1.page-title, #course_syllabus h1.page-title, 
#discussion-drawer-layout h2, 
.assignment-title h1, 
#assignments-2-student-header span.css-mi1fmo-text,
.quiz-header h1,
h1.ic-Action-header__Heading{
    flex: 2;
    font-size: min(2.5rem, max(2.5vw, 1.75rem));
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 7px solid #F1B300;
    padding: min(1.2vw, 25px, 0px, 25px);
    margin-bottom: 1em;
    font-weight: 700;
}

#assignments-2-student-header span.css-mi1fmo-text {
    margin-bottom: 0;
}

#wiki_page_show pre, #course_syllabus pre, .user_content pre {
    font-size: 1rem;
    word-break: normal;
    white-space:pre; 
    overflow:auto;
}

#course_home_content .page-toolbar-start{
    flex: 2;
    font-size: min(1.2rem, max(2.5vw, 1.75rem));
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 7px solid #F1B300;
    padding: min(1.2vw, 25px, 0px, 25px);
    margin-bottom: 1em;
    font-weight: 700;
}

.pages.show.home .page-title {
    display: none !important;
}

#content-wrapper h1, #content-wrapper h2, #content-wrapper h3, #content-wrapper h4, #content-wrapper h5, #content-wrapper h6 {
    color: #191919;
    font-weight: 700;
}

#wiki_page_show h2, #course_syllabus h2, .user_content h2 {
    margin-top: 2.5rem; 
    margin-bottom: .75em; 
    border-bottom: .1em solid #e4e8e8;
}

#wiki_page_show .block-content-editor-container h2, #course_syllabus .block-content-editor-container h2 {
    margin: 0;
}

/* fix for special homepage circumstance */
#wiki_page_show h2.course-title, #course_syllabus h2.course-title {
    border-left: none !important;
    background: none !important;
    padding-left: 0 !important;
    border-bottom: none !important;
}

#wiki_page_show h3, #course_syllabus h3, .user_content h3  {
    margin-top: 1.5rem; 
}

#wiki_page_show h4, #course_syllabus h4, .user_content h4 {
    margin-top: 1.25rem; 
}

#wiki_page_show h5, #course_syllabus h5, .user_content h5 {
    margin-top: 1.25em; 
}
#content-wrapper .button {
    font-size: 1.5em; 
    text-align: center; 
    color: #191919; 
    padding: 15px; 
    border-radius: 5px; 
    text-decoration: none!important;; 
    background-color: #f1b300; 
    font-weight: 700;
    margin: 10px;
    line-height: 1.2;
}

#content-wrapper .button2 {
    background-color: #191919;
    color: #fff;
}


#content-wrapper summary {
    cursor: pointer;
}

#content-wrapper th, #content-wrapper td {
    border-bottom: 1px solid #ccc; 
    padding: 10px;
}

#content-wrapper table th {
    font-weight: 700;
    background-color: #e4e8e8;
}

#content-wrapper table caption {
    font-weight: 700; 
    margin-bottom: 10px; 
    color: #191919;
    font-size: 1.1em;
}

.popout {
    width: 80%; 
    max-width: 600px; 
    background-color: #f1b300; 
    padding: 10px; 
    text-align: center; 
    color: #191919; 
    font-size: large; 
    margin: 10px 0px 40px 40px;
    border-radius: 5px;
}

.popout2 {
    width: 80%; 
    max-width: 600px;
    border: 3px solid #ccc;
    text-align: left;
    padding: 20px;
    color: #191919; 
    margin: 10px 0px 40px 40px;
    border-radius: 5px;
}

.popout2 h2, .popout2 h3, .popout2 h4, .popout2 h5{
    border-left: 0em; 
    padding-left: 0em; 
    background: none; 
    line-height: 2;
    font-weight: 700;
    margin: .1rem;
}

.popout a {
    color: #000;
    font-weight: 700;
}

.accordion { 
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 20px;
}
.accordion2 details {
    margin-bottom: 10px;
    margin-left: 40px;
    margin-right: 40px;
    background: #fafafa;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 20px 20px 0 20px;
}

.accordion2 summary {
    background: linear-gradient(90deg, #F1B300 0%, #d5a000 100%);
    padding: 10px;
    border-radius: 5px 5px 0px 0px;
    color: #191919;
    font-size: 16pt;
    font-weight: 700;
    margin: -20px -20px 0;
}

.accordion summary h2, .accordion2 summary h2, 
.accordion summary h3, .accordion2 summary h3 {
    display: inline;
    border: none;
    line-height: 1;
    font-size: 1.6rem;
}

.accordion summary h3, .accordion2 summary h3 {
    font-size: 1.4rem;
}

.pull-left {
    margin-right: 20px;
    margin-bottom: 20px;
}

.pull-right {
    margin-left: 20px;
    margin-bottom: 20px;
}

#wiki_page_show li, .user_content li, #course_syllabus li {
    margin-top: 10px;
}

.double-space {
    line-height: 2.25;
}

.hanging-indent {
    text-indent: -20px;
    margin-left: 20px;
}

/* CAPE BANNER */

.banner-cape {
    position: relative;

}
.banner-cape img {
    max-width: 1200px; 
    min-width: 350px; 
    height: auto;
    }

.banner-text-cape {
    position: absolute; 
    top: 15px;
    left: 340px; 
    min-width: 400px; 
    max-width: 850px; 
    height: 265px; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
    
    }

.banner-text-cape h2 {
    margin: 0 !important; 
    font-size: 2.5rem; 
    border: 0px!important;
    text-transform: uppercase;
    }

.dark .banner-text-cape h2 {
    color: #F1B300!important; 
    text-shadow: 0px 0px 15px black;
}

.light .banner-text-cape  h2 {
    color: #191919!important; 
    text-shadow: 0px 0px 15px white;
}
.ext .banner-text-cape h2 {
    color: #00af66!important; 
}
.banner-text-cape h3 {
    margin: 0 !important; 
    font-size: 4rem; 
    color: #fff!important; 
    line-height: 1.0!important;
    text-transform: uppercase;
    }

.banner-text-cape-lower h3 {
    text-transform: none;
    }

.dark .banner-text-cape h3 {
    color: #fff!important; 
    text-shadow: 0px 0px 15px black;
}

.light .banner-text-cape h3 {
    color: #191919!important; 
    text-shadow: 0px 0px 15px white;
}
.ext .banner-text-cape h3 {
    color: #fff!important; 
    text-shadow: 0px 0px 15px black;
}


/* Small devices (landscape phones, 768px and below)*/
@media (max-width: 768px) { 
.banner-cape {
    left: -300px;
}
.banner-text-cape h3 {
    font-size: 3rem; 
}

}