/* MJC 2026-10 ThunderCan updates (live 2026-10-14). Uses the site's existing fonts. Accent = ThunderCan orange #f47d12, used sparingly:
   white main buttons that turn orange on hover, orange-outlined Dealer Inquiry, orange
   FEATURED label + View Specs links. Replaces the old blue #206ce2. */

/* overflow-x:hidden on html/body stops position:sticky from working; clip keeps the same look without breaking it */
html, body { overflow-x: hidden; overflow-x: clip; }

/* 1. Header stays visible while scrolling */
#header { position: sticky; top: 0; z-index: 1030; }

/* 2. Dealer Inquiry button in the menu */
#header .nav-cta { display: flex; align-items: center; margin-left: 12px; }
#header .nav-cta .btn { margin-top: 0; padding: 8px 18px !important; min-width: 0; font-size: .75rem; line-height: 1.2; text-decoration: none; border-radius: 4px; }
#header .nav-cta .btn:hover { background: #f47d12; color: #fff; text-decoration: none; }
@media (max-width: 991.98px) { #header .nav-cta { margin: 12px 0 8px 24px; } }

/* 3. Shorter homepage opening */
.tc-hero-line { font-size: 1.25rem; text-shadow: 1px 1px 3px rgba(0,0,0,.9); margin: 14px 0 4px; }
.tc-hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.tc-hero-buttons .btn { margin-top: 12px; border-radius: 4px; }
.tc-btn-outline { background: rgba(0,0,0,.35) !important; border: 2px solid #fff !important; }
.tc-btn-outline:hover { background: #fff !important; color: #000 !important; }

/* 4. Featured models row */
.tc-featured { background: #0d0d0d; padding: 50px 0 40px; border-bottom: 1px solid #333; }
.tc-section-kicker { font-family: "owners-text", sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .15em; text-transform: uppercase; color: #f47d12; margin-bottom: 4px; }
.tc-section-title { font-family: "bebas-neue", sans-serif; font-size: 2.6rem; color: #fff; margin-bottom: 26px; }
.tc-featured-row > div { margin-bottom: 24px; }
.tc-card { display: flex; flex-direction: column; height: 100%; background: #1a1a1a; border: 1px solid #2e2e2e; border-radius: 6px; padding: 16px; color: #fff !important; text-decoration: none !important; position: relative; transition: transform .15s, border-color .15s; }
.tc-card:hover { transform: translateY(-3px); border-color: #f47d12; }
.tc-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 4px; margin-bottom: 14px; }
.tc-card h3 { font-family: "bebas-neue", sans-serif; font-size: 1.7rem; color: #fff; margin: 0 0 8px; }
.tc-card-tag { position: absolute; top: 24px; left: 24px; background: rgba(17,17,17,.85); color: #fff; font-family: "owners-text", sans-serif; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.tc-stats { list-style: none; padding: 0; margin: 0 0 14px; font-size: .85rem; }
.tc-stats li { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #2e2e2e; padding: 6px 0; text-align: right; }
.tc-stats li span { color: #9aa4b2; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; font-family: "owners-text", sans-serif; font-weight: 700; text-align: left; }
.tc-card-link { margin-top: auto; font-family: "owners-text", sans-serif; font-weight: 800; text-transform: uppercase; font-size: .8rem; color: #f47d12; }
.tc-intro { max-width: 900px; margin: 16px auto 0; text-align: center; font-size: .95rem; }
.tc-intro p { color: #cfd4da; }

/* 5. "Ready to buy?" band on product pages */
.tc-ready { background: #101418; border-top: 3px solid #f47d12; padding: 36px 0; color: #fff; }
.tc-ready-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.tc-ready-text { flex: 1 1 420px; }
.tc-ready h2 { font-family: "bebas-neue", sans-serif; font-size: 2.4rem; color: #fff; margin: 0 0 6px; }
.tc-ready p { margin: 0; color: #cfd4da; }
.tc-ready-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.tc-ready-buttons .btn { margin-top: 0; border-radius: 4px; }

/* menu: keep each item on one line now that there are six items plus the button */
@media (min-width: 992px) {
  #header .navbar-nav .nav-link { white-space: nowrap; padding: 5px 14px !important; }
}
.tc-featured h2.tc-section-kicker { font-size: 1rem !important; line-height: 1.2; }
@media (max-width: 575.98px) { .tc-card img { aspect-ratio: 16 / 9; } .tc-section-title { font-size: 2.1rem; } }
@media (max-width: 991.98px) { #header .nav-cta { margin-bottom: 18px; } }

/* Dealer Inquiry button: one line, same visual height as the menu row */
#header .nav-cta .btn { white-space: nowrap; padding: 8px 16px !important; line-height: 1.1; }
/* narrower desktops: tighten the menu so logo + 6 items + button stay on one row */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .navbar-nav .nav-link { padding: 5px 8px !important; }
  #header .nav-cta { margin-left: 6px; }
  #header .nav-cta .btn { padding: 7px 12px !important; }
  #header .navbar-brand img { max-width: 290px; height: auto; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* the site sets a 100px minimum per menu link in this range (sized for 5 items) - let them size to their text */
  #header .navbar-nav a.nav-link { min-width: 0; }
  #header #navbarMainNav { padding-left: 8px; }
}
@media (min-width: 1200px) and (max-width: 1339.98px) {
  #header .navbar-nav .nav-link { padding: 5px 10px !important; }
  #header .navbar-brand img { max-width: 340px; height: auto; }
}

/* Accent colour: the site's blue buttons (.btn-blue) become solid white on the dark site; orange only on hover */
.btn-blue { background: #fff; color: #111; border-color: #fff; }
.btn-blue:hover, .btn-blue:focus { background: #f47d12; color: #fff; border-color: #f47d12; }
/* header Dealer Inquiry: the one spot of colour in the header - orange outline, fills on hover */
#header .nav-cta .btn-blue { background: transparent; color: #fff; border: 2px solid #f47d12; }
#header .nav-cta .btn-blue:hover, #header .nav-cta .btn-blue:focus { background: #f47d12; color: #fff; }
.tc-card:hover .tc-card-link { color: #fff; }
/* spec labels ("CALIBER") must not break mid-word when a card is narrow - the value wraps instead */
.tc-stats li span { flex-shrink: 0; word-break: normal; }
/* form fields: the theme's blue focus glow becomes the accent orange */
.form-control:focus { border-color: #f47d12; box-shadow: 0 0 0 .2rem rgba(244,125,18,.35); }