/* -------------------------
   MOBILE SUBMENU
-------------------------- */

@media (max-width: 820px) {

  /* Hide desktop nav */
  .nav-links {
    display: none;
  }

  /* Show hamburger */
  .hamburger {
    display: flex;
  }

  /* Container behaves like list item with text + arrow */
  .mobile-submenu {
    display: block;
    width: 100%;
  }

  /* Ensure text link takes up full width minus the arrow */
  .mobile-submenu > a.submenu-text {
    flex: 1;
    padding: 18px 24px;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
    background: #fff;
  }

  /* Toggle button (just the arrow) */
  .mobile-submenu-toggle {
    background: none;
    border: none;
    padding: 18px 20px;
    cursor: pointer;
  }

  /* Arrow icon */
  .mobile-submenu-toggle::after {
    content: "▾";
    font-size: 1.6em;
    transition: transform .2s ease;
    display: inline-block;
    line-height: 1;
  }

  /* Rotate arrow when open */
  .mobile-submenu.open .mobile-submenu-toggle::after {
    transform: rotate(180deg);
  }

  /* Submenu items hidden by default */
  .mobile-submenu-items {
    display: none;
    flex-direction: column;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 40px; /* indent children */
    background-color: #d9dbdd;
  }

  .mobile-submenu-items a {
    padding: 14px 24px;
    font-size: 1rem;
    background-color: #d9dbdd;
    border-bottom: 1px solid #eee;
  }

  /* Reveal subnav when open */
  .mobile-submenu.open .mobile-submenu-items {
    display: flex;
  }
}