/* -- Homepage -- */
/* --> Sidebar News */
.home .fake-sidebar {
    padding-top: 5px;
}
.home .fake-sidebar ul.wp-block-latest-posts__list {
    margin: 0 !important;
}
.home .fake-sidebar ul.wp-block-latest-posts__list li {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
.home .fake-sidebar ul.wp-block-latest-posts__list li a {
    font-size: 1.5rem;
    line-height: 2rem;
}

/* --> Calendar Widget */
#cal-boxbot table {
    border-bottom: none;
}
#cal-boxbot table th,
#cal-boxbot table td {
    border: none;
    padding: 0;
}
#cal-boxbot hr {
    margin: inherit;
    background: inherit;
    max-width: unset;
}
#cal-boxbot img {
    max-width: unset;
    vertical-align: unset;
    margin: inherit;
}

/* --- EDI Blueprint --- */

/* Navigation Button Menu */
.lorem ul.button-boxes li a span i {
    background: linear-gradient(90deg, rgba(0,119,190,1) 0%, rgba(0,98,157,1) 100%);
}

/* Definitions */
.lorem abbr[title] {
    border-bottom: dotted 3px #0077be;
    padding-bottom: 2px;
    text-decoration: none;
}
.lorem abbr[title]:hover {
    cursor: help;
}
.lorem abbr[title]:after {
    content: "\f059";
    font-family: "Font Awesome 6 Free";
    color: #0077be;
    margin: 0 0 0 4px;
    font-size: 0.95rem;
}

/* Adjust padding on modals */
.blueprint .iziModal .iziModal-content {
    padding: 35px 35px 40px !important;
}

/* -> Add logo to header */
.page-id-134 #page-title {
    background: #f4f4f4;
}
    .blueprint #page-title h3 {
        position: relative;
        font-size: 3.2rem;
        line-height: 4.1rem;
        max-width: 50rem;
        padding: 0 0 0 13rem;
        min-height: 11rem;
        display: flex;
        align-items: center;
        color: rgba(0,0,0,0.8);
    }
    .blueprint #page-title h3:before {
        display: block;
        content: url('https://www.niagaracollege.ca/edi/wp-content/uploads/sites/125/2023/09/Button-Logo.png');
        position: absolute;
        left: 0;
    }
    .blueprint #page-title h3 a.edit-page-link {
        display: none;
    }

/* -> Extra styling classes */
.caps {
    text-transform: uppercase;
}
.capsb {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04rem !important;
}
.valign {
    display: flex;
    align-items: center;
}
.black {
    color: rgba(0,0,0,0.8) !important;
}
.restrict-small {
    max-width: 550px;
    margin: 0 auto;
}
.restrict-medium {
    max-width: 700px;
    margin: 0 auto;
}
.restrict-large {
    max-width: 875px;
    margin: 0 auto;
}

/* -> Lorem content rule tweaks */
.blueprint .lorem h4 {
    font-size: 2.2rem;
    line-height: 2.9rem;
}
.blueprint .lorem h5 {
    font-size: 1.9rem;
    line-height: 2.65rem;
}
.blueprint .lorem h6 {
    font-size: 1.6rem;
    line-height: 2.4rem;
}


/* -> Add icons to some h4s */
.blueprint .lorem h4.add-icon {
    position: relative;
    margin-bottom: 35px;

}
  .blueprint .lorem h4.add-icon span.a {
      position: relative;
      display: inline-block;
      padding: 0 0 0 5.5rem;
  }
    .blueprint .lorem h4.add-icon span.a:before {
        content: "\f6ad";
        font-weight: 900;
        font-family: "Font Awesome 6 Free";
        position: absolute;
        left: 0;
        top: 0;
        border: solid 4px #0077be;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 50%;
        padding: 15px;
        font-size: 2rem;
        color: rgba(0,0,0,0.8);
    }
    .blueprint .lorem .neg h4.add-icon span.a:before {
        color: #fff;
    }
    .blueprint .lorem .neg h4.add-icon span.a:before {
        border-color: #fff;
    }
    .blueprint .lorem h4.add-icon span.b {
        min-height: 4.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
/* --> Set icons */
.blueprint .lorem h4.add-icon#welcome span.a:before {
    content: "\f4c4";
}
.blueprint .lorem h4.add-icon#background span.a:before {
    content: "\f141";
}
.blueprint .lorem h4.add-icon#sac span.a:before {
    content: "\f4ad";
}
.blueprint .lorem h4.add-icon#accomplished {
    margin-bottom: 20px;
}
.blueprint .lorem h4.add-icon#accomplished span.a:before {
    content: "\f005";
}
.blueprint .lorem h4.add-icon#blueprint {
    margin-bottom: 20px;
}
.blueprint .lorem h4.add-icon#blueprint span.a:before {
    content: "\f0c0";
}
.blueprint .lorem h4.add-icon#principles span.a:before {
    content: "\f516";
}
.blueprint .lorem h4.add-icon#areas span.a:before {
    content: "\f689";
}
.blueprint .lorem h4.add-icon#plan span.a:before {
    content: "\f46c";
}
.blueprint .lorem h4.add-icon#terms span.a:before {
    content: "\f129";
}
.blueprint .lorem h4.add-icon#resources span.a:before {
    content: "\f02e";
}

/* Reusible circle icons */
.blueprint .lorem div.icon {
    position: relative;
    background: linear-gradient(90deg, rgba(0,119,190,1) 0%, rgba(0,98,157,1) 100%);
    width: 10rem;
    height: 10rem;
    margin: 0 auto 25px !important;
    border-radius: 50%;
}
    .blueprint .lorem div.icon span {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
        .blueprint .lorem div.icon span:before {
            font-family: "Font Awesome 6 Free";
            color: #fff;
        }
            .blueprint .lorem div.icon.feedback span:before {
                content: "\f4ad";
                font-weight: 900;
                font-size: 3.4rem;
            }
            .blueprint .lorem div.icon.insights span:before {
                content: "\e522";
                font-weight: 900;
                font-size: 3.6rem;
            }
            .blueprint .lorem div.icon.people span:before {
                content: "\e533";
                font-weight: 900;
                font-size: 3.7rem;
            }
            .blueprint .lorem div.icon.chart span:before {
                content: "\f201";
                font-weight: 900;
                font-size: 3.5rem;
            }
            .blueprint .lorem div.icon.roof span:before {
                content: "\e537";
                font-weight: 900;
                font-size: 3.5rem;
            }
            .blueprint .lorem div.icon.handshake span:before {
                content: "\f2b5";
                font-weight: 900;
                font-size: 3.5rem;
            }
            .blueprint .lorem div.icon.clipboard span:before {
                content: "\f46c";
                font-weight: 900;
                font-size: 3.4rem;
            }
            .blueprint .lorem div.icon.ie {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .blueprint .lorem div.icon.ie img {
                width: 110px;
            }

/* -> BARS */
/* --> Welcome Bar */
.blueprint .lorem .bar-welcome .btt-bb,
.blueprint .lorem .bar-vision .btt-bb {
    margin-top: 0;
}
/* --> Guiding Principles Bar */
  .blueprint .lorem .bar-principles h5 {
    color: #000;
    text-align: center;
    margin: 20px 0;
    font-size: 1.75rem;
    line-height: 2.45rem;
}
/* --> Areas of Focus Bar */
.blueprint .lorem .btn-aaf {
    text-align: left;
    padding: 18px 45px 18px 40px;
    margin-top: 35px;
}
  .blueprint .lorem .btn-aaf span.a {
      display: block;
      font-size: 1.1rem;
      line-height: 1.6rem;
      position: relative;
      padding: 0 0 0 2.8rem;
  }
    .blueprint .lorem .btn-aaf span.a:before {
        content: "\f0fe";
        font-family: "Font Awesome 6 Free";
        position: absolute;
        left: 0;
        font-size: 1.8rem;
        height: 100%;
        display: flex;
        align-items: center;
    }
  .blueprint .lorem .btn-aaf span.b {
      display: block;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 1.05rem;
      line-height: 1.55rem;
  }
/* ---> AOF Boxes & Modals */
.blueprint .aac-box figure.r {
    padding: 0;
}
.blueprint .iziModal-header {
    padding: 20px 35px 20px !important;
}
    .blueprint .iziModal-header h2.iziModal-header-title {
        font-size: 1.4rem !important;
        line-height: 1.8rem !important;
    }
    .blueprint .iziModal-header p.iziModal-header-subtitle {
        font-size: 1.2rem !important;
        line-height: 1.5rem !important;
    }
.blueprint .aac-modal .iziModal-content figure.photo-banner {
    margin: -35px -35px 40px !important;
}
.blueprint .lorem .iziModal-content .areas-of-focus-introduction {
    margin: -40px -35px 0;
    padding-top: 55px;
    padding-bottom: 60px;
}
    .blueprint .lorem .iziModal-content .areas-of-focus-introduction .make-columns {
        column-count: 2;
        column-gap: 30px;
    }
    .blueprint .lorem .iziModal-content .areas-of-focus-introduction .make-columns > *:first-child {
        margin-top: 0 !important;
    }
    .blueprint .lorem .iziModal-content .areas-of-focus-introduction .make-columns > *:last-child {
        margin-bottom: 0 !important;
    }
.blueprint .lorem .iziModal-content h4 {
    font-size: 2rem;
    line-height: 2.5rem;
    margin: 45px 0 20px;
}
.blueprint .lorem .iziModal-content .goals-wrapper {
    margin-bottom: 15px;
}
.blueprint .lorem .iziModal-content .goals-wrapper h5 {
    color: rgba(0,0,0,0.8);
    font-size: 1.6rem;
    line-height: 2.3rem;
    margin-top: 45px;
    border-left: solid 6px #0077be;
    padding: 0 0 0 15px;
}
.blueprint .lorem .iziModal-content .goals-wrapper ul.actions li {
    margin-top: 0;
}
.blueprint .lorem .iziModal-content .goals-wrapper .champion,
.blueprint .lorem .iziModal-content .goals-wrapper .catalysts {
    margin: 5px 0 0 !important;
}
    .blueprint .lorem .iziModal-content .goals-wrapper .champion h6,
    .blueprint .lorem .iziModal-content .goals-wrapper .catalysts h6 {
        position: relative;
        margin: 0 0 15px 0;
        font-size: 1.15rem;
        line-height: 1.4rem;
        text-transform: uppercase;
        font-weight: 500;
        padding-left: 1.65rem;
    }
        .blueprint .lorem .iziModal-content .goals-wrapper .champion h6:before {
            content: "\f5a2";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            color: #0077be;
        }
        .blueprint .lorem .iziModal-content .goals-wrapper .catalysts h6:before {
            content: "\f0c3";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: -1px;
            top: -2px;
            color: #0077be;
            font-size: 1.2rem;
        }
.blueprint .lorem .iziModal-content .goals-wrapper .champion ul,
.blueprint .lorem .iziModal-content .goals-wrapper .catalysts ul {
    margin-top: 12px;
    margin-bottom: 0;
}
    .blueprint .lorem .iziModal-content .goals-wrapper .champion ul li,
    .blueprint .lorem .iziModal-content .goals-wrapper .catalysts ul li {
        margin: 2px 0;
        line-height: 1.5rem;
    }
    .blueprint .lorem .iziModal-content .goals-wrapper .champion ul li:last-child,
    .blueprint .lorem .iziModal-content .goals-wrapper .catalysts ul li:last-child {
        margin-bottom: 0;
    }
.blueprint .lorem .iziModal-content .catalysts-wide {
    margin-top: 0 !important;
}
    .blueprint .lorem .iziModal-content .catalysts-wide h5 {
        position: relative;
        margin: 0 0 25px 0;
        padding-left: 2rem;
        font-size: 1.7rem;
        line-height: 2.1rem;
    }
        .blueprint .lorem .iziModal-content .catalysts-wide h5:before {
            content: "\f0c3";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: -1px;
            top: 0;
            color: #0077be;
            font-size: 1.6rem;
        }
.blueprint .lorem .iziModal-content .catalysts-wide ul {
    margin: 15px 0 0 0;
}
    .blueprint .lorem .iziModal-content .catalysts-wide ul li {
        margin: 4px 0;
        line-height: 1.5rem;
    }
    .blueprint .lorem .iziModal-content .catalysts-wide ul li:last-child {
        margin-bottom: 0;
    }
/* -- Catalysts Modals - Progress & Examples of Implementation */
.blueprint .lorem .alert.status-bar {
    margin: 0;
    padding: 13px 20px;
    min-height: unset;
    background: #f4f4f4;
    border: unset;
}
.blueprint .lorem .alert.status-bar h6 {
    font-size: 1.2rem;
    line-height: 1.7rem;
    min-height: 2.15rem;
    display: flex;
    align-items: center;
    font-weight: 300;
}
.blueprint .lorem .alert.status-bar h6 span {
    position: relative;
    padding-left: 2.65rem;
    margin: 0 0 0 10px;
    min-height: 2.15rem;
    display: flex;
    align-items: center;
}
.blueprint .lorem .alert.status-bar h6 span:before {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px grey;
    color: grey;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
}
.blueprint .lorem .alert.status-bar.coming-soon h6 span:before {
    border-color: #F69A06;
    color: #F69A06;
    content: "\f017";
    font-weight: 400;
    font-size: 1rem;
}
.blueprint .lorem .alert.status-bar.in-progress h6 span:before {
    color: #115FAA;
    border-color: #115FAA;
    font-size: 1.1rem;
    content: "\f141";
}
.blueprint .lorem .alert.status-bar.complete h6 span:before {
    color: #2d9c4d;
    border-color: #2d9c4d;
    content: "\f00c";
    font-size: 1.1rem;
}
.blueprint .lorem .panel.implementation {
    margin: 0;
}
.blueprint .lorem .panel.implementation h6 {
    position: relative;
    font-size: 1.15rem;
    line-height: 1.4rem;
    text-transform: uppercase;
    font-weight: 500;
    padding-left: 1.75rem;
    margin-bottom: 12px;
}
.blueprint .lorem .panel.implementation h6:before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #0077be;
    font-size: 1.2rem;
}
.blueprint .lorem .panel.implementation .wp-block-columns { 
    margin-top: 0;
}
@media (max-width: 781px) {
    .blueprint .modal-columns {
        gap: 0 !important;
    }
    .blueprint .lorem .panel.goals-wrapper .wp-block-columns {
        gap: 15px !important;
    }
    .blueprint .lorem .iziModal-content .goals-wrapper .champion {
        margin-bottom: 0 !important;
    }
    .blueprint .lorem .panel.implementation .wp-block-columns { 
        gap: 0 !important;
    }
    .blueprint .lorem .panel.implementation .wp-block-column {
        margin: 0;
    }
    .blueprint .lorem .panel.implementation .wp-block-column:nth-child(2) ul li:first-child {
        margin-top: 0;
    }
}


/* --> Draft Implementation Plan Bar */
.blueprint .bar-plan ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
  .blueprint .bar-plan ul li {
      position: relative;
      padding-top: 6px;
      padding-left: 3.7rem;
      margin: 22px 0;
  }
    .blueprint .bar-plan ul li:before {
        content: "\f00c";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 0;
        width: 2.8rem;
        height: 2.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: #0077be;
        border-radius: 50%;
    }
/* --> Further Reading (Resources) Bar */
.blueprint .resources-bar .wp-block-group ul {
    list-style-type: none;
    margin: 0;
}
.blueprint .resources-bar .wp-block-group ul li {
    text-indent: -28px;
    padding-left: 28px;
    margin: 20px 0;
}

/* -> Remove recruitment footer banner */
.blueprint .recruitment-banner {
    display: none;
}

/* -> EDI blueprint mobile styling */
@media only screen and (max-width: 959px) {

    .blueprint .lorem h4.add-icon {
        text-align: center;
    }
    .blueprint .lorem h4.add-icon span.a {
        padding: 5.25rem 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .blueprint .lorem h4.add-icon span.a:before {
        left: unset;
    }
    .blueprint .lorem h4.add-icon span.b {
        display: block;
        width: 100%;
        min-height: unset;
    }
    .blueprint .lorem .bar-areas .aac-box figure.image {
        width: 80%;
        margin: 0 auto !important;
    }
    .blueprint .lorem .bar-areas .aac-box .wp-block-columns > .wp-block-column:first-child {
        margin-bottom: 0 !important;
    }

}
@media only screen and (max-width: 650px) {

    .blueprint .bar-principles .wp-block-columns {
        display: grid;
        grid-template-columns: 1fr;
    }

    /* -> Adjust heading size and icon position */
    .blueprint #page-title h3 {
        padding: 0;
        min-height: unset;
        display: block;
        text-align: center;
        font-size: 3rem;
        line-height: 3.8rem;
    }
      .blueprint #page-title h3:before {
          position: relative;
          margin: 0 auto 25px;
      }

    /* -> Areas of focus modals */
    .blueprint .lorem .iziModal-content .areas-of-focus-introduction .make-columns {
        column-count: 1;
    }
    .blueprint .lorem .iziModal-content .areas-of-focus-introduction {
        margin: -40px -20px 0;
    }
    .blueprint .lorem .iziModal-content .areas-of-focus-introduction {
        padding: 35px 20px;
    }
    .blueprint .iziModal .iziModal-content {
        padding: 35px 20px !important;
    }

}