:root {
    --dark-blue: var(--midnight-blue);
    --dark-blue-hover: var(--river-blue);
    --dark-blue-hover-color: var(--white);
    --blue: var(--river-blue);
    --blue-hover: var(--midnight-blue);
    --blue-hover-color: var(--white);
    --light-blue: var(--alt-sky-blue);
    --light-blue-color: var(--black);
    --light-blue-hover: var(--ivory);
    --light-blue-hover-color: var(--black);
    --darkest-green: var(--dark-evergreen);
    --darkest-green-hover: var(--evergreen);
    --darkest-green-hover-color: var(--white);
    --dark-green: var(--evergreen);
    --dark-green-color: var(--white);
    --dark-green-hover: var(--dark-evergreen);
    --dark-green-hover-color: var(--white);
    --green: var(--pine-green);
    --green-color: var(var(--white));
    --green-hover: var(--evergreen);
    --green-hover-color: var(--white);
    --light-green: var(--alternate-green);
    --light-green-hover: var(--ivory);
    --light-green-color: var(--black);
    --ivory: var(--ivory);
    --ivory-hover: var(--white);
    --ivory-color: var(--dark-blue);
    --ivory-hover-color: var(--dark-blue);
    --orange: var(--rust);
    --orange-color: var(--white);
    --orange-hover: var(--golden);
    --orange-hover-color: #000;
    --yellow: var(--rays);
    --yellow-color: var(--dark-blue);
    --yellow-hover: var(--ivory);
    --purple: var(--purple-sage);
    --purple-color: var(--white);
    --purple-hover: var(--light-purple);
    --purple-hover-color: var(--dark-blue);
    --light-purple: var(--lavender);
    --off-black: var(--dusk);
    --dark-grey: var(--storm);
    --grey: var(--fog);
    --grey-color: var(--dark-blue);
    --grey-hover: var(--grey);
    --light-grey: var(--cloud);
    --light-grey-hover: var(--grey);
    --white: #fff;
    --black: #000;
    --white-bg-trans: rgba(255, 255, 255, .9);
    --transparent: transparent;
    --dark-blue-rgb: 5, 40, 85;
    --blue-rgb: 5, 80, 140;
    --light-blue-rgb: 30, 170, 225;
    --dark-green-rgb: 0, 100, 65;
    --dark-evergreen-rgb: 0, 74, 46;
    --green-rgb: 5, 155, 90;
    --light-green-rgb: 5, 209, 121;
    --orange-rgb: 156, 54, 5;
    --purple-rgb: 92, 51, 125;
    --light-purple-rgb: 173, 138, 214;
    --off-black-rgb: 33, 36, 41;
    --dark-grey-rgb: 64, 71, 79;
    --grey-rgb: 184, 194, 204;
    --light-grey-rgb: 217, 229, 242;
    --white-rgb: 255, 255, 255;
    --midnight-blue: #052855;
    --river-blue: #05508c;
    --alt-sky-blue: #63c9ff;
    --evergreen: #006441;
    --dark-evergreen: #004a2e;
    --pine-green: #059b5a;
    --alternate-green: #05D179;
    --ivory: #ebebe1;
    --rust: #9c3605;
    --golden: #cf8500;
    --rays: #f5d129;
    --purple-sage: #5c337d;
    --lavender: #ad8ad6;
    --dusk: #212429;
    --storm: #40474f;
    --fog: #b8c2cc;
    --cloud: #d9e5f2
}

a[role="button"] {
    border-radius: 10px
}

a,
a:visited {
    color: var(--blue);
    font-weight: 400;
    text-decoration: underline
}

a:hover,
a:focus {
    text-decoration: underline;
    color: var(--dark-blue)
}

body,
p {
    color: var(--dark-blue);
    font-family: "Figtree", sans-serif
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Figtree", sans-serif;
    line-height: 1.1
}

h1 {
    color: var(--dark-blue);
    font-size: 3.2rem;
    font-weight: 700
}

h2 {
    font-size: 2.8rem;
    color: var(--dark-blue);
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 25px
}

h3 {
    font-size: 2.4rem;
    color: var(--dark-blue);
    margin-bottom: 5px
}

h4 {
    font-size: 2rem;
    color: var(--dark-blue)
}

h5 {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--dark-blue)
}

p {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem
}

.dark-blue-background,
.dark-blue-bg {
    background: var(--dark-blue) !important;
    color: var(--white) !important
}

.blue-background,
.blue-bg {
    background: var(--blue);
    color: var(--white)
}

.light-blue-background,
.light-blue-bg,
.brand-blue-bg {
    background: var(--light-blue) !important;
    color: var(--light-blue-color)
}

.dark-green-background,
.dark-green-bg {
    background: var(--dark-green) !important;
    color: var(--dark-green-color) !important
}

.green-background,
.green-bg {
    background: var(--green);
    color: var(--green-color)
}

.light-green-background,
.light-green-bg {
    background: var(--light-green) !important;
    color: var(--light-green-color) !important
}

.yellow-background,
.yellow-bg {
    background: var(--yellow) !important;
    color: var(--yellow)
}

.dark-grey-background,
.dark-grey-bg {
    background: var(--dark-grey) !important;
    color: var(--white) !important
}

.grey-background,
.grey-bg {
    background: var(--grey) !important;
    color: var(--dark-blue) !important
}

.light-grey-background,
.light-grey-bg {
    background: var(--light-grey) !important;
    color: var(--dark-blue)
}

.ivory-background,
.ivory-bg {
    background: var(--ivory) !important;
    color: var(--dark-blue) !important
}

.dark-purple-background,
.dark-purple-bg {
    color: var(--white) !important;
    background: var(--purple) !important
}

.purple-background,
.purple-bg {
    color: var(--white) !important;
    background: var(--purple) !important
}

.light-purple-background,
.light-purple-bg {
    color: var(--dark-blue) !important;
    background: var(--light-purple) !important
}

.orange-background,
.orange-bg {
    background: var(--orange) !important;
    color: var(--orange-color)
}

.light-grey-bg {
    background: var(--light-grey) !important
}

.dark-grey-bg {
    background: var(--dark-grey) !important
}

.primary-blue-bg h1,
.blue-bg h1,
.dark-blue-bg h1,
.dark-green-bg h1,
.maroon-bg h1,
.dark-purple-bg h1,
.purple-bg h1,
.primary-blue-bg h2,
.blue-bg h2,
.dark-blue-bg h2,
.dark-green-bg h2,
.maroon-bg h2,
.dark-purple-bg h2,
.purple-bg h2,
.primary-blue-bg h3,
.blue-bg h3,
.dark-blue-bg h3,
.dark-green-bg h3,
.maroon-bg h3,
.dark-purple-bg h3,
.purple-bg h3,
.primary-blue-bg h4,
.blue-bg h4,
.dark-blue-bg h4,
.dark-green-bg h4,
.maroon-bg h4,
.dark-purple-bg h4,
.purple-bg h4,
.primary-blue-bg p,
.blue-bg p,
.dark-blue-bg p,
.dark-green-bg p,
.maroon-bg p,
.dark-purple-bg p,
.purple-bg p,
.primary-blue-bg a,
.blue-bg a,
.dark-blue-bg a,
.dark-green-bg a,
.maroon-bg a,
.dark-purple-bg a,
.purple-bg a {
    color: var(--white)
}

.primary-blue-bg a:hover,
.blue-bg a:hover,
.dark-blue-bg a:hover,
.dark-green-bg a:hover,
.maroon-bg a:hover,
.dark-purple-bg a:hover,
.purple-bg a:hover {
    color: var(--white)
}


.btn {
    border-radius: 10px
}

div[class*="button"] a {
    border-radius: 10px
}

.btn-primary {
    background-color: var(--blue)
}

.btn-primary:hover {
    background-color: var(--dark-blue)
}

.button {
    margin: 15px 0;
    font-size: 1.4rem;
    font-family: "Figtree", sans-serif
}

.button a {
    background: var(--blue);
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    color: var(--white);
    font-family: "Figtree", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    min-width: 135px;
    outline: 0;
    padding: 12px 15px;
    text-align: center;
    text-decoration: none
}

.button a:hover,
.button a:focus,
.button input:hover,
.button input:focus,
.button.multi-slider.selected>input {
    background: var(--blue-hover);
    color: var(--blue-hover-color);
    text-decoration: none
}

.button a.dark-blue-background {
    background: var(--dark-blue) !important
}

.button a.dark-blue-background:hover,
.button.dark-blue-background:hover {
    background: var(--dark-blue-hover) !important
}

.button a.blue-background {
    background: var(--blue) !important
}

.button a.blue-background:hover,
.button.blue-background:hover {
    background: var(--blue-hover) !important
}

.button a.light-blue-background,
.button.light-blue-background {
    background: var(--light-blue) !important;
    color: var(--light-blue-color);
    font-weight: 700
}

.button a.light-blue-background:hover,
.button.light-blue-background:hover {
    background: var(--light-blue-hover) !important
}

.button a.dark-green-background,
.button.dark-green-background {
    background: var(--dark-green) !important;
    color: var(--dark-green-color)
}

.button a.dark-green-background:hover,
.button.dark-green-background:hover {
    background: var(--dark-green-hover) !important
}

.button a.green-background,
.button.green-background {
    background: var(--green) !important;
    color: var(--green-color) !important
}

.button a.green-background:hover,
.button.green-background:hover {
    background: var(--green-hover) !important
}

.button a.light-green-background,
.button.light-green-background {
    background: var(--light-green) !important;
    color: var(--light-green-color) !important
}

.button a.light-green-background:hover,
.button.light-green-background:hover {
    background: var(--light-green-hover) !important
}

.button a.orange-background,
.button.orange-background {
    background: var(--orange) !important;
    color: var(--orange-color) !important
}

.button a.orange-background:hover,
.button.orange-background:hover {
    background: var(--orange-hover) !important;
    color: var(--orange-hover-color) !important
}

.button a.purple-background,
.button.purple-background {
    background: var(--purple) !important;
    color: var(--purple-color)
}

.button a.purple-background:hover,
.button.purple-background:hover {
    background: var(--purple-hover) !important
}

.button a.yellow-background,
.button.yellow-background {
    background: var(--yellow) !important;
    color: var(--yellow-color)
}

.button a.yellow-background:hover,
.button.yellow-background:hover {
    background: var(--yellow-hover) !important
}

.button.dark-grey-background:hover {
    background: var(--grey-hover) !important
}

.button.grey-background:hover {
    background: var(--grey-hover) !important
}

.button.light-grey-background:hover {
    background: var(--light-grey-hover) !important
}

.button.white a {
    background: var(--white);
    color: var(--dark-grey)
}

.button.white a:hover {
    background: var(--light-grey);
    color: var(--light-blue)
}

.button.yellow a {
    background: var(--yellow);
    color: var(--yellow-color) !important
}

.button.yellow a:hover,
.button.yellow a:focus {
    background: var(--yellow-hover);
    color: var(--yellow-color)
}

.button.green a {
    background: var(--green);
    color: var(--white)
}

.button.green a:hover,
.button.green a:focus {
    background: var(--green-hover);
    color: var(--white)
}

.button.light-green a {
    background: var(--light-green);
    color: var(--black)
}

.button.light-green a:hover,
.button.light-green a:focus {
    background: var(--light-green-hover);
    color: var(--black)
}

.button.alert a {
    background: var(--orange);
    color: var(--white)
}

.button.alert a:hover,
.button.alert a:focus {
    background: var(--orange-hover);
    color: var(--orange-hover-color)
}

/* ============================================================
   GLANCE SECTION — Vue component styles
   Replaces all inline styles previously set by AddGlanceStyle()
   and UpdateGlanceNoCache() in the code-behind.
   ============================================================ */

.glance-section {
    margin-bottom: 40px
}

.glance-heading {
    margin-bottom: 20px
}

/* Two-column layout: tablist left, detail panel right */
.glance-layout {
    display: flex;
    align-items: stretch;
    border-radius: 25px;
    overflow: hidden
}

/* ---- Left column: program tablist ---- */
.glance-tablist {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 45%;
    max-width: 55%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column
}

.glance-tab {
    background: var(--midnight-blue);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 25px 18px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    transition: background 0.15s ease
}

.glance-tab:last-child {
    border-bottom: none
}

/* First item: round top-left corner */
.glance-tablist>.glance-tab:first-child {
    border-radius: 25px 0 0 0
}

/* Last item: round bottom-left corner */
.glance-tablist>.glance-tab:last-child {
    border-radius: 0 0 0 25px
}

/* Only one item: round both left corners */
.glance-tablist>.glance-tab:first-child:last-child {
    border-radius: 25px 0 0 25px
}

/* Active tab uses river-blue background */
.glance-tab--active {
    background: var(--river-blue) !important
}

/* Hover/focus state for inactive tabs */
.glance-tab:not(.glance-tab--active):hover,
.glance-tab:not(.glance-tab--active):focus {
    background: #0a3d6e
}

/* Keyboard focus ring — meets WCAG 1.4.11 Non-text Contrast */
.glance-tab:focus-visible {
    outline: 3px solid var(--alt-sky-blue);
    outline-offset: -3px;
    z-index: 1
}

.glance-tab__icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    width: 22px;
    text-align: center
}

.glance-tab__label {
    font-size: 18px;
    font-weight: 400;
    color: var(--white);
    line-height: 1.3
}

/* ---- Right column: detail panel ---- */
.glance-detail-panel {
    flex: 1 1 auto;
    background: var(--river-blue);
    color: var(--white);
    padding: 20px 24px;
    border-radius: 0 25px 25px 0;
    min-height: 200px
}

.glance-detail-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.glance-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .65)
}

.glance-detail-item:last-child {
    border-bottom: none
}

.glance-detail-item:focus-visible {
    outline: 3px solid var(--alt-sky-blue);
    outline-offset: 2px
}

.glance-detail-item__icon {
    font-size: 27px;
    flex-shrink: 0;
    width: 35px;
    text-align: center;
    margin-top: 2px
}

.glance-detail-item__label {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    flex: 0 0 160px
}

.glance-detail-item__sublabel {
    display: block;
    font-size: 18px;
    font-weight: 400;
    margin-top: 2px
}

.glance-detail-item__value {
    font-size: 18px;
    color: var(--white);
    flex: 1 1 auto
}

.glance-detail-item__value a,
.glance-detail-item__value a:hover,
.glance-detail-item__value a:visited {
    color: var(--white)
}

/* ---- Responsive: stack on small screens ---- */
@media (max-width: 992px) {
    .glance-tablist {
        max-width: 100%;
    }

    .glance-detail-item {
        flex-wrap: wrap
    }

    .glance-tablist>.glance-tab:first-child:last-child {
        border-radius: 0;
        border-bottom: 2px solid var(--white);
    }

    .navLib>li {
        float: initial;
    }

    .navLib>li>a {

        text-align: center;
    }
}

/* ---- navLib WCAG tab pattern focus styles ---- */
.navLib [role="tab"]:focus-visible {
    outline: 3px solid var(--alt-sky-blue);
    outline-offset: 2px;
    border-radius: 4px
}

[role="tabpanel"]:focus-visible {
    outline: 3px solid var(--alt-sky-blue);
    outline-offset: 2px
}

@media (max-width: 767px) {
    .glance-layout {
        flex-direction: column
    }

    .glance-tablist>.glance-tab:first-child {
        border-radius: 25px 25px 0 0
    }

    .glance-tablist>.glance-tab:last-child {
        border-radius: 0
    }

    .glance-detail-panel {
        border-radius: 0 0 25px 25px
    }
}

/* ---- Loading overlay ---- */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999
}