/* Site-wide debloat + mobile-friendly tweaks
 *
 * Goal: keep desktop layout unchanged, but make small screens more compact
 * (less padding/margins, easier scrolling, fewer "big blocks").
 */

/* Reduce motion on devices/users that prefer it. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile/tablet compact mode */
@media (max-width: 768px) {
  /* Make page content less "spacious" on phones. */
  .main-container {
    margin: 12px auto !important;
  }

  .container.main-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .card-header {
    padding: 0.75rem 1rem !important;
  }

  .card-body {
    padding: 1rem !important;
  }

  .card-footer {
    padding: 0.75rem 1rem !important;
  }

  h4 {
    font-size: 1.1rem !important;
  }

  /* Long lists: keep them usable without eating the whole screen. */
  .result-list {
    max-height: 46vh !important;
  }

  /* Ladder pages: reduce tier header/content padding. */
  .tier-header {
    padding: 10px 14px !important;
    font-size: 1rem !important;
  }

  .tier-content {
    padding: 12px !important;
  }

  /* Compare pages: make the selected chips smaller. */
  .compare-chip {
    padding: 4px 8px !important;
  }

  /* Index tool cards: shrink icons and vertical padding. */
  .tool-card .card-body {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .tool-icon {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
  }

  /* Ads / recommendations: collapsed by default on mobile (toggled by JS). */
  .ad-card[data-collapsed="1"] .card-body {
    display: none !important;
  }
}

.tool-card {
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  color: inherit;
}

.tool-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.tool-icon.gpu-search {
  color: #667eea;
}

.tool-icon.cpu-search {
  color: #2196f3;
}

.tool-icon.shortcut-search {
  color: #9c27b0;
}

.tool-icon.flower-search {
  color: #e91e63;
}

.tool-icon.phone-search {
  color: #ff6700;
}

.tool-icon.laptop-cpu-ladder {
  color: #3f51b5;
}

.tool-icon.mobile-battery-ladder {
  color: #ff5722;
}

.tool-icon.cpu-compare {
  color: #2196f3;
}

.tool-icon.gpu-compare {
  color: #667eea;
}

.tool-icon.mobile-cpu-compare {
  color: #ff6700;
}

.tool-icon.laptop-cpu-compare {
  color: #3f51b5;
}

.tool-icon.mobile-battery-compare {
  color: #ff5722;
}

.tool-icon.http-status-search {
  color: #28a745;
}

.tool-icon.port-search {
  color: #17a2b8;
}

.tool-icon.color-search {
  color: #ff69b4;
}

.tool-icon.idiom-search {
  color: #8b4513;
}

.tool-icon.country-search {
  color: #007bff;
}

.tool-icon.zodiac-search {
  color: #ffc107;
}

.tool-icon.animal-sign-search {
  color: #dc3545;
}

.tool-icon.holiday-search {
  color: #28a745;
}

.tool-icon.file-extension-search {
  color: #6f42c1;
}

.tool-icon.license-plate-search {
  color: #20c997;
}

.tool-icon.area-code-search {
  color: #fd7e14;
}

.tool-icon.blood-type-search {
  color: #e91e63;
}

.tool-icon.dynasty-search {
  color: #795548;
}

.tool-icon.solar-term-search {
  color: #8bc34a;
}

.tool-icon.element-search {
  color: #667eea;
}

.tool-icon.character-stroke-search {
  color: #f44336;
}

.tool-icon.timezone-search {
  color: #2196f3;
}

.tool-icon.domain-suffix-search {
  color: #00bcd4;
}

.tool-icon.unit-conversion-search {
  color: #9c27b0;
}

.tool-icon.poetry-search {
  color: #9c27b0;
}

.tool-icon.psu-calculator {
  color: #ff9800;
}

.tool-icon.memory-bandwidth {
  color: #4caf50;
}

.tool-icon.vram-bandwidth {
  color: #667eea;
}

.tool-icon.pixel-throughput {
  color: #0d6efd;
}

.tool-icon.download-tool {
  color: #6c757d;
}