/* Raleigh Towing & Recovery theme. Loaded after site.css.
   Quiet version: charcoal surfaces, one muted red for actions, soft gold for links, plain bold headings. */

:root {
  --mid: #c8202a;
  --mid-hi: #d9353e;
  --mid-black: #161616;
  --gold: #f8c828;
  --line: rgba(255, 255, 255, .12);
  --font-head: "Mulish", "Segoe UI", Arial, sans-serif;
}

/* ---------- lettering: plain, bold, sentence case ---------- */
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: normal;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
h1, h2 { line-height: 1.15; }
article.content h1, article.content .h1 { font-size: 2rem; }
@media (min-width: 768px) { article.content h1, article.content .h1 { font-size: 2.5rem; } }
h2 { font-size: 1.6rem; }
@media (min-width: 768px) { h2 { font-size: 1.95rem; } }
.card-title { font-size: 1.2rem !important; }
.request-form-card h2 { font-size: 1.25rem; }
.text-uppercase { text-transform: none !important; }

.hero h1, .content-section.featured-top h1 { color: #fff; text-shadow: none; }

/* ---------- racing stripes before titles (the red and gold from the logo) ---------- */
h1::before, h2::before {
  content: "";
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .5em;
  vertical-align: -.06em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpolygon points='8,2 14,2 6,24 0,24' fill='%23c8202a'/%3E%3Cpolygon points='18,2 24,2 16,24 10,24' fill='%23f8c828'/%3E%3C/svg%3E") no-repeat center / contain;
}
.request-form-card h2::before, .cx-card h2::before, .faq h2::before, .visually-hidden::before { display: none; }

/* ---------- bullets: small dots ---------- */
.content ul:not(.nav) { list-style: none; padding-left: 0; }
.content ul:not(.nav) li { position: relative; padding-left: 1.2rem; margin-bottom: .2rem; }
.content ul:not(.nav) li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mid);
}

/* ---------- buttons: flat ---------- */
.btn.btn-brand-primary, .btn.btn-gold-round {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--mid);
  color: #fff;
  border: 1px solid var(--mid);
  border-radius: 6px;
  box-shadow: none;
  margin: 2px;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
}
.btn.btn-brand-primary:hover, .btn.btn-brand-primary:focus-visible,
.btn.btn-gold-round:hover, .btn.btn-gold-round:focus-visible {
  background: var(--mid-hi);
  border-color: var(--mid-hi);
  color: #fff;
}
.btn.btn-brand-primary:active, .btn.btn-gold-round:active { background: #a31a22; color: #fff; }
.btn.btn-brand-outline {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 6px;
  box-shadow: none;
  margin: 2px;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
}
.btn.btn-brand-outline:hover, .btn.btn-brand-outline:focus-visible { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ---------- surfaces ---------- */
.nav-wrapper { background: #141414; border-bottom: 1px solid var(--line); }
footer.footer { background: #141414 !important; border-top: 1px solid var(--line); }
.trust-bar { background: #1b1b1b; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bg-page-rest-section { background: #222; }
.review-badge-section { background: #1b1b1b; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fleet-section { background: #222; }
.partner-gallery { background: #1b1b1b; }
.navbar-logo img, img.navbar-logo { max-height: 84px; width: auto; }

/* ---------- cards, steps and icons ---------- */
.cx-card { background: #2a2a2a; border: 1px solid var(--line); border-radius: 6px; }
.cx-icon { box-shadow: none; }
.how-num { border-radius: 50%; width: 2.6rem; height: 2.6rem; flex-basis: 2.6rem; background: var(--mid); clip-path: none; padding-right: 0; color: #fff; }
.fleet-tile figcaption { font-size: 1rem; border-bottom: 2px solid var(--mid); }
.trust-item strong { font-size: .98rem; }
.faq details { border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .2); }
.faq summary { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; }
.faq summary:after { color: var(--gold) !important; }
.request-form-card { border-radius: 6px; box-shadow: none; border-color: var(--line) !important; }
.request-form-card.border { border-width: 1px !important; }

.hero { overflow: hidden; }
.hero.hero-home { background: linear-gradient(rgba(14, 14, 14, .8), rgba(14, 14, 14, .8)), url(../img/heavy-towing-raleigh-nc-l.webp) center / cover no-repeat; }
.hero.hero-home:after { display: none; }

/* ---------- mobile call bar ---------- */
.mobile-call-bar { background: var(--mid); color: #fff; font-family: var(--font-head); font-weight: 700; letter-spacing: .01em; border: 0; }
.mobile-call-bar:hover, .mobile-call-bar:focus { background: var(--mid-hi); color: #fff; }

/* ---------- links ---------- */
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(--gold) !important; }
footer.footer a:hover .contact-icon, a.footer-item:hover .contact-icon { color: var(--gold) !important; }
.law-section a:not(.btn) { color: var(--gold); }

/* no white showing at the very top or bottom of any page (overscroll, safe areas, gaps above the header) */
html, body { background-color: #141414; margin: 0; }

/* ---------- mobile buttons: logo red with the black and gold ring from the Move Over badge ---------- */
a.click-to-call-btn, button.pulse-toggle-btn {
  background: #e00000 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 0 0 2px #0f0f0f, 0 0 0 4px #f8c828, 0 6px 16px rgba(0, 0, 0, .5);
}
a.click-to-call-btn:hover, a.click-to-call-btn:focus, button.pulse-toggle-btn:hover, button.pulse-toggle-btn:focus { background: #ff1a1a !important; color: #fff !important; }
.mobile-call-bar { background: #e00000; box-shadow: 0 3px 0 #f8c828, 0 6px 14px rgba(0, 0, 0, .5); }
.mobile-call-bar:hover, .mobile-call-bar:focus { background: #ff1a1a; }

/* Dropdown hover gap fix (Nick 2026-11-09): no dead space between menu item and dropdown */
@media (min-width: 768px) {
  .nav.menu .nav-item.dropdown {
    position: relative;
    padding-bottom: 8px;
    margin-bottom: -8px;
  }
  .nav.menu .nav-item.dropdown:hover > .dropdown-menu,
  .nav.menu .nav-item.dropdown:focus-within > .dropdown-menu,
  .nav.menu .nav-item.dropdown.show > .dropdown-menu {
    display: block !important;
    top: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
  }
  .nav.menu .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
  }
}