/*
  mobile_overlay.css
  Add as additional stylesheet in index.html head.
  Only affects screens under 768px. Desktop unchanged.
*/

@media (max-width: 640px) {

  /* viewport */
  html { -webkit-text-size-adjust: 100%; }

  /* images scale */
  img { max-width: 100% !important; height: auto !important; }

  /* hide pandy and decorative icons */
  img[src*="pandy"],
  img[src*="icon"],
  img[src*="logo_sm"],
  img[src*="button"] {
    display: none !important;
  }

  /* tables full width */
  table {
    width: 100% !important;
    max-width: 100% !important;
  }

  td, th {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem !important;
  }

  /* links open in new tab — handled via JS below */

  /* hamburger button */
  #mobile-nav-toggle {
    display: block;
    width: 100%;
    background: #111;
    color: #c8a96e;
    border: none;
    border-bottom: 1px solid #333;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    letter-spacing: 0.05em;
  }

  /* hide nav links by default on mobile */
  #mobile-nav-links {
    display: none;
  }

  #mobile-nav-links.open {
    display: block;
  }

  #mobile-nav-links a {
    display: block !important;
    padding: 0.6rem 1rem !important;
    border-bottom: 1px solid #1e1e1e !important;
    color: #c8a96e !important;
    text-decoration: none !important;
  }

}

@media (min-width: 769px) {
  #mobile-nav-toggle { display: none !important; }
  #mobile-nav-links { display: block !important; }
}

/*
@media (max-width: 768px) {

  /* fix absolutely positioned menu for phones */
  #menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
  }

  /* hamburger button */
  #mobile-nav-toggle {
    display: block !important;
    width: 100%;
    background: #111;
    color: #c8a96e;
    border: none;
    border-bottom: 1px solid #333;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
  }

  /* hide nav table by default */
  #mobile-nav-links {
    display: none !important;
  }

  #mobile-nav-links.open {
    display: block !important;
  }

  /* hide logo image on phones */
  #welcome img {
    display: none !important;
  }

  /* iframes full width */
  iframe {
    width: 100% !important;
  }

}

@media (min-width: 769px) {
  #mobile-nav-toggle { display: none !important; }
  #mobile-nav-links { display: block !important; }
}
*/