/* 
 * GrantSiren Resource Detail Override CSS
 * This file styles the resource detail page content only.
 * WordPress header and footer are handled by the theme - no modifications here.
 */

/* Import Urbanist font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Prevent horizontal scrollbar on resource detail pages */
/* This CSS is only loaded on resource detail pages, so it's safe to apply here */
/* Ensure body doesn't allow horizontal scroll when slider moves */
body.page,
body.single,
body.post-type-page {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative !important;
}

/* Ensure main content wrapper doesn't overflow */
.resource-detail-middle,
.client-stories.related-resources,
.resource-social-share-section {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* Force Urbanist font for all resource detail page elements */
.resource-detail-middle,
.resource-detail-middle *,
.inner-hero__flex,
.inner-hero__flex *,
.resource-rich-content,
.resource-rich-content *,
.client-stories.related-resources,
.client-stories.related-resources * {
  font-family: "Urbanist", sans-serif !important;
}

/* WordPress header and footer styling removed - let theme handle all header/footer styles */

/* Disable .main-body overflow that might conflict */
.main-body:not(.resource-detail-middle) {
  overflow: visible !important;
  position: static !important;
}

/* Ensure resource detail page elements remain visible and functional */
.inner-hero,
.inner-hero__bg,
.inner-hero__flex,
.inner-hero__animation,
.breadcrumbs,
.resource-detail-middle,
.resource-detail-flex,
.resource-detail-text,
.client-stories,
.resources-articles,
.related-resources {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Make hero section full width with left and right margins */
.inner-hero {
  width: calc(100% - 80px) !important;
  max-width: calc(100% - 80px) !important;
  padding: 0 !important;
  margin: 4.5rem auto 0 auto !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
  box-sizing: border-box !important;
  display: block !important;
}

.inner-hero__bg {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  min-height: 492px !important;
  height: 492px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* HD Background Image using img tag for better quality */
.inner-hero__bg-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
  /* HD rendering optimizations */
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  will-change: transform !important;
  /* Prevent image blur */
  -webkit-filter: none !important;
  filter: none !important;
}

/* Dark overlay for text readability */
.inner-hero__overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* Content inside hero should have left/right padding */
.inner-hero__flex {
  padding: 0 3rem !important;
  width: 100% !important;
  max-width: 65rem !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
  font-family: "Urbanist", sans-serif !important;
}

.inner-hero__flex label {
  font-family: "Palatino-Italic", serif !important;
  font-style: italic !important;
}

.inner-hero__flex h1 {
  font-family: "Urbanist", sans-serif !important;
}

/* Breadcrumbs styling - positioned below hero */
.breadcrumbs {
  width: calc(100% - 80px) !important;
  max-width: calc(100% - 80px) !important;
  margin: 0 auto !important;
  padding: 1.1rem 0 0.625rem 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

.breadcrumbs .container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Resource detail middle section - full width with margins */
.resource-detail-middle,
.resource-detail-middle.sectionCl {
  width: calc(100% - 80px) !important;
  max-width: calc(100% - 80px) !important;
  margin: 0 auto !important;
  padding: 4rem 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  position: relative !important;
}

/* Subtle pink gradient on left edge */
.resource-detail-middle::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(to right, #f60656, rgba(246, 6, 86, 0.1), transparent) !important;
  z-index: 1 !important;
}

.resource-detail-middle .container,
.resource-detail-middle.sectionCl .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Resource detail flex layout - social icons left, content center */
.resource-detail-flex {
  display: flex !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Social share icons - left sidebar */
.sticky-social-share {
  width: auto !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 2rem !important;
  z-index: 100 !important;
}

.sticky-social-share ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.sticky-social-share ul li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sticky-social-share ul li a {
  width: 2.875rem !important;
  height: 2.875rem !important;
  border-radius: 50% !important;
  border: 1px solid #232323 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.sticky-social-share ul li a:hover {
  background-color: #f60656 !important;
  border-color: #f60656 !important;
}

.sticky-social-share ul li a img {
  width: 1.2rem !important;
  height: 1.2rem !important;
  object-fit: contain !important;
}

.sticky-social-share ul li a:hover img {
  filter: brightness(0) invert(1) !important;
}

/* Resource detail text - main content area */
.resource-detail-text {
  flex: 1 !important;
  max-width: 800px !important;
  width: 100% !important;
}

/* Author and date section */
.detail-date {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 2rem !important;
  font-size: 1rem !important;
  font-family: "Urbanist", sans-serif !important;
  color: #232323 !important;
}

.detail-date .author {
  display: flex !important;
  align-items: center !important;
  margin-right: 1rem !important;
  position: relative !important;
  padding-right: 1.5rem !important;
}

.detail-date .author::after {
  content: '' !important;
  position: absolute !important;
  right: 0.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

.detail-date .author .author-label {
  font-weight: 400 !important;
  color: #232323 !important;
  font-size: 1.3rem !important;
  font-family: "Palatino-Italic", serif !important;
  font-style: italic !important;
  margin-right: 0.5rem !important;
}

.detail-date .author .auther-name {
  font-weight: 500 !important;
  color: #232323 !important;
  font-size: 1.3rem !important;
  font-family: "Palatino-Italic", serif !important;
  font-style: italic !important;
}

.detail-date .pb-date {
  font-size: 1.3rem !important;
  color: #232323 !important;
  font-weight: 400 !important;
  font-family: "Palatino-Italic", serif !important;
  font-style: italic !important;
}

.detail-date .pb-date-label {
  font-family: "Palatino-Italic", serif !important;
  font-style: italic !important;
  font-size: 1.3rem !important;
}

.detail-date .pb-date-value {
  font-family: "Palatino-Italic", serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 1.3rem !important;
}

/* Rich content styling */
.resource-rich-content {
  color: #232323 !important;
  font-family: "Urbanist", sans-serif !important;
  line-height: 1.6 !important;
}

.resource-rich-content h2 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #232323 !important;
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
  line-height: 1.3 !important;
  font-family: "Urbanist", sans-serif !important;
}

.resource-rich-content h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #232323 !important;
  margin-bottom: 1rem !important;
  margin-top: 2rem !important;
  line-height: 1.4 !important;
  font-family: "Urbanist", sans-serif !important;
}

.resource-rich-content h4 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #232323 !important;
  margin-bottom: 0.75rem !important;
  margin-top: 1.5rem !important;
  line-height: 1.4 !important;
  font-family: "Urbanist", sans-serif !important;
}

.resource-rich-content p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #232323 !important;
  margin-bottom: 1.5rem !important;
  font-weight: 400 !important;
  font-family: "Urbanist", sans-serif !important;
}

.resource-rich-content ul,
.resource-rich-content ol {
  margin-bottom: 1.5rem !important;
  padding-left: 1.5rem !important;
  font-family: "Urbanist", sans-serif !important;
}

.resource-rich-content li {
  margin-bottom: 0.5rem !important;
  line-height: 1.6 !important;
  color: #232323 !important;
  font-family: "Urbanist", sans-serif !important;
}

.resource-rich-content a {
  color: #f60656 !important;
  text-decoration: underline !important;
  font-family: "Urbanist", sans-serif !important;
}

.resource-rich-content a:hover {
  color: #cc0b4b !important;
}

.resource-rich-content strong {
  font-weight: 600 !important;
  font-family: "Urbanist", sans-serif !important;
}

.resource-rich-content em {
  font-style: italic !important;
  font-family: "Urbanist", sans-serif !important;
}

/* Social Share Section - above Related Resources */
.resource-social-share-section {
  width: calc(100% - 80px) !important;
  max-width: calc(66% - 80px) !important;
  margin: 0 auto !important;
  padding: 2rem 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.resource-social-share-container {
  position: relative !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.resource-social-share-line {
  width: 100% !important;
  height: 1px !important;
  background: #d0d0d0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.resource-social-share-icons {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 1.75rem !important;
  padding-top: 1rem !important;
}

.resource-social-share-icons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  transition: opacity 0.3s ease !important;
}

.resource-social-share-icons a:hover {
  opacity: 0.7 !important;
}

.resource-social-share-icons a img {
  width: 1.5rem !important;
  height: 1.5rem !important;
  object-fit: contain !important;
  display: block !important;
}

/* Related resources section - full width with margins */
.client-stories.related-resources,
.resources-articles.related-resources {
  width: calc(100% - 80px) !important;
  max-width: calc(100% - 80px) !important;
  margin: 0 auto !important;
  padding: 2rem 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Responsive adjustments for social share section */
@media (max-width: 1100px) {
  .resource-social-share-section {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 768px) {
  .resource-social-share-section {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding: 1.5rem 0 !important;
  }
  
  .resource-social-share-icons {
    gap: 0.5rem !important;
  }
  
  .resource-social-share-icons a img {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

.client-stories.related-resources .container,
.resources-articles.related-resources .container {
  width: 100% !important;
  max-width: 1200px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Related resources card styling - published date above title */
.client-stories.related-resources .client-stories__text {
  display: flex !important;
  flex-direction: column !important;
}

.client-stories.related-resources .grant-alerts__date {
  order: 1 !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.875rem !important;
  font-style: italic !important;
  color: #232323 !important;
}

.client-stories.related-resources .grant-alerts__date .newg {
  font-weight: 500 !important;
  margin-right: 0.5rem !important;
}

.client-stories.related-resources .grant-alerts__date .published-date {
  font-style: italic !important;
}

.client-stories.related-resources .client-stories__text h4 {
  order: 2 !important;
  margin-top: 0 !important;
  margin-bottom: 0.625rem !important;
  font-family: "Urbanist", sans-serif !important;
}

.client-stories.related-resources .grant-alerts__date {
  font-family: "Urbanist", sans-serif !important;
}

.client-stories.related-resources .client-stories__text {
  font-family: "Urbanist", sans-serif !important;
}

.client-stories.related-resources .client-stories__text .link-btn {
  order: 3 !important;
  margin-top: auto !important;
  font-family: "Urbanist", sans-serif !important;
}

/* Related Resources Section Headings */
.client-stories.related-resources .gradient-heading,
.client-stories.related-resources .client_wins__headline h2,
.client-stories.related-resources h2 {
  font-family: "Urbanist", sans-serif !important;
}

/* Fix Related Resources Slider - prevent horizontal scrollbar */
.client-stories.related-resources .client-stories-slider {
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
}

.client-stories.related-resources .client-stories-slider .swiper-wrapper {
  overflow: visible !important;
  display: flex !important;
  /* Allow swiper to handle scrolling internally */
}

.client-stories.related-resources .swiper-slide {
  width: auto !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.client-stories.related-resources .client-stories__box {
  overflow: hidden !important;
  width: 23.75rem !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure slider container doesn't exceed parent width */
.client-stories.related-resources .container .client-stories-slider {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Navigation buttons for Related Resources slider */
.client-stories.related-resources .client-stories-slider .swiper-button-next,
.client-stories.related-resources .client-stories-slider .swiper-button-prev {
  width: 2.75rem !important;
  height: 2.75rem !important;
  background-color: #232323 !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: all 0.4s !important;
  z-index: 10 !important;
  cursor: pointer !important;
  border: none !important;
  margin-top: 0 !important;
  border-radius: 50% !important;
}

.client-stories.related-resources .client-stories-slider .swiper-button-next::after,
.client-stories.related-resources .client-stories-slider .swiper-button-prev::after {
  content: '' !important;
  display: block !important;
  width: 1.1875rem !important;
  height: 0.8125rem !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: background-image 0.4s !important;
}

.client-stories.related-resources .client-stories-slider .swiper-button-prev::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="19" height="13" viewBox="0 0 19 13"%3E%3Cpath d="M17 6.5H2M2 6.5L6.5 2M2 6.5L6.5 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/%3E%3C/svg%3E') !important;
  margin-bottom: 9px !important;
}

.client-stories.related-resources .client-stories-slider .swiper-button-next::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="19" height="13" viewBox="0 0 19 13"%3E%3Cpath d="M2 6.5H17M17 6.5L12.5 2M17 6.5L12.5 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/%3E%3C/svg%3E') !important;
  margin-bottom: 9px !important;
}

.client-stories.related-resources .client-stories-slider .swiper-button-next:hover,
.client-stories.related-resources .client-stories-slider .swiper-button-prev:hover {
  background-color: #ffffff !important;
}

.client-stories.related-resources .client-stories-slider .swiper-button-next:hover::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="19" height="13" viewBox="0 0 19 13"%3E%3Cpath d="M2 6.5H17M17 6.5L12.5 2M17 6.5L12.5 11" stroke="%23232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/%3E%3C/svg%3E') !important;
  margin-bottom: 9px !important;
}

.client-stories.related-resources .client-stories-slider .swiper-button-prev:hover::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="19" height="13" viewBox="0 0 19 13"%3E%3Cpath d="M17 6.5H2M2 6.5L6.5 2M2 6.5L6.5 11" stroke="%23232323" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/%3E%3C/svg%3E') !important;
  margin-bottom: 9px !important;
}

.client-stories.related-resources .client-stories-slider .swiper-button-next {
  right: 14px !important;
}

.client-stories.related-resources .client-stories-slider .swiper-button-prev {
  left: 5px !important;
}

.client-stories.related-resources .client-stories-slider .swiper-button-next.swiper-button-disabled,
.client-stories.related-resources .client-stories-slider .swiper-button-prev.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

/* Responsive margins for smaller screens */
@media (max-width: 1100px) {
  .inner-hero {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  
  .breadcrumbs {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .resource-detail-middle,
  .resource-detail-middle.sectionCl {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .resource-detail-flex {
    gap: 1.5rem !important;
  }
  
  .sticky-social-share {
    top: 1rem !important;
  }
  
  .resource-social-share-section {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .client-stories.related-resources,
  .resources-articles.related-resources {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  
}

@media (max-width: 768px) {
  .inner-hero {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  
  .inner-hero__bg {
    min-height: 400px !important;
    height: 400px !important;
  }
  
  .inner-hero__flex {
    padding: 0 1.5rem !important;
  }
  
  .breadcrumbs {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .resource-detail-middle,
  .resource-detail-middle.sectionCl {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .resource-detail-flex {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .sticky-social-share {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
  }
  
  .sticky-social-share ul {
    flex-direction: row !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  
  .resource-rich-content h2 {
    font-size: 1.75rem !important;
  }
  
  .resource-rich-content h3 {
    font-size: 1.25rem !important;
  }
  
  .resource-social-share-section {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding: 1.5rem 0 !important;
  }
  
  .client-stories.related-resources,
  .resources-articles.related-resources {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding: 1.5rem 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  
  /* Fix slider on small screens - prevent horizontal scrollbar */
  .client-stories.related-resources .client-stories-slider {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    /* Remove negative margins that cause overflow */
  }
  
  .client-stories.related-resources .client-stories-slider .swiper-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Let swiper handle padding internally */
  }
  
  .client-stories.related-resources .swiper-slide {
    width: calc(100vw - 60px) !important;
    max-width: 23.75rem !important;
    min-width: calc(100vw - 60px) !important;
    margin-right: 1rem !important;
    overflow: hidden !important;
  }
  
  .client-stories.related-resources .client-stories__box {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Hide gradient overlays on small screens that cause blurring */
  .client-stories.related-resources .client-stories-slider::before,
  .client-stories.related-resources .client-stories-slider::after {
    display: none !important;
  }
  
  /* Navigation buttons on mobile */
  .client-stories.related-resources .client-stories-slider .swiper-button-next,
  .client-stories.related-resources .client-stories-slider .swiper-button-prev {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  
  .client-stories.related-resources .client-stories-slider .swiper-button-next::after,
  .client-stories.related-resources .client-stories-slider .swiper-button-prev::after {
    width: 1rem !important;
    height: 0.6875rem !important;
  }
  
}

/* Sticky social share - keep sticky positioning */
.sticky-social-share {
  position: sticky !important;
  top: 2rem !important;
  z-index: 100 !important;
}

.sticky-social-share ul {
  position: relative !important;
  top: auto !important;
  z-index: 100 !important;
  visibility: hidden !important;
}

/* Ensure resource detail elements have relative positioning */
.resource-detail-middle,
.resource-detail-flex,
.resource-detail-text,
.inner-hero,
.breadcrumbs,
.client-stories,
.resources-articles,
.related-resources {
  position: relative !important;
  bottom: auto !important;
  z-index: 1 !important;
}

/* Prevent fixed positioning on resource detail elements */
.resource-detail-middle[style*="position: fixed"],
.resource-detail-middle[style*="position:fixed"],
.inner-hero[style*="position: fixed"],
.inner-hero[style*="position:fixed"],
.breadcrumbs[style*="position: fixed"],
.breadcrumbs[style*="position:fixed"],
.client-stories[style*="position: fixed"],
.client-stories[style*="position:fixed"] {
  position: relative !important;
  bottom: auto !important;
}

/* Inner-hero animations */
/* Circular text should be at bottom center of hero */
.inner-hero__animation {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  width: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
  pointer-events: none !important;
}

/* White version inside hero background - will be clipped by overflow: hidden */
.inner-hero__bg .inner-hero__animation.white-version {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
}

/* Black version outside hero background - extends below */
.inner-hero__animation.black-version {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
}

/* Size the circular text images */
.inner-hero__animation .round-text img {
  width: 800px !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

.inner-hero__animation .round-arrow img {
  width: 800px !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

/* Hide circular text on small screens */
@media (max-width: 768px) {
  .inner-hero__animation {
    display: none !important;
  }
}

/* Hero shadow */
.hero-shadow {
  position: absolute !important;
  z-index: 1 !important;
}

/* Resource detail page elements z-index */
.resource-detail-middle,
.resource-detail-flex,
.resource-detail-text,
.inner-hero,
.breadcrumbs,
.client-stories,
.resources-articles,
.related-resources,
.sticky-social-share,
.inner-hero__animation,
.hero-shadow {
  z-index: 1 !important;
}