/**
 * mobile.css - HackSimulator.nl
 * Mobile-specific adaptations
 */

/* ==================== Mobile Breakpoint ==================== */
@media (max-width: 768px) {
  /* Typography adjustments */
  :root {
    --font-size-base: var(--font-size-mobile);
  }

  /* Terminal container */
  #terminal-container {
    padding: 16px;
    padding-top: 100px;  /* Mobile navbar height (80px) + spacing (20px) */
    margin: 10px;
  }

  /* Terminal output */
  #terminal-output {
    font-size: var(--font-size-mobile);
    padding-bottom: 120px; /* Extra space for mobile keyboard */
  }

  /* Input wrapper */
  #terminal-input-wrapper {
    flex-wrap: wrap;
  }

  #terminal-prompt {
    font-size: var(--font-size-mobile);
  }

  #terminal-input {
    font-size: 18px; /* Prevent iOS zoom on focus */
    width: 100%;
  }

  /* ==================== Mobile Navbar ==================== */
  /* Increase navbar height on mobile */
  #navbar {
    height: 80px;
    padding: var(--spacing-md);
  }

  /* Show hamburger toggle on mobile */
  .navbar-toggle {
    display: flex;
  }

  /* Hide menu by default on mobile */
  .navbar-menu {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.98);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--spacing-lg);
    overflow-y: auto;
    z-index: 999;
  }

  /* Show menu when active */
  .navbar-menu.active {
    display: flex;
    animation: slideDown 0.3s ease-out;
  }

  /* Stack navigation links vertically */
  .navbar-links {
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-bottom: var(--spacing-lg);
  }

  .navbar-links li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .navbar-links a {
    display: block;
    width: 100%;
    padding: var(--spacing-md);
    font-size: 1.1rem;
    text-align: left;
    min-height: 44px; /* Touch target minimum */
    color: #cccccc;
    font-weight: 400;
  }

  .navbar-links a:active {
    background-color: #1a1a1a;
    color: #ffffff;
    font-weight: 700;
  }

  /* Dropdown menu on mobile (nested under Help) */
  .navbar-dropdown {
    position: relative;
  }

  .navbar-dropdown > a::after {
    content: ' +';
    font-weight: 400;
  }

  .dropdown-menu {
    display: none;
    position: static;
    background-color: #0a0a0a;
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: 100%;
    animation: none;
  }

  .navbar-dropdown.active .dropdown-menu {
    display: block;
  }

  .dropdown-menu a {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) calc(var(--spacing-lg) * 2);
    color: #cccccc;
    font-size: 1rem;
    background-color: #0a0a0a;
    border: none;
  }

  .dropdown-menu a:active {
    background-color: #1a1a1a;
    color: #ffffff;
    font-weight: 700;
  }

  /* Navbar actions (search, github, theme) on mobile */
  .navbar-actions {
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-lg);
  }

  .navbar-action,
  .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.1rem;
    min-height: 44px; /* Touch target minimum */
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-button);
    color: #cccccc;
    gap: var(--spacing-md);
  }

  .navbar-action:active,
  .theme-toggle:active {
    background-color: #1a1a1a;
    color: #ffffff;
  }

  .navbar-action svg {
    width: 24px;
    height: 24px;
  }

  /* Add text labels for mobile actions */
  .navbar-action[aria-label="Zoek commands"]::after {
    content: "Zoek Commands";
    font-family: var(--font-terminal);
    margin-left: auto;
  }

  .navbar-action[aria-label="GitHub repository"]::after {
    content: "GitHub";
    font-family: var(--font-terminal);
    margin-left: auto;
  }

  /* Theme toggle on mobile - Terminal Bracket Switch */
  .theme-toggle {
    gap: 2px;
    font-size: 11px;
    padding: 0 4px;
  }

  .toggle-option {
    padding: 2px 4px;
    font-size: 11px;
  }

  .toggle-indicator {
    font-size: 10px;
  }

  /* Modals */
  .modal-content {
    max-width: 90%;
    padding: var(--spacing-lg);
    max-height: 90vh;
  }

  .modal-content h2 {
    font-size: 1.2rem;
  }

  /* Cookie banner */
  .cookie-content {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }

  .cookie-buttons {
    width: 100%;
    justify-content: center;
  }

  /* Feedback widget */
  #feedback-widget {
    bottom: var(--spacing-md);
    right: var(--spacing-md);
  }

  .floating-btn {
    width: 90px;
    height: 44px;
    padding: 0 8px; /* Breathing room voor tablet */
    font-size: 0.8rem;
    line-height: 44px; /* Vertical centering */
  }

  /* Footer */
  footer {
    font-size: 16px;
    padding: 12px 16px;
    margin: 10px;
  }

  footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
  }

  /* Tables */
  .terminal-table {
    font-size: 12px;
  }

  .terminal-table th,
  .terminal-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  /* Hints */
  .hint-box {
    max-width: calc(100vw - 2 * var(--spacing-md));
    bottom: 70px;
    right: var(--spacing-md);
    left: var(--spacing-md);
    font-size: 14px;
  }

  /* Man pages */
  .man-page h1 {
    font-size: 1.2rem;
  }

  .man-page h2 {
    font-size: 1rem;
  }

  /* Rating stars */
  .rating-stars {
    justify-content: center;
  }

  .star {
    font-size: 1.5rem;
  }
}

/* ==================== Mobile Quick Commands ==================== */
.mobile-quick-commands {
  display: none;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  background-color: var(--color-bg-modal);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-sm);
  overflow-x: auto;
  white-space: nowrap;
  z-index: var(--z-feedback);
}

@media (max-width: 768px) {
  .mobile-quick-commands.active {
    display: block;
  }
}

.quick-command-btn {
  display: inline-block;
  background-color: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--spacing-xs) var(--spacing-md);
  margin-right: var(--spacing-xs);
  font-size: 14px;
  font-family: var(--font-terminal);
}

.quick-command-btn:active {
  background-color: rgba(0, 255, 136, 0.2);
  border-color: var(--color-prompt);
}

/* ==================== Mobile Keyboard Helpers ==================== */
.mobile-keyboard-helper {
  display: none;
  position: fixed;
  bottom: 110px;
  left: 0;
  right: 0;
  background-color: var(--color-bg-modal);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-xs);
  justify-content: center;
  gap: var(--spacing-xs);
  z-index: var(--z-feedback);
}

@media (max-width: 768px) {
  .mobile-keyboard-helper.active {
    display: flex;
  }
}

.keyboard-key {
  background-color: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--spacing-sm);
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: var(--font-terminal);
  -webkit-tap-highlight-color: transparent;
}

.keyboard-key:active {
  background-color: rgba(0, 255, 136, 0.2);
  border-color: var(--color-prompt);
}

/* ==================== Touch Improvements ==================== */
@media (max-width: 768px) {
  /* Larger tap targets */
  button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent iOS text size adjustment */
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Prevent pull-to-refresh */
  body {
    overscroll-behavior-y: contain;
  }

  /* Smoother scrolling */
  #terminal-output {
    -webkit-overflow-scrolling: touch;
  }

  /* Remove tap highlight */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ==================== Landscape Mobile ==================== */
@media (max-width: 768px) and (orientation: landscape) {
  #terminal-container {
    padding: var(--spacing-xs);
  }

  #terminal-output {
    padding-bottom: 80px;
  }

  .modal-content {
    max-height: 85vh;
  }

  .hint-box {
    bottom: var(--spacing-md);
  }
}

/* ==================== Small Mobile (< 480px) ==================== */
@media (max-width: 480px) {
  :root {
    --spacing-md: 12px;
    --spacing-lg: 16px;
  }

  .modal-content {
    padding: var(--spacing-md);
  }

  .modal-content h2 {
    font-size: 1.1rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 16px;
  }

  .floating-btn {
    width: 80px;
    height: 44px;
    padding: 0 6px; /* Minimale padding voor tiny screens */
    font-size: 0.75rem; /* Iets groter voor readability */
    line-height: 44px; /* Vertical centering */
  }

  .ascii-art {
    font-size: 0.6em;
  }
}

/* ==================== Tablet (768px - 1024px) ==================== */
@media (min-width: 769px) and (max-width: 1024px) {
  #terminal-container {
    padding: var(--spacing-md);
  }

  .modal-content {
    max-width: 80%;
  }
}