/* Middstate Towing theme. Loaded after site.css.
   Built from the logo: heavy italic slab lettering, logo yellow, charcoal oval with a white inner stroke,
   the Vermont shape in teal, slanted stripes and diamond plate. */

:root {
  --mid: #f8d820;
  --mid-hi: #ffe451;
  --mid-dark: #b39500;
  --mid-black: #1b1b1b;
  --chrome: #c9ced3;
  --vt-teal: #3a8f7c;
  --font-head: "Bitter", Georgia, "Times New Roman", serif;
  /* the arrow shape: notched tail on the left, point on the right (the shapes beside "ARROW" in the logo) */
  --arrow-shape: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 12px 50%);
  --chevron-shape: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 32% 50%);
}

/* ---------- 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: three slanted stripes that match the italic slant of the logo lettering ---------- */
.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 {
  content: "";
  display: block;
  width: 150px;
  height: 15px;
  margin: .7rem 0 1.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 136 14%22%3E%3Cpolygon fill=%22%23f8d820%22 points=%226%2C0 76%2C0 70%2C14 0%2C14%22/%3E%3Cpolygon fill=%22%23f8d820%22 points=%2283%2C0 109%2C0 103%2C14 77%2C14%22/%3E%3Cpolygon fill=%22%23f8d820%22 points=%22122%2C0 134%2C0 128%2C14 116%2C14%22/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  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; }

/* ---------- arrow-tip bullets: the same tip as the buttons, on every list in the page content ---------- */
.content ul:not(.nav) { list-style: none; padding-left: 0; }
.content ul:not(.nav) li { position: relative; padding-left: 1.45rem; margin-bottom: .2rem; }
.content ul:not(.nav) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .36em;
  width: .62em;
  height: .8em;
  margin-left: .1em;
  background: var(--mid);
  clip-path: var(--chevron-shape);
}

/* ---------- 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(--mid);
  color: var(--mid-black);
  border: 2px solid #fff;
  border-radius: 50rem;
  box-shadow: 0 0 0 3px var(--mid-black);
  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(--mid-hi);
  color: var(--mid-black);
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--mid-black);
  transform: translateY(-1px);
}
.btn.btn-brand-primary:active, .btn.btn-gold-round:active { background: #fff; color: var(--mid-black); }
.btn.btn-brand-outline {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mid);
  border: 2px solid var(--mid);
  border-radius: 50rem;
  box-shadow: 0 0 0 3px var(--mid-black);
  margin: 3px;
}
.btn.btn-brand-outline:hover, .btn.btn-brand-outline:focus-visible { background: var(--mid); color: var(--mid-black); }
.btn.btn-brand-primary::after, .btn.btn-brand-outline::after, .btn.btn-gold-round::after {
  content: "";
  display: inline-block;
  width: .62em;
  height: .8em;
  margin-left: .55em;
  background: currentColor;
  clip-path: var(--chevron-shape);
  vertical-align: -.05em;
}
.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: only the header, the footer and the Move Over banner. Everything else is solid dark. ---------- */
.nav-wrapper {
  background: var(--mid-black) url(../img/diamond-plate.png) 0 0 / 56px 56px;
  border-bottom: 4px solid var(--mid);
}
footer.footer {
  background: var(--mid-black) url(../img/diamond-plate.png) 0 0 / 56px 56px !important;
  border-top: 4px solid var(--mid);
}
.trust-bar { background: var(--mid-black); border-top: 3px solid var(--mid); border-bottom: 3px solid var(--mid); }
.bg-page-rest-section { background: #262626; }
.review-badge-section { background: var(--mid-black); border-top: 3px solid var(--mid); border-bottom: 3px solid var(--mid); }
.fleet-section { background: #262626; }
.partner-gallery { background: var(--mid-black); }

/* ---------- cards, steps and icons ---------- */
.cx-card { background: #2f2f2f; border-left: 6px solid var(--mid); border-top: 1px solid rgba(255, 255, 255, .1); }
.cx-icon { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mid-black); }
.how-num {
  border-radius: 0;
  width: 2.9rem;
  flex-basis: 2.9rem;
  background: var(--mid);
  clip-path: var(--arrow-shape);
  padding-right: 8px;
}
.fleet-tile figcaption { font-size: 1.05rem; border-bottom: 4px solid var(--mid); }
.trust-item strong { font-size: 1rem; letter-spacing: .03em; }
.faq details { border: 2px solid rgba(255, 255, 255, .22); border-left: 6px solid var(--mid); 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(--mid) !important; }
.request-form-card { border-radius: 0; box-shadow: 0 0 0 3px var(--mid-black); }

.hero { overflow: hidden; }

/* ---------- mobile call bar and floating buttons ---------- */
.mobile-call-bar { background: var(--mid); color: var(--mid-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(--mid-black); }
.mobile-call-bar:hover, .mobile-call-bar:focus { background: var(--mid-hi); color: var(--mid-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(--mid-hi) !important;
}
footer.footer a:hover .contact-icon, a.footer-item:hover .contact-icon { color: var(--mid-hi) !important; }

/* ---------- home page hero: charcoal field with a soft yellow glow behind the truck, no photo and no swipe ---------- */
.hero.hero-home { background: radial-gradient(ellipse at 72% 55%, rgba(248, 216, 32, .20), rgba(248, 216, 32, 0) 55%), linear-gradient(180deg, #2b2b2b, #1b1b1b); }
.hero.hero-home:after { display: none; }

/* ---------- Middstate details ---------- */
h1, h2, h3, .card-title, .cx-phone, .request-form-card h2, .fleet-tile figcaption, .how-num, .trust-item strong { font-weight: 800; }
.cx-card { border-left-color: var(--vt-teal); }
.fleet-tile figcaption { border-bottom-color: var(--vt-teal); }
.how-num { clip-path: none; border-radius: 50%; width: 2.9rem; height: 2.9rem; padding-right: 0; color: var(--mid-black); }
.btn.btn-brand-primary, .btn.btn-brand-outline, .btn.btn-gold-round { padding-left: 1.4rem; padding-right: 1.4rem; }
.trust-bar { border-top-color: var(--vt-teal); border-bottom-color: var(--vt-teal); }
.nav-wrapper { border-bottom-color: var(--mid); }
.navbar-logo img, img.navbar-logo { max-height: 88px; width: auto; }
.hero-home .hero-truck { filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .65)); }

/* Law enforcement block on the home page: same title divider and link color as the other sections, none of the tall photo-section sizing */
.law-section h2::after { content: ""; display: block; width: 150px; height: 15px; margin: .7rem auto 1.15rem; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 136 14%22%3E%3Cpolygon fill=%22%23f8d820%22 points=%226%2C0 76%2C0 70%2C14 0%2C14%22/%3E%3Cpolygon fill=%22%23f8d820%22 points=%2283%2C0 109%2C0 103%2C14 77%2C14%22/%3E%3Cpolygon fill=%22%23f8d820%22 points=%22122%2C0 134%2C0 128%2C14 116%2C14%22/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
.law-section a:not(.btn) { color: var(--mid); }

/* Live service area map (MapLibre). Fallback is the static SVG inside the same box. */
#service-map { position: relative; aspect-ratio: 5 / 6; width: 100%; max-width: 700px; margin: 0 auto; border: 3px solid var(--mid); background: #2a2a2a; overflow: hidden; }
#service-map .map-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#service-map.map-ready .map-fallback { display: none; }
@media (max-width: 767.98px) { #service-map { aspect-ratio: 4 / 5; } }
.map-hq { display: flex; align-items: center; gap: .45rem; pointer-events: none; }
.map-hq-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--mid); border: 3px solid #111; box-shadow: 0 0 0 6px rgba(248, 216, 32, .28); flex: 0 0 auto; position: relative; }
.map-hq-dot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #111; }
.map-hq-tag { background: var(--mid); color: #111; border: 2.5px solid #111; padding: .2rem .55rem; line-height: 1.15; text-align: left; white-space: nowrap; }
.map-hq-tag strong { display: block; font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: .8rem; letter-spacing: .02em; }
.map-hq-tag em { display: block; font-style: normal; font-weight: 700; font-size: .72rem; }
.maplibregl-ctrl-attrib { font-size: 10px; }