/* --- Option 3: Infinite Logo Marquee --- */

/* 1. Defines the animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Moves the track left by the width of *one* full set of logos */
    transform: translateX(-50%); 
  }
}

/* 2. The main container. Hides the overflow. */
/* We also add a "fade" on the left/right edges for a clean look */
.logo-marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Adjust this gradient for your site's background color */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* 3. The track that holds all logos (both sets) */
.logo-marquee-track {
  display: flex;
  /* This tells the track to be as wide as its content */
  width: max-content; 
  /* Run the 'scroll' animation over 30 seconds, 
     infinitely, in a smooth line */
  animation: scroll 30s linear infinite;
  animation-play-state: running;
}

/* 4. Pause the animation on hover (optional but nice) */
.logo-marquee-container:hover .logo-marquee-track {
  animation-play-state: paused;
}

/* 5. Styles for the logos themselves */
.logo-marquee-track .wp-block-image {
  margin: 0; /* Remove default WordPress margins */
}

.logo-marquee-track img {
  height: 40px; /* Standardize the height */
  width: auto;  /* Let width adjust automatically */
  padding: 0 40px; /* Add spacing between logos */
  object-fit: contain;
  opacity: 0.8; /* Make them slightly transparent */
}
/* Sidebar Wrapper */
.pillar-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Automatically shorten the last item in Rank Math Breadcrumbs */
.rank-math-breadcrumb span:last-child {
    display: inline-block;
    max-width: 300px;       /* Adjust this width as needed */
    white-space: nowrap;    /* Forces text onto one line */
    overflow: hidden;       /* Hides the overflow text */
    text-overflow: ellipsis; /* Adds "..." at the end */
    vertical-align: bottom; /* Keeps it aligned with the arrows */
}

/* Mobile Tweak: Make it even shorter on phones */
@media (max-width: 768px) {
    .rank-math-breadcrumb span:last-child {
        max-width: 150px;
    }
}