/* ============================================================
   site.css
   Clean Bootstrap 5 friendly site stylesheet
   - Removes legacy Bootstrap 3 era rules
   - Keeps validation styling for ASP.NET MVC helpers
   - Preserves KUMC style branding areas
   - Avoids overriding Bootstrap utility classes
   - Fixes footer background layer blocking clicks
   ============================================================ */

/* ============================================================
   Theme Variables
   Store repeated colors and sizing values in one place.
   ============================================================ */
:root {
    --site-font-family-sans: "Raleway", sans-serif;
    --site-font-family-serif: "Raleway", serif;
    --site-font-size-base: 1.1rem;
    --site-font-weight-base: 500;
    --site-text-color: #525757;
    --site-text-dark: #424a57;
    --site-text-black: #000000;
    --kumc-blue-dark: #003459;
    --kumc-blue: #0051ba;
    --kumc-blue-heading: #004373;
    --kumc-red: #e8000d;
    --kumc-light-gray: #d6d7d9;
    --validation-danger-text: #a94442;
    --validation-danger-bg: #f2dede;
    --validation-danger-border: #ebccd1;
    --table-hover-bg: #d3f0f8;
    --table-head-bg: #166b82;
    --table-head-text: #ffffff;
    --footer-text: #ffffff;
    --footer-link: #ffffff;
    --skip-link-border: #dde5ee;
    --skip-link-bg: #ffffff;
    --content-max-width: 2000px;
}

/* ============================================================
   Base Document Styles
   These are global defaults for the site.
   ============================================================ */
html {
    font-size: 100%;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-family: var(--site-font-family-sans);
    font-weight: var(--site-font-weight-base);
    font-size: var(--site-font-size-base);
    color: var(--site-text-color);
}

/* ============================================================
   Accessibility
   Skip link helps keyboard users jump to main content.
   ============================================================ */
#skip-to-main {
    position: absolute;
    top: -100%;
    left: 10px;
    padding: 5px 10px;
    border: 1px solid var(--skip-link-border);
    border-radius: 4px;
    background-color: var(--skip-link-bg);
    -webkit-appearance: none;
    z-index: 2000;
}

    #skip-to-main:focus {
        top: 10px;
    }

/* ============================================================
   Typography
   Heading system for site branding and consistency.
   ============================================================ */
h1,
.h1,
h3,
.h3,
h5,
.h5 {
    font-family: var(--site-font-family-sans);
    font-weight: 700;
}

h2,
.h2,
h4,
.h4,
h6,
.h6 {
    font-family: var(--site-font-family-serif);
    font-weight: 700;
}

h1,
.h1 {
    color: var(--kumc-blue-dark);
    font-size: 2rem;
}

h2,
.h2 {
    font-size: 1.7rem;
    letter-spacing: 0.035em;
}

h3,
.h3 {
    color: var(--site-text-dark);
    font-size: 1.6rem;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--site-text-dark);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-bottom: 10px;
    line-height: 1.3;
}

small,
.small {
    font-size: 80%;
    font-weight: 400;
}

caption {
    font-size: larger;
}

/* ============================================================
   Layout Helpers
   Safe custom helpers that do not override Bootstrap classes.
   ============================================================ */
.site-max-width {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.page-header {
    margin-top: 10px;
}

.form-control-static {
    padding-top: 7px;
    padding-bottom: 7px;
}

.form-group-condensed {
    margin-bottom: 0;
}

/* ============================================================
   ASP.NET MVC Validation Styles
   Supports validation summary and field validation output.
   ============================================================ */
.validation-summary-errors {
    padding: 10px 10px 2px 15px;
    margin-bottom: 10px;
    color: var(--validation-danger-text);
    background-color: var(--validation-danger-bg);
    border: 1px solid var(--validation-danger-border);
    border-radius: 0.375rem;
    font-weight: bold;
}

.validation-summary-valid {
    display: none;
}

.field-validation-error,
span.field-validation-error {
    color: var(--validation-danger-text);
}

.field-validation-valid {
    display: none;
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border: 1px solid var(--validation-danger-text);
}

input[type="checkbox"].input-validation-error {
    border: 0;
}

/* ============================================================
   Input and Browser Cleanup
   Keeps old browser quirks from showing unwanted controls.
   ============================================================ */
::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

/* ============================================================
   Header / Navigation Branding
   Site-wide top branding styles.
   ============================================================ */
.header-top {
    background: var(--kumc-blue-dark);
    border-bottom: 2px solid var(--kumc-red);
}

#main-nav {
    background: var(--kumc-blue) !important;
    height: auto;
    margin: 0 auto;
    padding: 0;
}

.navbar {
    margin-top: 0;
    margin-bottom: 10px;
}

img.logo-img {
    height: 40px;
}

/* ============================================================
   Banner / Header Height Rules
   Preserves your role-based banner sizing.
   ============================================================ */
@media (min-width: 992px) {
    .alt-header header[role="banner"],
    .unit-home header[role="banner"],
    .unit-content header[role="banner"],
    .unit-landing header[role="banner"] {
        height: 100px;
    }

    header[role="banner"] {
        height: 117px;
        border-bottom: 5px solid var(--kumc-red);
    }
}

/* ============================================================
   Footer
   Footer branding and layout.
   Fixed so background cannot block clicks on links.
   ============================================================ */
footer {
    display: block;
    width: 100%;
    overflow: hidden;
}

    footer a {
        color: var(--footer-link);
    }

        footer a:hover {
            color: var(--footer-link);
            text-decoration: none;
        }

.tray {
    padding-top: 30px;
    padding-bottom: 30px;
}

.tray--footer {
    position: relative;
    z-index: 0;
    color: var(--footer-text);
    text-align: center;
    overflow: hidden;
}

.tray.tray--footer .background-image-container {
    height: 100%;
}

/* This layer is decorative only and must never capture clicks. */
.background-image-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

    /* Background image fills the footer and stays behind content. */
    .background-image-container .background-image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

footer .center-content {
    display: flex;
    justify-content: center;
}

.tray--footer .logo--footer {
    width: 235px;
    margin-top: 50px;
    margin-bottom: 40px;
}

.tray--footer .address-container,
.tray--footer .copywright-ps-cs,
.tray--footer .copyright-ps-cs {
    text-align: center;
    font-size: 0.95rem;
    line-height: 220%;
}

.tray--footer ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

    .tray--footer ul li {
        position: relative;
        display: inline-block;
        margin-right: 16px;
        list-style: none;
        font-size: 0.95rem;
        color: var(--footer-text);
    }

        .tray--footer ul li a {
            color: inherit;
            font-size: 0.95rem;
            position: relative;
            z-index: 2;
        }

        .tray--footer ul li::after {
            content: "|";
            position: absolute;
            top: 0;
            right: -13px;
        }

        .tray--footer ul li:last-of-type::after {
            content: "";
        }

    .tray--footer ul.social {
        margin: 15px 0;
    }

        .tray--footer ul.social li::after {
            content: "";
        }

        .tray--footer ul.social li a {
            display: block;
            position: relative;
            width: 40px;
            height: 40px;
            border: 2px solid #ffffff;
            border-radius: 20px;
        }

            .tray--footer ul.social li a .fab,
            .tray--footer ul.social li a .fas {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

.social li {
    margin-right: 4px !important;
}

    .social li a {
        font-size: 1.2rem !important;
    }

@media (min-width: 768px) {
    .tray {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .tray--footer .logo--footer {
        width: 270px;
        margin-bottom: 50px;
    }

    .tray--footer ul.social {
        margin: 30px 0;
    }

    .tray--footer .address-container,
    .tray--footer .copywright-ps-cs,
    .tray--footer .copyright-ps-cs {
        text-align: center;
        font-size: 0.95rem;
        line-height: 200%;
    }
}

@media (min-width: 992px) {
    .tray--footer .logo--footer {
        width: 290px;
        margin-top: 70px;
    }
}

@media (min-width: 414px) {
    .tray--footer .logo--footer {
        margin-top: 56px;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    footer img {
        max-width: 250px;
    }
}

/* ============================================================
   Table Styles
   Minimal table helpers that still work with Bootstrap 5.
   ============================================================ */
.table.table-auto {
    width: auto !important;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: var(--table-hover-bg);
}

.table-bordered thead td,
.table-bordered thead th {
    background-color: var(--table-head-bg);
    color: var(--table-head-text);
}

/* ============================================================
   Datepicker
   Prevents clipped dropdowns for datepicker widgets.
   ============================================================ */
.datepicker.dropdown-menu {
    max-height: none !important;
}

/* ============================================================
   Admin / Legacy App Specific Classes
   Kept for compatibility with your existing markup.
   These can be renamed later in the views.
   ============================================================ */
.navBackGround {
    background-color: var(--kumc-light-gray) !important;
}

.navkumcitempadding {
    padding-left: 20px !important;
}

.flashmessagedisplay {
    display: none !important;
}

.limitresult {
    margin-top: 5px;
    color: lightslategray;
}

.textAlign {
    text-align: left !important;
}

.deletewidth {
    width: auto !important;
}

.CheckboxMargin {
    margin-left: 20px !important;
}

.admintoppadding {
    padding-top: 0 !important;
}

.tablewidthadmin {
    width: 100% !important;
    vertical-align: middle !important;
}

.widthfull {
    width: 100% !important;
}

.widthlimit {
    width: 200px !important;
}

.showEntries {
    margin-bottom: 10px !important;
}

/* ============================================================
   Config-driven side menu layout
   Active only when body has .side-menu-layout
   ============================================================ */
html,
body {
    height: 100%;
}

    body.side-menu-layout {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

.side-layout-wrapper {
    flex: 1 0 auto;
}

body.side-menu-layout .side-layout-row {
    display: flex;
    align-items: stretch;
    min-height: 100%;
}

body.side-menu-layout .side-layout-sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    display: none;
    background-color: var(--kumc-light-gray);
    border-right: 1px solid #dee2e6;
}

@media (min-width: 768px) {
    body.side-menu-layout .side-layout-sidebar {
        display: flex;
        flex-direction: column;
    }
}

body.side-menu-layout .side-layout-main {
    flex: 1 1 auto;
    min-width: 0;
    background-color: #ffffff;
}

body.side-menu-layout .side-menu-desktop {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    background-color: var(--kumc-light-gray);
}

body.side-menu-layout .side-menu-brand {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

    body.side-menu-layout .side-menu-brand .navbar-brand,
    body.side-menu-layout .side-menu-mobile-header .navbar-brand {
        margin-bottom: 0;
        color: var(--kumc-blue-dark);
        font-weight: 700;
    }

body.side-menu-layout .side-menu-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem;
}

    body.side-menu-layout .side-menu-body .nav-link,
    body.side-menu-layout .side-menu-mobile .nav-link {
        color: var(--site-text-dark) !important;
        border-radius: 0.375rem;
    }

        body.side-menu-layout .side-menu-body .nav-link:hover,
        body.side-menu-layout .side-menu-mobile .nav-link:hover {
            background-color: rgba(0, 81, 186, 0.10);
            color: var(--kumc-blue-dark) !important;
        }

    body.side-menu-layout .side-menu-body .dropdown-toggle,
    body.side-menu-layout .side-menu-mobile .dropdown-toggle {
        width: 100%;
        text-align: left;
    }

body.side-menu-layout .side-menu-footer-links {
    margin-top: auto;
}

body.side-menu-layout .side-menu-mobile-header {
    background-color: var(--kumc-light-gray);
}

body.side-menu-layout .side-menu-mobile {
    background-color: var(--kumc-light-gray);
}

    body.side-menu-layout .side-menu-mobile .offcanvas-header {
        border-bottom: 1px solid #dee2e6;
    }

    body.side-menu-layout .side-menu-mobile .offcanvas-body {
        display: flex;
        flex-direction: column;
    }

body.side-menu-layout .side-menu-footer-spacer {
    margin-top: auto;
}

body.side-menu-layout .side-menu-page-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

body.side-menu-layout .side-menu-site-footer {
    width: 100%;
    flex-shrink: 0;
}

/* Slightly darken card borders without making them heavy. */
.card {
    border-color: rgba(0, 0, 0, 0.5) !important;
}

#documentsTable tr.documents-group-row td {
    background-color: #f3f3f3;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    vertical-align: middle;
}

#documentsTable tr.documents-group-row-category td {
    background-color: #e9ecef;
}

#documentsTable td.documents-group-subsection {
    padding-left: 1.25rem;
}

/* ============================================================
   Site Admin Dashboard Cards
   Keeps all 6 cards on one row at xl and larger.
   Makes cards wider, taller, and easier to read.
   ============================================================ */
.site-admin-card-row .site-admin-card-col {
    display: flex;
}

.site-admin-dashboard-card {
    width: 100%;
    min-width: 0;
    min-height: 100%;
}

    .site-admin-dashboard-card .card-body {
        min-width: 0;
        padding: 1.15rem;
    }

    .site-admin-dashboard-card .small {
        font-size: 0.95rem;
    }

    .site-admin-dashboard-card .h2 {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .site-admin-dashboard-card p {
        font-size: 1rem;
        line-height: 1.45;
    }

    .site-admin-dashboard-card .btn {
        font-size: 0.95rem;
        line-height: 1.2;
        padding: 0.5rem 0.75rem;
        white-space: normal;
    }

@media (min-width: 1200px) {
    .site-admin-card-col {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .site-admin-dashboard-card {
        min-height: 16.5rem;
    }

        .site-admin-dashboard-card .card-body {
            padding: 1.25rem !important;
        }

        .site-admin-dashboard-card .h2 {
            font-size: 2rem;
        }

        .site-admin-dashboard-card p {
            font-size: 1rem;
        }

        .site-admin-dashboard-card .btn {
            font-size: 0.95rem;
        }
}

.services-left-title {
    font-size: 2rem;
    font-weight: 600;
    color: #2f4a63;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid #6ea0d8;
}

.services-list .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.service-link {
    color: #166B82 !important;
    font-size: 1rem;
    padding: .5rem 0;
}

    .service-link:hover,
    .service-link:focus {
        color: #166B82 !important;
        font-weight: 600;
    }

    .service-link.active-service {
        font-weight: 600;
        color: #166B82 !important;
    }

.services-content-area {
    min-height: 400px;
}

#selectedServiceContent p:last-child,
#servicesIntroContent p:last-child {
    margin-bottom: 0;
}

/* Push the right-side content down below the blue rule on the left. */
.services-content-offset {
    padding-top: 3.25rem;
}

/* Optional: tighten on smaller screens so it does not look too spaced out. */
@media (max-width: 991.98px) {
    .services-content-offset {
        padding-top: 0;
    }
}

/*programs area*//**/
.programTitles {
    color: #166B82 !important
}