/* Arham News Ticker - Frontend Styles */

.arham-news-ticker-wrapper {
    font-family: Arial, sans-serif;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex; /* Makes children (label and content) align horizontally */
    align-items: center; /* Vertically aligns items in the wrapper */

    /* Custom properties from admin settings */
    border: var(--arham-content-border-size) var(--arham-content-border-style) var(--arham-content-border-color);
    background-color: var(--arham-content-bg-color);
    color: var(--arham-content-text-color);
    font-size: var(--arham-content-text-size);
    /* font-style and font-weight are set specifically below based on vars */
    height: var(--arham-content-height);
    margin-top: var(--arham-top-margin);
    margin-bottom: var(--arham-bottom-margin);
    /* width is set inline in PHP to allow for px values */
}

/* Ticker Label with 4 animated boxes grid */
.arham-news-ticker-label {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #fff; /* Static white, as per previous design */
    position: relative;
    user-select: none;
    flex-shrink: 0; /* Prevent label from shrinking */

    /* Custom properties from admin settings */
    background-color: var(--arham-label-bg-color);
    font-size: var(--arham-label-font-size);
    height: var(--arham-label-height);
    line-height: var(--arham-label-height); /* Ensure text is vertically centered */
    border-right: var(--arham-label-border-size) var(--arham-label-border-style) var(--arham-label-border-color);

    /* Apply font style and weight using custom properties */
    font-style: var(--arham-label-font-style);
    font-weight: var(--arham-label-font-weight);
}

/* Arrow on Ticker Label Right */
.arham-news-ticker-label::after {
    content: '';
    position: absolute;
    right: -10px; /* Half of border width to overlap */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: calc(var(--arham-label-height) / 2) solid transparent;
    border-bottom: calc(var(--arham-label-height) / 2) solid transparent;
    border-left: 10px solid var(--arham-label-bg-color);
    z-index: 1; /* Ensure it's above content area if needed */
}

/* Ensure the border-right of the label accounts for the arrow */
.arham-news-ticker-label {
    margin-right: 10px; /* Adjust to accommodate the arrow width */
}


/* 4 small animated yellow boxes */
.arham-ticker-icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 8px);
    grid-template-rows: repeat(2, 8px);
    gap: 3px;
    margin-right: 10px;
}

.arham-ticker-icon-grid .box {
    width: 8px;
    height: 8px;
    background-color: yellow;
    animation: blink 1.2s infinite alternate;
}

.arham-ticker-icon-grid .box:nth-child(2) {
    animation-delay: 0.3s;
}
.arham-ticker-icon-grid .box:nth-child(3) {
    animation-delay: 0.6s;
}
.arham-ticker-icon-grid .box:nth-child(4) {
    animation-delay: 0.9s;
}


/* Ticker Content Container */
.arham-news-ticker-content-area {
    overflow: hidden;
    white-space: nowrap;
    flex-grow: 1; /* Allows content area to take remaining space */
    position: relative; /* Needed for absolute positioning of track */
    height: 100%; /* Take full height of parent wrapper */
    line-height: var(--arham-content-height); /* Vertically align text */
}

/* Pause on hover */
.arham-news-ticker-wrapper.pause-on-hover .ticker-track {
    animation-play-state: running; /* Default state */
}
.arham-news-ticker-wrapper.pause-on-hover:hover .ticker-track {
    animation-play-state: paused !important;
}

/* Ticker track (scrolling items container) */
.ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

/* Each ticker item */
.ticker-item {
    display: flex;
    align-items: center;
    margin-right: 40px; /* Space between items */
    flex-shrink: 0; /* Prevent items from shrinking */
    justify-content: flex-end; /* Default align text to right if no class */
    height: 100%; /* Ensure item takes full height for vertical alignment */
}

/* Conditional alignment based on setting */
.arham-news-ticker-wrapper.title-align-left .ticker-item {
    justify-content: flex-start;
}


/* Featured image */
.ticker-thumb img {
    display: block;
    margin-right: 10px;
    vertical-align: middle;
    object-fit: cover; /* Ensures image covers its area without distortion */
    max-width: none; /* Override WordPress default max-width */
    /* width, height, border-radius set inline by PHP */
}

/* Post title */
.ticker-title a {
    text-decoration: none;
    color: var(--arham-content-text-color);
    white-space: nowrap; /* Ensure text stays on one line by default */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    display: block; /* Make it a block to apply overflow properties */
    max-width: 100%; /* Constrain width within its flex container if possible */

    /* Apply font style and weight using custom properties */
    font-style: var(--arham-content-font-style);
    font-weight: var(--arham-content-font-weight);
}

/* Hover color for text */
.ticker-title a:hover {
    color: var(--arham-content-hover-color);
}

/* Title display style: two rows (Caution: breaks horizontal scroll logic) */
/* This style is problematic for horizontal scrolling tickers as it forces wrapping */
/* and will likely break the continuous scroll effect. It's included but not recommended for this ticker type. */
.arham-news-ticker-wrapper.two-rows-title .ticker-title a {
    white-space: normal; /* Allow text to wrap */
    max-height: calc(var(--arham-content-height) * 0.9); /* Limit height to allow two lines */
    overflow: hidden;
    text-overflow: ellipsis; /* Still use ellipsis if it overflows two lines */
    line-height: 1.2; /* Adjust line height for multiple lines */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines for webkit browsers */
    -webkit-box-orient: vertical;
}

/* Responsive: Hide label on mobile if setting is enabled */
@media (max-width: 768px) {
    .arham-news-ticker-wrapper.label-disabled-mobile .arham-news-ticker-label {
        display: none;
    }
    .arham-news-ticker-wrapper.label-disabled-mobile .arham-news-ticker-label::after {
        display: none; /* Hide arrow if label is hidden */
    }
}


/* Animations */

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 6px 2px red;
    }
    50% {
        box-shadow: 0 0 12px 4px red;
    }
    100% {
        box-shadow: 0 0 6px 2px red;
    }
}