/*
  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-bold {font-weight: 700;}
.ag-black {font-weight: 900;}
:root {
    --ai-primary:#222d66;
    --ai-primary-rgb:34, 45, 102;
    --ai-secondary:#E6E6E6;
    --ai-secondary-rgb:230, 230, 230;
    --ai-tertiary:#FF7024;
    --ai-tertiary-rgb:255, 112, 36;
}
.ai-text-primary {color:var(--ai-primary);}
.ai-text-secondary {color:var(--ai-secondary);}
.ai-text-tertiary {color:var(--ai-tertiary);}
.text-red {color: var(--site-secondary-red);}
.ai-bg-primary {
    --pws-bg-opacity: 1;
    background-color: rgba(var(--ai-primary-rgb), var(--pws-bg-opacity)) !important
}
.ai-bg-secondary {
    --pws-bg-opacity: 1;
    background-color: rgba(var(--ai-secondary-rgb), var(--pws-bg-opacity)) !important
}
.ai-bg-tertiary {
    --pws-bg-opacity: 0.20;
    background-color: rgba(var(--ai-tertiary-rgb), var(--pws-bg-opacity)) !important
}
.border-ai {
    --pws-border-width:1rem;
    --pws-border-color:var(--site-primary-mediumBlue);
}

/* Headings adjustments ====================== */
main h1, main h2, main h3, main h4, main h5, main .rte-content summary[role="heading"] {
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 700 !important;
    font-style: normal;
}
main .rte-content h1 {font-size:clamp(3rem,6vh,4rem);}
main .rte-content h1, main .rte-content h3, main .rte-content h5 {color:var(--site-primary-mediumBlue);}
main .rte-content h2, main .rte-content h4, main .rte-content summary[aria-level="4"] {color:var(--ai-primary);}
main .rte-content h2 {
    margin-top:3vh;
    font-size:clamp(2.25rem,3vh,3rem);
}
main .rte-content summary[aria-level="4"] {font-size:1.5rem;}

/* 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/external-comms/policy/ai-child-transparent.png');
    background-position-x: 5%;
}
.header-bg-right {
    background-image:url('https://pwsblobprd.schools.nyc/prd-pws/images/default-source/external-comms/policy/ai-adult-transparent.png');
    background-position-x: right 1%;
}
@media(max-width: 768px) { /* when screen is less than 768px wide */
    main .rte-content h1 {font-size:10vmin;}
    main .rte-content h2 {font-size:8vmin;}
    .header-bg-left, .header-bg-right {background-image:none;}
}

/* AI Navigation menu colors + adjustments === */
.ai-nav.cm-menu a {
    background-color:var(--site-primary-mediumBlue);
    color:var(--pws-white);
    border-radius:0.625rem;
}
.ai-nav.cm-menu>li {
    border:none;
    margin-bottom:5px;
}
.ai-nav.cm-menu>li a:hover {
    background-color:var(--pws-white);
    color:var(--site-primary-mediumBlue);
    outline:solid 2px currentColor;
}

/* Extra styles ============================== */
details[open] summary {
    color:var(--site-secondary-gray);
    margin-bottom:1vh;
}
details :last-child {margin-bottom:0;}
.rte-content ul.mb-0 li {margin-bottom: 0.5em;}
main .main-column h2 {position:relative;}
main .main-column h2::before {
    content:"";
    position:absolute;
    background-color:rgba(var(--ai-tertiary-rgb),0.25);
    display:block;
    height:4rem;
    width:4rem;
    z-index:-1;
    top:-1rem;
    left:-2rem;
}
/* Overflow box */
.ai-condense {
    height: 48vh;
    overflow-y: scroll;
    padding: 2vmin 4vmin 2vmin 0vmin;
    background-color: var(--pws-white);
}

/* Cards styles ============================== */
.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);
}

/* 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, h3.arrowup::after {
    right: auto;
    left: 10px;
}
h3.arrowdown, h3.arrowup {
    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;
}

/* Sep 2026 AI Guidance ====================== */
/*.table-responsive table, .table-responsive tr, .table-responsive td, .table-responsive th {
    border-color: var(--ai-primary) !important;
    border-style: solid !important;
    border-width: 1px !important;
}*/
.table-responsive tr:first-child th, .table-responsive thead th:first-child {background-color: rgba(var(--ai-tertiary-rgb),0.2);}
.table-responsive tbody {background:var(--pws-white);}
.table-responsive tr:nth-of-type(even) {background:rgba(0,77,188,0.1);} /* primary medium blue */
.table-responsive tr:nth-of-type(odd) {background:var(--pws-white);}
.table-responsive tr td:first-child {
    width:20%;
    text-align:center;
}
.table-responsive tr td {width:40%;}
.main-column h3 {
    margin-top:2vh;
}
summary h4 {
    display:inline;
    margin:0;
}

/* Details animation ========================= */
/*::details-content {
    transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
    height: 0;
    overflow: clip;
}*/
/* Browser supports interpolate-size */
/*@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
    [open]::details-content {
        height: auto;
    }
}*/

/* Fixes to existing styles ================== */
.notes-section ol.notes-ctr {--pws-highlight-bg:var(--pws-white);}
.jump-box .header a, .section-nav ul {background:var(--ai-secondary);}
#site-footer .card.rounded-card {min-width: auto;}