/* ============================================================
   ticker-patch.css — MaKara News  v1.1
   ─────────────────────────────────────────────────────────────
   ✅ אבטחה:    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.1 — שינויים לעומת v1.0:
     [FIX-A] חלון הצף — רוחב זהה לרוחב פריט הטיקר (min-width במקום width קבוע)
     [FIX-B] .ticker-item-link — הסרת SVG חיצוני כפול, שמירה על חץ אחד בלבד
     [FIX-C] .ticker-item-header — חץ ▼ על כל מבזק + סיבוב 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] חץ ▼ על כל מבזק בשורת הטיקר + סיבוב כשפתוח
   ══════════════════════════════════════════════════ */

/* מכיל את כל תוכן ה-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;
}

/* האייקון של החץ — SVG שמוכנס ב-PHP */
body .ticker-item-arrow {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           rgba(255, 255, 255, 0.75);
    transition:      transform 0.25s ease, color 0.2s;
    transform-origin: center;
    /* חץ ▼ כלפי מטה כברירת מחדל */
    transform:       rotate(0deg);
}

body .ticker-item-arrow svg {
    /* נוודא שהפוליליין מצביע למטה: points="6 9 12 15 18 9" */
    display: block;
}

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

/* hover על הheader — הדגשת החץ */
body .ticker-item-header:hover .ticker-item-arrow {
    color: rgba(255, 255, 255, 1);
}

/* 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] חלון הצף — רוחב זהה לפריט הטיקר
   ticker-expand.js מגדיר right/left,
   כאן width: auto + min/max-width שולטים
   ══════════════════════════════════════════════════ */
body .ticker-item-body {
    /* מיקום — right/left מוגדרים ע"י ticker-expand.js */
    position:         absolute;
    top:              100%;

    /* [FIX-A] רוחב = רוחב הפריט עצמו — מוגדר ע"י JS עם matchItemWidth */
    width:            auto;        /* JS יגדיר את הרוחב המדויק */
    min-width:        220px;
    max-width:        420px;

    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;
    scrollbar-color:  #ccc transparent;

    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;
    -webkit-line-clamp: unset;
    overflow:           visible;
}

/* ══════════════════════════════════════════════════
   [FIX-B] קישור "קרא עוד" — חץ אחד בלבד
   הסרנו את ה-SVG מה-PHP ומשתמשים ב-CSS pseudo-element
   ══════════════════════════════════════════════════ */
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;  /* RTL — חץ יופיע בצד שמאל */
}

/*
 * [FIX-B] מבטל כל SVG שנמצא בתוך ticker-item-link
 * (למניעת חץ כפול במידה ויש SVG ב-PHP)
 */
body .ticker-item-link svg {
    display: none !important;
}

/*
 * [FIX-B] חץ יחיד ← דרך ::after
 * בטיקר RTL "קרא עוד ‹" — החץ בצד שמאל
 */
body .ticker-item-link::after {
    content:     '‹';
    font-size:   15px;
    font-weight: 700;
    line-height: 1;
    display:     inline-block;
    color:       inherit;
    /* הזזה קלה לשיפור ויזואלי */
    transform:   translateY(-0.5px);
}

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);
}


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

    .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;
    }
}