/* ============================================================
   main.css — All custom styles for Mobile Tire Fitting UK
   Consolidated from the home page and the landing page.
   Tailwind (via CDN) still handles utility classes in markup;
   this file holds fonts, brand colors, and component styles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

/* ---------- Base ---------- */
:root {
  --brand-red: #D62D3D;
  --brand-red-dark: #b91c2b;
  --dark: #222222;
  --off-white: #fdfcf7;
  --card-tan: #f9f6ef;
  --primary: #c8232c; /* legacy home-page red, kept for compatibility */
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--off-white);
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
}

.font-black { font-weight: 900; }

/* ---------- Brand color helpers ---------- */
.bg-brand-red   { background-color: var(--brand-red); }
.text-brand-red { color: var(--brand-red); }
.border-brand-red { border-color: var(--brand-red); }
.bg-off-white   { background-color: var(--off-white); }
.bg-card-tan    { background-color: var(--card-tan); }
.bg-primary     { background-color: var(--primary); }
.text-primary   { color: var(--primary); }
.hover\:bg-red-700:hover { background-color: var(--brand-red-dark); }

/* Outlined display text used in the "EMERGENCY?" CTA */
.text-outline-gray {
  -webkit-text-stroke: 1px #e2e8f0;
  color: transparent;
}

/* ---------- Hero overlay (home) ---------- */
.hero-overlay { background: rgba(0, 0, 0, 0.6); }

/* ---------- Service card image sizing (home grid) ---------- */
.service-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* ============================================================
   FAQ accordion (animated, landing-page style)
   Used site-wide. Toggle by adding .open to .faq-item.
   ============================================================ */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-answer { max-height: 500px; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-toggle { transition: transform 0.3s ease; }

/* ============================================================
   Testimonial slider (home-page style, reusable)
   ============================================================ */
.testimonial-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}
.testimonial-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.testimonial-dot {
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.3s ease;
}

/* ============================================================
   Header / mobile navigation
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 50; }

/* Mobile menu is hidden until toggled open */
#mobile-nav.is-open { display: block; }

/* ---------- Counters ---------- */
.counter { font-variant-numeric: tabular-nums; }

/* ============================================================
   Accessibility & motion
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--brand-red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track,
  .faq-answer,
  .faq-toggle,
  .testimonial-dot {
    transition: none !important;
  }
}