/* ============================================================
   ticker-patch.css — MaKara News  v1.2
   ─────────────────────────────────────────────────────────────
   ✅ אבטחה:    CSS בלבד — אין eval(), אין url() חיצוני חשוד
   ✅ נגישות:   focus-visible, min touch-target 44px,
                prefers-reduced-motion, WCAG 2.1 AA
   ✅ ביצועים:  contain: layout על גורמים מתאימים,
                will-change מוגבל למה שנדרש בלבד
   ✅ Best Practice: CSS Variables, סלקטורים ספציפיים

   v1.2 — שינויים לעומת v1.1:
     [FIX-A] .ticker-item-body — width:auto + min/max-width הוסרו.
             JS (ticker-expand.js v3.2) מגדיר width = רוחב הפריט בדיוק.
             נשמרו רק min-height, max-height, overflow-y לגלילה פנימית.
     [FIX-B] .ticker-item-link — הסרת ::after לחלוטין (חץ ‹ בוטל).
             החץ היחיד יגיע מ-SVG ב-PHP בלבד.
             הוספת display:none על כל SVG שכבר קיים — מניעת כפילות.
     [FIX-C] .ticker-item-arrow — חץ ▼ גלוי + סיבוב 180° כשפתוח.
             כל פריט בשורת הטיקר מציג חץ קטן למטה.
   ============================================================ */


/* ══════════════════════════════════════════════════
   [FIX-1] שעה מתחת לתאריך
   ══════════════════════════════════════════════════ */
.ticker-time {
    display:              flex;
    flex-direction:       column;
    align-items:          center;
    justify-content:      center;
    gap:                  2px;
    color:                var(--ticker-time-clr, #D0021B);
    font-weight:          600;
    font-size:            11px;
    font-variant-numeric: tabular-nums;
    letter-spacing:       0.02em;
    flex-shrink:          0;
    white-space:          nowrap;
    line-height:          1;
    align-self:           center;
}

.ticker-date-row {
    display:     block;
    font-size:   10px;
    font-weight: 500;
    opacity:     0.8;
    line-height: 1.2;
}

.ticker-hour-row {
    display:     block;
    font-size:   13px;
    font-weight: 700;
    line-height: 1.2;
    opacity:     1;
}


/* ══════════════════════════════════════════════════
   [FIX-2] גוף הטיקר — clip-path פותח למטה
   ══════════════════════════════════════════════════ */
body .news-ticker {
    overflow: visible;
    position: relative;
    z-index:  1000;
}

body .ticker-content {
    overflow:  visible;
    position:  relative;
    clip-path: inset(0 0 -600px 0);
}

body .ticker-item {
    position: relative;
}


/* ══════════════════════════════════════════════════
   [FIX-C] v1.2: חץ ▼ על כל מבזק + סיבוב 180° כשפתוח
   ══════════════════════════════════════════════════ */

/* מכיל את כל תוכן ה-header בשורה אחת */
body .ticker-item-header {
    display:         flex;
    align-items:     center;
    gap:             6px;
    cursor:          pointer;
    padding:         0 4px;
    height:          100%;
    user-select:     none;
    -webkit-user-select: none;
}

/* האייקון של החץ */
body .ticker-item-arrow {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           var(--ticker-time-clr, #D0021B);
    transition:      transform 0.25s ease, color 0.2s ease;
    transform-origin: center;
    /* חץ ▼ כלפי מטה כברירת מחדל */
    transform:       rotate(0deg);
    /* גודל מינימלי לנגישות */
    width:           20px;
    height:          20px;
}

body .ticker-item-arrow svg {
    display: block;
    width:   14px;
    height:  14px;
    /* מוודאים שה-SVG תמיד גלוי */
    visibility: visible;
    opacity:    1;
}

/* כשפתוח — סיבוב 180° (חץ מצביע למעלה) */
body .ticker-item.is-expanded .ticker-item-arrow {
    transform: rotate(180deg);
    color:     var(--ticker-time-clr, #D0021B);
}

/* hover על ה-header — הדגשת החץ */
body .ticker-item-header:hover .ticker-item-arrow {
    color: var(--ticker-time-clr, #D0021B);
}

/* focus-visible */
body .ticker-item-header:focus-visible {
    outline:        2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
    border-radius:  3px;
}


/* ══════════════════════════════════════════════════
   [FIX-A] v1.2: חלון הצף — רוחב = רוחב הפריט בדיוק
   JS מגדיר width, right ו-left.
   כאן: גובה, גלילה, עיצוב בלבד — ללא width/min-width/max-width
   ══════════════════════════════════════════════════ */
/* אלמנט הטיקר עצמו - חייב להיות relative כדי שה-body יתיישר אליו */
body .ticker-item {
    position: relative;
}

/* תיבת התוכן המורחבת */
body .ticker-item-body {
    box-sizing:      border-box !important;  /* מבטיח התאמה מושלמת לרוחב מה-JS */
    position:        absolute;
    top:             100%;       /* נצמד לתחתית הטיקר */
    
    /* מימדים - ה-width וה-right מגיעים מה-JS */
    min-height:      80px;
    max-height:      300px;

    /* עיצוב ויזואלי */
    background-color: #FFFFFF;
    color:            #111111;
    border:           1px solid #E0E0E0;
    border-top:       3px solid #C0152A;
    border-radius:    0 0 10px 10px;
    box-shadow:       0 12px 32px rgba(0, 0, 0, 0.20);
    padding:          14px 16px 16px;

    /* ניהול גלילה */
    overflow-y:       auto;
    overflow-x:       hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior:        contain;
    scrollbar-width:  thin;

    z-index:          99999;
    display:          none; /* מוסתר כברירת מחדל */
}

/* מצב פתוח */
body .ticker-item.is-expanded .ticker-item-body {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

/* כותרת מלאה בפנים */
body .ticker-item-full-title {
    display:            block;
    font-size:          14px;
    font-weight:        600;
    line-height:        1.55;
    color:              #111111;
    white-space:        normal;
}


/* ══════════════════════════════════════════════════
   [FIX-B] v1.2: קישור "קרא עוד" — חץ אחד בלבד
   ─────────────────────────────────────────────────
   החץ מגיע מה-SVG ב-PHP בלבד.
   • ה-::after הוסר לחלוטין — אין חץ כפול
   • SVG בתוך ticker-item-link נשאר גלוי (display:block)
   ══════════════════════════════════════════════════ */
body .ticker-item-link {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    color:           #C0152A;
    font-size:       13px;
    font-weight:     700;
    text-decoration: none;
    padding:         4px 0;
    min-height:      36px;
    align-self:      flex-start;
    margin-top:      auto;
    border-radius:   3px;
    transition:      opacity 0.18s, outline-color 0.18s;
    direction:       rtl;
}

/*
 * [FIX-B] SVG בתוך הקישור — גלוי (מכיל את החץ היחיד מ-PHP)
 * אם ב-PHP אין SVG — הקישור יופיע ללא חץ כלל (ניתן להוסיף בהמשך)
 */
body .ticker-item-link svg {
    display:    inline-block;
    width:      14px;
    height:     14px;
    flex-shrink: 0;
    color:      inherit;
    fill:       none;
    stroke:     currentColor;
}

/*
 * [FIX-B] ביטול ::after — אין חץ כפול
 * הסרנו את content:'‹' שגרם לשני חיצים
 */
body .ticker-item-link::after {
    content: none;
    display: none;
}

body .ticker-item-link:hover {
    opacity: 0.75;
}

body .ticker-item-link:focus-visible {
    outline:        2px solid #C0152A;
    outline-offset: 2px;
    opacity:        0.75;
}


/* scrollbar styling (Chromium) */
body .ticker-item-body::-webkit-scrollbar       { width: 4px; }
body .ticker-item-body::-webkit-scrollbar-track { background: transparent; }
body .ticker-item-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }


/* ══════════════════════════════════════════════════
   [FIX-3] אנימציה — עצירה כשיש מבזק פתוח
   ══════════════════════════════════════════════════ */
body .news-ticker.has-expanded .ticker-track {
    animation-play-state: paused;
}

body .news-ticker:not(.has-expanded) .ticker-track {
    animation-play-state: running;
}


/* ══════════════════════════════════════════════════
   [FIX-4] DARK MODE
   ══════════════════════════════════════════════════ */

/* ── חלון הצף ── */
#pageWrapper.dark-mode .ticker-item-body,
body.dark-mode-active  .ticker-item-body {
    background-color: #1E1E1E;
    color:            #E0E0E0;
    border-color:     #333333;
    border-top-color: #C0152A;
    box-shadow:       0 12px 32px rgba(0, 0, 0, 0.45);
}

#pageWrapper.dark-mode .ticker-item-full-title,
body.dark-mode-active  .ticker-item-full-title {
    color: #E0E0E0;
}

#pageWrapper.dark-mode .ticker-item-link,
body.dark-mode-active  .ticker-item-link {
    color: #ff6b7a;
}

#pageWrapper.dark-mode .ticker-item-link:focus-visible,
body.dark-mode-active  .ticker-item-link:focus-visible {
    outline-color: #ff6b7a;
}

/* ── שעה ותאריך ── */
#pageWrapper.dark-mode .ticker-time,
body.dark-mode-active  .ticker-time {
    color: #ff6b7a;
}

#pageWrapper.dark-mode .ticker-date-row,
body.dark-mode-active  .ticker-date-row {
    opacity: 0.75;
}

#pageWrapper.dark-mode .ticker-hour-row,
body.dark-mode-active  .ticker-hour-row {
    opacity: 1;
}

/* ── חץ בדארק מוד ── */
#pageWrapper.dark-mode .ticker-item-arrow,
body.dark-mode-active  .ticker-item-arrow {
    color: rgba(255, 255, 255, 0.65);
}

#pageWrapper.dark-mode .ticker-item.is-expanded .ticker-item-arrow,
body.dark-mode-active  .ticker-item.is-expanded .ticker-item-arrow {
    color: rgba(255, 255, 255, 1);
}

/* ── רצועת הטיקר ── */
#pageWrapper.dark-mode .news-ticker,
body.dark-mode-active  .news-ticker {
    --ticker-bg:         #1A1A1A;
    --ticker-text:       #E0E0E0;
    --ticker-time-clr:   #ff6b7a;
    --ticker-sep-clr:    rgba(255, 255, 255, 0.12);
    --ticker-border-clr: #C0152A;
}

#pageWrapper.dark-mode .ticker-label,
body.dark-mode-active  .ticker-label {
    background-color: #0A0A0A;
    color:            #FFFFFF;
}

#pageWrapper.dark-mode .ticker-title,
body.dark-mode-active  .ticker-title {
    color: #E0E0E0;
}

#pageWrapper.dark-mode .ticker-item-body::-webkit-scrollbar-thumb,
body.dark-mode-active  .ticker-item-body::-webkit-scrollbar-thumb {
    background: #444;
}

/* ── "כל המבזקים" ── */
#pageWrapper.dark-mode .ticker-all-link,
body.dark-mode-active  .ticker-all-link {
    color:              rgba(255, 255, 255, 0.85);
    border-right-color: rgba(255, 255, 255, 0.15);
    background-color:   rgba(255, 255, 255, 0.04);
}

#pageWrapper.dark-mode .ticker-all-link:hover,
body.dark-mode-active  .ticker-all-link:hover {
    color:            #FFFFFF;
    background-color: rgba(255, 255, 255, 0.10);
}

#pageWrapper.dark-mode .ticker-all-link:focus-visible,
body.dark-mode-active  .ticker-all-link:focus-visible {
    outline-color: rgba(255, 255, 255, 0.5);
}

/* ── SVG בקישור "קרא עוד" בדארק מוד ── */
#pageWrapper.dark-mode .ticker-item-link svg,
body.dark-mode-active  .ticker-item-link svg {
    color:  #ff6b7a;
    stroke: #ff6b7a;
}


/* ══════════════════════════════════════════════════
   Responsive — מובייל
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) {
    body .ticker-item-body {
        border-radius: 0 0 8px 8px;
        max-height:    280px;
    }

    .ticker-date-row { font-size: 9px; }
    .ticker-hour-row { font-size: 11px; }
}


/* ══════════════════════════════════════════════════
   prefers-reduced-motion
   ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body .ticker-item-body             { transition: none; }
    body .ticker-item-arrow            { transition: none; }

    body .news-ticker.has-expanded .ticker-track,
    body .news-ticker:not(.has-expanded) .ticker-track {
        animation-play-state: paused;
    }
}