/* Global box-sizing for all elements */
* {
    box-sizing: border-box;
}

/* CSS Custom Properties for Customization */
:root {
    --ticker-duration: 75s; /* Adjustable ticker animation duration */
}

/* Note: Body styling removed to prevent global impact */
/* To add padding for fixed ticker, use page-specific CSS or add a wrapper */

/* Wrapper for informational content */
.info-wrap {
    padding: 0 2em; /* Horizontal padding for content */
    text-align: center; /* Center align the text */
    margin-top: 2rem; /* Add some top margin */
}

/* Keyframes for the ticker animation (Webkit prefix for older browsers) */
@-webkit-keyframes ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0); /* Start: left side */
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
    85% {
        -webkit-transform: translate3d(120%, 0, 0); /* End: right side */
        transform: translate3d(120%, 0, 0);
        visibility: visible;
    }
    100% {
        -webkit-transform: translate3d(120%, 0, 0); /* Hold at end for pause */
        transform: translate3d(120%, 0, 0);
        visibility: visible;
    }
}

/* Standard keyframes for the ticker animation */
@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0); /* Start: left side */
        visibility: visible;
    }
    85% {
        transform: translate3d(120%, 0, 0); /* End: right side */
        visibility: visible;
    }
    100% {
        transform: translate3d(120%, 0, 0); /* Hold at end for pause */
        visibility: visible;
    }
}

/* Wrapper for the entire ticker */
.ticker-wrap {
    /*position: fixed; /* Fixes the ticker to the viewport */
    /* bottom: 0; /* Positions it at the bottom */
    width: 100%; /* Full width */
    overflow: hidden; /* Hides content outside the wrapper */
    height: 4rem; /* Fixed height for the ticker */
    background-color: rgba(20, 24, 28, 0.9); /* Dark background with transparency */
    /* border-top-left-radius: 0.5rem; /* Rounded corners for the top-left */
    /* border-top-right-radius: 0.5rem; /* Rounded corners for the top-right */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* The actual ticker content container */
.ticker-wrap .ticker {
    display: inline-flex; /* Allows headlines to sit side-by-side */
    height: 4rem; /* Matches parent height */
    white-space: nowrap; /* Prevents headlines from wrapping */
    padding-left: 100%; /* Start off-screen to the left */
    box-sizing: content-box; /* Ensures padding is added to the total width */

    /* Animation properties */
    -moz-animation-duration: var(--ticker-duration); /* Mozilla animation duration */
    -webkit-animation-duration: var(--ticker-duration); /* Webkit animation duration */
    animation-duration: var(--ticker-duration); /* Standard animation duration */

    -moz-animation-timing-function: linear; /* Mozilla timing function */
    -webkit-animation-timing-function: linear; /* Webkit timing function */
    animation-timing-function: linear; /* Standard timing function (constant speed) */

    -moz-animation-iteration-count: infinite; /* Mozilla iteration count */
    -webkit-animation-iteration-count: infinite; /* Webkit iteration count */
    animation-iteration-count: infinite; /* Standard iteration count (loops forever) */

    -moz-animation-name: ticker; /* Mozilla animation name */
    -webkit-animation-name: ticker; /* Webkit animation name */
    animation-name: ticker; /* Standard animation name */
}

/* Pause animation on hover */
.ticker-wrap:hover .ticker {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/* Individual headline styling within the ticker */
.ticker-wrap .ticker__headline {
    display: inline-flex; /* Allows content to align */
    align-items: center; /* Vertically centers text */
    padding: 0 2rem; /* Horizontal padding for spacing between headlines */
    font-size: 1.5rem; /* Font size for headlines */
    color: white; /* White text color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
    direction: rtl; /* For Right-to-Left languages like Persian */
    flex-shrink: 0; /* Prevent flex from shrinking */
}

/* Gap element between content loops */
.ticker-wrap .ticker__gap {
    display: inline-block;
    width: 300px; /* 300px gap as requested */
    flex-shrink: 0;
}

/* Styling for links inside headlines */
.ticker-wrap .ticker__headline a {
    color: inherit; /* Inherit text color from parent (.ticker__headline) */
    text-decoration: none; /* Remove underline from links */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

/* NEW: Change link color to orange on hover */
.ticker-wrap .ticker__headline a:hover {
    color: orange; /* Change text color to orange on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .ticker-wrap {
        height: 3rem; /* Smaller height on mobile */
    }
    .ticker-wrap .ticker {
        height: 3rem; /* Adjust ticker height */
    }
    .ticker-wrap .ticker__headline {
        font-size: 1.2rem; /* Smaller font size on mobile */
        padding: 0 1rem; /* Less padding on mobile */
    }
}