/**
 * Hero text visibility fix
 * This CSS ensures the hero text is visible at all screen sizes
 */

/* Target all possible hero text elements */
.field--name-field-hero-text,
div[class*="hero-text"],
div[class*="herotext"],
div[class*="hero_text"],
.hero-text,
.herotext,
.hero_text,
.field--type-text-long,
.field--type-text-with-summary,
.field--type-string-long,
.field--type-string {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Style the hero text for better visibility */
.field--name-field-hero-text,
div[class*="hero-text"],
div[class*="herotext"],
div[class*="hero_text"],
.hero-text,
.herotext,
.hero_text {
  padding: 15px !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  margin-top: -40px !important;
  font-size: 1rem !important;
  border: none !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  text-align: center !important;
  color: white !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Override any Bootstrap responsive utility classes */
[class*="d-none"],
[class*="hidden"],
[class*="invisible"] {
  display: block !important;
  visibility: visible !important;
}

/* Target parent elements that might contain the hero text */
.node__content,
.field--type-entity-reference,
.field--name-field-hero-image,
.field--name-field-media-image,
.paragraph,
.paragraph--type--hero,
.paragraph--type--banner,
.field--name-field-paragraphs,
.field--name-field-content,
.field--name-field-sections {
  overflow: visible !important;
}

/* Ensure the hero image doesn't hide the text */
.field--name-field-hero-image,
.field--name-field-media-image,
div[class*="hero-image"],
div[class*="heroimage"],
div[class*="hero_image"],
.hero-image,
.heroimage,
.hero_image {
  position: relative !important;
}

/* Adjust for different screen sizes */
@media (max-width: 576px) {

  .field--name-field-hero-text,
  div[class*="hero-text"],
  div[class*="herotext"],
  div[class*="hero_text"],
  .hero-text,
  .herotext,
  .hero_text {
    margin-top: -60px !important;
    font-size: 0.9rem !important;
  }
}

@media (min-width: 577px) and (max-width: 768px) {

  .field--name-field-hero-text,
  div[class*="hero-text"],
  div[class*="herotext"],
  div[class*="hero_text"],
  .hero-text,
  .herotext,
  .hero_text {
    margin-top: -50px !important;
  }
}

@media (min-width: 769px) and (max-width: 992px) {

  .field--name-field-hero-text,
  div[class*="hero-text"],
  div[class*="herotext"],
  div[class*="hero_text"],
  .hero-text,
  .herotext,
  .hero_text {
    margin-top: -40px !important;
  }
}

@media (min-width: 993px) {

  .field--name-field-hero-text,
  div[class*="hero-text"],
  div[class*="herotext"],
  div[class*="hero_text"],
  .hero-text,
  .herotext,
  .hero_text {
    margin-top: -30px !important;
  }
}