/* =========================================================
   X-Pert Fleet — overrides.css
   Loads last to safely override theme defaults.
   ====================================================== */

/* Brand token (used below) */
:root { --brand-blue: #2d9cff; }

/* ---------------------------------
   Header nav: blue underline behavior
----------------------------------*/
.header .nav__list a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: border-color .2s ease;
}
.header .nav__list a:hover,
.header .nav__list a:focus,
.header .nav__list a:focus-visible,
.header .nav__list li.current-menu-item > a,
.header .nav__list li.current-menu-ancestor > a,
.header .nav__list li.current-menu-parent > a,
.header .nav__list li.current_page_item > a,
.header .nav__list li.current_page_parent > a,
.header .nav__list li.current_page_ancestor > a,
.header .nav__list a[aria-current="page"],
.header .nav__list a[aria-current="true"] {
  border-bottom-color: var(--brand-blue);
}

/* ---------------------------------
   Hero: make the image bigger
----------------------------------*/
.hero .container{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 2.5rem;
}
.hero__image{ justify-self: end; max-width: clamp(680px, 48vw, 1080px); }
.hero__image img{ width:100%; height:auto; display:block; max-width:none !important; max-height:none !important; }
@media (min-width:1600px){ .hero__image{ max-width:1200px } }
@media (max-width:960px){
  .hero .container{ grid-template-columns:1fr }
  .hero__image{ justify-self:center; max-width:min(92vw,680px) }
}

/* ---------------------------------
   Why section: blue phone icon
----------------------------------*/
.feature__icon--phone svg path{ fill: var(--brand-blue); }

/* ---------------------------------
   Reviews marquee guards
----------------------------------*/
.reviews-marquee{ overflow:hidden; position:relative }
.reviews-track{ display:flex; gap:16px; will-change:transform }
.review-card--marquee{ min-width:340px; flex:0 0 auto }

.rating-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}
.rating-badge__logo{
  display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:50%; font-weight:800; background:var(--brand-blue); color:#fff; line-height:1;
}
.rating-badge__score{ font-weight:800 }
.rating-badge__outof,.rating-badge__count{ opacity:.8; font-weight:500 }

/* =========================================================
   FACEBOOK PAGE PLUGIN (native look if you use iframe)
   — stripped chrome so it looks like FB; full width.
========================================================= */
.feed-card{ width:100%; padding:0 !important; margin:0 auto; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible }
.fb-wrap{ width:100% !important; max-width:none !important; margin:0 auto !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; overflow:visible !important }
.fb-page,.fb_iframe_widget,.fb_iframe_widget > span,.fb_iframe_widget iframe{ width:100% !important; max-width:100% !important; display:block !important }
@media (max-width:560px){
  .fb_iframe_widget,.fb_iframe_widget > span{ margin-left:0 !important; margin-right:0 !important }
}

/* =========================================================
   CUSTOM FACEBOOK FEED (Graph API) — styles
========================================================= */
.fb-custom-feed{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  width:100%;
}
.fb-post{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  overflow:hidden;
}
.fb-post__img img{ display:block; width:100%; height:auto }
.fb-post__body{ padding:14px 16px 16px }
.fb-post__meta{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.fb-post__page{ display:flex; align-items:center; gap:10px }
.fb-page__avatar{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.15); object-fit:cover }
.fb-page__name{ display:flex; flex-direction:column; line-height:1.15 }
.fb-post__time{ color:#9fb0c0; font-size:12px; font-weight:600 }
.fb-post__permalink{ color:#76b4ff; text-decoration:none; font-weight:700; font-size:13px; white-space:nowrap }
.fb-post__permalink:hover{ text-decoration:underline }
.fb-post__text{ color:#dfe7ee; font-size:15px; line-height:1.5; white-space:pre-wrap }
.fb-mention{ color:#e3efff; font-weight:700 }

@media (min-width:1100px){
  .fb-custom-feed{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (min-width:1600px){
  .fb-custom-feed{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* ======= GLOBAL POLISH ======= */
body{color:#e0e0e0 !important}
h1,h2,h3,h4,h5,h6{color:#ffffff !important}
p,li{line-height:1.6 !important}
.section{padding:64px 0 !important}
.page-sections > .section:nth-of-type(odd){background:#0a0c0f}
.page-sections > .section:nth-of-type(even){background:#0d1014}
.page-sections > .section{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.services-hero{border-bottom:1px solid rgba(255,255,255,.06)}
.services-wrap{border-top:1px solid rgba(255,255,255,.06)}
.service-card{ border-color:rgba(58,124,165,.55) !important; box-shadow:0 2px 8px rgba(0,0,0,.40) !important }
.service-card::after{ background:rgba(0,0,0,.45) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important }
.service-card::before{ opacity:var(--img-opacity,.40) !important; background-size:cover !important }