@charset "utf-8";
/* LOD Global CSS Document Styles */

/* 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 FIX (max-width: 767px)
   ============================================ */
@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;
    height: 75vh;
    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;
  }

  /* Make touch targets larger for mobile */
  .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;
  }

  /* Make entire dropdown item tappable */
  .otnav .dropdown > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }

  /* Arrow positioning for phone view */
  .otnav .dropdown > a > span.fa-angle-down {
    flex-shrink: 0;
    margin-left: 1rem;
    transition: transform 0.25s ease;
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
  }

  /* Rotation logic */
  .otnav li.dropdown.open > a > span.fa-angle-down {
    transform: rotate(180deg);
  }

  /* Ensure text is clickable */
  .otnav .dropdown > a > span:not(.fa) {
    flex: 1;
    text-align: left;
  }
}

/* ============================================
   TABLET NAVIGATION FIX (768px to 1366px)
   ============================================ */
@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;
  }

  .otnav .dropdown > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }

  /* Make the arrow icon cover the entire clickable area */
  .otnav .dropdown > a > span.fa-angle-down {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1.25rem;
    margin: 0;
    transition: transform 0.25s ease;
    font-size: inherit;
  }

  .otnav li.dropdown.open > a > span.fa-angle-down {
    transform: rotate(180deg);
  }
}

/* ============================================
   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;
  }

  a {
    word-break: break-word;
  }

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

  .endnote {
    font-weight: bold;
    font-size: 1.5rem;
    vertical-align: super;
  }

  .endnote::before {
    content: " ";
  }

  .endnote::after {
    content: " ";
  }

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

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

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

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

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

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

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

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

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

  audio {
    margin: 1rem 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  audio {
    margin-top: 20px;
    display: block;
    width: 100%;
  }

  .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;
  }

  .cutline a {
    color: lightblue;
  }

  @media print {
    /* Hide non-print UI */
    header,
    nav,
    aside,
    footer,
    #Form > div.container.skin-login,
    #dnn_ContentPane > div.DnnModule.DnnModule-DNN_HTML.DnnModule-79972,
    #dnn_ctl05_header_banner_container,
    div.personalBarContainer,
    #dnn_ctl04_header_banner_container,
    audio,
    #articleNav,
    #skip-link-holder,
    #skip-target-holder {
      display: none !important;
    }

    /* Clean page margins */
    body {
      margin: 1in;
      padding: 0;
    }

    /* Allow paragraphs to break naturally */
    p {
      break-inside: auto;
      page-break-inside: auto;
      widows: 3;
      orphans: 3;
    }

    /* Prevent headings from being orphaned */
    h1, h2, h3, h4, h5, h6 {
      break-after: avoid-page;
      page-break-after: avoid;
    }

    /* Keep grouped elements together */
    figure,
    .image-container,
    .right-image-container,
    .cutline,
    .endnote-container,
    .no-break {
      break-inside: avoid-page;
      page-break-inside: avoid;
    }

    /* Prevent images from splitting */
    img {
      break-inside: avoid;
      page-break-inside: avoid;
      max-width: 100%;
    }

    /* Remove link URL printing */
    a[href]::after {
      content: "";
    }
  }

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