/* Touch-friendly navigation for phones and small tablets. */
#agateMobileNav { display: none; }

@media (max-width: 719px) {
  #imHeader_imMenuObject_09_wrapper,
  #imStickyBarContainer { display: none !important; }

  /* The generated site justifies body copy, which creates very large gaps
     between words on narrow screens. */
  #imContent .imTAJustify,
  #imContent .imTAJustify * {
    text-align: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
  }

  #imContent .imHeading1,
  #imContent .imHeading2 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }

  #imContent img { max-width: 100%; height: auto; }

  body.agate-mobile-menu-open { overflow: hidden !important; }

  #agateMobileNav {
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2147483000;
    font-family: Arial, sans-serif;
  }

  #agateMobileNavToggle {
    position: relative;
    z-index: 3;
    display: flex;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(20, 63, 85, 0.96);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  #agateMobileNavToggle span,
  #agateMobileNavToggle::before,
  #agateMobileNavToggle::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
    content: '';
  }

  #agateMobileNavToggle::before { position: absolute; transform: translateY(-7px); }
  #agateMobileNavToggle::after { position: absolute; transform: translateY(7px); }

  #agateMobileNavBackdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  #agateMobileNavPanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(86vw, 350px);
    overflow-y: auto;
    padding: 0 0 24px;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.28);
    transform: translateX(105%);
    transition: transform 220ms ease;
  }

  #agateMobileNav.is-open #agateMobileNavBackdrop {
    opacity: 1;
    visibility: visible;
  }

  #agateMobileNav.is-open #agateMobileNavPanel { transform: translateX(0); }
  #agateMobileNav.is-open #agateMobileNavToggle { opacity: 0; pointer-events: none; }

  .agateMobileNavHeader {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    min-height: 64px;
    padding: 0 12px 0 20px;
    background: #143f56;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    align-items: center;
    justify-content: space-between;
  }

  #agateMobileNavClose {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font: 32px/44px Arial, sans-serif;
    cursor: pointer;
  }

  #agateMobileNavLinks { padding: 10px 0 0; }

  #agateMobileNav a,
  #agateMobileNav summary {
    display: block;
    min-height: 48px;
    padding: 14px 20px;
    margin: 0;
    border-bottom: 1px solid #d9e3e8;
    border-radius: 0;
    box-sizing: border-box;
    background: #ffffff;
    color: #12384d;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
  }

  #agateMobileNav details { margin: 0; }
  #agateMobileNav summary { cursor: pointer; list-style: none; }
  #agateMobileNav summary::-webkit-details-marker { display: none; }
  #agateMobileNav summary::after { content: '+'; float: right; font-size: 22px; font-weight: 400; }
  #agateMobileNav details[open] summary::after { content: '−'; }
  #agateMobileNav details a {
    padding-left: 34px;
    background: #edf5f8;
    color: #28566c;
    font-size: 15px;
    font-weight: 500;
  }
}