/* Mobile Responsiveness Stylesheet */

@media (max-width: 1024px) {
  .container {
    max-width: 100%;
    padding: 0 15px;
  }
}

@media (max-width: 768px) {
  /* Prevent horizontal scrolling on the html/body levels */
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  /* Responsive typography & layouts */
  h1 {
    font-size: 1.5rem !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
    line-height: 1.25 !important;
  }

  h2 {
    font-size: 1.25rem !important;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
  }

  h3 {
    font-size: 1.1rem !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
  }

  p, li, summary, td, th {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* Navigation Header mobile style overrides */
  .nav-wrapper {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 10px !important;
  }

  .logo img {
    height: 32px !important;
  }

  /* Hamburger */
  .hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── Mobile Dropdown ── */
  .nav-dropdown {
    display: block;
    width: 100%;
  }
  .nav-dropdown-trigger {
    width: 100%;
    color: #374151 !important;
    padding: 10px 12px !important;
    border-radius: 8px;
  }
  .nav-dropdown-content {
    display: block !important;
    position: static;
    transform: none !important;
    background: rgba(0, 0, 0, 0.03) !important;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 8px;
    padding: 6px 8px;
    margin: 4px 0;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
  .nav-dropdown-content a {
    color: #6b7280 !important;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    border-radius: 6px;
  }
  .nav-dropdown-content a:hover {
    background: rgba(0, 149, 95, 0.07) !important;
    color: #00955f !important;
  }

  /* Mobile nav menu */
  .nav-links {
    display: none;
    flex-direction: column !important;
    position: absolute !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    padding: 12px 15px 18px !important;
    z-index: 9999 !important;
    gap: 2px !important;
  }

  .nav-links.show {
    display: flex !important;
  }

  .nav-links > a {
    color: #374151 !important;
    padding: 10px 12px !important;
    width: 100% !important;
    border-radius: 8px !important;
    text-align: left !important;
  }

  .nav-links > a:hover {
    color: #111827 !important;
    background: rgba(0, 0, 0, 0.05) !important;
  }

  .nav-links > a.active {
    color: #00955f !important;
    background: rgba(0, 149, 95, 0.08) !important;
  }

  /* Tool control buttons and selects responsiveness */
  .tool-controls {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .tool-controls select,
  .tool-controls button {
    flex: 1 1 calc(50% - 8px) !important; /* Two items per row */
    min-width: 100px !important;
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    text-align: center !important;
  }

  .tool-controls button#reset-btn {
    flex: 1 1 100% !important; /* Reset button spans full width below selects */
    max-width: 100% !important;
  }

  /* Switch selector buttons (Mechanical Keyboard page) */
  .switch-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  .switch-btn {
    flex: 1 1 calc(33.33% - 6px) !important; /* Stack horizontally evenly */
    font-size: 0.8rem !important;
    padding: 8px 6px !important;
    text-align: center !important;
    min-width: 80px !important;
  }

  /* Preset buttons NKRO layout */
  .preset-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 15px !important;
  }

  .preset-btn {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 0.8rem !important;
    padding: 8px 4px !important;
  }

  /* Keyboard Container responsive scaling settings */
  .keyboard-container-wrapper {
    width: 100% !important;
    overflow: hidden !important; /* Prevent scrollbars and scroll behavior entirely */
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
    margin: 0 auto !important;
  }

  .keyboard-base {
    transform-origin: top center !important;
    display: inline-block !important;
    margin: 0 auto !important;
  }

  /* Details and Event logs settings */
  .status-panel {
    width: 100% !important;
    padding: 12px !important;
    margin: 15px 0 !important;
  }

  .event-log {
    max-height: 120px !important;
    font-size: 0.8rem !important;
  }

  /* Guided test panel laptop page */
  .guided-test-panel {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .guided-step {
    font-size: 0.95rem !important;
    text-align: center !important;
  }

  /* Fn Combo grid cells */
  .fn-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .fn-cell {
    font-size: 0.8rem !important;
    padding: 6px !important;
  }

  /* Stats grid mechanical page */
  .summary-panel {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stat-box {
    padding: 8px !important;
  }

  .stat-value {
    font-size: 1.15rem !important;
  }

  .stats-table th, .stats-table td {
    padding: 6px 4px !important;
    font-size: 0.75rem !important;
  }

  /* Spacebar counter app responsive layout */
  .counter-app {
    padding: 15px !important;
  }

  .timer-display {
    font-size: 2rem !important;
  }

  .hit-counter {
    font-size: 3.5rem !important;
  }

  .cps-display {
    font-size: 1.1rem !important;
  }

  /* Latency test responsive styles */
  .latency-panel {
    padding: 15px !important;
    margin: 15px 0 !important;
  }

  .click-zone {
    height: 180px !important;
    font-size: 1.1rem !important;
    padding: 15px !important;
  }

  .latency-stat-val {
    font-size: 1.6rem !important;
  }

  /* SEO blocks margins */
  .seo-content {
    margin-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* Footer responsiveness */
  footer {
    padding: 25px 0 !important;
    margin-top: 40px !important;
  }

  .footer-links {
    gap: 12px !important;
  }

  .footer-links a {
    font-size: 0.85rem !important;
  }
}

@media (max-width: 480px) {
  .tool-controls select,
  .tool-controls button {
    flex: 1 1 100% !important; /* Stack vertically on very small screen */
  }

  .switch-btn {
    flex: 1 1 100% !important; /* Stack mechanical switch buttons vertically */
  }

  .fn-grid {
    grid-template-columns: 1fr !important; /* Single column for Fn cells */
  }
}