/* === Base header styling (keep) === */
#site-header { border-bottom: none; }
.bg-white { color: white !important; }

/* ====== HOME: transparent at the very top ====== */
body.home header.site-header,
body.home .ast-primary-header-bar,
body.home .main-header-bar,
body.home .elementor-location-header {
  background: rgba(255,255,255,0) !important;
  position: absolute;
  top: 0; left: 0; width: 100%;
  z-index: 99;
  box-shadow: none !important;
}

/* ====== AFTER SCROLL (sticky active) & ALL NON-HOME PAGES ======
   Cover Astra sticky variants to be safe across versions
*/
body.ast-sticky-active .ast-primary-header-bar,
body.ast-sticky-active .main-header-bar,
body.ast-header-sticky .ast-primary-header-bar,
body.ast-header-sticky .main-header-bar,
.ast-sticky-active .ast-primary-header-bar,
.ast-sticky-shrunk .ast-primary-header-bar,
body:not(.home) .ast-primary-header-bar,
body:not(.home) .main-header-bar,
body:not(.home) header.site-header,
body:not(.home) .elementor-location-header {
  background: rgba(15,108,132,0.85) !important; /* Kingfisher blue */
  position: relative;
  width: 100%;
  z-index: 99;
  box-shadow: none !important;
}

/* Menu/link colours (works for both states) */
header.site-header a,
.ast-primary-header-bar a,
.main-header-bar a,
.elementor-location-header a,
.menu-toggle,
.ast-mobile-menu-trigger {
  color: #ffffff !important;
}

/* ====== HOME HERO (Welcome) ======
   Give the Welcome section this class in Elementor > Advanced > CSS Classes: kfh-hero
*/
.kfh-hero {
  padding-top: 120px !important;      /* space under transparent header */
  padding-bottom: 20px !important;
  min-height: 300px !important;
  background-size: contain !important; /* show whole artwork */
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  overflow: hidden;
}

/* Smaller hero on phones */
@media (max-width: 768px) {
  .kfh-hero {
    padding-top: 100px !important;
    min-height: 220px !important;
  }
}

/* Remove any stray gap above first Elementor section */
.elementor-section.elementor-top-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===== Scroll-to-top button: make it small everywhere ===== */
.scroll-top,
.elementor-widget-scroll-top,
.et_pb_scroll_top,
#scroll-to-top,
.e-scroll-to-top,
.e-scroll-to-top-button,
.elementor-scroll-top,
.elementor-go-to-top,
.back-to-top,
.to-top,
.scrollup {
  width: 30px !important;
  height: 30px !important;
  right: 14px !important;
  bottom: 14px !important;
  border-radius: 6px !important;
}

.scroll-top i,
.scroll-top svg,
#scroll-to-top i,
#scroll-to-top svg,
.e-scroll-to-top svg {
  font-size: 16px !important;
  line-height: 30px !important;
}