/* Things Last - Custom styles beyond Tailwind */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Tables — clean, spaced, readable */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

table thead {
  background-color: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
}

table th {
  padding: 0.75rem 1.25rem;
  text-align: left;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

table td {
  padding: 0.625rem 1.25rem;
  color: #4b5563;
}

table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

table tbody tr:hover {
  background-color: #f0f9ff;
}

/* Prose tables (markdown-generated in editorial pages) */
.prose table {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Clickable rows — any table row with hover should show pointer */
tr.vehicle-row,
tr.food-row,
tr.med-row,
tr[class*="hover:bg-"] {
  cursor: pointer;
}

/* All links should always show pointer */
a, button, [role="button"], summary {
  cursor: pointer;
}

/* Elements that look interactive */
.group {
  cursor: pointer;
}

/* Prose overrides for content sections */
.prose h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose p {
  margin-bottom: 1rem;
}

/* Chart containers */
.chart-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Print styles */
@media print {
  header, footer, .no-print { display: none; }
  main { max-width: 100%; padding: 0; }
}
