/*
  Note, not linked on Guidance for AI - Full.
  Header bg and color are overwritten on pages themselves.
*/
@import url("https://use.typekit.net/bey5cgn.css");
.aktiv-grotesk {
    font-family: aktiv-grotesk, sans-serif;
    font-style: normal;
}
.ag-light {font-weight: 300;}
.ag-bold {font-weight: 700;}
.ag-black {font-weight: 900;}
h1, h2, h3, h4, h5 {
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 700 !important;
    font-style: normal;
}
main .rte-content h1 {font-size: 7.5vh;}
.rte-content h2, .rte-content h3, .rte-content h4 {color: #222D65;}
main .rte-content h2 {
    margin-top: 6vh;
    font-size: 5.1vh;
}
.ai-bg-primary {background-color:#222D65;}
.ai-bg-secondary {background-color:#B7D1ED;}
.ai-text-primary {color:#222D65;}
.ai-text-secondary {color:#B7D1ED;}
.text-red {color: var(--site-secondary-red);}
.text-warning, .fa-solid.text-warning, .card.ai-caution .card-title [class^="fa"] {color:#EB6D00 !important;}
.text-proceed {color: var(--site-secondary-seaGreen);}

/* Header bg ================================= */
.header-bg-left, .header-bg-right {
    background-repeat: no-repeat;
    background-position-y: top;
    background-size:contain;
}
.header-bg-left {
    background-image:url('https://pwsblobprd.schools.nyc/prd-pws/images/default-source/page-header-images/ai-header-bg-01.png');
    background-position-x: 7%;
}
.header-bg-right {
    background-image:url('https://pwsblobprd.schools.nyc/prd-pws/images/default-source/page-header-images/ai-header-bg-02.png');
    background-position-x: right 1%;
}
@media(max-width: 768px) { /* when screen is less than 768px wide */
    main .rte-content h1 {font-size: 6.5vh;}
    main .rte-content h2 {font-size:4.4vh;}
    .header-bg-left, .header-bg-right {background-image:none;}
}

/* Extra styles ============================== */
details[open] summary {
    color:var(--site-secondary-gray);
    margin-bottom:1vh;
}
.rte-content ul.mb-0 li {margin-bottom: 0.5em;}
main .main-column h2 {position:relative;}
main .main-column h2::before { /* gear icon on heading 2 */
    content:"\f085";
    font-family:"Font Awesome 7 Free";
    font-weight:900;
    font-size:9vh;
    position:absolute;
    color:#B7D1ED;
    z-index:-1;
    top:-4vh;
    left:-10vh;
}
/* Overflow box */
.ai-condense {
    height: 48vh;
    overflow-y: scroll;
    padding: 2vmin 4vmin 2vmin 0vmin;
    background-color: white;
}
/* Event styles */
.rte-content a.event-item  {
    background: none;
    font-size:3vh;
}
.rte-content a.event-item::before {
    content:"\f783";
    font-family:"Font Awesome 7 Free";
    font-size:5vh;
    font-weight:900;
    padding:0.2em;
}
.rte-content a.event-item:hover {
    background-color: var(--site-primary-offWhite) !important;
}

/* Cards styles for traffic light sections === */
.card {--pws-border-radius:0;}
.card-title em[class^="fa"] {
    margin-right: 4px;
}
main .card-footer ul {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}
.card.ai-red {
    border-color: var(--site-secondary-red);
}
.card.ai-red .card-body .card-title {
    /*color: var(--site-secondary-red);*/
    color: var(--pws-white);
}
.card.ai-red .card-body {
    --pws-bg-opacity:0.05;
    /*background-color:rgba(var(--pws-danger-rgb),var(--pws-bg-opacity, 1));*/
    background-color:var(--site-secondary-red);
    color:var(--pws-white);
}
.card.ai-caution {
    /*border-color: var(--site-primary-orange);*/
    border-color: var(--site-secondary-yellow);
}
.card.ai-caution .card-body .card-title {
    /*color: var(--pws-warning-text-emphasis);*/
    color:var(--pws-black);
}
.card.ai-caution .card-body {
    --pws-bg-opacity:0.05;
    /*background-color:rgba(var(--pws-warning-rgb),var(--pws-bg-opacity, 1));*/
    background-color:var(--site-secondary-yellow);
    color:var(--pws-black);
}
.card.ai-proceed {
    border-color: var(--site-secondary-seaGreen);
}
.card.ai-proceed .card-body .card-title {
    /*color: var(--site-secondary-seaGreen);*/
    color:var(--pws-white);
}
.card.ai-proceed .card-body {
    --pws-bg-opacity:0.05;
    /*background-color:rgba(var(--pws-success-rgb),var(--pws-bg-opacity, 1));*/
    background-color:var(--site-secondary-seaGreen);
    color:var(--pws-white);
}

/* Tabs and panes styles ===================== */
ul.nav.nav-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap:wrap;
}
.nav-pills .nav-item button {
    background:none;
    padding:0.6rem 1rem;
    color:var(--site-logo-darkBlue);
    border-color:var(--site-logo-darkBlue);
    border:solid 1px;
    border-radius: var(--pws-border-radius) !important;
    font-weight:600;
}
.nav-pills .nav-item button:hover {
    color:var(--pws-white);
    background:var(--site-logo-darkBlue);
}
.nav-pills .nav-item button.active {
    color:var(--site-logo-darkBlue);
    background:#B7D1ED;
}
.tab-pane {
    padding:1rem 1.5rem;
    background: var(--pws-white);
}
/* Transition animation */
.tab-pane.active {
    animation: slide-up 0.3s ease-out;
}
@keyframes slide-up {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* Mobile adjustments */
@media(max-width: 576px) {
    ul.nav.nav-pills {
        overflow-x: scroll;
        flex-wrap:nowrap;
    }
    ul.nav.nav-pills::-webkit-scrollbar {display: none;}
    li.nav-item {
        flex: none;
        margin:0 0.4rem 0.5rem 0;
    }
}

/* Accordion adjustments ===================== */
main div.accordionblockh3 h3 {font-size: 3.5vh;}
h3.arrowdown::after {
    right: auto;
    left: 10px;
}
h3.arrowdown {
    padding-left: 2.4rem !important;
    padding-right: 0 !important;
}
main div.accordionblockh3 h3, main div.accordionblockh3 h3 + div.accordiontoggle {width: 100%;}
/* Quote styles */
.rte-content blockquote {
    margin: 0 !important;
    padding: 0;
    border-left: none;
    font-size: 1.2em;
    display: flex;
    gap: 5px;
}
.rte-content blockquote::before {
    content: "\201C";
    color: var(--site-secondary-gray);
    font-size: 6vmin;
    font-family: serif;
    font-weight: 600;
    text-align: center;
    margin-top:-1.5vmin;
}

/* Fixes to existing layout ================== */
#site-footer .card.rounded-card {min-width: auto;}
#site-footer h2 {color:white;}