/**
 * Mobile-specific styles and enhancements
 */

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .website-card {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.1);
  }

  .website-link {
    min-height: 48px;
  }

  .drag-handle {
    opacity: 1;
    padding: 12px;
  }
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
  }

  .menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 3px;
    transition: var(--transition);
    margin: 5px 0;
  }

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

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

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

  .primary-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    box-shadow: var(--shadow-lg);
    padding: 1rem;
  }

  .primary-menu.active {
    display: block;
  }

  .primary-menu li {
    list-style: none;
    margin: 0;
  }

  .primary-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 8px;
    transition: var(--transition);
  }

  .primary-menu a:hover {
    background: var(--bg-color);
    color: var(--primary-color);
  }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .websites-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-header {
    position: relative;
  }
}

/* Small mobile devices */
@media (max-width: 375px) {
  .website-card {
    padding: 1rem;
  }

  .website-logo-container {
    width: 50px;
    height: 50px;
  }

  .website-title {
    font-size: 1.1rem;
  }

  .search-input {
    font-size: 0.9rem;
    padding: 0.875rem 1.25rem 0.875rem 3rem;
  }
}

/* Tablet specific */
@media (min-width: 768px) and (max-width: 1024px) {
  .websites-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-container {
    padding: 2.5rem 1.5rem;
  }
}

/* Very large screens */
@media (min-width: 1920px) {
  .websites-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .main-container,
  .header-container,
  .footer-content {
    max-width: 1600px;
  }
}

/* Print styles */
@media print {
  .site-header,
  .site-footer,
  .search-section,
  .drag-handle {
    display: none;
  }

  .website-card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .website-link {
    background: none;
    color: black;
    border: 1px solid #ddd;
  }
}