/*
* 2025-08-08
* Custom styles for Back to School page only
* Uses mix with other CSS files
*/

/* Set colors used throughout page. Can change in future if reusing */
main .rte-content {
    --bts-primary1:var(--site-primary-mediumBlue);
    --bts-primary2:var(--site-secondary-yellow);
}
.text-primary1 {
    color:var(--bts-primary1);
    --pws-border-color:var(--bts-primary1);
}
.text-primary2 {color:var(--bts-primary2);}
.bg-primary1 {background-color:var(--bts-primary1) !important;}
.bg-primary2 {background-color:var(--bts-primary2);}
.border-black {--pws-border-color:black;}

/* Hide navigation at the bottom */
.sfNavWrp.sfNavHorizontalWrp.landing-page {display: none;}

/* Adjusting button padding and paragraph margin for compact sections */
.compact a.btn {padding:0.5em 1em;}
.compact p {margin-bottom:1.2rem;}
main .compact ul {
    margin-bottom:1.2rem;
    padding-left:1.5rem;
}

/* for striped shadow box */
.shadow-stripe {
    display:inline-block;
    background-color:var(--bts-primary2);
    padding:1rem;
    border:solid black 2px;
    border-radius:0.6rem;
    padding:0.1rem 0.6rem;
    position:relative;
}
.shadow-stripe::before {
    box-sizing:content-box;
    content: "";
    position:absolute;
    border-radius:inherit;
    background-image:linear-gradient(-45deg, #000000 16.67%, #ffcc00 16.67%, #ffcc00 50%, #000000 50%, #000000 66.67%, #ffcc00 66.67%, #ffcc00 100%);
    background-size:16.97px 16.97px;
    border:inherit;
    left:0.35rem;
    top:-0.5rem;
    width:100%;
    height:100%;
    z-index:-1;
}

/* Checklist border boxes */
.checklists-category {
    border: solid 4px var(--bts-primary1);
    border-radius: 1rem;
    padding: 0rem 1rem;
    margin-left: 0.6rem;
    position: relative;
}
.checklists-category h3 {
    background:white;
    display:inline-block;
    font-size:2.5rem;
    font-weight:600;
    color:var(--bts-primary1);
    padding-right:0.4rem;
    position:absolute;
    left: -1rem;
    top: -1.6rem;
    line-height:normal;
}
.checklists-category .fa-ul .fa {color: var(--bts-primary1);}
.checklists-category .fa-ul li {margin-bottom:1.2rem;}
.checklists {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    grid-template-areas:
    "contact health"
    "contact calendar";
    column-gap:1.5rem;
    row-gap:0.6rem;
}
#category-contact {grid-area: contact;}
#category-health {grid-area: health;}
#category-calendar {grid-area: calendar;}

/* Tab pane styles */
.tab-content {
    height: 36vh;
    border: solid 1px var(--tabs-color);
    padding:1.25em;
    overflow-y:scroll;
    border-left-width: 5px;
}
button.nav-link {
    border: none;
    text-align: left;
    padding: 0.4rem 1rem;
    margin: 0.2rem 0;
    background: none;
    font-weight: 600;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    color:var(--tabs-color);
    cursor:pointer;
}
button.nav-link::after {content:"\23F5";}
.nav-pills .nav-link.active {background:var(--tabs-color);}
.bts-tabs-primary {--tabs-color:var(--bts-primary1);}
.bts-tabs-primary .nav-pills {min-width:20%;}
.bts-tabs-black {--tabs-color:black;}
.bts-tabs-black .nav-pills {min-width:25%;}
.bts-tabs-black .tab-content{background:white;}

/* Language yellow highlights */
.rte-content ul.listing {
    padding:0;
    margin-bottom:1rem;
}
ul.listing li {
    display:inline-block;
    background-color:var(--bts-primary2);
    padding:0 0.4rem;
    border-radius:0.4rem;
    margin: 0.4rem 0.4rem 0.4rem 0;
    color:black;
}

/* Questions yellow background styles */
.bg-ytw.row, .bg-wty.row {margin: 0;}
.row.d-sm-flex .card {flex-basis: 50%;}
.bg-ytw {
    background: linear-gradient(180deg, var(--bts-primary2) 50%, transparent 50.1%);
}
.bg-wty {
    background: linear-gradient(180deg, transparent 50%, var(--bts-primary2) 50.1%);
}
.bg-wty.row .col {flex-basis: 32%;}

/* Icon decorations */
.icon-fa {
    margin-right: 0.8rem;
    color: var(--tabs-color);
}
.icon-fa.lg {font-size: 3em;}


/* Fixing yellow on blue link text */
.rte-content a.text-primary2 {
    background-image: linear-gradient(to bottom,var(--bts-primary2),var(--bts-primary2));
}
.rte-content a.text-primary2:hover {
    background:var(--bts-primary2);
    color:black;
}
.rte-content a.text-primary2 .icon {
    fill:var(--bts-primary2);
}
.rte-content a.text-primary2:hover .icon {
    fill:black;
}

/* Miscellaneous fixes */
.card-footer {
    --pws-card-cap-bg: var(--pws-white);
    --pws-card-border-width: 0;
}
.bg-primary2 .m-auto {width: 80%;}


@media(max-width: 576px) {
    .checklists {
        display:flex;
        flex-wrap:wrap;
    }
    .checklists-category {
        padding-right:0.6rem !important;
    }
    .tab-content {height:50vh;}
    .nav-pills {
        min-width:auto;
        display:flex;
        overflow-x:scroll;
        background-color: var(--site-primary-offWhite);
        margin-left: -1rem;
        margin-right: -1rem;
    }
    button.nav-link {
        border-radius:0.5rem;
        white-space:nowrap;
        font-size:1.4em;
    }
    button.nav-link::after {content:"";}
}