/**
 * NC Course Details Stylesheet - FRONTEND
 *
 * Frontend styles for NC Course Details plugin.
 *
 * @package nc_course_details
 * @since 1.0.0
 */

.hidden {
	display:none;
}

/* = PSEC Course Details
----------------------------------------------- */

/* Remove crumbs */
.page-template-single-course #breadcrumbs {
    display: none;
}
/* Extra padding at top of page title where crumbs were */
.page-template-single-course #page-title {
    padding-top: 85px;
}

/* Set padding on page */
.course-outline-psec {
    padding: 50px 0;
}

/* Reset margining on Hs */
.lorem.course-outline-psec h3,
.lorem.course-outline-psec h4 {
    margin: 0;
}

/* Course title box */
.course-outline-psec .course-title {
    background: #f4f4f4;
    padding: 25px 30px;
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    grid-column-gap: 20px;
}
    .course-outline-psec .course-title > div {
        display: flex;
        align-items: center;
    }
    .course-outline-psec .course-title h3 {
        font-size: 2.4rem;
        line-height: 3.1rem;
    }
    .lorem.course-outline-psec a {
        margin: 0;
    }
        .lorem.course-outline-psec a span {
            position: relative;
            padding: 0 1.5rem 0 0;
            display: inline-block;
        }
            .lorem.course-outline-psec a span:after {
                content: "\f35d";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                position: absolute;
                right: 0;
                font-size: 0.9rem;
            }

/* Course details box - code term credits */
.course-outline-psec .details {
    padding: 25px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 10px;
    border: solid 3px #f4f4f4;
}
    .course-outline-psec .details h4 {
        font-size: 1.5rem;
        line-height: 2.4rem;
        font-weight: 600;
        color: #0b499e;
    }
        .course-outline-psec .details span {
            font-size: 1.3rem;
            line-height: 2.1rem;
        }

/* Description */
.lorem.course-outline-psec .course-description {
    padding: 40px 30px 45px;
}
    .lorem.course-outline-psec .course-description h4 {
        font-size: 2rem;
        line-height: 2.8rem;
        margin-bottom: 20px;
    }
    .lorem.course-outline-psec .course-description > p:last-child {
        margin-bottom: 0;
    }


/* Equivalencies and Prerequisites */
.course-outline-psec .prereq-equivs {
    border: solid 3px #f4f4f4;
}
.course-outline-psec .prereq-equivs .course-pre-inner {
    padding: 25px 30px;
}
.course-outline-psec .prereq-equivs h4 {
    background: #f4f4f4;
    font-size: 1.3rem;
    line-height: 1.7rem;
    padding: 15px 30px 15px 3.75rem;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
}
.course-outline-psec .prereq-equivs h4:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 30px;
    color: #0b499e;
}
.course-outline-psec .prereq-equivs .course-prerequisites h4:before {
    content: "\f058";
}
.course-outline-psec .prereq-equivs .course-equivalencies h4:before {
    content: "\f0ec";
}

/* Equivalencies and Prereqs */
.course-equivalencies ul,
.course-prerequisites ul {
    list-style-type: none;
    margin: 0;
}
.course-equivalencies ul li,
.course-prerequisites ul li {
    position: relative;
    list-style-type: none;
    padding: 0 0 0 1.75rem;
}
    .course-equivalencies ul li:before,
    .course-prerequisites ul li:before {
        font-family: 'Font Awesome 6 Free';
        content: '\f00c';
        font-size: 1.3rem;
        font-weight: 900;
        position: absolute;
        left: 0;
        color: #0b499e;
    }
    .course-equivalencies ul li.group ul,
    .course-prerequisites ul li.group ul {
        margin: 0 !important;
    }
        .course-equivalencies ul li.group ul li,
        .course-prerequisites ul li.group ul li {
            padding:0;
            margin:3px 0 !important;
        }
        .course-equivalencies ul li.group ul li:before,
        .course-prerequisites ul li.group ul li:before {
            content:none;
        }
        .course-equivalencies ul li.group ul li:first-of-type:before,
        .course-prerequisites ul li.group ul li:first-of-type:before {
            content:"( ";
            color:#444444;
            font-family: Open Sans,Arial,Helvetica,sans-serif;
            position:relative;
            top:-1px;
            font-size:1rem;
            font-weight:normal;
        }
        .course-equivalencies ul li.group ul li:last-of-type:after,
        .course-prerequisites ul li.group ul li:last-of-type:after {
            content:")";
        }

/* =Media Queries
----------------------------------------------- */

@media only screen and (max-width: 1000px) {
    
    .course-outline-psec .course-title {
        grid-template-columns: 1.5fr 1fr;
    }
    
}
@media only screen and (max-width: 800px) {
    
    .course-outline-psec .course-title {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
    .lorem.course-outline-psec a {
        width: unset !important;
    }
    .course-outline-psec .details {
        grid-template-columns: 1fr;
        grid-row-gap: 12px;
    }
    
}
@media only screen and (max-width: 600px) {
    
    .course-outline-psec .course-title {
        padding: 20px;
    }
    .course-outline-psec .details {
        padding: 20px;
    }
    .lorem.course-outline-psec .course-description {
        padding: 30px 0;
    }
    .course-outline-psec .prereq-equivs h4 {
        padding: 10px 20px 10px 3rem;
    }
    .course-outline-psec .prereq-equivs h4:before { 
        left: 20px;
    }
    .course-outline-psec .prereq-equivs .course-pre-inner {
        padding: 20px;
    }
    
}