/* =====================================================================
   MyvanCMS — full-bleed footer + "Let's Talk" call-to-action band
   ---------------------------------------------------------------------
   TWO CHANGES

   1. FULL-WIDTH FOOTER
      palace.css gives .footer a 24px border-radius and site_footer.php wraps it
      in .pl-container.pb-4, so it renders as an inset rounded card with white
      showing down both sides and underneath. This makes it span the viewport:
      the wrapper's width cap and padding are removed and the radius is dropped.
      The INNER .pl-container is untouched, so the footer's columns stay aligned
      with the rest of the page's content.

   2. THE CTA BAND
      A brand-coloured slab that straddles the boundary between the page and the
      footer — white above, dark below, the band overlapping both. It is pulled
      down over the footer with a negative margin and the footer's top padding is
      increased to make room, which is why the two must be tuned together.

   The band uses MyVan's brand maroon, not the bright red of the reference
   screenshot, for the same reason the hero does: the red appears nowhere else in
   this site's palette.

   palace.css / pages.css are NOT edited — this file overrides them and can be
   removed from layouts/public.php to restore the boxed footer exactly.
   ===================================================================== */

:root{
  /* How far the band hangs over the footer. The footer's extra top padding
     below is derived from it, so change this one value and both follow. */
  --cta-overlap:78px;
}

/* =====================================================================
   1. FULL-WIDTH FOOTER
   ===================================================================== */

/*
   The wrapper is .pl-container.pb-4 — a container whose whole job was to inset
   the footer card. Neutralising it here is narrower than editing the markup,
   and it only affects the wrapper that actually contains a footer.
*/
.pl-container.pb-4:has(> .footer){
  max-width:none;
  padding-inline:0;
  padding-bottom:0 !important;   /* .pb-4 is a Bootstrap utility, hence !important */
  margin-inline:0;
  width:100%;
}

.footer{
  border-radius:0;
  /* Room for the band that now overlaps the top edge. */
  padding-top:calc(var(--cta-overlap) + 72px);
}

/*
   :has() is well supported in current browsers, but a footer that loses its
   full-bleed treatment in an older one should still look deliberate rather than
   broken — so the radius and padding are also set directly on .footer above,
   which does not depend on :has() at all.
*/

/* =====================================================================
   2. "LET'S TALK" BAND
   ===================================================================== */

.talk-band-wrap{
  position:relative;
  z-index:3;
  /* Pulls the band down so it sits over the footer's top edge. */
  margin-bottom:calc(var(--cta-overlap) * -1);
}

.talk-band{
  background:var(--pl-brand);
  padding:44px 56px;   /* MPDI: radius removed, see assets/mpdi.css */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  box-shadow:0 30px 70px rgba(23,27,42,.22);
}

.talk-band__title{
  display:flex;
  align-items:center;
  gap:28px;
  margin:0;
  color:#fff;
  font-size:52px;
  line-height:1.05;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.01em;
}

/* The long arrow from the reference. An inline SVG rather than a character:
   "→" renders at wildly different weights across fonts, and this needs to match
   the headline's stroke. */
.talk-band__arrow{
  flex:0 0 auto;
  width:92px;height:26px;
  color:#fff;
}
.talk-band__arrow svg{display:block;width:100%;height:100%}

.talk-band__btn{
  flex:0 0 auto;
  background:#fff;
  color:var(--pl-ink);
  padding:18px 40px;
  font-weight:700;
  font-size:1.0625rem;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.talk-band__btn:hover{
  color:var(--pl-brand);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.talk-band__btn:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

/* =====================================================================
   3. RESPONSIVE
   The band stacks and the overlap shrinks, because a 52px headline plus a
   button cannot sit on one line on a phone.
   ===================================================================== */

@media (max-width:1199.98px){
  .talk-band{padding:36px 40px}
  .talk-band__title{font-size:40px;gap:20px}
  .talk-band__arrow{width:70px;height:22px}
}

@media (max-width:991.98px){
  :root{--cta-overlap:56px}
  .talk-band{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    padding:32px 30px;
  }
  .talk-band__title{font-size:34px}
}

@media (max-width:575.98px){
  :root{--cta-overlap:40px}
  .talk-band{padding:26px 22px}
  .talk-band__title{font-size:26px;gap:14px}
  .talk-band__arrow{width:52px;height:18px}
  .talk-band__btn{width:100%;text-align:center;padding:16px 24px}
}