/* MaevePort Scroll Text Component */

.maeveport-scroll-text-container {
  height: auto;
  text-align: left;
}

.maeveport-scroll-text {
  padding: 2rem;
  max-width: 1200px;
  margin: 0;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  gap: 0.1rem;
}

.maeveport-scroll-text-line {
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
  font-size: var(--font-size-display-md);
  font-weight: 400;
  color: white; /* Changed to black for better visibility on white background */
  margin: 0; /* Reduce from 0.2em to 0 */
  line-height: 1.1; /* Add tighter line height */
}

/* Container for the link to improve animation */
.maeveport-link-container {
  opacity: 0;
  transform: translateY(30px);
  overflow: hidden; /* Prevents any content from overflowing */
  will-change:
    transform, opacity; /* Optimization hint for smoother animations */
}

/* Styles for the Find Jobs link */
.maeveport-scroll-text-link {
  display: inline-block;
  font-size: var(--font-size-body-xl);
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.maeveport-scroll-text-link .arrow {
  display: inline-block;
  margin-left: 8px;
  transition:
    transform 0.3s,
    opacity 0.3s;
  opacity: 0.8;
}

.maeveport-scroll-text-link:hover .arrow {
  transform: translateX(5px);
  opacity: 1;
}

/* Accessibility improvements */
.maeveport-scroll-text-link:focus {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}

.maeveport-scroll-text-link:focus:not(:focus-visible) {
  outline: none;
}

/* Responsive styles */
@media (min-width: 1200px) {
  .maeveport-scroll-text-line {
    font-size: var(--font-size-display-md);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .maeveport-scroll-text-line {
    font-size: var(--font-size-display-md);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .maeveport-scroll-text-line {
    font-size: var(--font-size-heading-xxxl);
  }
  .maeveport-scroll-text {
    padding: 1.5rem;
    gap: 0.75rem;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .maeveport-scroll-text-line {
    font-size: var(--font-size-heading-xl);
  }
  .maeveport-scroll-text {
    padding: 1.25rem;
    gap: 0.6rem;
  }
}

@media (max-width: 575px) {
  .maeveport-scroll-text-line {
    font-size: var(--font-size-heading-lg);
  }
  .maeveport-scroll-text {
    padding: 1rem;
    gap: 0.5rem;
  }
  .maeveport-scroll-text-link {
    font-size: var(--font-size-body-md);
  }
}

.maeveport-scroll-text-section.maeveport-align-left {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  max-width: 100%;
}