/* ==========================================================================
   TirePlus – Custom Styles (Bootstrap 5 override / supplement)
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
  --tp-navy:       #1b2a4a;
  --tp-navy-dark:  #111d35;
  --tp-red:        #d9232e;
  --tp-red-hover:  #b91c25;
  --tp-gold:       #f5a623;
  --tp-gray-100:   #f6f7f9;
  --tp-gray-200:   #e9ecef;
  --tp-gray-600:   #6c757d;
  --tp-white:      #ffffff;
  --tp-body:       #333333;
  --tp-radius:     .5rem;
  --tp-shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --tp-shadow:     0 4px 24px rgba(0,0,0,.10);
  --tp-transition: .25s ease;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 80px; font-size: 125%; }

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  color: var(--tp-body);
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  color: var(--tp-navy);
}

a { color: var(--tp-red); transition: color var(--tp-transition); }
a:hover { color: var(--tp-red-hover); }

img { max-width: 100%; height: auto; }

/* Override Bootstrap .lead font-weight 300 -> 500.
   Source Sans 3 weight 500 is loaded via head.html so this renders
   crisply (avoids browser font synthesis or system fallback). */
.lead { font-weight: 500; }

/* ---------- Skip Link ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--tp-navy);
  color: var(--tp-white);
  padding: .5rem 1rem;
  border-radius: var(--tp-radius);
  font-weight: 600;
}
.skip-link:focus {
  top: .5rem;
  color: var(--tp-white);
}

/* ---------- Navbar ---------- */
.navbar-tp {
  background: var(--tp-white);
  box-shadow: var(--tp-shadow-sm);
  padding-top: .6rem;
  padding-bottom: .6rem;
  transition: box-shadow var(--tp-transition);
}
.navbar-tp .navbar-brand img {
  height: 50px;
  width: auto;
}
.navbar-tp .nav-link {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: var(--tp-navy);
  padding: .5rem .85rem;
  border-radius: var(--tp-radius);
  transition: background var(--tp-transition), color var(--tp-transition);
}
.navbar-tp .nav-link:hover,
.navbar-tp .nav-link:focus-visible {
  color: var(--tp-red);
  background: var(--tp-gray-100);
}
.navbar-tp .nav-link.active {
  color: var(--tp-red);
}
.navbar-tp .btn-appointment {
  background: var(--tp-red);
  color: var(--tp-white);
  font-weight: 700;
  font-size: .9rem;
  padding: .45rem 1.1rem;
  border: none;
  border-radius: var(--tp-radius);
  transition: background var(--tp-transition), transform var(--tp-transition);
}
.navbar-tp .btn-appointment:hover,
.navbar-tp .btn-appointment:focus-visible {
  background: var(--tp-red-hover);
  color: var(--tp-white);
  transform: translateY(-1px);
}
.navbar-tp .navbar-toggler {
  border: 2px solid var(--tp-navy);
  padding: .35rem .55rem;
}
.navbar-tp .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(27,42,74,.25);
}
.navbar-tp .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231b2a4a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--tp-navy) 0%, var(--tp-navy-dark) 100%);
  color: var(--tp-white);
  padding: 4.5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(217,35,46,.15) 0%, transparent 70%);
  pointer-events: none;
}
.hero h1 {
  color: var(--tp-white);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
}
.hero .lead {
  font-size: 1.15rem;
  opacity: .9;
  max-width: 540px;
}
.hero .hero-address {
  font-size: .95rem;
  opacity: .8;
  margin-bottom: .25rem;
}
.hero .hero-phone {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tp-gold);
  text-decoration: none;
}
.hero .hero-phone:hover { color: #ffc857; }
.hero .hero-hours {
  font-size: .9rem;
  opacity: .75;
  margin-top: .35rem;
}
.hero .btn-cta {
  padding: .7rem 1.6rem;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--tp-radius);
  transition: transform var(--tp-transition), box-shadow var(--tp-transition);
}
.hero .btn-cta:hover { transform: translateY(-2px); box-shadow: var(--tp-shadow); }
.btn-cta-primary {
  background: var(--tp-red);
  border-color: var(--tp-red);
  color: var(--tp-white);
}
.btn-cta-primary:hover { background: var(--tp-red-hover); border-color: var(--tp-red-hover); color: var(--tp-white); }
.btn-cta-outline {
  background: transparent;
  border: 2px solid var(--tp-white);
  color: var(--tp-white);
}
.btn-cta-outline:hover { background: var(--tp-white); color: var(--tp-navy); }

/* ---------- Section Helpers ---------- */
.section-padding { padding: 3rem 0; }
.section-padding-sm { padding: 2rem 0; }
.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: .35rem;
}
.section-subtitle {
  color: var(--tp-gray-600);
  max-width: 600px;
  margin: 0 auto 1.5rem;
}
.bg-light-custom { background: var(--tp-gray-100); }

/* ---------- Highlights Bar ---------- */
.highlights-bar {
  background: var(--tp-white);
  border-top: 3px solid var(--tp-red);
  box-shadow: var(--tp-shadow);
  margin-top: -2rem;
  position: relative;
  z-index: 2;
  border-radius: var(--tp-radius);
}
.highlight-item {
  text-align: center;
  padding: 1rem .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.highlight-item img {
  height: 74px;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  margin-bottom: .35rem;
}
.highlight-item .hi-icon {
  font-size: 1.5rem;
  color: var(--tp-red);
  margin-bottom: .3rem;
}
.highlight-item h6 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .1rem;
  color: var(--tp-navy);
}
.highlight-item p {
  font-size: .78rem;
  color: var(--tp-gray-600);
  margin: 0;
}
.highlight-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.highlight-item a h6,
.highlight-item a p {
  color: inherit;
}
.highlight-item a:hover h6 {
  color: var(--tp-red);
}

/* ---------- Service Cards ---------- */
.service-card {
  background: var(--tp-white);
  border: 1px solid var(--tp-gray-200);
  border-radius: var(--tp-radius);
  padding: 1rem 1.1rem;
  height: 100%;
  transition: transform var(--tp-transition), box-shadow var(--tp-transition);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tp-shadow);
}
.service-card .sc-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .4rem;
}
.service-card .sc-icon {
  width: 32px;
  height: 32px;
  background: var(--tp-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: var(--tp-red);
  flex-shrink: 0;
}
.service-card h5 {
  font-size: .95rem;
  margin-bottom: 0;
}
.service-card p {
  font-size: .82rem;
  color: var(--tp-gray-600);
  margin: 0;
  line-height: 1.4;
}

/* ---------- CTA Banner ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--tp-navy) 0%, var(--tp-navy-dark) 100%);
  color: var(--tp-white);
  padding: 3.5rem 0;
  text-align: center;
}
.cta-banner h2 { color: var(--tp-white); margin-bottom: 1rem; }
.cta-banner .btn { margin: .35rem; }

/* ---------- Location Block ---------- */
.location-card {
  background: var(--tp-white);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow-sm);
  overflow: hidden;
  border: 1px solid var(--tp-gray-200);
}
.location-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.location-info { padding: 1.5rem; }
.location-info h4 { margin-bottom: .75rem; }
.location-info .loc-detail {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .6rem;
  font-size: .95rem;
}
.location-info .loc-detail i { color: var(--tp-red); margin-top: .2rem; }

/* ---------- Reviews Widget Container ---------- */
.reviews-badge-wrap {
  display: inline-block;
}
.reviews-badge-wrap a:focus-visible {
  outline: 3px solid var(--tp-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Google Map Embed ---------- */
.map-embed {
  border-radius: var(--tp-radius);
  overflow: hidden;
  box-shadow: var(--tp-shadow-sm);
}
.map-embed iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

/* ---------- Page Header (inner pages) ---------- */
.page-header {
  background: linear-gradient(135deg, var(--tp-navy) 0%, var(--tp-navy-dark) 100%);
  color: var(--tp-white);
  padding: 3rem 0 2.5rem;
  text-align: center;
}
.page-header h1 {
  color: var(--tp-white);
  margin-bottom: .5rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.page-header p {
  opacity: .85;
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- TireConnect Widget Container ---------- */
.tc-widget-container {
  min-height: 300px;
  position: relative;
  background: var(--tp-gray-100);
  border-radius: var(--tp-radius);
  overflow: hidden;
}
.tc-widget-container #tireconnect {
  width: 100%;
}

/* ---------- Booking Iframe ---------- */
.booking-frame-container {
  border-radius: var(--tp-radius);
  overflow: hidden;
  box-shadow: var(--tp-shadow-sm);
  border: 1px solid var(--tp-gray-200);
  background: var(--tp-white);
}
.booking-frame {
  width: 100%;
  height: 750px;
  border: 0;
  display: block;
}
@media (max-width: 575.98px) {
  .booking-frame { height: 600px; }
}

/* ---------- Tekmetric Booking Modal ---------- */
/* Tekmetric ships the scheduler at a flat 400px, which reads as a phone-width
   column on a desktop screen and scrolls far more than it needs to.

   The DOM their modal.js builds, all of it inside OUR page:

     #tekmetricBookingModal.tekmetric-overlay   full-screen backdrop
       -> .tekmetric-booking-modal              the dialog, position:fixed, 400px
            -> #tekmetricBookingIframe          the scheduler, 400px, max-width:100%

   Only the iframe's CONTENT is cross-origin, so the boxes around it are ours to
   size. Both need widening: the iframe is 400px with max-width:100%, so a wider
   dialog alone would leave it stuck at 400px inside the extra space.

   Their modal.css is appended to <head> at runtime — AFTER this file — so it
   wins on source order at equal specificity. Scoping through the overlay's id
   beats that on specificity alone; !important additionally covers the case
   where their own rules carry it. Both are deliberate, not cargo cult.

   If Tekmetric renames these classes the override stops matching and the dialog
   simply returns to 400px: visibly narrow, nothing broken.

   min() rather than a flat width so this also covers phones, where Tekmetric's
   400px against max-width:none would otherwise overflow a 375px screen. */
#tekmetricBookingModal .tekmetric-booking-modal {
  width: min(820px, 94vw) !important;
}
#tekmetricBookingModal .tekmetric-booking-iframe {
  width: 100% !important;
  /* An iframe carries a 2px border by default, so width:100% resolves to
     100% + 4px and the scheduler overflows the dialog it sits in. Measured:
     an 820px dialog held an 824px iframe. border-box folds the border back
     into the width; border:0 is the belt to that braces. */
  box-sizing: border-box !important;
  border: 0;
}

/* ---------- Contact Form ---------- */
.contact-form .form-label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--tp-navy);
}
.contact-form .form-control {
  border-radius: var(--tp-radius);
  border-color: var(--tp-gray-200);
  padding: .6rem .85rem;
  transition: border-color var(--tp-transition), box-shadow var(--tp-transition);
}
.contact-form .form-control:focus {
  border-color: var(--tp-red);
  box-shadow: 0 0 0 3px rgba(217,35,46,.12);
}
.contact-form .btn-submit {
  background: var(--tp-red);
  border: none;
  color: var(--tp-white);
  font-weight: 700;
  padding: .65rem 2rem;
  border-radius: var(--tp-radius);
  transition: background var(--tp-transition), transform var(--tp-transition);
}
.contact-form .btn-submit:hover {
  background: var(--tp-red-hover);
  transform: translateY(-1px);
}
.contact-form .btn-submit:focus-visible {
  outline: 3px solid var(--tp-red);
  outline-offset: 2px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--tp-navy-dark);
  color: rgba(255,255,255,.75);
  padding: 3rem 0 1.5rem;
  font-size: .9rem;
}
.footer h6 {
  color: var(--tp-white);
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1rem;
}
.footer a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: color var(--tp-transition);
}
.footer a:hover { color: var(--tp-white); }
.footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: .82rem;
  opacity: .65;
}
.footer .footer-brand img {
  height: 40px;
  margin-bottom: .75rem;
  filter: brightness(0) invert(1);
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer ul li { margin-bottom: .4rem; }
.footer ul li a:focus-visible {
  outline: 2px solid var(--tp-gold);
  outline-offset: 2px;
}
.footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  margin-right: .4rem;
  transition: background var(--tp-transition);
}
.footer .social-links a:hover { background: var(--tp-red); color: var(--tp-white); }

/* ---------- Utility ---------- */
.text-red  { color: var(--tp-red) !important; }
.text-navy { color: var(--tp-navy) !important; }
.text-gold { color: var(--tp-gold) !important; }

/* ---------- Focus-visible polyfill fallback ---------- */
*:focus-visible {
  outline: 3px solid var(--tp-red);
  outline-offset: 2px;
}

/* ---------- Responsive Tweaks ---------- */
@media (max-width: 991.98px) {
  .hero { padding: 3rem 0 2.5rem; }
  .highlights-bar { margin-top: 0; border-radius: 0; }
  .section-padding { padding: 2.5rem 0; }
  .navbar-tp .offcanvas { background: var(--tp-white); }
}
@media (max-width: 575.98px) {
  .hero h1 { font-size: 1.75rem; }
  .hero .hero-phone { font-size: 1.3rem; }
  .highlight-item { padding: .65rem .35rem; }
  .highlight-item img { height: 48px; }
  .highlight-item h6 { font-size: .72rem; }
  .highlight-item p { font-size: .68rem; }
  .tc-widget-container { min-height: 300px; }
}

/* ---------- Print ---------- */
@media print {
  .navbar-tp, .footer, .cta-banner, .btn { display: none !important; }
  body { font-size: 12pt; color: #000; }
}

/* ---------- reCAPTCHA Badge (hidden, text attribution in form) ---------- */
.grecaptcha-badge { visibility: hidden; }

/* ---------- Brands 3D Circle Carousel ---------- */
.brands-carousel-3d {
  perspective: 1200px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: .5rem 0;
}
.brands-ring {
  position: relative;
  width: 140px;
  height: 50px;
  transform-style: preserve-3d;
  animation: brands-rotate 40s linear infinite;
}
.brands-ring:hover {
  animation-play-state: paused;
}
.brand-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(calc(var(--i) * 13.333deg)) translateZ(420px);
  backface-visibility: hidden;
}
.brand-item img {
  height: 40px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter .3s, transform .3s;
}
.brand-item img:hover {
  filter: grayscale(0%);
  transform: scale(1.15);
}
@keyframes brands-rotate {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
@media (max-width: 991.98px) {
  .brands-carousel-3d {
    height: 120px;
  }
  .brand-item {
    transform: rotateY(calc(var(--i) * 13.333deg)) translateZ(320px);
  }
  .brand-item img {
    height: 32px;
    max-width: 65px;
  }
}
@media (max-width: 575.98px) {
  .brands-carousel-3d {
    height: 100px;
  }
  .brand-item {
    transform: rotateY(calc(var(--i) * 13.333deg)) translateZ(220px);
  }
  .brand-item img {
    height: 24px;
    max-width: 45px;
  }
  .brands-ring {
    animation-duration: 30s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brands-ring {
    animation: none;
    transform: rotateY(0deg);
  }
}

/* ---------- Sticky Mobile Call Bar ---------- */
.mobile-call-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tp-red);
  color: #fff;
  text-align: center;
  padding: .85rem 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  z-index: 1040;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.mobile-call-bar:hover,
.mobile-call-bar:focus {
  background: var(--tp-red-hover);
  color: #fff;
}
.mobile-call-bar i {
  font-size: 1.1rem;
}
@media (max-width: 991.98px) {
  body {
    padding-bottom: 60px;
  }
}

/* ---------- Highlights Bar Clickable ---------- */
.highlight-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
  padding: .25rem;
  border-radius: var(--tp-radius);
  transition: transform var(--tp-transition), background var(--tp-transition);
}
.highlight-item a:hover {
  transform: translateY(-3px);
  background: var(--tp-gray-100);
}
.highlight-item a:hover h6 {
  color: var(--tp-red);
}
.highlight-item a h6,
.highlight-item a p {
  color: inherit;
}
/* ---------- Service Card Links ---------- */
.service-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.service-card-link .service-card {
  position: relative;
  cursor: pointer;
}
.service-card-link .service-card::after {
  content: "→";
  position: absolute;
  bottom: .75rem;
  right: 1rem;
  color: var(--tp-red);
  font-weight: 700;
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .25s, transform .25s;
}
.service-card-link:hover .service-card,
.service-card-link:focus-visible .service-card {
  border-color: var(--tp-red);
  transform: translateY(-4px);
  box-shadow: var(--tp-shadow);
}
.service-card-link:hover .service-card::after,
.service-card-link:focus-visible .service-card::after {
  opacity: 1;
  transform: translateX(0);
}
.service-card-link:hover h5 {
  color: var(--tp-red);
}