:root{
    --cosc-teal-light:#01bfcb  ;
    --cosc-teal-med:#009ca6;
    --cosc-teal-dark:#007c84;
    --cosc-blue-light:#4e78b1;
    --cosc-blue-med:#0148a7;
    --cosc-blue-dark:#002f6c;
    --cosc-fushia:#6a104f;
    --cosc-purple:#42113c;
    --cosc-sea-foam:#b5dead;
    --cosc-ice:#edfcfc;
    --cosc-bright-blue:#146ef5;
    --cosc-blue-hover:#418dff;
    --cosc-navy:#001f48;
    --cosc-navy-hover:#093a7b;
    --cosc-gray-one:#f4f6f9;
    --cosc-gray-two:#e3e6eb;
    --cosc-gray-three:#989ea2;
    --cosc-gray-four:#5e646a;
    --cosc-black:#222222;
    --cosc-success-bg:#fdfff6;
    --cosc-success-text:#355715;
    --cosc-error-bg:#fff6f6;
    --cosc-error-text:#a7110e;
    --cosc-info-bg:#f8fdff;
    --cosc-info-text:#002f6c;
    --cosc-blue:#0057b8;
    --cosc-gold:#c2a76b;
    --cosc-ink:#1a1f2b;
    --cosc-gray-100:#f8f9fb;
    --cosc-gray-200:#eef1f5;
    --cosc-gray-400:#cfd6e3;
    --cosc-focus:#0a58ca;
}
#top-banner {
    background:var(--cosc-gray-100);
    border-bottom:1px solid var(--cosc-gray-200);
}
#main-header {
    background:#fff;
    border-bottom:1px solid var(--cosc-gray-200);
    transition: box-shadow .2s ease;
}
header.scrolled #main-header {
    box-shadow:0 4px 16px rgba(10,39,64,.08);
}
.ca-button {
    border-radius:999px;
    font-weight:600;
    padding:.55rem 1rem;
    border:2px solid transparent;
    /*display:inline-flex;*/
    align-items:center;
    line-height:1;
}
.ca-button.navy {
    background:var(--cosc-navy);
    color:#fff;
}
.ca-button.bright-blue {
    background:var(--cosc-bright-blue);
    color:#fff;
}
#main-nav {
    background:var(--cosc-blue-dark);
    border-bottom:1px solid var(--cosc-gray-two);
    font-weight:600;
}
#main-nav .nav-link {
    color:var(--cosc-gray-100);
    letter-spacing:.2px;
}
.navbar-light .navbar-toggler {
    border-color: var(--cosc-gray-400);
    border-radius:.5rem;
}
.menu-heading {
    color:var(--cosc-blue-hover);
    font-weight: 700;
	font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
    margin-left: 1rem;
}
.dropdown-menu {
    margin: .5rem 0 0 !important; /*level with navbar*/
    padding: 0;
}
.dropdown-item {
    padding: 1rem;
    font-weight: 600;
}

/*****
Mega Menu
*****/
.show > .dropdown-menu.megamenu {
    opacity: 1;
}
.dropdown-menu.megamenu .dropdown-item {
    white-space: normal;        /* override Bootstrap 4's nowrap */
    overflow-wrap: break-word;  /* break long tokens if needed */
    word-break: normal;         /* keep natural breaking */
    hyphens: auto;              /* allow hyphenation where supported */
    -webkit-hyphens: auto;      /* Safari */
    border-radius: 0;
}
.dropdown-menu.megamenu .col-md-3 {
    background:var(--cosc-gray-200);
    border-right:1px solid var(--cosc-gray-400);
    padding:1rem;
}
.dropdown-menu.megamenu .col-md-9 {
    padding: 1rem;
    box-shadow: inset 0 0 8px rgba(0,0,0,.08);
    background: var(--cosc-info-bg);
}
.dropdown-menu.megamenu.megamenu--programs{
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 8px;
    box-shadow: 0 20px 40px rgba(10,39,64,.12);
    left: auto;
    right: auto;
    min-width: 100%;
}

/*****
Pseudo Classes
*****/
.list-group-item:focus,
.dropdown-item:focus,
#programsDropdown:focus,
.dropdown-toggle:focus {
    background:var(--cosc-blue-hover);
    color:var(--cosc-gray-100);
    outline: 3px solid var(--cosc-teal-light);
    outline-offset: 2px;
    box-shadow: none !important;
}
#programsMenu.dropdown-menu.megamenu .dropdown-item:hover,
.dropdown-toggle:hover {
    background:var(--cosc-blue-hover);
    color:var(--cosc-gray-100);
}
#mobileProgramsAccordion .card-header button.btn-link:hover,
#mobileProgramsAccordion .card-header button.btn-link:focus,
#mobileProgramsAccordion .card-header button.btn-link:active {
    text-decoration: none; 
}
#mobileProgramsAccordion a.dropdown-item:hover,
#mobileProgramsAccordion a.dropdown-item:focus,
#mobileProgramsAccordion a.dropdown-item:active {
    background: var(--cosc-blue-hover);
    color: var(--cosc-gray-100);
}
#program-category-tabs .list-group-item:hover {
    background:var(--cosc-blue-hover);
    box-shadow:0 4px 10px rgba(10,39,64,.06);
    color:var(--cosc-gray-100);
}
#program-category-tabs .list-group-item.active,
#program-category-tabs .list-group-item[aria-selected="true"] {
    background:var(--cosc-blue-hover);
    color: var(--cosc-gray-100);
    box-shadow:0 10px 20px rgba(10,39,64,.08);
}
.dropdown-item:hover {
    background:var(--cosc-blue-hover);
    color:var(--cosc-gray-100);
}
.ca-button.navy:hover  {
    background:#082033;
    text-decoration:none;
}
.ca-button.bright-blue:hover {
    background:#00489a;
    text-decoration:none;
}

/*****
Academic Programs mega menu category list
*****/
#program-category-tabs .list-group-item {
  padding: 1rem;
  margin: .25rem 0;
  border:0;
  border-radius: 0;
  font-weight:600;
  color:var(--cosc-black);
  background:transparent;
}

/*****
Mobile Collapse Panels 
*****/
[id^="mobileCollapse"].collapse.show,
[id^="collapsedrop"].collapse.show{
    position: relative;
    box-shadow: inset 0 0 8px rgba(0,0,0,.08);
    background: var(--cosc-info-bg);
}

/*****
Stop Rubber Banding?
*****/
#collapsePrograms.collapse.show,
[id^="mobile"].accordion .collapse.show {
    overflow: hidden;
}
/* Lock background scroll when mobile nav open */
/* lock the page *solidly* when nav is open */
body.nav-open {
    overflow: hidden;
}
  
/*****
Mobile Academic Programs Accordion Categories and Links
*****/
#mobileProgramsAccordion .dropdown-item {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.35;
    padding-top: .45rem;
    padding-bottom: .45rem;
}
#mobileProgramsAccordion a.dropdown-item{
    border-radius: 0;           /* square edges */
    white-space: normal;        /* allow wrapping */
    line-height: 1.35;
}
#mobileProgramsAccordion .card-header button.btn-link{
    border-radius: 0;
    padding: .25rem 0.5rem;
    text-align: left;
    color: var(--cosc-ink);
}
#mobileProgramsAccordion .card-header:has(button.btn-link[aria-expanded="true"]) {
    background: var(--cosc-gray-200) !important;
}
#mobileProgramsAccordion .card-header button.btn-link.collapsed{
    background: transparent;
    color: inherit;
}
/* Optional: tidy divider under each category header */
/*#mobileProgramsAccordion .card-header{
border-bottom: 1px solid var(--cosc-gray-200);
}*/

/*****
navbarContent
*****/
#navbarContent .card-header button.nav-link{
    font-weight:700;
    color:var(--cosc-ink);
    border-bottom:0 !important; /* overrides earlier rule */
    text-decoration: none; /* ensure no underline */
    border-radius: 0;
}
#navbarContent .card-body .dropdown-item {
    padding: 0.75em;
}
#navbarContent .card-header .collapsed span[aria-hidden] {
    transform:rotate(-90deg);
    transition:transform .2s ease;
}

/*****
programsMenu, remove programsMenu .mt-3
*****/
#programsMenu .row{
  margin-left: -.5rem;
  margin-right: -.5rem;
}

/*****
Annimate the default BS4 caret
*****/
#main-nav .dropdown-toggle::after {
  transition: transform .2s ease;
  transform: rotate(0deg);
}
#main-nav .nav-item.show > .nav-link.dropdown-toggle::after,
#main-nav .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    #main-nav {
        background: #fff !important;
    }
    #navbarContent {
        background: var(--cosc-gray-100) !important;
    }
    /* Top-level accordion buttons (Academic Programs, Get Started, etc.) */
    #navbarContent .card-header button.nav-link {
        padding: 1rem 0.2rem; 
    }
    /* Reduce bottom margin under lists for a tighter stack */
    #navbarContent .card-body ul {
        margin-bottom: .75rem; /* down from ~1rem+ */
    }
    #navbarContent .card-body ul:last-child {
        margin-bottom: 0; /* no extra gap at the bottom */
    }
    /* Base caret*/
    #navbarContent .card-header button > [aria-hidden],
    #mobileProgramsAccordion .card-header button > [aria-hidden]{
        display:inline-block;
        transform-origin: 50% 50%;
        will-change: transform;
        transition: transform .2s ease;
        transform: rotate(0deg);          /* closed */
    }
    /* Open caret*/
    #navbarContent .card-header button[aria-expanded="true"] > [aria-hidden],
    #mobileProgramsAccordion .card-header button[aria-expanded="true"] > [aria-hidden]{
        transform: rotate(180deg);
    }
    /* Avoid double borders when a card follows another */
    #navbarContent .accordion .card + .card .card-header{
        border-top:0; /* keep only one divider */
    }
    /* Let the mobile menu scroll while the page behind stays locked */
    /* when the mobile menu is open */
    #navbarContent.collapse.show{
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
    }
    /* left/right breathing room inside the mobile nav list */
    #navbarContent .navbar-nav{
        padding-left: .75rem;
        padding-right: .75rem;
        float: none; /* added during testing */
    }
    /* remove extra bottom padding on the last item in a panel */
    #mobileProgramsAccordion .card-body > :last-child{
        margin-bottom: 0;
    }
    /* Mobile Academic Programs category toggles (Business, Healthcare, etc.) */
    #mobileProgramsAccordion .card-header button.btn-link {
        font-weight: 600;
        text-transform: capitalize;
        letter-spacing: .25px;
    }
    /* Align degree headers and program links in mobile Academic Programs */
    /* Indent the UL that contains the header + links */
    #mobileProgramsAccordion ul.list-unstyled {
        padding-left: 0.25rem;
    }
    /* Header inherits the UL indent, no extra needed */
    #mobileProgramsAccordion li.font-weight-bold.small.text-uppercase {
        padding-left: 0;       /* don’t double-indent */
        margin-bottom: .25rem; /* tighter gap */
    }
    #mobileSearch .form-control {
        border-radius: .5rem 0 0 .5rem;
    }
    #mobileSearch .btn {
        border-radius: 0 .5rem .5rem 0;
    }
    /* Optional: match your focus style */
    #mobileSearch .form-control:focus {
        outline: 3px solid var(--cosc-focus);
        outline-offset: 2px;
        box-shadow: none;
    }
    /* Two buttons side-by-side with a small gutter */
    #mobileCtas .ctas-grid {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:.5rem;
    }
    #mobileCtas .ca-button.mobile {
        width:100%;
        margin:0;
        padding:.7rem 1rem;
        text-align:center;
    }
    /* Phone below, centered */
    #mobileCtas .phone-row {
        margin-top:1.25rem;
        padding-top: .75rem;/* room above the divider */
        border-top: 1px solid var(--cosc-gray-200); /* subtle divider */
        display:flex;
        justify-content:center;
     }
    #mobileCtas .cta-phon {
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        font-weight:600;
        color:var(--cosc-ink);
        text-decoration:none;
        padding:.5rem 0;
    }
    #mobileCtas .cta-phone:hover,
    #mobileCtas .cta-phone:focus {
        color:var(--cosc-blue);
        text-decoration:none;
    }
    .ca-button.mobile {
        display:block;
        width:100%;
        text-align:center;
        margin:.5rem 0;
        padding:.85rem 1rem;
    }
    /* Prevent duplicate desktop-only nav items from showing in mobile === */
    .navbar-nav > li.d-none.d-lg-block {
        display: none !important;
    }
    .navbar-collapse {
        padding-left: 0;
        padding-right: 0;
    }
    .navbar-brand.d-lg-none {
        padding-top: .5rem;   /* 8px */
        padding-bottom: .5rem;
    }
}

@media (min-width: 992px){
    #main-nav .navbar-nav > .nav-item > .nav-link {
        padding-left: 16px;
        padding-right: 16px;
    }
    #navbarContent .dropdown-menu.show {
        box-shadow: inset 0 0 8px rgba(0,0,0,.08);
        background: var(--cosc-info-bg);
    }
    #programsMenu .tab-pane .row > [class*="col-"] + [class*="col-"]{
        border-left: 1px solid var(--cosc-gray-two);
    }
}

@media (prefers-reduced-motion: reduce) {
    #main-nav .dropdown-toggle::after {
        transition: none;
    }
    .dropdown.megamenu {
        transition: none !important;
    }
    #navbarContent .card-header button.nav-link > span[aria-hidden] {
        transition: none !important;
    }
}