/*
 * Automatic dark-mode support.
 * Light mode remains entirely controlled by the existing stylesheets.
 * These overrides apply only when the browser/OS reports a dark color-scheme preference.
 */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --site-ink: #edf2f6;
        --site-muted: #b7c1cb;
        --site-surface: rgba(24, 31, 39, .94);
        --site-surface-soft: rgba(31, 39, 48, .96);
        --site-border: rgba(226, 234, 241, .16);
        --site-shadow: 0 16px 44px rgba(0, 0, 0, .34);

        --bs-body-color: #e7edf2;
        --bs-body-color-rgb: 231, 237, 242;
        --bs-body-bg: #10151b;
        --bs-body-bg-rgb: 16, 21, 27;
        --bs-emphasis-color: #ffffff;
        --bs-emphasis-color-rgb: 255, 255, 255;
        --bs-secondary-color: rgba(231, 237, 242, .72);
        --bs-secondary-color-rgb: 231, 237, 242;
        --bs-secondary-bg: #1b232c;
        --bs-secondary-bg-rgb: 27, 35, 44;
        --bs-tertiary-bg: #232c36;
        --bs-tertiary-bg-rgb: 35, 44, 54;
        --bs-border-color: #46515d;
        --bs-border-color-translucent: rgba(255, 255, 255, .16);
        --bs-link-color: #8fc5ea;
        --bs-link-hover-color: #b7daf2;
    }

    body {
        color: var(--site-ink);
        background-color: #10151b !important;
    }

    /* Keep the established background artwork, but darken it as a layer rather than altering the image itself. */
    body:not(.company-affiliatedltss):not(.company-ltsspm) {
        background-image: linear-gradient(rgba(8, 12, 16, .70), rgba(8, 12, 16, .78)), url("../images/transBG.png") !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: cover !important;
        background-attachment: fixed !important;
    }

    body::before {
        background: linear-gradient(180deg, rgba(7, 11, 15, .16), rgba(10, 15, 20, .30));
    }

    a {
        color: #8fc5ea;
    }

    a:hover,
    a:focus {
        color: #c2e1f5;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .control-label {
        color: var(--site-ink);
    }

    .section .style2,
    .page-index2 .site-home-panel,
    .page-employment .employment-brand-panel,
    .page-employmentHHC .employment-brand-panel,
    .employment-before-you-begin,
    .application-step .style2 {
        color: var(--site-ink);
        background: linear-gradient(145deg, rgba(var(--site-brand-rgb), .17), rgba(24, 31, 39, .94)) !important;
        border-color: rgba(226, 234, 241, .16);
        box-shadow: var(--site-shadow);
    }

    .page-index2 .site-home-proof,
    .employment-acknowledgment,
    .employment-progress {
        color: var(--site-ink);
        background: rgba(28, 36, 45, .90);
        border-color: rgba(226, 234, 241, .16);
    }

    .page-contactus .contact-info-card {
        color: var(--site-ink);
        background: linear-gradient(145deg, rgba(var(--site-brand-rgb), .24), rgba(22, 29, 36, .92)) !important;
        border-color: rgba(var(--site-brand-rgb), .42);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    }

    .page-contactus .contact-info-card__group + .contact-info-card__group {
        border-top-color: rgba(226, 234, 241, .16);
    }

    .navbar-inverse.shared-site-navbar,
    .navbar-ltss.shared-site-navbar {
        --bs-navbar-color: #e6edf3;
        --bs-navbar-hover-color: #ffffff;
        --bs-navbar-active-color: #ffffff;
        --bs-navbar-brand-color: #ffffff;
        --bs-navbar-brand-hover-color: #ffffff;
        --bs-navbar-toggler-border-color: rgba(255, 255, 255, .30);
        border-bottom-color: rgba(255, 255, 255, .15);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .34);
    }

    .navbar-inverse.shared-site-navbar {
        background-color: rgba(17, 23, 30, .96) !important;
        background-image: linear-gradient(rgba(15, 21, 27, .82), rgba(15, 21, 27, .82)), url('../images/transBG.png');
        background-size: cover;
    }

    .navbar-ltss.shared-site-navbar {
        background: linear-gradient(135deg, #29323b, #1b2229) !important;
    }

    .shared-site-navbar .nav-link,
    .nav.navbar-nav.navbar-right li a {
        color: #e6edf3;
    }

    .shared-site-navbar .nav-link:hover,
    .shared-site-navbar .nav-link:focus,
    .shared-site-navbar .nav-link.active {
        color: #ffffff;
        background-color: rgba(255, 255, 255, .10);
    }

    .shared-site-navbar__toggler,
    .shared-site-navbar .navbar-toggler {
        border-color: rgba(255, 255, 255, .30);
    }

    .shared-site-navbar .navbar-toggler-icon {
        filter: invert(1) grayscale(1) brightness(1.8);
    }

    .shared-site-navbar__dropdown .dropdown-menu,
    .dropdown-menu,
    .dropdown-content {
        color: #e7edf2;
        background-color: #1c242d;
        border-color: rgba(255, 255, 255, .16);
        box-shadow: 0 16px 36px rgba(0, 0, 0, .36);
    }

    .shared-site-navbar__dropdown .dropdown-item,
    .dropdown-menu > li > a,
    .dropdown-content a {
        color: #e7edf2;
        background-color: transparent;
    }

    .shared-site-navbar__dropdown .dropdown-item:hover,
    .shared-site-navbar__dropdown .dropdown-item:focus,
    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus,
    .dropdown-content a:hover,
    .dropdown-content a:focus {
        color: #ffffff;
        background-color: rgba(255, 255, 255, .10);
    }

    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    textarea,
    textarea[type="text"],
    select {
        color: #edf2f6;
        background-color: #182029;
        border-color: #56616c;
    }

    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: #9eabb7;
        opacity: 1;
    }

    .form-control:focus,
    .form-select:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    select:focus {
        color: #ffffff;
        background-color: #1c252f;
        border-color: #86b9dd;
        box-shadow: 0 0 0 .2rem rgba(134, 185, 221, .20);
    }

    input[type="checkbox"],
    input[type="radio"] {
        accent-color: rgb(var(--site-brand-rgb));
    }

    .table {
        --bs-table-color: #e7edf2;
        --bs-table-bg: rgba(24, 31, 39, .92);
        --bs-table-border-color: rgba(255, 255, 255, .16);
        --bs-table-striped-color: #edf2f6;
        --bs-table-striped-bg: rgba(255, 255, 255, .035);
        --bs-table-hover-color: #ffffff;
        --bs-table-hover-bg: rgba(255, 255, 255, .07);
    }

    .card,
    .modal-content,
    .list-group-item {
        color: #e7edf2;
        background-color: #1a222b;
        border-color: rgba(255, 255, 255, .16);
    }

    .alert-info {
        color: #d5edf9;
        background-color: #173344;
        border-color: #315a70;
    }

    .application-validation-summary {
        color: #ffd4cd;
        background: rgba(91, 32, 26, .94);
        border-color: rgba(238, 126, 106, .48);
    }

    .application-field-invalid {
        outline-color: rgba(255, 136, 114, .34) !important;
        border-color: #e57b67 !important;
    }

    .page-leadership blockquote {
        color: var(--site-ink);
        background: rgba(24, 31, 39, .94);
        border-color: rgba(226, 234, 241, .16);
        border-left-color: #8e9ba6;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    }

    .shared-site-footer {
        color: #e1e8ed;
        border-top-color: rgba(255, 255, 255, .14);
    }

    .shared-site-footer--standard {
        background-color: #202830;
    }

    .shared-site-footer--standard::before {
        background: rgba(8, 12, 16, .68);
    }

    .shared-site-footer--ltss {
        background: linear-gradient(135deg, #2d3740, #1d252d);
    }

    .shared-site-footer__content a {
        color: #a9d3ef;
    }

    .shared-site-footer__content a:hover,
    .shared-site-footer__content a:focus {
        color: #ffffff;
        background: rgba(255, 255, 255, .10);
    }

    hr,
    hr.stylebar,
    hr.style-two {
        border-color: rgba(255, 255, 255, .22);
        background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.50), rgba(255,255,255,0));
    }

    .skip-link {
        background: #f4f7f9;
        color: #111820;
    }

    .skip-link:focus {
        color: #111820;
    }

    :where(a, button, input, textarea, select, [tabindex]):focus-visible {
        outline-color: #8bc8ff !important;
    }
}
