/* ===============================================
   MOBILE MENU FIXES
   Critical fixes for mobile navigation issues
   =============================================== */

/* Ensure header is properly positioned */
.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
}

/* Desktop navigation - hide on mobile */
@media (max-width: 1023px) {
  .nav:not(.mobile-menu) {
    display: none !important;
  }
  
  .mobile-menu-toggle {
    display: block !important;
  }
}

/* Mobile menu - proper display control */
.mobile-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  z-index: 999 !important;
}

.mobile-menu.active {
  display: flex !important;
  flex-direction: column !important;
}

/* Logo size fixes */
@media (max-width: 768px) {
  .brand img {
    height: 28px !important;
    width: 28px !important;
    max-width: 28px !important;
    object-fit: contain !important;
  }
  
  .brand-name {
    font-size: 0.85rem !important;
  }
  
  /* Compact header on mobile */
  .header {
    padding: 0.4rem 0 !important;
  }
  
  .header-in {
    gap: 8px !important;
  }
  
  .mobile-menu-toggle {
    font-size: 1.4rem !important;
    padding: 5px 8px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* Tool card layout fixes */
.tool-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.tool-ic {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 1rem !important;
  flex-shrink: 0 !important;
}

.tool-card h3 {
  text-align: center !important;
  margin: 0 0 0.75rem 0 !important;
}

.tool-card p {
  text-align: center !important;
  margin: 0 !important;
}

.tool-card:hover .tool-ic {
  transform: translateY(-5px) scale(1.1) !important;
}

/* Mobile specific tool card adjustments */
@media (max-width: 768px) {
  .tool-card {
    padding: 1.5rem 1rem !important;
    min-height: 180px !important;
  }
  
  .tool-ic {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }
  
  .tool-ic i {
    font-size: 24px !important;
  }
  
  .tool-card h3 {
    font-size: 1.05rem !important;
  }
  
  .tool-card p {
    font-size: 0.9rem !important;
  }
  
  /* Breadcrumb mobile fixes */
  .breadcrumbs {
    padding: 10px 0 !important;
    font-size: 0.85rem !important;
  }
  
  .breadcrumb-item a,
  .breadcrumb-item.active span {
    padding: 4px 8px !important;
    font-size: 0.85rem !important;
  }
  
  .breadcrumb-separator {
    margin: 0 1px !important;
  }
}

/* Ensure mobile menu toggle is always visible on mobile */
@media (max-width: 1023px) {
  .mobile-menu-toggle {
    display: block !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Desktop - hide mobile menu toggle */
@media (min-width: 1024px) {
  .mobile-menu-toggle {
    display: none !important;
  }
  
  .nav:not(.mobile-menu) {
    display: flex !important;
  }
  
  .mobile-menu {
    display: none !important;
  }
}