/* G-Vegas Towing theme. Loaded after site.css.
   Built from the logo: heavy lettering in purple with a yellow outline on black, chain art. */

:root {
  --arrow: #ffdd00;
  --arrow-hi: #fff176;
  --arrow-dark: #c9a800;
  --blue: #5b2a8c;
  --blue-hi: #a77be0;
  --navy: #120a1c;
  --navy-2: #22103a;
  --arrow-black: #0b0d0f;
  --chrome: #c9ced3;
  --logo-magenta: #ffdd00;
  --font-head: "Barlow", "Arial Black", Impact, sans-serif;
}

/* ---------- lettering ---------- */
h1, h2, h3, .card-title, .cx-phone, .request-form-card h2, .fleet-tile figcaption, .how-num, .trust-item strong {
  font-family: var(--font-head) !important;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
}
h1, h2 { line-height: 1.05; }
article.content h1, article.content .h1 { font-size: 2.2rem; }
@media (min-width: 768px) { article.content h1, article.content .h1 { font-size: 2.9rem; } }
h2 { font-size: 1.9rem; }
@media (min-width: 768px) { h2 { font-size: 2.3rem; } }
.card-title { font-size: 1.35rem !important; }
.request-form-card h2 { font-size: 1.5rem; }

/* page titles: plain white heavy italic with a soft shadow (toned down) */
.hero h1, .content-section.featured-top h1 {
  color: #fff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .65);
  letter-spacing: .01em;
}

/* ---------- the divider under every section title: one short flat green bar ---------- */
.content h2::after, .services-gallery h2::after, .featured-service-area h2::after, .request-section h2::after,
.partner-gallery h2::after, .fleet-section h2::after, .review-badge-section h2::after, .why-section h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: .7rem 0 1.15rem;
  background: var(--arrow);
  clip-path: none;
}
.text-center h2::after, h2.text-center::after { margin-left: auto; margin-right: auto; }
.request-form-card h2::after, .faq h2::after, .cx-card h2::after { display: none; }

/* ---------- bullets: small flat green squares ---------- */
.content ul:not(.nav) { list-style: none; padding-left: 0; }
.content ul:not(.nav) li { position: relative; padding-left: 1.3rem; margin-bottom: .2rem; }
.content ul:not(.nav) li::before {
  content: "";
  position: absolute;
  left: .1em;
  top: .62em;
  width: .5em;
  height: .5em;
  background: var(--arrow);
}

/* ---------- buttons: green, black outline, white inner stroke, arrow tip ---------- */
.btn.btn-brand-primary, .btn.btn-gold-round {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--arrow);
  color: var(--arrow-black);
  border: 2px solid var(--arrow);
  border-radius: .15rem;
  margin: 3px;
}
.btn.btn-brand-primary:hover, .btn.btn-brand-primary:focus-visible,
.btn.btn-gold-round:hover, .btn.btn-gold-round:focus-visible {
  background: var(--arrow-hi);
  color: var(--arrow-black);
  border-color: var(--arrow-hi);
}
.btn.btn-brand-primary:active, .btn.btn-gold-round:active { background: #fff; color: var(--arrow-black); }
.btn.btn-brand-outline {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--arrow);
  border: 2px solid var(--arrow);
  border-radius: .15rem;
  margin: 3px;
}
.btn.btn-brand-outline:hover, .btn.btn-brand-outline:focus-visible { background: var(--arrow); color: var(--arrow-black); }
.btn-menu-mobile::after, .btn-sm.btn-brand-primary::after, .btn-sm.btn-brand-outline::after { display: none; }
.btn.btn-brand-primary.btn-sm, .btn.btn-brand-outline.btn-sm { margin: 2px; }

/* ---------- diamond plate: header only. Everything else is solid dark. ---------- */
.nav-wrapper {
  background: var(--arrow-black); border-bottom: 3px solid var(--blue);
}
footer.footer {
  background: var(--arrow-black) !important;
  border-top: 4px solid var(--arrow);
}
.trust-bar { background: var(--blue); border-top: 3px solid var(--arrow); border-bottom: 3px solid var(--arrow-black); }
.bg-page-rest-section { background: var(--navy); }
.review-badge-section { background: var(--navy-2); border-top: 3px solid var(--arrow); border-bottom: 3px solid var(--arrow); }
.fleet-section { background: var(--navy); }
.partner-gallery { background: var(--arrow-black); }

/* ---------- cards, steps and icons ---------- */
.cx-card { background: var(--navy-2); border-left: 6px solid var(--blue-hi); border-top: 1px solid rgba(255, 255, 255, .1); }
.how-num {
  border-radius: 0;
  width: 2.6rem;
  flex-basis: 2.6rem;
  background: var(--arrow);
  color: var(--arrow-black);
}
.fleet-tile figcaption { font-size: 1.05rem; border-bottom: 4px solid var(--arrow); }
.trust-item strong { font-size: 1rem; letter-spacing: .03em; }
.faq details { border: 2px solid rgba(255, 255, 255, .22); border-left: 6px solid var(--blue-hi); border-radius: 0; background: rgba(0, 0, 0, .25); }
.faq summary { font-family: var(--font-head); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; }
.faq summary:after { color: var(--arrow) !important; }
.request-form-card { border-radius: 0; }

/* ---------- mobile call bar and floating buttons ---------- */
.mobile-call-bar { background: var(--arrow); color: var(--arrow-black); font-family: var(--font-head); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-top: 2px solid #fff; border-bottom: 4px solid var(--arrow-black); }
.mobile-call-bar:hover, .mobile-call-bar:focus { background: var(--arrow-hi); color: var(--arrow-black); }

/* ---------- footer hover: light logo green (not gray) ---------- */
footer.footer a:hover, footer.footer a:focus,
.footer-nav li a:hover, .footer-nav li a:focus,
a.footer-item:hover, a.footer-item:focus,
.footer-social-link li a:hover i.footer-social-icon,
.footer-social-link li a:focus i.footer-social-icon,
footer.footer address a:hover, footer.footer .text-reset:hover {
  color: var(--arrow-hi) !important;
}
footer.footer a:hover .contact-icon, a.footer-item:hover .contact-icon { color: var(--arrow-hi) !important; }

/* ---------- home page hero: the night photo of the trucks. Lighter overlay so the trucks show, focus on the truck line ---------- */
.hero.hero-home { background-position: center 62%; }
.hero.hero-home:after { --bs-bg-opacity: .5; }
@media (min-width: 768px) { .hero.hero-home { background-position: center 60%; } }

/* ---------- blue accents from the logo lettering ---------- */
.trust-item i { color: #fff; }
.trust-item strong, .trust-item span { color: #fff; }
.cx-label { color: var(--blue-hi); }
footer.footer { border-top-color: var(--blue); box-shadow: inset 0 4px 0 var(--arrow); }
.hero { background-color: var(--navy); }

.why-section { background: var(--arrow-black); }
.service-map-section iframe { display: block; margin: 0 auto; }

/* ---------- mobile floating buttons and the pulse menu: green instead of black ---------- */
.floating-btn, .click-to-call-btn, .pulse-toggle-btn { background-color: var(--arrow) !important; color: var(--arrow-black) !important; }
.floating-btn:hover, .click-to-call-btn:hover, .pulse-toggle-btn:hover { background-color: var(--arrow-hi) !important; }
.pulse-feature-list li .pulse-icon { background-color: var(--arrow); }
.pulse-feature-list li .pulse-icon i.bi { color: var(--arrow-black); }

/* ---------- slow down and move over banner: lettering on black, no divider ---------- */
.move-over-section { background: #000; padding: 2.2rem 0 2.2rem; }
.move-over-title {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1;
  margin: 0 0 1rem;
  color: #fff;
}
.move-over-copy { color: #c9ced3; max-width: 44rem; margin-left: auto; margin-right: auto; }
.mo-green { color: var(--arrow); }
.mo-blue { color: #a77be0; }
/* Barlow capitals are about .7em tall: the chevron is 10% taller (5% above, 5% below), sitting .035em under the baseline */
.mo-chev { display: inline-block; height: .77em; width: auto; vertical-align: -.035em; margin: 0 .2em; fill: #ffdd00; }

/* ---------- slow down, move over banner: logo style lettering (purple fill, yellow outline) on black with yellow rules ---------- */
.move-over-section { background: #000; padding: 2.4rem 0; border-top: 4px solid var(--arrow); border-bottom: 4px solid var(--arrow); }
.move-over-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .15em .3em; }
.move-over-title .mo-green { color: var(--arrow); -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--blue); }
.move-over-title .mo-blue { color: var(--blue); -webkit-text-stroke: 2px var(--arrow); paint-order: stroke fill; text-shadow: none; }
.mo-chev { fill: var(--arrow); }
.move-over-tow { display: block; margin: 0 auto 1.1rem; max-width: 22rem; height: 12px; background: repeating-linear-gradient(90deg, #c9ced3 0 18px, transparent 18px 26px); border-radius: 6px; opacity: .9; }