/* Force all blog posts to stack in a single column on small screens */
@media (max-width: 767px) {
  .blog-posts {
    display: block !important; /* disables grid/flex behaviour */
  }

  .blog-post {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
  }

  .blog-post .image {
    width: 100%;
    aspect-ratio: 5 / 4; /* keeps consistent image height */
    background-size: cover;
    background-position: center;
  }
}

.bb\:block-background.bb\:block-background--image.cbb-bg-image[style*="rings-background.svg"] {
  background-size: 20% !important;
}

/* ===== Global Top Bar ===== */
#fbf-topbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
  background: #f5f5f5; /* change if needed */
  color: #004745; /* text colour */
  font-size: 14px;
  line-height: 1.2;
}

#fbf-topbar .fbf-topbar-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

#fbf-topbar .fbf-topbar-text{
  font-weight: 600;
  text-align: center;
}

/* ===== Button ===== */
#fbf-topbar .fbf-topbar-cta a,
#fbf-topbar .fbf-topbar-cta .download-link,
#fbf-topbar .fbf-topbar-cta .dlm-download-link{
  display: inline-block;
  background: #004745 !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 6px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* Push content down */
body{
  padding-top: 48px;
}

#main-header{
  top: 48px !important;
}

/* ===== Mobile ===== */
@media (max-width: 767px){

  #fbf-topbar .fbf-topbar-inner{
    flex-direction: column;
    padding: 10px 18px;
    gap: 8px;
  }

  #fbf-topbar .fbf-topbar-text{
    white-space: normal;
    line-height: 1.3;
    max-width: 320px;
    margin: 0 auto;
  }

  body{
    padding-top: 90px;
  }

  #main-header{
    top: 90px !important;
  }
}

/* ===== Fix: keep WP admin bar visible ===== */

/* Desktop admin bar is 32px tall */
body.admin-bar #fbf-topbar{
  top: 32px;
}

/* Mobile admin bar is 46px tall */
@media (max-width: 782px){
  body.admin-bar #fbf-topbar{
    top: 46px;
  }
}