/**
 * Beeskraal: shorter parallax / fixed hero banner (LOCAL PROTOTYPE)
 * Caps .header-image-box height, keeps skull readable (cover),
 * desktop background-attachment:fixed; mobile falls back to scroll.
 *
 * TWEAK HEIGHT (edit this file only, hard-refresh beeskraal.test):
 *   Desktop:  height: clamp(MIN, IDEAL_vh, MAX)  — default clamp(240px, 40vh, 460px)
 *             e.g. shorter → clamp(200px, 35vh, 400px); taller → clamp(260px, 45vh, 520px)
 *   Mobile:   @media max-width 768px block — default clamp(180px, 32vh, 320px)
 *             e.g. shorter → clamp(160px, 28vh, 280px)
 * Parallax off: set background-attachment: scroll on .header-image-box
 */

/* --- Sticky black header stays above hero / parallax --- */
#site-navigation.header {
  position: relative;
  z-index: 10050;
  background-color: var(--secondary-theme-color, #151515);
}

/* --- Shorter hero (desktop ~35–45vh) --- */
.header-image-box {
  position: relative;
  z-index: 0;
  height: clamp(240px, 40vh, 460px) !important;
  min-height: 240px;
  max-height: 460px;
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  /* Parallax: banner bg stays while page scrolls */
  background-attachment: fixed !important;
}

.header-image-box:before {
  z-index: 1;
}

.header-image-box .container,
.header-image-box h1,
.header-image-box p,
.header-image-box .crumb-box {
  position: relative;
  z-index: 2;
}

/* Scale titles if ever shown again (currently hidden via Additional CSS) */
.header-image-box h1 {
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  margin: 0;
}

/* --- Content scrolls over hero onto smoke; must be opaque --- */
#content,
#content.mt-5,
.main-wrapper,
.container.main-wrapper,
body .main-wrapper.py-4,
.woocommerce .main-wrapper,
.woocommerce-page .main-wrapper,
.page #content,
.page .entry-content,
body.woocommerce #content,
body.woocommerce-page #content {
  position: relative;
  z-index: 2;
  background-color: #474747 !important;
  background-image: none !important;
}

/* Shop / product archives: let body smoke (custom-background) show through —
   matches live free theme open look. Home/contact keep opaque #474747 above. */
body.woocommerce-shop #content,
body.woocommerce-shop #content.mt-5,
body.woocommerce-shop .main-wrapper,
body.woocommerce-shop .container.main-wrapper,
body.woocommerce-shop .main-wrapper.py-4,
body.post-type-archive-product #content,
body.post-type-archive-product .main-wrapper,
body.post-type-archive-product .container.main-wrapper,
body.post-type-archive-product .main-wrapper.py-4,
body.tax-product_cat #content,
body.tax-product_cat .main-wrapper,
body.tax-product_cat .container.main-wrapper,
body.tax-product_tag #content,
body.tax-product_tag .main-wrapper,
body.tax-product_tag .container.main-wrapper {
  background-color: transparent !important;
  background-image: none !important;
}

/* Product cards match live: transparent over smoke (border from woo-parity) */
body.woocommerce-shop ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.related.products ul.products li.product {
  background-color: transparent !important;
  background-image: none !important;
}

/* Keep Elementor / page sections from going transparent over fixed hero */
.page #content > .container,
.elementor {
  position: relative;
  z-index: 2;
}

/* Footer / site chrome also covers any residual fixed paint */
#colophon,
.footer-sidebars,
.footer-widgets,
.copyright,
footer#colophon,
.site-footer {
  position: relative;
  z-index: 2;
  background-color: #151515;
}

/* --- Mobile / touch: short crop, no fixed (iOS flaky) --- */
@media screen and (max-width: 768px) {
  .header-image-box {
    height: clamp(180px, 32vh, 320px) !important;
    min-height: 180px;
    max-height: 320px;
    background-attachment: scroll !important;
    background-position: center 30% !important;
  }
}

/* Coarse pointers / iOS-ish: never rely on background-attachment:fixed */
@media (hover: none) and (pointer: coarse) {
  .header-image-box {
    background-attachment: scroll !important;
  }
}

/* Safari/iOS touch callout support query — extra safety */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 1024px) {
    .header-image-box {
      background-attachment: scroll !important;
    }
  }
}

/* Prefers-reduced-motion: drop fixed parallax */
@media (prefers-reduced-motion: reduce) {
  .header-image-box {
    background-attachment: scroll !important;
  }
}