/* Shared mobile / touch adaptation for all CabinBench pages.
   Loaded AFTER each page's inline <style> so it overrides on small screens. */

@media (max-width: 768px) {
  /* Tighter page gutters */
  .container,
  .site-content,
  .site-header-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ---- Header: brand on its own row, links become a horizontal scroll strip ---- */
  .nav-inner,
  .site-header-container {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 10px !important;
  }

  .nav-links,
  .site-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar,
  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  .nav-title {
    font-size: 15px;
  }

  /* ---- Forms: 16px avoids iOS focus zoom; bigger tap area ---- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .form-control-sm {
    font-size: 16px !important;
  }

  .form-control,
  .form-control-sm {
    padding: 10px 12px !important;
  }

  input[type="checkbox"],
  input[type="radio"],
  .form-check-input {
    width: 20px;
    height: 20px;
  }

  /* ---- Buttons: comfortable touch targets ---- */
  .btn {
    padding: 10px 16px;
    font-size: 15px;
  }

  .btn-sm {
    padding: 9px 12px;
    font-size: 14px;
  }

  /* ---- Generic 2/3/4-column grids collapse to single column ---- */
  .option-grid:not(.option-grid-compact),
  .params-grid {
    grid-template-columns: 1fr !important;
  }

  /* Compact option grids stay 2-column on mobile */
  .option-grid-compact {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Selectable option/radio cards get more height for fingers */
  .option-item,
  .radio-item {
    padding: 12px 14px !important;
  }

  /* Media never overflows the viewport */
  img,
  canvas,
  svg,
  video {
    max-width: 100%;
    height: auto;
  }

  /* Tables scroll horizontally instead of breaking layout */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* Very small phones: shrink hero headings so they don't overflow */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 20px !important;
  }
  .hero p {
    font-size: 14px !important;
  }
}