/*
  Overrides for the faithful Audeck "Home One" port.

  The template sized many images by their intrinsic file dimensions (it ships
  small, pre-cropped art and has no width rules on logos / service / banner
  images). Our real source images are large, and astro:assets stamps their
  intrinsic width/height onto the <img>, so without these caps they render at
  full size. These rules fit his photos/logos into the template's slots.
  Loaded LAST so it wins over style.css / responsive.css / theme-dark.css.
*/

/* --- Logos (template logo is ~160px; ours are ~1600px masters) --- */
.navbar-light .navbar-brand .logo-one,
.navbar-light .navbar-brand .logo-two {
  max-width: 175px;
  height: auto;
}
.mobile-nav .logo img {
  max-width: 150px;
  height: auto;
}
footer .footer-logo > a img {
  max-width: 185px;
  height: auto;
}

/* --- Banner: remove the gold diagonal shape behind the hero --- */
.banner-area:before,
.banner-area:after {
  display: none !important;
  content: none !important;
}

/* --- Banner: his hero is the right-aligned slot (nth-child 2) --- */
.banner-area .banner-img img:nth-child(2) {
  height: auto;
  border-radius: 6px;
}
@media (max-width: 767px) {
  .banner-area .banner-img img:nth-child(2) {
    border-radius: 0;
  }
}

/* --- Service cards: uniform photo crop --- */
.service-item .service-img {
  overflow: hidden;
}
.service-item .service-img img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

/* --- Service cards: let the black content box cover less of the photo. The
   template stacks a big 55px icon above the title (tall box, -100px overlap);
   put the icon and title on one line and shrink the overlap so more image
   shows. --- */
.service-item .service-content {
  margin-top: -60px;
}
.service-item .service-content .service-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.service-item .service-content .service-head i {
  font-size: 34px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.service-item .service-content .service-head h3 {
  margin-bottom: 0;
}

/* --- Back-to-top FAB: center the Lucide arrow SVG (was a font glyph) --- */
.back-to-top-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.back-to-top-btn i svg {
  display: block;
}

/* --- Quality photo occupies the "car" slot --- */
.quality-area .quality-img img:nth-child(3) {
  max-width: 620px;
  height: auto;
  border-radius: 8px;
}

/* --- Work gallery: uniform tile crop (template relied on pre-sized art) --- */
.work-area .work-item {
  overflow: hidden;
}
.work-area .work-item img {
  height: 300px;
  object-fit: cover;
}

/* --- Subscribe/CTA card is pulled up 100px (top:-100px) to overlap the
   section above it; the template had a Blog section there. We end on the
   Review section, so add clearance below it to prevent the overlap. --- */
.review-area {
  margin-bottom: 130px;
}

/* --- Page background: use the banner's near-black (#030303) instead of the
   template's lighter #1d1d1d, so the whole page reads as one dark field with
   the #252525 cards/bands standing out against it. --- */
.theme-dark body {
  background: #000000;
}
/* The banner and sticky nav shipped at #030303 (near-black); make them pure
   black too so the whole page reads as one black field. */
.banner-area {
  background-color: #000000;
}
.theme-dark .main-nav {
  background-color: #000000;
}

/* --- Navbar links: bold across both themes. --- */
.main-nav nav .navbar-nav .nav-item a {
  font-weight: 700;
}

/* --- Primary CTA buttons: the yellow "fill green on hover" buttons shipped at
   font-weight 500, so they read lighter than the bold navbar phone button.
   Bold them everywhere they appear (hero, footer, coming-soon, cards). --- */
.cmn-btn .banner-btn-left {
  font-weight: 700;
}

/* --- Mobile nav (meanmenu): the template ships no dark-theme styles for it,
   so on small screens the bar + dropdown rendered white with grey-blue links
   ("switches back to light mode"). Match it to the black navbar. --- */
.theme-dark .mean-container .mean-bar,
.theme-dark .mean-container .mean-nav {
  background-color: #000000;
}
.theme-dark .mean-container .mean-nav ul li a,
.theme-dark .mean-container .mean-nav ul li li a {
  color: #ffffff;
  font-weight: 700;
  border-top-color: rgba(255, 255, 255, 0.1);
}
.theme-dark .mean-container .mean-nav ul li a:hover {
  color: #fdb819;
}

/* --- Remove decorative shadow/shape artwork sitewide. Wheels (tyre.png) are
   intentionally kept. These are all hidden (not removed from the DOM) so the
   template's nth-child photo targeting in the sections stays intact. --- */
.process-area .process-shape,     /* faint car "shadow" behind the process wheel */
footer .footer-img,               /* red car ghost behind the footer */
.subscribe-area .subscribe-shape, /* grey tyre by "Need mobile truck repair now?" */
.review-area .review-shape,       /* shape behind the reviews */
.feature-area .feature-shape,     /* shape behind the features band */
.quality-area .quality-img img:nth-child(1),
.quality-area .quality-img img:nth-child(2) { /* quality-shape.png (photo is child 3) */
  display: none !important;
}

/* Stop the quality photo from bouncing (template floats it ±40px vertically). */
.quality-area .quality-img img:nth-child(3) {
  animation: none;
}

/* --- Address band + footer final-CTA (subscribe) panels: pull them down from
   the template's #252525 to a darker gray so they sit closer to the near-black
   page. Kept a touch above the page (#030303) so the card edge still reads. --- */
.theme-dark .address-area .row {
  background-color: #000000;
}
.theme-dark .subscribe-area {
  background-color: #000000;
}
/* Final CTA ("Need mobile truck repair now?"): larger, italic heading and a
   bigger lead paragraph so it carries more weight above the buttons. */
.subscribe-area h2 {
  font-style: italic;
  font-size: 46px;
}
.subscribe-area p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 19px;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .subscribe-area h2 {
    font-size: 30px;
  }
  .subscribe-area p {
    font-size: 17px;
  }
}

/* --- Drop shadows: the template's were light grey and very broad (20px blur,
   no offset). Make them darker and tighter so panels lift cleanly on dark. --- */
.address-area .row {
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.75);
}
.theme-dark .subscribe-area {
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.75);
}
.main-nav.menu-shrink {
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.5);
}

/* --- Contact page: the template's body copy runs small (14-15px). Nudge the
   intro paragraph, the contact-details list, and the form field text up a step
   so the page reads comfortably. Headings are left alone. --- */
.contact-area .contact-left p {
  font-size: 16px;
}
.contact-area .contact-left ul li {
  font-size: 17px;
}
.contact-area .contact-right .form-group .form-control {
  font-size: 16px;
}

/* --- Interior pages: match the page-title band to the pure-black page field
   (template ships #030303) and hide the faint decorative car silhouette on a
   truck site. --- */
.page-title-area {
  background-color: #000000;
}
.page-title-area img {
  display: none;
}

/* --- Coming-soon used as an in-page section (wrapped by nav + footer): the
   template made .coming-item a full 100vh screen. Relax it so it sits between
   the navbar and footer, clearing the fixed nav at the top. --- */
.coming-area .coming-item {
  height: auto;
  padding-top: 150px;
  padding-bottom: 110px;
}
.coming-area .coming-text .cmn-btn {
  margin-bottom: 35px;
}