/* 
 * Hero Block Styles
 * Ensures hero blocks extend properly to the top of the viewport
 */
@media (max-width: 768px) {
  .search-filter-field {
    width: 100%;
  }
}
/* Reusable class to make any block extend to the top */
.extends-to-top {
  position: relative;
  top: 0;
  margin-top: -114px !important;
  padding-top: 72px !important; /* Add padding to account for fixed header */
}
/* for pages that have an empty header just to appear behind the nav */
.extends-to-top.nav-bg-layer {
  height: 90px;
  padding-top: 0 !important;
  border-radius: 0.8rem;
}
@media screen and (min-width: 1024px) {
  .extends-to-top.nav-bg-layer {
    height: calc(138px + 1vw);
  }
}

.hero-60 {
  min-height: calc(60vh + 15vw);
}
.hero-70 {
  min-height: calc(70vh + 15vw);
}
.hero-80 {
  min-height: calc(80vh + 15vw);
}

/* Ensure cover blocks extend to the top */
.extends-to-top .wp-block-cover {
  border-radius: 0px !important;
  margin-top: -80px !important; /* Pull the cover block up to the top */
  /* Let the pattern control the padding-top */
}
.extends-to-top .wp-post-image {
  height: 120% !important;
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* hide category lists on mobile as they can't fit*/
@media (max-width: 768px) {
  .extends-to-top .taxonomy-category {
    display: none !important;
  }
}
/* WordPress Admin Bar adjustments for logged-in users */
body.admin-bar .extends-to-top {
  margin-top: -172px !important; /* -140px + 32px admin bar */
  padding-top: 112px; /* 80px + 32px admin bar */
}

body.admin-bar .extends-to-top .wp-block-cover {
  margin-top: -112px !important; /* Pull the cover block up to account for admin bar */
  /* Let the pattern control the padding-top, just add 32px for admin bar */
  padding-top: calc(
    var(--wp--preset--spacing--100) + 152px
  ) !important; /* 120px + 32px admin bar */
}

/* Ensure hero content is properly positioned */
.wp-block-cover.alignfull .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}

/* Hero blocks with 100vh should extend to top */
.wp-block-cover[style*="min-height:100vh"],
.wp-block-cover[style*="min-height: 100vh"] {
  margin-top: 0 !important;
}

/* SVG Cover Block specific styles */
.wp-block-world-habitat-svg-cover-block.alignfull {
  margin-top: 0 !important;
  padding-top: 80px !important;
}

/* Ensure proper stacking context */
.wp-block-cover.alignfull,
.wp-block-world-habitat-svg-cover-block.alignfull {
  position: relative;
  z-index: 1;
}

/* Override any theme constraints that might prevent full width */
.wp-block-group.alignfull {
  max-width: none !important;
  width: 100% !important;
}
/* for mobile make this tall */
.video-hero {
  min-height: 90vh;
}
@media screen and (min-width: 960px) {
  .video-hero {
    aspect-ratio: 16/10 !important;
    min-height: unset !important;
  }
}
/* Mobile adjustments */
@media (max-width: 768px) {
  body {
    padding-top: 60px; /* Smaller padding on mobile */
  }

  .extends-to-top {
    margin-top: -120px !important;
    padding-top: 120px !important;
  }

  .extends-to-top .wp-block-cover {
    margin-top: -120px !important;
    padding-top: 120px !important;
    /* Let the pattern control the padding-top */
  }

  .wp-block-world-habitat-svg-cover-block.alignfull {
    padding-top: 100px !important;
  }
  .extends-to-top.hero .wp-block-cover {
    min-height: 95vh !important;
    justify-content: end;
    flex-direction: column;
  }
}

/* Mobile admin bar adjustments */
@media (max-width: 782px) {
  /* body.admin-bar {
    padding-top: 80px; 
  } */

  /* body.admin-bar .extends-to-top {
    margin-top: -140px !important; 
    padding-top: 140px !important; 
  } */

  /* body.admin-bar .extends-to-top .wp-block-cover {
    margin-top: -140px !important;
    padding-top: calc(
      var(--wp--preset--spacing--100) + 140px
    ) !important; 
  } */
}