:root {
    /* Communications - signal red */
    --communications: #B82813;
    --communications-10: #B828131A;
    --communications-60: #B8281399;

    /* Business - corporate blue */
    --business: #0C5989;
    --business-10: #0C59891A;
    --business-60: #0C598999;

    /* Curriculum & Instruction - scholarly indigo */
    --curriculum: #20376F;
    --curriculum-10: #20376F1A;
    --curriculum-60: #20376F99;

    /* Document & Records Management - magenta */
    --documents: #BA3778;
    --documents-10: #BA37781A;
    --documents-60: #BA377899;

    /* EdTech - modern teal */
    --edtech: #1A8A73;
    --edtech-10: #1A8A731A;
    --edtech-60: #1A8A7399;

    /* Facilities & Maintenance - earthy orange */
    --facilities: #CF620F;
    --facilities-10: #CF620F1A;
    --facilities-60: #CF620F99;

    /* Human Resources - approachable plum */
    --hr: #751673;
    --hr-10: #7516731A;
    --hr-60: #75167399;

    /* Strategic Programs and Leadership - royal purple */
    --strategic: #6B12A3;
    --strategic-10: #6B12A31A;
    --strategic-60: #6B12A399;

    /* Student Data Management */
    --studentdata: #a37e11;
    --studentdata-10: #a37e111A;
    --studentdata-60: #a37e1199;

    /* Student Services - supportive green */
    --studentservices: #2F7B34;
    --studentservices-10: #2F7B341A;
    --studentservices-60: #2F7B3499;

    /* Superintendent & Associates Corner - deep forest */
    --superintendent: #1F5521;
    --superintendent-10: #1F55211A;
    --superintendent-60: #1F552199;

    /* Technology - charcoal */
    --technology: #0891B2;
    --technology-10: #0891B21A;
    --technology-60: #0891B299;

    /* Transportation - safety amber */
    --transportation: #B45309;
    --transportation-10: #B453091A;
    --transportation-60: #B4530999;

    --default: #434345;
    --default-10: #4343451A;
    --default-60: #43434599;
}

.modal-info {
    border-radius: 20px;
}

h2 {
    font-size: 1.75rem;
}

.btn-primary {
    background-color: var(--primary);
    color: white !important;
    border-radius: 20px;
    padding: .65rem 1.25rem;
}

.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(1.2);
}

.btn-apply {
    background-color: var(--secondary);
    border-radius: 50px;
    margin-top: 1rem;
}

.bg-lightgrey {
    background-color: #EFEFEF;
}

.bg-white {
    border: 4px solid #EFEFEF;
}

.box-container {
    padding: 1rem;
    border-radius: 20px;
    position: relative;
}

a.circle-arrow:hover,
a.circle-arrow:focus {
    transform: rotate(90deg);
}

@media (min-width: 75em) {
    .btn {
        padding: .85rem 1.25rem;
    }

    .main-li>.nav-link a {
        color: #808080;
    }

    .main-li:hover>.nav-link a,
    .main-li:focus>.nav-link a {
        color: #000;
    }

    .main-li.active>.nav-link a {
        color: #000;
    }

    .main-header {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.nav-icons i.material-icons {
    font-size: 1.75rem;
}


.top-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.top-grid-1 {
    margin-bottom: 1rem;
}

.top-grid-2 .box-container {
    height: 100%;
}

.top-grid-left,
.top-grid-right {
    width: 100%;
}

.top-grid-1 .top-grid-left {
    height: 50vh;
}

.title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.title-row .circle-arrow,
.news-list .circle-arrow {
    position: static;
}

.department-swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* .swiper-wrapper {
    height: auto;
} */

.department-slide {
    padding: 1.5rem;
    border-radius: 20px;
    border: 4px solid rgba(7, 29, 73, 0.60);
    text-align: center;
    height: calc((100% - 20px - 80px - 2rem) / 2) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
}

.department-slide:hover,
.department-slide:focus {
    background-color: #d6d6d6;
}

.department-slide a {
    color: var(--primary);
    font-weight: var(--font-semibold);
    font-size: 1.1rem;
    line-height: 1.4;
}

.department-buttons {
    display: flex;
    gap: .5rem;
}

.department-button-prev,
.department-button-next,
.department-page-button-prev,
.department-page-button-next {
    position: static;
    transform: none;
    margin: 0;
    color: var(--primary);
}

.top-grid-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quick-container i {
    font-size: 1.5rem;
}

.announcement-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    justify-content: space-between;
    color: white;
}

.box-announcement {
    flex-grow: 1;
}

.announcement-list a {
    color: white;
    font-weight: var(--font-semibold);
    border-bottom: 4px solid rgba(239, 239, 239, 0.30);
    padding-bottom: .75rem;
    font-size: 1.1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.announcement-list a:last-of-type {
    border-bottom: none;
}

.top-grid-2 .top-grid-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Quick Access */
.box-trigger {
    cursor: pointer;
}

.box-expand {
    display: none;
    position: absolute;
    background: white;
    width: calc(100% + 8px);
    left: -4px;
    padding: 1rem;
    border: 4px solid #efefef;
    border-radius: 0 0 20px 20px;
    border-top: none;
    z-index: 1;
}

.box-quicklinks {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .5rem;
}

.box-quicklink {
    background-color: #EFEFEF;
    border-radius: 10px;
    padding: .75rem 1rem;
}

.box-quicklink i {
    font-size: 1rem;
}

/* What's New */
.news-list .format-content {
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: .75rem;
    display: none;
}

.news-link {
    gap: 1rem;
    align-items: baseline;
    text-decoration: none;
}

.page-content .news-link {
    text-decoration: none;
}

.news-list .news-content {
    flex-grow: 1;
    max-width: calc(100% - 50px - 1rem);
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.news-list .news-content p {
    margin-bottom: 0;
}

.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.news-tag {
    border-radius: 20px;
    border: 2px solid var(--default-60);
    background: var(--default-10);
    color: var(--default);
    text-align: center;
    padding: .25rem .75rem;
    font-weight: var(--font-bold);
    text-transform: capitalize;
    font-size: .9rem;
}

.news-title-row {
    gap: 1.5rem;
    flex-wrap: wrap;
    row-gap: .5rem;
}

.news-container .btn {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
}

.news-link:hover .circle-arrow,
.news-link:focus .circle-arrow {
    transform: rotate(90deg);
}

/* Health & Wellness */
.wellness-content img {
    border-radius: 20px;
    width: 100%;
    position: relative;
}

.wellness-content .btn {
    margin: -1.5rem auto 0;
    position: relative;
}

/* Upcoming Events */
.event-item {
    display: flex;
    gap: 1rem;
}

.event-list-box {
    border-radius: 20px;
    border: 2px solid var(--default-60);
    background: var(--default-10);
    color: var(--default);
    aspect-ratio: 1 / 1;
    width: 4.5rem;
    height: 4.5rem;
    text-align: center;
    font-weight: var(--font-bold);
    transition: all .3s ease-in-out;
}

.event-item:hover .event-list-box,
.event-item:focus .event-list-box {
    background: rgba(0, 0, 0, 0.2);
}

.event-name {
    width: calc(100% - 5.5rem);
}

.event-month {
    text-transform: uppercase;
    line-height: 1;
}

.event-day {
    font-size: 2rem;
    line-height: 1;
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
}

.event-title {
    font-weight: var(--font-semibold);
    font-size: 1.375rem;
    line-height: 1.2;
}

.event-container .btn {
    margin: 1rem auto 0;
}

@media (max-width: 991px) {

    h2,
    .h2 {
        font-size: 1.5rem;
        line-height: 1.4;
    }

    .circle-arrow {
        width: 35px;
        height: 35px;
    }

    .circle-arrow i {
        font-size: 12px;
    }

    .event-title {
        font-size: 1.1rem;
    }
}

@media (min-width: 48em) {
    .department-slide {
        height: calc((100% - 4.5rem - 40px) / 3) !important;
    }

    .top-grid-1 .top-grid-left {
        height: 60vh;
    }
}


@media (min-width: 75em) {
    .nav-link a {
        font-size: 22px;
    }

    .box-container {
        padding: 1rem 1.5rem;
    }

    .department-buttons {
        gap: 1rem;
    }

    .main-dropdown,
    .no-dropdown {
        padding: 0;
    }

    .main-li {
        border-right: 1.5px solid #000;
        padding-right: 1rem;
    }

    .main-li:last-of-type {
        border-right: none;
        padding-right: 0;
    }

    .top-grid {
        display: flex;
        gap: 1rem;
    }

    .top-grid-left {
        width: calc(70% - .5rem);
    }

    .top-grid-right {
        width: calc(30% - .5rem);
    }

    .top-grid-2 .top-grid-left {
        flex-direction: row;
    }

    .news-container {
        width: calc(60% - .5rem);
    }

    .wellness-container {
        width: calc(40% - .5rem);
    }
}

@media (min-width: 99em) {
    .main-li {
        padding-right: 1.5rem;
    }

    .nav-link a {
        font-size: 24px;
    }
}

/* Department Page */
ie-query {
    min-height: unset !important;
}

.department-grid .col-1,
.department-grid .col-2,
.department-grid .col-3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.department-grid {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.department-page-slide {
    border-radius: 20px;
    border: 4px solid rgba(7, 29, 73, 0.60);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    height: auto;
}

.department-page-slide:hover,
.department-page-slide:focus {
    background-color: #d6d6d6;
}

.department-page-slide a {
    color: var(--primary);
    font-weight: var(--font-semibold);
    font-size: 1.2rem;
    width: 100%;
    padding: 1.5rem;
    display: block;
}

.department-grid .news-container {
    width: 100%;
}

.department-grid .box-announcement {
    flex-grow: unset;
}

.department-grid .secondary-nav-item a {
    color: var(--primary);
    font-weight: var(--font-semibold);
}

.department-grid .secondary-nav-item a:hover,
.department-grid .secondary-nav-item a:focus {
    text-decoration: underline;
}

.document-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.document-list a {
    color: var(--primary);
    font-weight: var(--font-semibold);
    display: block;
}

.view-more-documents {
    margin-top: 1rem;
    display: block;
    color: var(--primary);
    cursor: pointer;
    margin-left: .5rem;
}

/* Knowledge Centre */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select {
    box-sizing: border-box;
    background-color: #DADADA;
    border: none;
    border-radius: 10px;
    transition: 0.5s;
    padding: 0.75rem 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
}

.custom-select-wrapper i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* allows clicks to go through to the select */
    color: #555;
}

#searchInput {
    background-color: #DADADA;
    border-radius: 10px;
    border: none;
    padding: 0.75rem 1rem .75rem 2.25rem;
}

#searchInput::placeholder {
    color: currentColor;
}

.search-field {
    position: relative;
}

.search-field i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .5rem;
}

.document-table {
    border-radius: 10px;
    border: 2px solid #EFEFEF;
    border-collapse: separate;
    border-spacing: 0;
}

.document-group {
    margin-bottom: 2rem;
}

.document-group .collapsible-bottom-icon {
    margin-top: 1rem;
}

.document-group h2 {
    margin-bottom: .5rem;
}

.document-title a,
.document-download a {
    color: var(--primary);
}

.document-table td {
    border-right: 2px solid #EFEFEF;
}

.document-table tr:nth-child(odd) {
    background: #EFEFEF;
}

.document-table .document-title {
    width: 70% !important;
}

.document-table .document-type,
.document-table .document-download {
    width: 15% !important;
}

.document-group.hidden,
.document-table tbody tr.hidden {
    display: none;
}

.page-main-content {
    margin-top: 2rem;
}

#reset-filters {
    color: #3A6EA6;
    cursor: pointer;
}

.no-results,
.no-depart-results {
    display: none;
}

.document-tag {
    text-transform: capitalize;
}

.archive-template h1 {
    margin-bottom: 1rem;
}

.document-collapsible-box-description {
    display: block;
    opacity: 0;
}

.document-editor ie-query {
    display: block !important;
}

@media (min-width: 75em) {
    .department-grid {
        flex-direction: row;
    }

    .department-grid .col-1,
    .department-grid .col-3 {
        width: calc(25% - .5rem);
    }

    .department-grid .col-2 {
        width: 50%;
        flex-grow: 1;
    }

    .col-all {
        flex-grow: 1;
    }
}

.footer-division-logo {
    display: block;
    width: 90px;
}

.footer-logos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (min-width:62em) {
    .footer-division-logo {
        margin: 2rem 0 0 0;
    }
}

/* Landing Page with Children */
.landing-item {
    position: relative;
}

.landing-wrapper-children .circle-arrow {
    z-index: 2;
    right: .5rem;
}

.page-content-inner .landing-children {
    gap: .25rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    list-style: none;
    margin: 0;
    padding: 1rem;
    background: var(--light-grey);
    border-radius: 20px;
    position: absolute;
    z-index: 1;
    right: 0.5rem;
    top: calc(100% - 2rem);
    width: 90%;
    transition: all .3s ease-in-out;
}

.page-content-inner .landing-children a {
    text-decoration: none;
    line-height: 1.4;
    display: block;
}

.landing-children a:hover,
.landing-children a:focus {
    font-weight: var(--font-semibold);
}

@media (min-width: 48em) {
    .page-content-inner .landing-children {
        width: 80%;
    }
}

/* Mobile: open state via class (tap) */
.landing-item-children.is-open .landing-children {
    opacity: 1;
    visibility: visible;
}

.landing-item-children.is-open .circle-arrow {
    transform: rotate(225deg);
}

.landing-item-children.no-children.is-open .circle-arrow {
    transform: rotate(90deg);
}

/* Desktop: hover behavior */
@media (hover: hover) and (pointer: fine) {
    .landing-item-children:hover .landing-children,
    .landing-item-children:focus-within .landing-children {
        opacity: 1;
        visibility: visible;
    }

    .landing-item-children:hover .circle-arrow,
    .landing-item-children:focus-within .circle-arrow {
        transform: rotate(225deg);
    }

    .landing-item-children.no-children:hover .circle-arrow,
    .landing-item-children.no-children:focus-within .circle-arrow {
        transform: rotate(90deg);
    }
}


/* Tag Legend */
[data-name="business & finance"],
[data-name="payroll"],
[data-name="courier service"] {
    border-color: var(--business-60);
    background: var(--business-10);
    color: var(--business);
}

[data-name="communications"] {
    border-color: var(--communications-60);
    background: var(--communications-10);
    color: var(--communications);
}

[data-name="curriculum & instruction"],
[data-name="elearning & dual credit"] {
    border-color: var(--curriculum-60);
    background: var(--curriculum-10);
    color: var(--curriculum);
}

[data-name="document & records management"] {
    border-color: var(--documents-60);
    background: var(--documents-10);
    color: var(--documents);
}

[data-name="edtech"] {
    border-color: var(--edtech-60);
    background: var(--edtech-10);
    color: var(--edtech);
}

[data-name="facilities & maintenance"] {
    border-color: var(--facilities-60);
    background: var(--facilities-10);
    color: var(--facilities);
}

[data-name="human resources"],
[data-name="staff wellness"] {
    border-color: var(--hr-60);
    background: var(--hr-10);
    color: var(--hr);
}

[data-name="strategic programs and leadership"] {
    border-color: var(--strategic-60);
    background: var(--strategic-10);
    color: var(--strategic);
}

[data-name="student data management powerschool & pasi"] {
    border-color: var(--studentdata-60);
    background: var(--studentdata-10);
    color: var(--studentdata);
}

[data-name="student services"] {
    border-color: var(--studentservices-60);
    background: var(--studentservices-10);
    color: var(--studentservices);
}

[data-name="superintendent & associates corner"] {
    border-color: var(--superintendent-60);
    background: var(--superintendent-10);
    color: var(--superintendent);
}

[data-name="technology"] {
    border-color: var(--technology-60);
    background: var(--technology-10);
    color: var(--technology);
}

[data-name="transportation"] {
    border-color: var(--transportation-60);
    background: var(--transportation-10);
    color: var(--transportation);
}