/* ==========================================================================
   Health Dept News Ticker – Public Stylesheet  v1.0.0
   Fonts loaded via wp_enqueue_style in PHP (no @import here).
   ========================================================================== */

/* ── Root variables ── */
.hnt-wrapper {
    --hnt-bg:      #004226;
    --hnt-color:   #ffffff;
    --hnt-fs-en:   20px;
    --hnt-fs-ur:   20px;
    --hnt-speed:   120s;

    background-color: var(--hnt-bg);
    overflow:         hidden;
    margin-bottom:    6px;
    box-sizing:       border-box;
    border-radius:    4px;
    box-shadow:       0 2px 10px rgba(0,0,0,.28);
}

/* ── Each ticker row: VERTICAL stack (label on TOP, scroll below) ── */
.hnt-ticker {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* Separator between Urdu and English rows */
.hnt-urdu + .hnt-english {
    border-top: 1px solid rgba(255,255,255,.18);
}

/* ── Label / heading – full-width banner ── */
.hnt-label {
    display:       block;
    width:         100%;
    text-align:    center;
    padding:       8px 16px;
    min-height:    38px;
    line-height:   1.4;
    color:         var(--hnt-color);
    font-weight:   700;
    font-size:     15px;
    letter-spacing:.5px;
    border-bottom: 1px solid rgba(255,255,255,.20);
    background:    rgba(0,0,0,.18);
    box-sizing:    border-box;
}

.hnt-urdu .hnt-label {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', Arial, sans-serif;
    font-size:   17px;
    min-height:  44px;  /* Urdu text is taller */
    padding:     10px 16px;
}

/* ── Scrolling track wrapper ── */
.hnt-track-wrap {
    width:    100%;
    overflow: hidden;
    padding:  6px 0;
    position: relative;
}

/* ── The moving track ──
     JS doubles innerHTML inside this element.
     CSS animates exactly -50% (LTR) or +50% (RTL) = seamless loop. ── */
.hnt-track {
    display:     inline-flex;
    align-items: center;
    white-space: nowrap;
    color:       var(--hnt-color);
    font-weight: 700;
    will-change: transform;
}

/* English – scrolls RIGHT → LEFT */
.hnt-track-ltr {
    font-family:               'Poppins', sans-serif;
    font-size:                 var(--hnt-fs-en);
    animation-name:            hnt-scroll-ltr;
    animation-duration:        var(--hnt-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Urdu – RTL text, scrolls LEFT → RIGHT */
.hnt-track-rtl {
    font-family:               'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', Arial, sans-serif;
    font-size:                 var(--hnt-fs-ur);
    direction:                 rtl;
    animation-name:            hnt-scroll-rtl;
    animation-duration:        var(--hnt-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Pause class (applied via JS / CSS hover) */
.hnt-pause-hover:hover {
    animation-play-state: paused !important;
}

/* ── Individual news item ── */
.hnt-item {
    display:     inline-block;
    padding:     0 14px;
}

.hnt-item a,
.hnt-item > span {
    color:           inherit;
    text-decoration: none;
    transition:      opacity .2s;
}
.hnt-item a:hover {
    opacity:         .82;
    text-decoration: underline;
}

/* ── Empty state ── */
.hnt-empty {
    color:       var(--hnt-color);
    text-align:  center;
    padding:     14px;
    font-family: 'Poppins', sans-serif;
    opacity:     .7;
}

/* ==========================================================================
   Keyframe animations
   Content is doubled by JS so -50% / +50% = exactly one "page" = seamless.
   ========================================================================== */

@keyframes hnt-scroll-ltr {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes hnt-scroll-rtl {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ==========================================================================
   Responsive – smaller font on narrow screens
   ========================================================================== */
@media (max-width: 600px) {
    .hnt-label           { font-size: 13px; padding: 6px 10px; }
    .hnt-urdu .hnt-label { font-size: 14px; }

    /* Scale down ticker font — use clamp() for smooth scaling */
    .hnt-track-ltr { font-size: clamp(13px, 3.5vw, var(--hnt-fs-en)); }
    .hnt-track-rtl { font-size: clamp(13px, 3.8vw, var(--hnt-fs-ur)); }

    .hnt-track-wrap { padding: 4px 0; }
}

/* ==========================================================================
   Accessibility – respect prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hnt-track {
        animation:   none !important;
        white-space: normal !important;
        transform:   none !important;
        display:     block;
        padding:     6px 14px;
        text-align:  center;
    }
}