/*
 * Small additions on top of the ported WordPress CSS.
 * Loaded last so it can correct the markup fixes made in the converter.
 */

/* The Locations dropdown toggle became a <button> (it was an anchor pointing
   at javascript:void(0)). Strip the default button chrome so it still looks
   exactly like the nav links beside it. */
.vt-nav-menu button.vt-dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  /* Only font-family needs restating - the browser's default button font is
     not inheritable. Colour, size, weight, spacing and padding are all left
     to .vt-nav-link so the toggle matches the links beside it exactly. */
  font-family: inherit;
}

.vt-nav-menu button.vt-dropdown-toggle:focus-visible,
.vt-nav-menu a:focus-visible,
.vt-footer a:focus-visible {
  outline: 2px solid #4B9BFF;
  outline-offset: 3px;
  border-radius: 3px;
}

/* The breadcrumb trail floats over the top of the hero. Hero top padding
   varies from 110px to 160px across the ported pages, so pin it to one value
   wherever a trail is present and the two can never collide. */
.vt-crumbs + .vt .vt-hero,
.vt-crumbs + .vt .lp-hero,
.vt-crumbs + .vt > section:first-of-type {
  padding-top: 150px !important;
}

/* The header ran in a 1300px/32px container while the page body and footer
   both use .vt-c at 1200px/24px, so the header logo and the CTA button hung
   about 59px outside every other element on the page. Same container for all
   three, so the left edge is a straight line from the logo to the copyright. */
.vt-header-container {
  max-width: 1200px;
  padding: 0 24px;
  /* .vt-c is border-box, this one was not, so 1200 + 48 of padding made it
     1248 wide and the two still would not have lined up. */
  box-sizing: border-box;
}

/* Show which page you are on. */
.vt-nav-menu a[aria-current='page'] {
  color: var(--acc, #1877F2);
}

.vt-footer a[aria-current='page'] {
  text-decoration: underline;
}

/* Images now carry width/height attributes so the browser can reserve space
   for them. Where the ported CSS constrains only one axis - the logos are
   sized by max-height alone - the other axis must stay auto, or the attribute
   width is taken literally and the image stretches. The footer logo did
   exactly that: a 500x500 square rendered at 213x32, a 6.6x horizontal
   stretch that turned the mark into a white smear. */
.vt-logo-link img,
.vt .vt-footer-logo-img {
  width: auto;
  height: auto;
}

.vt img,
.vt-header-wrapper img,
.vt-footer img {
  max-width: 100%;
}

/* ------------------------------------------------------------------
   Footer.

   The footer appears on all 48 pages, but its stylesheet only ever existed
   inside three page-specific CSS files - so on the other 45 pages it rendered
   as an unstyled stack. Hoisted here, where every page gets it. The grid is
   also widened from 3 to 5 columns to hold the location links.
   ------------------------------------------------------------------ */
/* Recognition and Featured In */
.vt .vt-footer-recognition {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 0;
}
.vt .vt-footer-recog-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.vt .vt-footer-recog-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.vt .vt-footer-recog-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
}
.vt .vt-footer-recog-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 44px;
  box-sizing: border-box;
}
.vt .vt-footer-recog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(6, 182, 212, 0.35);
}
.vt .vt-footer-recog-card img {
  max-height: 28px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.vt .vt-footer {
  background: var(--navy, #0B2545);
  color: #fff;
  padding: 70px 0 40px;
}

/* Four tracks, not five. The location column holds 21 cities; as a single
   1fr track it ran 507px tall and left every neighbouring column with ~300px
   of dead space under it. It now gets a wide track and lays its links out in
   two sub-columns, which halves its height and closes the gap. */
.vt .vt-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.7fr;
  gap: 40px 44px;
  margin-bottom: 56px;
}

.vt .vt-footer-brand {
  max-width: 340px;
}

.vt .vt-footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: #fff;
}

.vt .vt-footer-logo-img {
  max-height: 44px;
  display: block;
  flex: none;
}

.vt .vt-footer-brand-name {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.vt .vt-footer-brand-name em {
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.vt .vt-footer-about {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 20px;
}

.vt .vt-footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.vt .vt-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
}

.vt .vt-footer-contact li:last-child {
  margin-bottom: 0;
}

.vt .vt-footer-contact i {
  color: var(--acc, #1877F2);
  margin-top: 4px;
  flex: none;
  width: 14px;
  text-align: center;
}

.vt .vt-footer-contact a {
  color: inherit;
}

/* The USDOT badge lived in three page stylesheets, so on the other 39 pages it
   rendered as two unstyled lines of text instead of a green pill. Hoisted. */
.vt .vanta-fmcsa-badge {
  display: inline-flex;
  flex-direction: column;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
}

.vt .vanta-fmcsa-badge strong {
  color: #10b981;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.vt .vanta-fmcsa-badge small {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

.vt .vt-footer p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.vt .vt-footer a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s ease;
}

.vt .vt-footer a:hover {
  color: var(--acc-lt, #4B9BFF);
}

/* h2 throughout: the columns were a mix of h4 and h6 with nothing above them,
   which gave screen-reader users a broken outline inside the contentinfo
   landmark. They are all peers, so they all get the same level. */
.vt .vt-footer h2,
.vt .vt-footer h4,
.vt .vt-footer h6 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 20px;
}

/* a second heading stacked in the same column needs air above it */
.vt .vt-footer-subhead {
  margin-top: 32px !important;
}

.vt .vt-footer-links {
  list-style: none;
  padding: 0;
}

.vt .vt-footer-links li {
  margin-bottom: 12px;
}

.vt .vt-footer-links a {
  font-size: 14px;
}

/* the generated Services / Company / States / Service Areas columns */
.vt .vt-footer-col .vt-footer-link {
  display: block;
  font-size: 14px;
  margin-bottom: 11px;
}

/* 21 city links read as two shorter columns instead of one tall one */
.vt .vt-footer-links-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.vt .vt-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.vt .vt-footer-bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.vt .vt-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 8px;
}

.vt .vt-footer-bottom-left {
  margin-right: auto;
}

.vt .vt-footer-legal a {
  font-size: 13px;
}

/* ------------------------------------------------------------------
   Narrow-phone overflow.

   A grid item defaults to min-width:auto, so it refuses to shrink below its
   longest unbreakable string. On the contact page the email address is wider
   than a 320px column, which pushed the whole page sideways by 24px on the
   smallest phones still in use. Letting the item shrink and the address wrap
   fixes it without touching the layout at any other width.
   ------------------------------------------------------------------ */
/* Deliberately not scoped under .vt — the contact page is one of the few
   whose content is not wrapped in that container, and it is the page that
   actually overflows. */
[class*='-grid'] > *,
[class*='-card'] {
  min-width: 0;
}

[class*='-card'],
a[href^='mailto:'],
a[href^='tel:'] {
  overflow-wrap: anywhere;
}

/* Payment badges and social icons, same story - page-specific until now. */
.vt .vanta-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vt .vanta-payments span {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 5px;
}

.vt .vt-social {
  display: flex;
  gap: 12px;
}

.vt .vt-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

.vt .vt-social a:hover {
  border-color: var(--acc, #1877F2);
  color: var(--acc, #1877F2);
  background: rgba(24, 119, 242, 0.1);
}

@media (max-width: 1150px) {
  .vt .vt-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 36px 40px;
  }
  /* the wide column drops to its own full-width row, three abreast */
  .vt .vt-footer-col-wide {
    grid-column: 1 / -1;
  }
  .vt .vt-footer-links-2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .vt .vt-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .vt .vt-footer-links-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .vt .vt-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .vt .vt-footer-brand {
    max-width: none;
  }
  .vt .vt-footer-bottom {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Article and FAQ Accordion Enhancements */
.vt .vt-faq-item {
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 12px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vt .vt-faq-item.open,
.vt .vt-faq-item.active {
  border-color: #1877F2 !important;
  box-shadow: 0 4px 20px rgba(24, 119, 242, 0.08);
}

/* ═══════════════════════════════════════════════════════
   UNIVERSAL ROBUST FAQ ACCORDION ENGINE
   ═══════════════════════════════════════════════════════ */
.vt-faq-item,
.vt .vt-faq-item,
.faq-item {
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.vt-faq-item:hover,
.vt .vt-faq-item:hover,
.faq-item:hover {
  border-color: #CBD5E1;
}

.vt-faq-item.open,
.vt-faq-item.active,
.vt-faq-item.is-open,
.vt .vt-faq-item.open,
.vt .vt-faq-item.active,
.vt .vt-faq-item.is-open,
.faq-item.open,
.faq-item.active,
.faq-item.is-open {
  border-color: rgba(24, 119, 242, 0.4) !important;
  box-shadow: 0 4px 16px rgba(24, 119, 242, 0.06);
}

.vt-faq-q,
.vt .vt-faq-q,
.vt-faq-header,
.faq-question {
  width: 100%;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  background: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: #0B2545;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
}

.vt-faq-q:hover,
.vt .vt-faq-q:hover,
.vt-faq-header:hover,
.faq-question:hover {
  background: #F8FAFC;
}

.vt-faq-a,
.vt .vt-faq-a,
.vt-faq-body,
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
}

.vt-faq-item.open > .vt-faq-a,
.vt-faq-item.active > .vt-faq-a,
.vt-faq-item.is-open > .vt-faq-a,
.vt .vt-faq-item.open > .vt-faq-a,
.vt .vt-faq-item.active > .vt-faq-a,
.vt .vt-faq-item.is-open > .vt-faq-a,
.faq-item.open > .faq-answer,
.faq-item.active > .faq-answer,
.faq-item.is-open > .faq-answer,
.vt-faq-item.active .vt-faq-body,
.vt-faq-item.open .vt-faq-body,
.vt .vt-faq-item.active .vt-faq-body,
.vt .vt-faq-item.open .vt-faq-body {
  max-height: 1200px !important;
}

.vt-faq-ai,
.vt .vt-faq-ai {
  padding: 0 24px 20px;
  font-size: 15px;
  color: #475569;
  line-height: 1.75;
}

.vt-faq-ic,
.vt .vt-faq-ic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(24, 119, 242, 0.1);
  color: #1877F2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.vt-faq-ic i,
.vt .vt-faq-ic i {
  font-size: 11px;
  transition: transform 0.3s ease;
}

.vt-faq-item.open .vt-faq-ic,
.vt-faq-item.active .vt-faq-ic,
.vt-faq-item.is-open .vt-faq-ic,
.vt .vt-faq-item.open .vt-faq-ic,
.vt .vt-faq-item.active .vt-faq-ic,
.vt .vt-faq-item.is-open .vt-faq-ic {
  background: #1877F2 !important;
  color: #ffffff !important;
}

.vt-faq-item.open .vt-faq-ic i,
.vt-faq-item.active .vt-faq-ic i,
.vt-faq-item.is-open .vt-faq-ic i,
.vt .vt-faq-item.open .vt-faq-ic i,
.vt .vt-faq-item.active .vt-faq-ic i,
.vt .vt-faq-item.is-open .vt-faq-ic i {
  transform: rotate(45deg) !important;
}

.vt-faq-header i {
  transition: transform 0.3s ease;
}

.vt-faq-item.active .vt-faq-header i,
.vt-faq-item.open .vt-faq-header i {
  transform: rotate(180deg) !important;
}

@media (max-width: 1024px) {
  .vt-home-blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .vanta-toc-list {
    grid-template-columns: 1fr !important;
  }
  .vt .vt-c > div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .vt-home-blog-grid {
    grid-template-columns: 1fr !important;
  }
}