:root {
    --header-bg: #083b67;
    --header-text: #ffffff;
    --header-hover: #8ec8e3;
    --header-active: #65a5da;
    --header-border: #565c65;
    --fieldset-bg: #ebf2f7;
    --light-bg: #ebf2f7;
    --light-border: #ebf2f7;
    --dark-bg: #3b536b;
    --dark-border: #121921;
    --section-dark-bg: #2c4c6e;
    --section-dark-text: #ffffff;
    --button-bg: #fff;
}

.display-flow-root {
    display: flow-root; /* contain margins */
}

.text-balance {
    text-wrap: balance;
}

.usa-section--dark a.cta-link,
.usa-section--dark a.cta-link:visited {
    text-decoration: none;
    color: #3498db;
    font-weight: bold;
}

.usa-section--dark a.cta-link:hover {
    color: var(--header-hover);
}

.margin-auto-x {
    margin-left: auto;
    margin-right: auto;
}

.multi-button-list {
    text-align: center;
    text-wrap: balance;
    line-height: 4;
}

.multi-button-list li {
    display: inline-block;
}

.usa-table--no-grid td, .usa-table--no-grid th {
    border: none;
}

.usa-prose--center-children {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.usa-prose--center-children > p {
    width: 100%;
}

.usa-breadcrumb--conainer-light {
    background-color: var(--light-bg);
}
.usa-breadcrumb--conainer-light .usa-breadcrumb {
    background-color: transparent;
}

/* Buttons */
.usa-button {
    background-color: var(--header-bg);
}

.light-bg {
    background-color: var(--light-bg)
}

.dark-bg {
    background-color: var(--dark-bg)
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto; /* This makes the main content expand */
}

/* prevent content from collapsing in IE11 */
main::after {
    content: '';
    display: block;
    height: 0px;
    visibility: hidden;
}

/* Default display for h1 container */
.h1Container {
    color: white;
    background-color: black;
    background: url("https://ngcwebsitefiles.blob.core.windows.net/images/backgrounds/h1-background.jpg") no-repeat center center;
    background-size: cover;
    min-height: 12rem;
    display: flex;
    align-items: center;
}

/* CSS variables for dark header theme */
.usa-header--dark {
    --header-text: #ffffff;
    --header-hover: #8ec8e3;
    --header-active: #65a5da;
    --header-border: #565c65;
}

/* Apply dark theme using the variables */
.usa-header--dark,
.usa-header--dark .usa-navbar,
.usa-header--dark .usa-nav {
    background-color: var(--header-bg);
}

.usa-header--dark .usa-navbar {
    border-bottom: 1px solid var(--header-border);
}

.usa-header--dark .usa-logo__text a {
    color: var(--header-text);
}

.usa-header--dark .usa-nav__primary > .usa-nav__primary-item > a,
.usa-header--dark .usa-nav__primary > .usa-nav__primary-item > button {
    color: var(--header-text);
}

.usa-header--dark .usa-nav__primary > .usa-nav__primary-item > a:hover,
.usa-header--dark .usa-nav__primary > .usa-nav__primary-item > button:hover {
    background-color: var(--header-hover);
    color: var(--header-text);
}

.usa-header--dark .usa-nav__link.usa-current,
.usa-header--dark .usa-nav__link.usa-current:hover {
    background-color: var(--header-active);
    color: var(--header-text);
}

.usa-header--dark .usa-nav__submenu {
    background-color: #2e2e2e;
}

.usa-header--dark .usa-nav__submenu a {
    color: var(--header-text);
}

.usa-header--dark .usa-nav__submenu a:hover {
    background-color: var(--header-hover);
}

/* Change color of nav caret */
.usa-header--dark .usa-accordion__button[aria-expanded="false"] span::after,
.usa-header--dark .usa-accordion__button[aria-expanded="true"] span::after,
.usa-header--dark .usa-accordion__button[aria-expanded="false"]:hover span::after,
.usa-header--dark .usa-accordion__button[aria-expanded="true"]:hover span::after {
    background-color: var(--header-text);
}


/* Mobile menu button */
.usa-header--dark .usa-menu-btn {
    background-color: #005ea2;
    color: var(--header-text);
}

/* Mobile styles for header */
@media (max-width: 63.99em) {
    .usa-header--dark .usa-nav__close,
    .usa-header--dark .usa-nav__primary a:not(.usa-button):not(.usa-current),
    .usa-header--dark .usa-nav__primary a:not(.usa-button):not(.usa-current):hover {
        color: var(--header-text);
    }

    .usa-header--dark .usa-nav__close:hover {
        background-color: var(--header-hover);
    }
}


/* 
    Custom usa-section--dark 
*/
/* Dark section overrides to match header theme */
.usa-section--dark {
    background-color: var(--section-dark-bg);
    color: var(--section-dark-text);
}

    /* Ensure all text elements inherit the light color */
    .usa-section--dark h1,
    .usa-section--dark h2,
    .usa-section--dark h3,
    .usa-section--dark h4,
    .usa-section--dark h5,
    .usa-section--dark h6,
    .usa-section--dark p,
    .usa-section--dark li,
    .usa-section--dark span {
        color: var(--section-dark-text);
    }

    /* Links in dark sections */
    .usa-section--dark a, .usa-section--dark a:visited {
        color: #ffffff; 
    }

    .usa-section--dark a:hover {
        color: #aadbff;
    }

    /* Buttons in dark sections */
    .usa-section--dark .usa-button {
        background-color: #005ea2;
        color: white;
    }

    .usa-section--dark .usa-button:hover {
        background-color: #0050d8;
    }

    .usa-section--dark .usa-button--outline,
    .usa-section--dark .usa-button--unstyled {
        color: var(--section-dark-text);
        box-shadow: inset 0 0 0 2px var(--section-dark-text);
    }

    .usa-section--dark .usa-button--outline:hover {
        color: var(--section-dark-bg);
        background-color: var(--section-dark-text);
    }

    /* Cards in dark sections */
    .usa-section--dark .usa-card {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .usa-section--dark .usa-card__heading {
        color: var(--section-dark-text);
    }

    /* Form elements in dark sections */
    .usa-section--dark .usa-label,
    .usa-section--dark .usa-hint {
        color: var(--section-dark-text);
    }

    .usa-section--dark .usa-input,
    .usa-section--dark .usa-textarea,
    .usa-section--dark .usa-select {
        background-color: rgba(255, 255, 255, 0.9);
    }

    /* Alerts in dark sections */
    .usa-section--dark .usa-alert {
        background-color: rgba(255, 255, 255, 0.95);
    }