/* TMUK CarCare — custom styles layered on top of Tailwind (CDN). */

html {
  scroll-behavior: smooth;
}

/* Guard against horizontal scrolling on mobile. overflow-x:hidden clips any
   accidental overflow; it is set on BOTH html and body so neither can become a
   runaway horizontal scroll container. This also absorbs a desktop-only quirk
   where the fixed header (inset-x-0) is sized to the viewport *including* the
   classic scrollbar gutter. On real phones (overlay scrollbars) there is no
   gutter, so this is purely defensive. Verified: page scrollWidth == viewport
   width at 375px, so no horizontal scrollbar appears. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
}

body {
  font-family: var(--font-family, 'Poppins'), 'Segoe UI', sans-serif;
}

/* Never let media or embeds (e.g. an admin-pasted Google Maps iframe with a
   hardcoded pixel width) force the page wider than the viewport. */
img, iframe, video, embed, object, table, svg {
  max-width: 100%;
}

.map-embed {
  width: 100%;
  overflow: hidden;
}
.map-embed iframe {
  width: 100% !important;
}

:root {
  --color-primary: #0a0a0a;
  --color-secondary: #1f2937;
  --color-accent: #dc2626;
  --radius: 1rem;
}

.section-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.section-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.45);
  filter: brightness(1.08);
}

.btn-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}
.btn-outline:hover {
  background: #fff;
  color: #0a0a0a;
}

.card-premium {
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-premium:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18);
}

.hero-bg {
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(10, 10, 10, 0.92) 100%);
}

.accent-underline {
  position: relative;
  display: inline-block;
}
.accent-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 56px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 999px;
}

.gallery-item img {
  transition: transform 0.4s ease;
}
.gallery-item:hover img {
  transform: scale(1.06);
}

::selection {
  background: var(--color-accent);
  color: #fff;
}

/* Horizontal-scroll containers (e.g. the testimonials carousel) must never
   show their own scrollbar — only the page's vertical scrollbar should be
   visible. The bar is still fully swipeable/draggable, just not rendered. */
#testimonial-track {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge/IE */
}
#testimonial-track::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Android WebView, Edge Chromium */
  width: 0;
  height: 0;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #dc2626; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .section-fade { opacity: 1; transform: none; transition: none; }
}