/* Mobile Menu Styles */
.mobile-menu-toggle {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.mobile-menu-toggle .menu-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  margin: 5px auto;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.mobile-menu-toggle.active .menu-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active .menu-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .menu-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu display */
@media only screen and (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    animation: slideDown 0.3s ease;
  }

  .nav-menu.active {
    display: flex;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Scrolled header style */
  .header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
}

/* Touch feedback styles */
.touch-active {
  opacity: 0.7 !important;
  transform: scale(0.98) !important;
}

/* Improved focus styles for mobile */
@media (hover: none) and (pointer: coarse) {
  button:focus,
  a:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
  }
}

/* Custom viewport height usage */
.hero,
.generator-hero,
.emoji-hero,
.blog-hero {
  /* Removed min-height to allow natural content flow */
}

@media only screen and (max-width: 768px) {
  .hero,
  .generator-hero,
  .emoji-hero,
  .blog-hero {
    /* Removed min-height for mobile to reduce whitespace */
  }
}

/* Smooth scrolling for mobile */
@media (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}

/* Prevent text selection on interactive elements */
.symbol-item,
.emoji-btn,
.pattern-card,
.combo-item,
.btn,
button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Loading state for lazy loaded content */
[data-lazy] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Orientation-specific styles */
@media only screen and (orientation: landscape) and (max-height: 600px) {
  .header {
    padding: 5px 0;
  }

  .nav-container {
    padding: 5px 15px;
  }

  .logo {
    font-size: 20px;
  }

  .nav-menu li a {
    padding: 5px 10px;
    font-size: 13px;
  }
}