:root { --wrap: 960px; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: #0f172a; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 1.5rem; }
.site-header, .site-footer { background: #0f172a; color: #fff; }
.site-header .brand { font-weight: 700; color: #fff; text-decoration: none; }
.nav { list-style: none; padding: 0; margin: 0; }
.hero { padding: 3rem 0; }
.vin-form { display: grid; gap: .75rem; grid-template-columns: 1fr auto; align-items: end; max-width: 720px; }
.vin-form label { grid-column: 1 / -1; font-weight: 600; }
.vin-form input { padding: .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.vin-form button { padding: .8rem 1.1rem; border: 0; border-radius: .5rem; background: #2563eb; color: #fff; cursor: pointer; }
.vin-form button:hover { filter: brightness(.95); }
.results { margin-top: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; padding-left: 0; list-style: none; }
.error { color: #b91c1c; }

.vd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 1.5rem;
}
.vd-col ul {
  list-style: disc;
  margin-left: 1.25rem;
  margin-bottom: 1rem;
}
.vd-category > strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1em;
}

/* VIN Results — Six Cards (3×2) */
.vd-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Stack on small screens */
@media (max-width: 900px) {
  .vd-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .vd-cards-grid {
    grid-template-columns: 1fr;
  }
}

.vd-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 220px;     /* gives a “square-ish” look; tweak as needed */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.vd-card-title {
  margin: 0 0 .5rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

.vd-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}

/* label/value line */
.vd-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .5rem;
  border-bottom: 1px dashed #e5e7eb;
  padding: .25rem 0;
}
.vd-list li:last-child {
  border-bottom: none;
}

/* left = label, right = value */
.vd-k { font-weight: 600; color: #334155; }
.vd-v {
  color: #111827;
  white-space: normal;   /* allow wrapping */
  word-break: break-word; /* wrap long unbroken strings like VINs */
  text-align: right;      /* keep right alignment */
}

/* subtle empty state */
.vd-empty { color: #9ca3af; font-style: italic; border-bottom: none !important; }

.vd-card-title {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.vd-icon {
  display: inline-flex;
  line-height: 0;
  color: #2563eb; /* accent; inherits if removed */
}

.vd-v { color:#111827; white-space: normal; word-break: break-word; text-align: right; }
.vd-card-title { display:flex; align-items:center; gap:.5rem; }
.vd-icon { display:inline-flex; line-height:0; color:#2563eb; }

/* Special Custom Styles */

/* Sticky footer layout */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;              /* full viewport height */
  display: flex;                   /* stack header, main, footer */
  flex-direction: column;
}

#content {                         /* your <main id="content"> from header.php */
  flex: 1 0 auto;                  /* grow to fill available space */
}

.site-footer {
  margin-top: auto;                /* push footer to the bottom */
}

#content section.hero h1,
#content section.hero p,
#content section.hero .vin-form {
	text-align: center;
	padding: 0 1.5rem;
}

#content section.hero .vin-form {
	margin: auto;
}

#vd-results .wrap h2{
	text-align: center;
}