/* =====================================================================
   Contact page (contact.html) and policy pages (policies.html).
   The contact list and message form reuse styles from home.css and
   product.css; only what is new for these pages lives here.
   ===================================================================== */

/* ---------- Page heading ---------- */
.page-intro { padding-top: clamp(32px, 2rem + 2vw, 64px); }
.page-intro .lead { margin-top: var(--s-3); max-width: 56ch; color: var(--c-text-2); }

/* Less space between sections than on the homepage */
.section--tight { padding-top: clamp(32px, 2rem + 2vw, 64px); }

/* ---------- Contact page ---------- */
.contact-reviews { margin-top: var(--s-6); }
.form-privacy { margin-top: var(--s-5); }

/* Three shortcut cards: track repair, track order, repair estimate */
.quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 760px) { .quick-links { grid-template-columns: 1fr; } }
.quick-link {
  display: block;
  padding: var(--s-6);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-l);
  color: var(--c-text);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.quick-link:hover { text-decoration: none; border-color: var(--c-line); background: var(--c-bg-raised); }
.quick-title { display: block; font-weight: var(--fw-semibold); }
.quick-title::after { content: " \203A"; color: var(--c-accent); }   /* the › arrow */
.quick-sub { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--c-text-3); }

/* ---------- Policy pages ---------- */
.policy-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(var(--s-7), 5vw, var(--s-11));
  align-items: start;
}
@media (max-width: 860px) { .policy-layout { grid-template-columns: 1fr; } }

/* The list of policies on the left (a row of pills on phones) */
.policy-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.policy-nav a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-s);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.policy-nav a:hover { text-decoration: none; background: var(--c-bg-alt); color: var(--c-text); }
.policy-nav a[aria-current="page"] { background: var(--c-bg-alt); color: var(--c-text); font-weight: var(--fw-semibold); }
@media (max-width: 860px) {
  .policy-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .policy-nav a { border-radius: var(--radius-pill); background: var(--c-bg-alt); }
  .policy-nav a[aria-current="page"] { background: var(--c-text); color: var(--c-bg); }
}

/* The policy text itself: comfortable reading width */
.policy-body { max-width: 68ch; }
.policy-body .h2 { margin-bottom: var(--s-5); }
.policy-body .prose { line-height: 1.65; }
.policy-updated { margin-top: var(--s-7); }