/* ============================================================
   eot-crane-suppliers.css
   Minimal companion stylesheet — standard site layout only.
   Adds just: CTA button color (yellow), heading color (violet),
   and FAQ accordion styling. Nothing else is overridden.
   ============================================================ */

:root{
  --vc-violet:#4f4c83;
  --vc-yellow:#f9e606;
  --vc-yellow-dark:#e0cf00;
}

/* Headings: violet, per brand palette */
.pro-sec .title-a{
  color:var(--vc-violet);
}
.pro-sec h3{
  color:var(--vc-violet);
  font-size:1.3rem;
  margin-top:1rem;
}

/* ---- Hero: this page's hero has an extra CTA button between the title
   and breadcrumb. style.css's .intro-title{top:100px} and
   .breadcrumb ul{bottom:-140px} are relative offsets tuned for a
   title-then-breadcrumb-only hero, so with the button in between they
   caused the button/title/breadcrumb to overlap.

   Removing those offsets fixed the stacking, but it also removed the
   only thing pushing the title down clear of the site's floating header
   (.top-main is position:absolute and .navbar-trans is position:fixed,
   so neither takes up space in normal flow — same root cause as the
   original hero fix). table-cell vertical-centering isn't reliable
   clearance either, since on a shorter browser window it centers the
   whole block much closer to the top.

   Fix: anchor content to the TOP of the hero (not vertically centered)
   and give it explicit top padding sized to clear the header at each of
   style.css's own breakpoints — same values used for the earlier
   custom-hero fix, since it's the same header.php in both cases. */
.intro .table-cell{
  vertical-align:top !important;
}
.intro .container{
  padding-top:210px;
}
@media (max-width:1600px){ .intro .container{padding-top:190px;} }
@media (max-width:1300px){ .intro .container{padding-top:180px;} }
@media (max-width:1049px){ .intro .container{padding-top:170px;} }
@media (max-width:990px){ .intro .container{padding-top:160px;} }
/* Below 900px the site's mobile nav (logo + hamburger, fixed at top:0)
   stays roughly the same height all the way down to small phones —
   it does not keep shrinking. Stepping padding-top down further here
   (as the previous version did) clipped the title behind the nav on
   narrow phones. Use one consistent, generous value instead. */
@media (max-width:900px){ .intro .container{padding-top:180px;} }

.intro .intro-title{
  position:static !important;
  top:auto !important;
  margin:0 0 18px !important;
}
.intro .breadcrumb{
  position:static !important;
}
.intro .breadcrumb ul{
  position:static !important;
  bottom:auto !important;
  justify-content:center;
  margin-top:16px;
}

/* CTA button: yellow, per brand palette */
.btn-vc-cta{
  display:inline-block;
  background:var(--vc-yellow);
  color:var(--vc-violet);
  font-weight:700;
  padding:10px 26px;
  border-radius:4px;
  text-decoration:none;
  margin:0 0 18px;
  transition:background .3s ease;
}
.btn-vc-cta:hover,
.btn-vc-cta:focus{
  background:var(--vc-yellow-dark);
  color:var(--vc-violet);
  text-decoration:none;
}

/* FAQ accordion */
.vc-accordion .panel{
  border:1px solid #e7ebf1;
  border-radius:6px !important;
  margin-bottom:12px;
  box-shadow:none;
  overflow:hidden;
}
.vc-accordion .panel-heading{background:#fff;padding:0;}
.vc-accordion .panel-title a{
  display:block;
  padding:14px 18px;
  font-weight:700;
  color:var(--vc-violet);
  font-size:15px;
  text-decoration:none;
}
.vc-accordion .panel-body{
  color:#5c6774;
  font-size:16px;
  border-top:1px solid #e7ebf1 !important;
  padding:14px 18px;
}

@media (max-width:767px){
  .btn-vc-cta{padding:9px 20px;font-size:14px;}
}