/* CloudPoint brand accent — orange replaces theme pink (#ee5586 → #f36c00) */
:root {
  --cp-orange: #f36c00;
  --cp-magenta: #a5215e;
  --cp-plum: #3f004a;
  --cp-hero-dark: #110c0c;
  --cp-logo-h: 42px;
  --cp-logo-max-w: 190px;
}

/* Cloud Point logo — responsive fit across header / mobile / footer */
.box-container .logo-menu,
.box-container .logo-footer,
.menu-wrap .logo-menu,
.menu-wrap.fixed .logo-menu,
.fullrock .logo-menu,
.fullrock .svg.logo-menu {
  width: auto !important;
  height: var(--cp-logo-h) !important;
  max-width: var(--cp-logo-max-w) !important;
  max-height: var(--cp-logo-h) !important;
  object-fit: contain;
  object-position: left center;
  display: inline-block;
  vertical-align: middle;
}
.menu-wrap .col-2 a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.menu-wrap.fixed {
  --cp-logo-h: 36px;
  --cp-logo-max-w: 160px;
}
.box-container .footer .logo-footer {
  --cp-logo-h: 36px;
  --cp-logo-max-w: 160px;
  margin-bottom: 12px;
  display: block !important;
}
@media (max-width: 991px) {
  :root {
    --cp-logo-h: 34px;
    --cp-logo-max-w: 150px;
  }
  .menu-wrap.fixed {
    --cp-logo-h: 32px;
    --cp-logo-max-w: 140px;
  }
}
@media (max-width: 575px) {
  :root {
    --cp-logo-h: 28px;
    --cp-logo-max-w: 128px;
  }
}

/* Hide Antler watermark graphic if any leftover markup remains */
.box-container .footer .logo-bg,
.box-container img.logo-bg {
  display: none !important;
}

/* Footer brand column — match menu column typography */
.box-container .footer .footer-menu.contact .menu-item,
.box-container .footer .footer-menu .menu-item:not(a) {
  color: #aaaaaa;
}
.box-container .footer .footer-bottom .copyright {
  padding: 18px 0 8px;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}

/* Hard override for pink utility classes when data-color is still "pink" */
[data-color="pink"] .c-pink,
.c-pink {
  color: #f36c00 !important;
}
[data-color="pink"] .bg-pink,
.bg-pink {
  background-color: #f36c00 !important;
}
[data-color="pink"] .btn-default-pink-fill,
.btn-default-pink-fill {
  background-color: #f36c00 !important;
  border-color: #f36c00 !important;
}
[data-color="pink"] .btn-default-pink,
.btn-default-pink {
  color: #f36c00 !important;
  border-color: #f36c00 !important;
}
[data-color="pink"] .golink {
  color: #f36c00 !important;
}
[data-color="pink"] svg #svg-ico {
  fill: #f36c00;
}
[data-color="pink"] svg #svg-concept {
  stroke: #f36c00;
}

/* ---- Hero Flickity fade: kill 1↔2 flicker ---- */
.main-container.slider .silder-container {
  background: #110c0c;
}
.header-main-slider .carousel-cell {
  margin-right: 0 !important;
}
/*
  Theme applies position:absolute; z-index:-1; inset:0 on .total-grad-pink-blue-intense.
  On carousel cells that puts the whole slide behind the page and flashes on fade.
  Keep the gradient fill, restore stacking for the hero only.
*/
.header-main-slider .carousel-cell.total-grad-pink-blue-intense {
  z-index: 0 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  background: linear-gradient(240deg, #110c0c 50%, #3f004a 100%);
}
.header-main-slider.flickity-enabled.is-fade .flickity-slider > .carousel-cell {
  left: 0 !important;
  will-change: opacity;
}
.header-main-slider.flickity-enabled.is-fade .flickity-slider > .carousel-cell.is-selected {
  z-index: 2 !important;
}

/*
  Placeholder topbanner JPGs in the ThemeForest zip are solid gray.
  Use Antler path/pattern style + CloudPoint orange accents instead.
*/
.top-header > .lazyload {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.top-header > .container,
.top-header > .wrapper {
  position: relative;
  z-index: 1;
}
.top-header .img-defaultbanner,
.top-header .fullbgimage {
  display: none !important;
}

/* Shared hero look — same size/padding on product & content pages */
.box-container .top-header.overlay,
.box-container .top-header.overlay-video,
.box-container .top-header:has(.img-defaultbanner),
.box-container .top-header:not(.sec-bg6):not(.total-grad-inverse) {
  background-color: #101820;
  background-image:
    linear-gradient(
      115deg,
      rgba(16, 24, 32, 0.94) 0%,
      rgba(16, 24, 32, 0.72) 42%,
      rgba(243, 108, 0, 0.22) 100%
    ),
    url("../patterns/hero-banner.svg"),
    url("../patterns/exapath-w.svg");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: cover, cover, 900px auto;
  background-position: center, center, center;
  /* Clear sticky header, then keep banners a consistent height */
  padding-top: 130px !important;
  padding-bottom: 56px !important;
  min-height: 420px;
  box-sizing: border-box;
  display: block;
}
.box-container .top-header.overlay:before,
.box-container .top-header.overlay-video:before {
  background-color: rgba(8, 12, 16, 0.28);
}

/* Empty video cover shouldn't stretch heroes unevenly */
.box-container .top-header .banner-video {
  display: none !important;
}

/* Checklist heroes (reseller/hosting/etc) were much taller — compact to 2 cols */
.box-container .top-header .included {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 2px;
  max-width: 560px;
  margin: 18px auto 0;
  text-align: left;
}
.box-container .top-header .included > .mb-3,
.box-container .top-header .included > .h4,
.box-container .top-header .included > h4 {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 10px !important;
  font-size: 1.05rem;
}
.box-container .top-header .included ul {
  margin: 0;
  padding: 0;
}
.box-container .top-header .included ul li {
  font-size: 14px;
  line-height: 1.55;
}

/*
  Antler pulls pricing/filters up into the hero (sec-uping -475px / sec-up -50px).
  Keep cards & filters BELOW the hero — no overlap with headings.
*/
.box-container .sec-uping {
  margin-top: 0 !important;
  padding-top: 56px !important;
  position: relative;
  z-index: 1;
}
.box-container .sec-up {
  margin-top: 0 !important;
}
.box-container .cd-main-content.sec-up {
  margin-top: 0 !important;
  margin-bottom: 80px;
}
.box-container .sec-up-slider {
  margin-top: 0 !important;
  padding-top: 48px !important;
}
/* Product pricing that sat under overlay cards — consistent gap below hero */
.box-container .pricing.special.sec-normal {
  padding-top: 56px !important;
}

/* Side "Features" arrow only made sense with overlapping cards */
.box-container a.godown.gocontent {
  display: none !important;
}

@media (max-width: 991px) {
  .box-container .top-header.overlay,
  .box-container .top-header.overlay-video,
  .box-container .top-header:has(.img-defaultbanner),
  .box-container .top-header:not(.sec-bg6):not(.total-grad-inverse) {
    padding-top: 110px !important;
    padding-bottom: 48px !important;
    min-height: 300px;
  }
  .box-container .top-header .included {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin-top: 14px;
  }
  .box-container .sec-uping,
  .box-container .pricing.special.sec-normal {
    padding-top: 40px !important;
  }
}