/* Bambauer Towing theme. Loaded after site.css.
   Built from the logo: heavy italic lettering, royal blue and neon green with a black outline and white inner stroke, thin green rules and diamond plate. */

:root {
  --arrow: #19e619;
  --arrow-hi: #5dff5d;
  --arrow-dark: #0d9a0d;
  --blue: #0a14f0;
  --blue-hi: #4d5bff;
  --navy: #070b33;
  --navy-2: #0a1050;
  --arrow-black: #0b0d0f;
  --chrome: #c9ced3;
  --logo-magenta: #19e619;
  --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) url(../img/diamond-plate.png) 0 0 / 56px 56px;
}
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; }

/* ---------- the swoosh from the logo, sweeping behind the home page title ---------- */
.hero { overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M-6 6 C 28 26 62 34 106 18' fill='none' stroke='%2319e619' stroke-width='30' vector-effect='non-scaling-stroke' stroke-linecap='butt'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
  opacity: .95;
}

/* ---------- 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: #2b3bff; }
.mo-yellow { color: #ffd21f; }