@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. */

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

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

@media screen and (max-width: 767px) {
  .nav-main {
    height: 75vh;
    /* 75% of the viewport height */
    max-height: 75vh;
    /* Ensure it doesn't exceed 75% */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* For iOS */
    scrollbar-width: thin;
    /* For Firefox */
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* For Edge */
    padding: 0.5rem 0;
    /* Add some padding for touch targets */
    position: relative;
    /* Ensure proper stacking context */
    z-index: 1000;
    /* Prevent content from appearing above dropdown */
    overscroll-behavior: contain;
    /* Prevent scroll chaining on mobile */
    touch-action: pan-y;
    /* Optimize for vertical touch actions */
    width: 100%;
    /* Take full width of its container */
  }

  .nav-main::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
  }

  .nav-main {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  /* Make touch targets larger for mobile */
  .nav-main a {
    padding: 0.75rem 1rem;
    min-height: 44px;
    /* Apple's recommended minimum touch target size */
    display: block;
  }

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

/* Tablet-only media query */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  .nav-main {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* scrollbar-width: thin; For Firefox  */
    padding: 0.75rem 0;
    position: relative;
    z-index: 1000;
    touch-action: pan-y;
    /* Optimize for vertical touch actions */
  }

  .nav-main::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
  }

  .nav-main {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  /* Make list items fully clickable */
  .nav-main li {
    position: relative;
    margin: 0;
    padding: 0;
  }

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

  }
}

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

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

  ol {
    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 a {
    font-weight: bold;
  }

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

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

  .endnote-container a {
    font-weight: bold;
  }

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

  .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) {
    /* testing stuff for mobile nav */
    /* #articleNav { */
    /*   position: fixed; */
    /*   bottom: 50px; */
    /*   right: 0; */
    /*   display: flex; */
    /*   flex-direction: column; */
    /*   background-color: transparent !important; */
    /* } */
    /**/
    /* #articleNav .nav-left, */
    /* #articleNav .nav-right { */
    /*   margin-top: 0 !important; */
    /*   display: flex; */
    /*   flex-direction: column; */
    /* } */
    /**/
    /* #articleNav .nav-left li, */
    /* #articleNav .nav-right li { */
    /*   margin-right: 0px !important; */
    /* } */
    /**/
    /* #articleNav .nav-left li a, */
    /* #articleNav .nav-right li a { */
    /*   display: block; */
    /*   font-size: 1.8rem; */
    /*   background-color: black; */
    /*   border-radius: 9999px; */
    /*   aspect-ratio: 1; */
    /*   width: 5rem; */
    /*   height: 5rem; */
    /*   display: flex; */
    /*   justify-content: center; */
    /*   align-items: center; */
    /* } */
    /**/
    /* #articleNav { */
    /*   flex-direction: column; */
    /*   align-items: flex-start; */
    /* } */
    /**/
    /* #articleNav .nav-left, */
    /* #articleNav .nav-right { */
    /*   margin-top: 10px; */
    /* } */
    /**/
    /* #articleNav .nav-left li, */
    /* #articleNav .nav-right li { */
    /*   display: none; */
    /* } */
    /**/
    /* #articleNav:focus-within .nav-left li, */
    /* #articleNav:focus-within .nav-right li { */
    /*   display: flex; */
    /* } */
    /**/
    /* #articleNav .nav-right::before { */
    /*   display: flex; */
    /*   width: 5rem; */
    /*   height: 5rem; */
    /*   content: 'yoo'; */
    /* } */
    /**/
    /* #articleNav:focus-within .nav-right::before { */
    /*   pointer-events: none; */
    /* } */

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