@charset "utf-8";
/* LOD Global CSS Document Styles - Updated August 27, 2026 in order to fix menu navigation errors that were created as a result of a push of updates from the defense media activity */

/* Before applying the CSS styles on a page, please select the correct layout on the advanced tab under the appearance section. In the appearance section, make sure that your chosen layout is "full width." Additionally, you should add the correct CSS page style sheet at the bottom that points to the "lod-global-css.css" style sheet. */

/* ============================================
   GLOBAL STYLES
   ============================================ */

/* Increase font size of main menu dropdown text */
.otnav li a {
    font-size: 1.6rem;
}

/* Fix font color on search input */
input.skin-search-input.usagov-search-autocomplete.ui-autocomplete-input {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.mobile-search-popup input {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.skin-footer-banner a,
.skin-footer-banner a:hover,
.skin-footer-banner a:visited {
    color: #ffffff !important;
}

@media screen and (min-width: 1024px) {
    .force-mobile.header-inset .otnav ul li a {
        font-size: 1.6rem;
    }
}

blockquote,
blockquote footer {
    color: #696969;
}

/* ============================================
   PHONE ONLY NAVIGATION LAYOUT (max-width: 767px)
   Keeps general mobile nav structure only
   ============================================ */
@media screen and (max-width: 767px) {

    /* Reorder search to appear at top - using CSS Grid */
    .nopad.menu.container-fluid.new-menu {
        display: grid;
        grid-template-areas: "search" "nav";
        gap: 1rem;
        padding: 1rem;
    }

    .skin-search {
        grid-area: search;
        display: block !important;
    }

    .nav-main {
        grid-area: nav;
        max-height: 75vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0;
        position: relative;
        z-index: 1000;
        overscroll-behavior: contain;
        touch-action: pan-y;
        width: 100%;
    }

    .nav-main::-webkit-scrollbar {
        display: none;
    }

    .nav-main a {
        padding: 0.75rem 1rem;
        min-height: 44px;
        display: block;
        position: relative;
    }

    .nav-main li {
        position: relative;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #d0d0d0;
        width: 100%;
    }

    .nav-main li:last-child {
        border-bottom: none;
    }
}

/* ============================================
   TABLET / COLLAPSED NAV CONTAINER SUPPORT
   Keeps general containment only
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1366px) {
    .nav-main {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0.75rem 0;
        position: relative;
        z-index: 1000;
        touch-action: pan-y;
    }

    .nav-main::-webkit-scrollbar {
        display: none;
    }

    .nav-main li {
        position: relative;
        margin: 0;
        padding: 0;
    }

    .nav-main a {
        padding: 0.85rem 1.25rem;
        min-height: 48px;
        display: block;
        width: 100%;
        position: relative;
    }
}

/* ============================================
   MAIN NAV REPLACEMENT FIX
   Replaces legacy Journals/dropdown behavior
   ============================================ */

/* 1. DESKTOP ONLY: 3-column layout for Journals when menu is not collapsible */
@media screen and (min-width: 992px) {
    #main-nav:not(.sm-collapsible) > li:first-child > .dropdown-menu {
        width: 720px !important;
        min-width: 600px !important;
        max-width: 90vw !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #main-nav:not(.sm-collapsible) > li:first-child > .dropdown-menu::after {
        content: "";
        display: table;
        clear: both;
    }

    #main-nav:not(.sm-collapsible) > li:first-child > .dropdown-menu li.dm {
        width: 33.333% !important;
        float: left !important;
        box-sizing: border-box !important;
        padding: 5px 10px !important;
    }

    #main-nav:not(.sm-collapsible) > li:first-child > .dropdown-menu li.dm > a {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
}

/* 2. COLLAPSED / MOBILE / TABLET STATE: keep Journals submenu stacked and contained */
#main-nav.sm-collapsible > li:first-child,
.force-mobile #main-nav > li:first-child {
    position: relative !important;
    overflow: visible !important;
}

#main-nav.sm-collapsible > li:first-child > .dropdown-menu,
.force-mobile #main-nav > li:first-child > .dropdown-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    clear: both !important;
    overflow: hidden !important;
}

#main-nav.sm-collapsible > li:first-child > .dropdown-menu li.dm,
.force-mobile #main-nav > li:first-child > .dropdown-menu li.dm {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#main-nav.sm-collapsible > li:first-child > .dropdown-menu li.dm > a,
.force-mobile #main-nav > li:first-child > .dropdown-menu li.dm > a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

/* 3. Normalize top-level arrow layout in collapsed views */
@media screen and (max-width: 1100px) {
    .otnav li.top-level.dropdown > a.dropdown-toggle.has-submenu {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }

    .otnav li.top-level.dropdown > a.dropdown-toggle.has-submenu > span.sub-arrow {
        width: auto !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: auto !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 24px !important;
        padding: 0 !important;
        margin: 0 0 0 12px !important;
        position: static !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .otnav li.top-level.dropdown > a.dropdown-toggle.has-submenu > span.sub-arrow::before {
        display: block !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }
}

/* 4. Medium viewport safety guard */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .force-mobile .nav-main,
    #main-nav.sm-collapsible {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .force-mobile .otnav,
    .force-mobile .navbar-collapse,
    .force-mobile #main-nav > li,
    #main-nav.sm-collapsible > li {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .force-mobile #main-nav > li:first-child > .dropdown-menu,
    #main-nav.sm-collapsible > li:first-child > .dropdown-menu {
        overflow-x: hidden !important;
    }
}

/* ============================================
   ARTICLE CONTAINER STYLES
   ============================================ */
.article-container {
    max-width: 828px;
    margin: 0 auto;
    padding: 0 20px;
}

.article-container h2 {
    color: #565557;
    border-bottom: none;
    padding-bottom: 0;
}

.article-container .h2underline {
    border-bottom: 2px solid #2f372f;
    padding-bottom: 10px;
}

.article-container:has(.h2nounderline) h2 {
    border-bottom: 2px solid #2f372f;
    padding-bottom: 10px;
}

.article-container:has(.h2nounderline) .h2nounderline {
    border-bottom: none;
}

.article-container img:not(:has(+ .cutline)) {
    margin-bottom: 1.5rem;
}

.article-container p {
    font-size: 1.6rem;
    line-height: 2.6rem;
}

.article-container > ul li {
    font-size: 1.6rem;
    line-height: 2.6rem;
}

.article-container > ol li {
    font-size: 1.6rem;
    line-height: 2.6rem;
}

.article-container a {
    word-break: break-word;
}

.article-container .listitem {
    font-size: 1.6rem;
    line-height: 2.6rem;
}

.article-container .endnote:not(sup) {
    vertical-align: super;
}

.article-container .endnote {
    font-weight: bold;
    font-size: 1.5rem;
}

.article-container .endnote::before {
    content: " ";
}

.article-container .endnote::after {
    content: " ";
}

.article-container .endnote-container {
    padding: 0 20px;
    margin-bottom: 40px;
}

.article-container .endnote-container p a:first-of-type {
    font-weight: bold;
}

.article-container .endnote-container div {
    margin-bottom: 10px;
}

.article-container .article-time {
    font-size: 12px;
    font-weight: bold;
}

.article-container .label-asw {
    background-color: #ffcc01;
    color: #000000;
    font-size: 12px;
    margin-right: 5px;
}

.article-container .author {
    margin-top: 40px;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.article-container .callout {
    margin-top: 40px;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.article-container .toc-list .author {
    margin-top: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    font-style: italic;
}

.article-container audio {
    margin: 1rem 0 2rem;
    display: block;
    width: 100%;
}

.article-container .right-image-container {
    width: 50%;
    margin: 1rem;
    float: right;
}

.article-container .image-container {
    position: static;
    display: inline-block;
}

.article-container .full-width-img {
    width: 100%;
}

.article-container .small-img-right {
    width: 50%;
    height: auto;
    float: right;
    margin-left: 2%;
    margin-right: 2%;
}

.article-container .small-img-left {
    width: 50%;
    height: auto;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}

.article-container .image-container img {
    display: block;
    width: 100%;
    height: auto;
}

.article-container #articleNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2f372f;
    color: #fff;
    padding: 10px;
}

.article-container #articleNav .nav-left,
.article-container #articleNav .nav-right {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-container #articleNav .nav-left li,
.article-container #articleNav .nav-right li {
    margin-right: 36px;
    font-size: 1.8rem;
}

.article-container #articleNav .nav-left li:last-child,
.article-container #articleNav .nav-right li:last-child {
    margin-right: 0;
}

.article-container #articleNav .nav-left li a,
.article-container #articleNav .nav-right li a {
    color: #fff;
    text-decoration: none;
}

.article-container .cutline {
    position: static;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: left;
    font-size: 1.2rem;
    line-height: 1.9rem;
    border-radius: 0 0 5px 5px;
}

.article-container .cutline a {
    color: lightblue;
}

@media (max-width: 767px) {
    .article-container #articleNav {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .article-container #articleNav .nav-left,
    .article-container #articleNav .nav-right {
        margin-top: 10px;
    }

    .article-container .small-img-right {
        width: auto;
        height: auto;
        float: none;
    }

    .article-container .small-img-left {
        width: auto;
        height: auto;
        float: none;
    }
}

@media print {
    .DnnModule:not(:has(#article, article, .article-container)),
    #main-header,
    #articleNav,
    .mobile-nav,
    footer,
    .skip-target-holder,
    #skip-link-holder,
    .header_banner_container,
    audio {
        display: none !important;
        visibility: hidden !important;
    }

    .empty-container {
        display: block !important;
    }

    .image-container {
        border: 1px solid black;
        overflow: hidden;
        border-radius: 10px;
        break-inside: avoid-page !important;
        page-break-inside: avoid !important;
    }

    .image-container img {
        border-bottom: 1px solid black;
    }

    .small-img-left,
    .small-img-right {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    img {
        display: block;
        max-width: 100%;
        max-height: 50vh;
        height: auto;
        object-fit: contain;
    }

    figure {
        margin: 0 0 1rem 0;
    }
}

.scrolled-into-view {
    margin-top: 1rem;
}

/* ============================================
   MOBILE NAV FLOATING ACTIONS
   ============================================ */
.mobile-nav {
    display: none;
}

@media (max-width: 768px) {
    .container-fluid:has(*.banner) {
        position: relative;
    }

    .mobile-nav {
        position: fixed;
        display: flex;
        align-items: end;
        flex-direction: column-reverse;
        right: 1rem;
        bottom: 1rem;
        z-index: 1000;
    }

    .banner img {
        height: 8rem !important;
        object-fit: contain;
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .navbar {
        margin-bottom: -1rem;
        background-color: transparent !important;
        border-width: 0 !important;
        position: static;
    }

    .navbar .navbar-toggle {
        margin: 0 !important;
    }

    .navbar .navbar-header {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 4rem;
        transform: translateY(-50%);
        left: 1rem;
    }

    .navbar .navbar-nav {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 0.25rem;
    }

    .navbar .navbar-nav li a {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background-color: rgba(0, 0, 0, 0.15);
    }

    #myNavbar {
        border-width: 0 !important;
    }

    #myNavbar ul li:last-of-type {
        border-radius: 0 0 1rem 1rem;
        overflow: hidden;
    }

    #myNavbar ul li:first-of-type {
        border-radius: 1rem 1rem 0 0;
        overflow: hidden;
    }

    #articleNav {
        display: none !important;
    }
}

/* Hide checkbox */
.mobile-nav input[type="checkbox"] {
    display: none;
}

/* Main toggle button */
.mobile-nav .menu-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f4c400;
    color: #000;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Stack container */
.mobile-nav .menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: 0.2s ease;
}

/* Show when toggled */
#menuToggle:checked ~ .menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#menuToggle:checked ~ .menu-toggle .fa-bars {
    opacity: 0;
}

#menuToggle:checked ~ .menu-toggle .fa-times {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

#menuToggle:not(:checked) ~ .menu-toggle .fa-times {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(1.25);
}

.menu-toggle i {
    transition: 0.2s ease;
    position: absolute;
    font-size: 2rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

/* Hide prev and next arrows when open */
#menuToggle:checked ~ .arrow-prev {
    transform: translateX(-100%) translateY(-50%);
}

#menuToggle:checked ~ .arrow-next {
    transform: translateX(100%) translateY(-50%);
}

/* Action buttons */
.mobile-nav .action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2f3a33;
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Hover */
.mobile-nav .action:hover {
    background: #3e4b42;
}

/* Arrows */
.mobile-nav .arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    text-decoration: none;
    transition: 0.2s ease;
}

.mobile-nav .arrow-prev {
    left: 0;
}

.mobile-nav .arrow-next {
    right: 0;
}

/* Share (details) */
.mobile-nav .share {
    position: relative;
}

/* Remove default marker */
.mobile-nav summary {
    list-style: none;
}

.mobile-nav summary::-webkit-details-marker {
    display: none;
}

/* Share menu */
.mobile-nav .share-menu {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.5rem;
    background: rgba(30, 30, 30, 0.9);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
}

/* Open state */
.mobile-nav .share[open] .share-menu {
    opacity: 1;
    pointer-events: auto;
    display: flex;
    gap: 2rem;
    padding: 2rem;
}

/* Share items */
.mobile-nav .share-item {
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
}