/* Container: This hides the extra text and sets the bar */
.school-ticker {
    background: #ffeeee; /* Light red/pink alert color */
    border-top: 2px solid #cc0000;
    border-bottom: 2px solid #cc0000;
    overflow: hidden;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
}

/* Target the UL (the list) created by Gutenberg */
.school-ticker .wp-block-latest-posts {
    display: flex !important;
    flex-direction: row !important;
    white-space: nowrap;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 100% !important; /* Start off-screen */
    animation: ticker-scroll 25s linear infinite;
}

/* Individual list items */
.school-ticker .wp-block-latest-posts li {
    margin-right: 60px !important;
    padding: 0 !important;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

/* Make the link look clean */
.school-ticker .wp-block-latest-posts li a {
    text-decoration: none;
    color: #cc0000;
}

/* Movement */
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Pause on Hover */
.school-ticker:hover .wp-block-latest-posts {
    animation-play-state: paused;
}

/* 1. The Outer Frame */
.custom-scroller-container {
    height: 400px; /* Adjust this to show more or less of the list */
    overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
    background: #fff;
}

/* 2. Target the actual list inside the Query Loop */
.custom-scroller-container ul.wp-block-post-template {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    animation: vertical-slide 15s linear infinite;
}

/* 3. Pause on Hover */
.custom-scroller-container:hover ul.wp-block-post-template {
    animation-play-state: paused;
}

/* 4. The Animation Logic */
@keyframes vertical-slide {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* 5. Styling the individual post items */
.custom-scroller-container li.wp-block-post {
    padding: 20px;
    border-bottom: 1px solid #eee;
    margin: 0 !important;
}