@charset "UTF-8";
/* ============================================================
   WCVS Blog CTA & Callout Box Styles
   Originally reverse-engineered from the Shopify theme, since
   improved and made properly responsive for BigCommerce (Vault Cool).
   Wrapper class confirmed against the live BigCommerce preview:
   Vault Cool wraps blog post content in .blog-post-body
   ============================================================ */
/* ---- Buttons used inside CTA boxes ---- */
.cust-btn {
  background: #0f68be;
  color: white;
  text-transform: uppercase;
  font-weight: 500;
  padding: 13px 25px;
  margin-right: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 7px;
  transition: 0.4s;
  border: none;
  text-decoration: none; }

.cust-btn img {
  display: inline !important;
  margin: 0 0 0 10px !important; }

/* ---- Light gray info / callout box ---- */
.bg-box-holder {
  background: whitesmoke;
  padding: 40px 42px;
  border-radius: 12px;
  margin-bottom: 35px; }

.bg-box-holder h2 {
  margin-top: 0 !important; }

/* ---- Full-width colored CTA banner ----
   Fixed: robust viewport-relative centering (works regardless of the
   theme's container width) instead of a Shopify-grid-specific calc(). */
.cus-cta-box {
  margin-top: 45px;
  text-align: center;
  border-radius: 10px;
  padding: 80px 70px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box; }

.cus-cta-box.cta-full-width {
  border-radius: 0 !important;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box; }

/* Prevent the full-bleed technique above from ever causing horizontal scroll */
html, body {
  overflow-x: hidden; }

.cus-cta-box p,
.cus-cta-box h5,
.cus-cta-box h3 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto; }

.cus-cta-box h3 {
  margin-top: 15px !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
  letter-spacing: -0.8px; }

.cus-cta-box h5 {
  line-height: 1.4 !important; }

.cus-cta-box p {
  line-height: 1.5 !important; }

/* Blue variant (the main CTA color used sitewide) */
.cta-primary {
  background: #0f68be; }

.cta-primary h5,
.cta-primary h3 {
  color: white; }

.cta-primary p {
  color: white !important; }

/* White button used inside CTA boxes, turns orange on hover */
.cus-cta-box .cust-btn {
  margin-right: 0 !important;
  text-decoration: none !important;
  margin-top: 10px !important; }

.cus-btn-white {
  background: white !important;
  color: black !important; }

.cta-primary .cus-btn-white:hover {
  background: #f2901d !important;
  color: white !important; }

/* Decorative dotted corner graphics — OPTIONAL.
   Hidden below 768px so they never collide with wrapped text on mobile. */
.cus-cta-box::before {
  content: "";
  width: 120px;
  height: 170px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url("REPLACE_WITH_BC_IMAGE_URL/dotted-shape-left.png") right top/cover no-repeat !important; }

.cus-cta-box::after {
  content: "";
  width: 120px;
  height: 170px;
  position: absolute;
  top: 0;
  right: 0;
  background: url("REPLACE_WITH_BC_IMAGE_URL/dotted-img-right.png") left bottom/cover no-repeat !important; }

.cus-cta-box.cta-warning::before,
.cus-cta-box.cta-warning::after {
  filter: invert(63%) sepia(15%) saturate(3405%) hue-rotate(350deg) brightness(100%) contrast(91%);
  opacity: 0.2; }

/* ---- Blog post body typography ---- */
/* Confirmed wrapper class: .blog-post-body (Vault Cool theme) */
.blog-post-body,
.blog-post-body p,
.blog-post-body li,
.blog-post-body span {
  color: #282828 !important;
  font-size: 18px !important;
  line-height: 25px !important; }

.blog-post-body p {
  margin-top: 0 !important;
  margin-bottom: 15px !important; }

.blog-post-body h2 {
  color: #282828 !important;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 15px;
  display: block;
  margin-top: 55px !important;
  scroll-margin-top: 100px;
  /* keeps a sticky header from covering the heading when a TOC link jumps to it */ }

.blog-post-body h3 {
  font-size: 21px !important;
  margin-bottom: 12px !important;
  margin-top: 30px !important;
  scroll-margin-top: 100px; }

.blog-post-body h4 {
  font-size: 16px !important;
  margin-bottom: 12px !important; }

/* ============================================================
   RESPONSIVE / MOBILE FIXES
   Root cause of the mobile "text overlapping" bug: the CTA box used
   a fixed 80px/70px padding and a theme line-height smaller than its
   font-size at every screen width, including phones. These rules
   scale padding and font-size down, and force a safe unitless
   line-height, so wrapped headline text never collides with itself
   or with the next element.
   ============================================================ */
@media (max-width: 768px) {
  .cus-cta-box {
    padding: 48px 28px; }
  .cus-cta-box h3 {
    font-size: 22px !important;
    letter-spacing: -0.4px; }
  .cus-cta-box h5 {
    font-size: 14px !important; }
  .cus-cta-box p {
    font-size: 15px !important; }
  .bg-box-holder {
    padding: 28px 22px; }
  .blog-post-body h2 {
    font-size: 23px;
    margin-top: 40px !important; }
  /* Decorative corners are pure decoration and just eat into already-tight
     mobile space, so they're dropped below tablet width. */
  .cus-cta-box::before,
  .cus-cta-box::after {
    display: none; } }

@media (max-width: 480px) {
  .cus-cta-box {
    padding: 36px 20px; }
  .cus-cta-box h3 {
    font-size: 19px !important; } }

/* ============================================================
   BLOG FEATURED / THUMBNAIL IMAGE FIX
   Theme JS adds a "noImage" class to .blog-post-figure even when
   the post has a thumbnail, and theme CSS then hides it with
   display:none. The blog-post template only outputs the
   <figure class="blog-thumbnail"> markup when a thumbnail exists,
   so forcing the figure to show safely restores featured images.
   ============================================================ */
.blog-post-figure.noImage {
  display: block !important; }

.blog-post-figure.noImage .blog-thumbnail,
.blog-post-figure.noImage .blog-thumbnail img {
  display: block !important; }

/* ============================================================
   BLOG FEATURED / THUMBNAIL IMAGE SIZE FIX
   The theme caps .blog-thumbnail at max-width:390px, so the
   featured image renders half-size inside the 790px figure.
   Let the thumbnail and its image fill the figure width so the
   featured image displays at full/correct size.
   ============================================================ */
.blog-post-figure .blog-thumbnail,
.blog-post-figure.noImage .blog-thumbnail {
  max-width: 100% !important;
  width: 100% !important; }

.blog-post-figure .blog-thumbnail img,
.blog-post-figure.noImage .blog-thumbnail img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important; }