/* MOT checker page. Colours and type come from main.css */

.mot-hero .hero__content { max-width: 40rem; }
.mot-hero .hero__meta { margin-top: 0.5rem; }

.mot-check { padding-block: clamp(2.5rem, 6vw, 4rem) var(--section); }

/* Result card, filled in by mot-check.js */
.mot-result { max-width: 44rem; scroll-margin-top: 1rem; }
.mot-result:empty { display: none; }
.mot-result__card {
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line); border-top: 6px solid var(--steel); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(19, 33, 74, 0.08);
}
.mot-result__card--valid { border-top-color: #1E7A34; }
.mot-result__card--expired { border-top-color: #B42318; }
.mot-result__card h2 { font-size: var(--step-3); margin-bottom: 0.3em; }
.mot-result__card--valid h2 { color: #1E7A34; }
.mot-result__card--expired h2 { color: #B42318; }
.mot-result__card > p:not([class]) { color: var(--steel); }

.mot-result__vehicle {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  margin-bottom: 1.1rem; color: var(--steel); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em;
}
.mot-result__plate {
  font-family: var(--font-plate); font-weight: 700; font-size: var(--step-1); letter-spacing: 0.06em;
  color: var(--plate-ink); background: var(--yellow);
  border: 2px solid var(--plate-ink); border-radius: 4px; padding: 0.05rem 0.6rem;
}
.mot-result__date { font-size: var(--step-1); line-height: 1.45; margin-bottom: 0.75rem; }

.mot-result__window {
  margin: 1.25rem 0 0; padding: 1rem 1.25rem;
  background: var(--concrete); border-left: 4px solid var(--blue); border-radius: var(--radius);
}
.mot-result__window h3 { margin-bottom: 0.3em; }
.mot-result__window p { color: var(--steel); }
.mot-result__window p:last-child { margin-bottom: 0; }
.mot-result__window .mot-result__range { font-size: var(--step-1); font-weight: 600; color: var(--navy); margin-bottom: 0.35em; }

.mot-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.mot-result__note { color: var(--steel); font-size: var(--step--1); margin: 1rem 0 0; }

/* Good to know */
.mot-facts { max-width: 44rem; }
.mot-facts h2 { font-size: var(--step-2); margin-bottom: 0.75rem; }
.mot-facts ul { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.mot-facts li { margin-bottom: 0.5rem; color: var(--steel); max-width: 65ch; }
.mot-facts li::marker { color: var(--blue); }

@media (max-width: 520px) {
  .mot-result__actions .btn { width: 100%; }
}