/* ================================
   MOBILE NAV
   ================================ */
@media (max-width: 991.98px) {

  /* Optional: keep mobile header row tidy */
  .tls-navbar-top {
    padding: 16px 15px;
  }

  body.admin-bar header.tls-site-header {
    top: 0;
  }

  body.admin-bar header.tls-site-header .tls-navbar {
    padding-top: var(--wp-admin--admin-bar--height, 32px);
  }

  .tls-mobile-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #002e3e;
    text-decoration: none;
  }

  .tls-mobile-account:hover,
  .tls-mobile-account:focus {
    color: #002e3e;
    text-decoration: none;
  }

  .tls-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .tls-mobile-item {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Row wrapper keeps the toggle aligned with the top-level item,
     even when the submenu expands. */
  .tls-mobile-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-top: 1px solid rgba(0,0,0,0.08);
    position: relative;
  }

  /* Soft hover highlight across the FULL row (including the toggle area) */
  .tls-mobile-row:hover,
  .tls-mobile-row:focus-within {
    background: rgba(0,0,0,0.04);
  }


  /* "Link" can be either <a> (leaf) or <button> (parent toggle) */
  .tls-mobile-link {
    flex: 1 1 auto;
    display: block;
    padding: 14px 16px;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #002e3e;
    text-decoration: none;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
  }

  /* Soft hover highlight (desktop emulation; also helps pointer devices) */
  .tls-mobile-link:hover,
  .tls-mobile-link:focus {
    background: transparent; /* row handles highlight */
    color: #002e3e;
    text-decoration: none;
  }

  /* Underline for OPEN parent */
  .tls-mobile-item.is-open > .tls-mobile-row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #003e57;
  }

  /* Toggle button (chevron) */
  .tls-mobile-toggle {
    flex: 0 0 44px;
    width: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
  }

    .tls-mobile-toggle::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-right: 2px solid #002e3e;
      border-bottom: 2px solid #002e3e;
      transform: rotate(45deg);
      transition: transform 0.15s ease;
    }

  .tls-mobile-item.is-open > .tls-mobile-row > .tls-mobile-toggle::before {
    transform: rotate(-135deg);
  }

  /* Submenu */
  .tls-mobile-submenu {
    display: none;
    list-style: none;
    margin: 8px 0 10px 25px; /* indent */
    padding: 0;
  }

  .tls-mobile-item.is-open > .tls-mobile-submenu {
    display: block;
  }

  /* Make submenu items fill available width to the right */
  .tls-mobile-submenu a {
    display: block;
    width: 100%;
    padding: 10px 16px 10px 0;
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #3b3b3b;
    text-decoration: none;
    border-radius: 6px;
  }

  /* Soft hover highlight on submenu items (keep underline subtle) */
  .tls-mobile-submenu a:hover,
  .tls-mobile-submenu a:focus {
    background: rgba(0,0,0,0.04);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    color: #002e3e;
  }
}