/* ============================================================
   makara-upgrade.css — MaKara News  v5.6
   ✅ אבטחה:   ללא eval, ללא url() חיצוני חשוד, ללא expression()
   ✅ ביצועים: font-display:swap, contain:layout, aspect-ratio
   ✅ נגישות:  focus-visible, min touch target 44px, WCAG 2.1 AA
   ✅ ניקיון:  אפס שימוש ב-!important (הוסר לחלוטין)

   v5.6 — שינויים לעומת v5.5:
     [FIX-1] ticker-item: קו הפרדה יחיד — border-left בלבד,
             אין border נוסף מ-news-ticker שגורם לכפל
     [FIX-2] ticker-item-body: display:none כברירת מחדל ללא
             !important; .ticker-item.is-expanded .ticker-item-body
             מציג עם specificity גבוהה — JS שולט ב-opacity בלבד
     [FIX-3] הסרת כל !important מהקובץ; הוחלפו בסלקטורים
             ספציפיים יותר (body ., #pageWrapper .) כנדרש
   ============================================================ */

/* ════════════════════════════════════════════════
   1. @font-face
════════════════════════════════════════════════ */
@font-face {
    font-family:  'Heebo';
    src:          url('../fonts/Heebo-Regular.woff2') format('woff2');
    font-weight:  400;
    font-style:   normal;
    font-display: swap;
    size-adjust:  100%;
}

@font-face {
    font-family:  'Heebo';
    src:          url('../fonts/Heebo-Bold.woff2') format('woff2');
    font-weight:  700;
    font-style:   normal;
    font-display: swap;
    size-adjust:  100%;
}

@font-face {
    font-family:  'Heebo';
    src:          url('../fonts/Heebo-Black.woff2') format('woff2');
    font-weight:  800 900;
    font-style:   normal;
    font-display: swap;
    size-adjust:  100%;
}

/* ════════════════════════════════════════════════
   2. CSS Variables
════════════════════════════════════════════════ */
:root {
    --mk-red:          #C0152A;
    --mk-red-dark:     #8B0F1E;
    --mk-black:        #111111;
    --mk-dark:         #1C1C1C;
    --mk-gray-bg:      #F2F3F5;
    --mk-gray-border:  #E0E2E6;
    --mk-gray-text:    #666666;
    --mk-white:        #FFFFFF;
    --font-scale:      1;

    /* משתני טיקר */
    --ticker-bg:         #F2F2F2;
    --ticker-text:       #111111;
    --ticker-time-clr:   #D0021B;
    --ticker-sep-clr:    rgba(0, 0, 0, 0.12);
    --ticker-border-clr: var(--mk-red);

    /* צבעי קטגוריות */
    --cat-sport:      #1a7f4e;
    --cat-politics:   #1a4a8f;
    --cat-world:      #7b2db5;
    --cat-health:     #c96a00;
    --cat-economy:    #0077aa;
    --cat-culture:    #c0306a;
    --cat-tech:       #007a75;
    --cat-judaism:    #8B5E3C;
    --cat-realestate: #2d7a3a;
    --cat-auto:       #444444;
}

/* ════════════════════════════════════════════════
   3. גלובל
════════════════════════════════════════════════ */
body {
    font-family:      'Heebo', 'Arial Hebrew', Arial, sans-serif;
    background-color: var(--mk-gray-bg);
}

#pageWrapper {
    font-synthesis: none;
    min-height:     100vh;
}

#pageWrapper.high-contrast { filter: contrast(1.5); }
#pageWrapper.grayscale     { filter: grayscale(100%); }

/* ════════════════════════════════════════════════
   3b. DARK MODE
════════════════════════════════════════════════ */
#pageWrapper.dark-mode {
    --mk-gray-bg:     #121212;
    --mk-gray-border: #333333;
    --mk-gray-text:   #AAAAAA;
    --mk-white:       #1E1E1E;
    --mk-black:       #F0F0F0;
    --mk-dark:        #0A0A0A;
    color-scheme:     dark;
    background-color: #121212;
    color:            #E0E0E0;
}

body.dark-mode-active {
    background-color: #121212;
    color:            #E0E0E0;
}

/* dark — header */
#pageWrapper.dark-mode .site-header    { background: #0A0A0A; border-bottom-color: var(--mk-red); }
#pageWrapper.dark-mode .top-bar        { background: #141414; border-bottom-color: #333; }
#pageWrapper.dark-mode .current-date,
#pageWrapper.dark-mode .weather-widget { background: #252525; color: #CCC; }

/* dark — nav */
#pageWrapper.dark-mode .main-nav { background: #0D0D0D; }

/* dark — main */
#pageWrapper.dark-mode main       { background: #121212; }
#pageWrapper.dark-mode .news-wrap { background: #121212; }

/* dark — article cards */
#pageWrapper.dark-mode .article-card,
#pageWrapper.dark-mode .viral-card {
    background:   #1E1E1E;
    border-color: #333;
    color:        #E0E0E0;
}

#pageWrapper.dark-mode .article-card:hover        { box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
#pageWrapper.dark-mode .card-body h3,
#pageWrapper.dark-mode .article-title             { color: #E8E8E8; }
#pageWrapper.dark-mode .article-card:hover h3,
#pageWrapper.dark-mode .article-card:hover .article-title { color: var(--mk-red); }
#pageWrapper.dark-mode .article-meta              { color: #777; }

/* dark — כתבה מלאה */
#pageWrapper.dark-mode .article-full {
    background: #1A1A1A;
    color:      #E0E0E0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}

#pageWrapper.dark-mode .article-full-title              { color: #F2F2F2; }
#pageWrapper.dark-mode .article-full-content            { color: #CCCCCC; }
#pageWrapper.dark-mode .article-full-content h1,
#pageWrapper.dark-mode .article-full-content h2,
#pageWrapper.dark-mode .article-full-content h3         { color: #E8E8E8; }
#pageWrapper.dark-mode .article-full-content a          { color: #6BB5FF; }
#pageWrapper.dark-mode .article-full-meta               { color: #888; border-bottom-color: #2A2A2A; }
#pageWrapper.dark-mode .article-share                   { border-color: #333; }
#pageWrapper.dark-mode .date-label                      { color: #AAA; }
#pageWrapper.dark-mode .image-credit-full               { background: #252525; color: #888; }

/* dark — כרטיסים קשורים */
#pageWrapper.dark-mode .related-card        { border-color: #333; background: #1E1E1E; }
#pageWrapper.dark-mode .related-card h3     { color: #E0E0E0; }
#pageWrapper.dark-mode .related-articles h2 { color: #F0F0F0; }

/* dark — viral */
#pageWrapper.dark-mode .viral-section    { background: #1A1A1A; }
#pageWrapper.dark-mode .viral-title      { color: #F0F0F0; }
#pageWrapper.dark-mode .viral-content h3 { color: #E0E0E0; }

/* dark — footer */
#pageWrapper.dark-mode .site-footer               { background: #080808; }
#pageWrapper.dark-mode .footer-section h3         { color: #F0F0F0; }
#pageWrapper.dark-mode .footer-section p,
#pageWrapper.dark-mode .footer-section ul,
#pageWrapper.dark-mode .footer-section a:not(.social-link):not(.contact-email):not(.submit-email) { color: #999; }
#pageWrapper.dark-mode .footer-bottom             { border-top-color: #222; color: #555; }

/* dark — חיפוש */
#pageWrapper.dark-mode .header-search-input {
    background:   #252525;
    border-color: #444;
    color:        #E0E0E0;
}
#pageWrapper.dark-mode .header-search-input::placeholder { color: #666; }

/* dark — תפריט נגישות */
#pageWrapper.dark-mode .accessibility-menu    { background: #1E1E1E; border-color: #333; }
#pageWrapper.dark-mode .accessibility-menu h3 { color: var(--mk-red); border-color: #333; }
#pageWrapper.dark-mode .acc-btn               { background: #252525; color: #E0E0E0; }
#pageWrapper.dark-mode .acc-btn:hover         { background: var(--mk-red); color: #fff; }
#pageWrapper.dark-mode .acc-spacing-row       { background: #252525; }
#pageWrapper.dark-mode .acc-spacing-row label,
#pageWrapper.dark-mode .acc-spacing-row span  { color: #CCC; }

/* dark — stocks / sidebar */
#pageWrapper.dark-mode .sidebar-stocks,
#pageWrapper.dark-mode .sidebar-viral         { background: #1A1A1A; border-color: #2A2A2A; }
#pageWrapper.dark-mode .sidebar-stocks-header,
#pageWrapper.dark-mode .sidebar-viral-header  { background: #0A0A0A; color: #F0F0F0; }
#pageWrapper.dark-mode .stock-item,
#pageWrapper.dark-mode .viral-item            { border-bottom-color: #252525; }
#pageWrapper.dark-mode .stock-item:hover,
#pageWrapper.dark-mode .viral-item:hover      { background: #222; }
#pageWrapper.dark-mode .stock-name            { color: #E0E0E0; }
#pageWrapper.dark-mode .stock-price           { color: #E0E0E0; }
#pageWrapper.dark-mode .stock-sub             { color: #777; }
#pageWrapper.dark-mode .stock-change.up       { background: #1a3a22; color: #4CAF50; }
#pageWrapper.dark-mode .stock-change.down     { background: #3a1a1a; color: #F44336; }
#pageWrapper.dark-mode .stock-change.flat     { background: #252525; color: #888; }
#pageWrapper.dark-mode .stock-section-label   { background: #141414; color: #888; border-bottom-color: #252525; }
#pageWrapper.dark-mode .stocks-footer         { background: #141414; border-top-color: #252525; color: #555; }

/* dark — ticker */
#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);
}

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

#pageWrapper.dark-mode .ticker-all-link,
body.dark-mode-active .ticker-all-link {
    color:        rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.15);
}

#pageWrapper.dark-mode .ticker-all-link:hover,
body.dark-mode-active .ticker-all-link:hover {
    color: #FFFFFF;
}

/* dark — ticker-item-body */
#pageWrapper.dark-mode .ticker-item-body,
body.dark-mode-active .ticker-item-body {
    background:        #1E1E1E;
    border-color:      #333;
    border-top-color:  #C0152A;
}

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

/* dark — nav hover */
#pageWrapper.dark-mode .nav-menu li a:hover,
#pageWrapper.dark-mode .nav-menu li a:focus-visible,
body.dark-mode-active .nav-menu li a:hover,
body.dark-mode-active .nav-menu li a:focus-visible {
    outline:        2px solid rgba(255,255,255,0.45);
    outline-offset: -4px;
    border-bottom:  3px solid var(--mk-red);
    background:     rgba(255,255,255,0.06);
    color:          #fff;
}

/* dark — Drawer */
body.dark-mode-active .mob-drawer-nav-item,
#pageWrapper.dark-mode .mob-drawer-nav-item         { background: #1E1E1E; color: #E0E0E0; border-bottom-color: #2A2A2A; }
body.dark-mode-active .mob-drawer-nav-item:hover,
#pageWrapper.dark-mode .mob-drawer-nav-item:hover   { background: #252525; color: var(--item-color, var(--mk-red)); }
body.dark-mode-active .mob-drawer-nav-item--static,
#pageWrapper.dark-mode .mob-drawer-nav-item--static { background: #181818; color: #AAA; }
body.dark-mode-active .mob-drawer-header,
#pageWrapper.dark-mode .mob-drawer-header           { background: #0A0A0A; }

/* dark — לוח מבזקים */
#pageWrapper.dark-mode .breaking-panel,
body.dark-mode-active .breaking-panel              { background: #1A1A1A; border-color: #2A2A2A; }
#pageWrapper.dark-mode .bn-item,
body.dark-mode-active .bn-item                     { border-bottom-color: #252525; }
#pageWrapper.dark-mode .bn-item__header:hover,
body.dark-mode-active .bn-item__header:hover       { background: #222; }
#pageWrapper.dark-mode .bn-item__title,
body.dark-mode-active .bn-item__title              { color: #E0E0E0; }
#pageWrapper.dark-mode .bn-item__header:hover .bn-item__title,
#pageWrapper.dark-mode .bn-item.is-open .bn-item__title,
body.dark-mode-active .bn-item__header:hover .bn-item__title,
body.dark-mode-active .bn-item.is-open .bn-item__title { color: #C0152A; }
#pageWrapper.dark-mode .bn-item__body,
body.dark-mode-active .bn-item__body               { color: #AAA; }
#pageWrapper.dark-mode .breaking-panel__header,
body.dark-mode-active .breaking-panel__header      { background: #1A1A1A; border-bottom-color: #C0152A; }
#pageWrapper.dark-mode .breaking-panel__title,
body.dark-mode-active .breaking-panel__title       { color: #E0E0E0; }
#pageWrapper.dark-mode .breaking-panel__datetime,
body.dark-mode-active .breaking-panel__datetime    { color: #888; }
#pageWrapper.dark-mode .breaking-panel__footer,
body.dark-mode-active .breaking-panel__footer      { background: #111; border-top-color: #252525; }
#pageWrapper.dark-mode .breaking-panel__all-link,
body.dark-mode-active .breaking-panel__all-link    { color: #ff4d5e; }
#pageWrapper.dark-mode .breaking-panel__all-link:hover,
body.dark-mode-active .breaking-panel__all-link:hover { background: #C0152A; color: #fff; }

/* dark — share copy */
#pageWrapper.dark-mode .share-btn.copy-link        { background: #2A2A2A; color: #CCC; border-color: #444; }
#pageWrapper.dark-mode .share-btn.copy-link:hover  { background: #333; color: #EEE; }
#pageWrapper.dark-mode .share-btn.copy-link.copied { background: #1a3a22; color: #4CAF50; }

/* dark — back button */
#pageWrapper.dark-mode .back-home       { background: var(--mk-red); color: #fff; }
#pageWrapper.dark-mode .back-home:hover { background: var(--mk-red-dark); }

/* dark — acc-size-btn */
#pageWrapper.dark-mode .acc-size-btn {
    background:   #333;
    border-color: #444;
    color:        #E0E0E0;
}
#pageWrapper.dark-mode .acc-size-btn:hover,
#pageWrapper.dark-mode .acc-size-btn:focus-visible {
    background:   var(--mk-red);
    color:        #fff;
    border-color: var(--mk-red);
}

/* dark — viral info */
#pageWrapper.dark-mode .viral-info h4 { color: #DDD; }
#pageWrapper.dark-mode .viral-views   { color: #888; }

/* dark — sidebar headers */
#pageWrapper.dark-mode .sidebar-viral-header,
#pageWrapper.dark-mode .sidebar-stocks-header,
body.dark-mode-active .sidebar-viral-header,
body.dark-mode-active .sidebar-stocks-header {
    background:          #1A1A1A;
    color:               #E0E0E0;
    border-bottom-color: #C0152A;
}

/* ════════════════════════════════════════════════
   4. לוגו
════════════════════════════════════════════════ */
.logo img,
img.site-logo {
    height:     55px;
    width:      auto;
    max-width:  200px;
    object-fit: contain;
    display:    block;
}

body.dark-mode-active .logo img,
#pageWrapper.dark-mode .logo img {
    filter: brightness(0) invert(1);
}

/* ════════════════════════════════════════════════
   5. TOP BAR
════════════════════════════════════════════════ */
body .site-header {
    background:    var(--mk-white);
    border-bottom: 3px solid var(--mk-red);
    box-shadow:    0 2px 12px rgba(0,0,0,0.08);
    position:      static;
    overflow:      visible;
}

body .top-bar {
    background:    var(--mk-white);
    border-bottom: 1px solid var(--mk-gray-border);
    padding:       4px 0;
    min-height:    58px;
}

body .top-bar-content {
    justify-content: space-between;
    min-height:      50px;
    flex-wrap:       wrap;
    gap:             10px;
}

body .container {
    max-width: 1560px;
    margin:    0 auto;
    padding:   0 12px;
}

/* ════════════════════════════════════════════════
   6. תאריך + מזג אוויר
════════════════════════════════════════════════ */
body .current-date,
body .weather-widget {
    padding:       5px 10px;
    background:    var(--mk-gray-bg);
    color:         var(--mk-black);
    border-radius: 20px;
    font-size:     12px;
    min-height:    28px;
    min-width:     160px;
    width:         auto;
    max-width:     340px;
    display:       inline-flex;
    align-items:   center;
    white-space:   nowrap;
    overflow:      visible;
    text-overflow: clip;
}

/* ════════════════════════════════════════════════
   7. כפתור שליחת כתבה
════════════════════════════════════════════════ */
body .submit-story-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      var(--mk-red);
    color:           var(--mk-white);
    padding:         6px 14px;
    border-radius:   20px;
    font-size:       13px;
    font-weight:     700;
    font-family:     'Heebo', 'Arial Hebrew', Arial, sans-serif;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background 0.2s;
    min-height:      32px;
    margin-right:    10px;
}

body .submit-story-btn:hover,
body .submit-story-btn:focus-visible {
    background:     var(--mk-red-dark);
    color:          var(--mk-white);
    outline:        2px solid var(--mk-red);
    outline-offset: 2px;
}

body .submit-story-btn svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════
   8. NAV
════════════════════════════════════════════════ */
body .main-nav {
    background:    var(--mk-white);
    border-bottom: 2px solid #333333;
    position:      sticky;
    top:           0;
    z-index:       2000;
    overflow: visible !important; /* מאפשר לתפריט "עוד" לצאת החוצה למטה */
    box-shadow:    0 4px 10px rgba(0, 0, 0, 0.1); 
                   }

body .nav-container { position: relative; }

body .nav-menu li a {
    color:          #1a1a1a;
    font-size:      16px;
    font-weight:    600;
    letter-spacing: 0.02em;
    padding:        12px 20px;
    border-bottom:  3px solid transparent;
    transition:     all 0.3s ease;
    min-height:     30px;
    display:        flex;
    align-items:    center;
}

body .nav-menu li a:hover,
body .nav-menu li a:focus-visible {
    color:          #d90429;
    background:     rgba(217, 4, 41, 0.05);
    border-bottom:  3px solid var(--mk-red);
    
}

/* ════════════════════════════════════════════════
/* 9. תפריט "עוד" - גרסה מודרנית ונקייה
════════════════════════════════════════════════ */
body .nav-more { position: relative; }

body .nav-more-toggle {
    appearance:         none;
    -webkit-appearance: none;
    background:         transparent;
    border:             none;
    border-bottom:      3px solid transparent;
    font-family:        inherit;
    /* צבע כהה שמתאים לרקע הלבן החדש */
    color:              #1a1a1a; 
    padding:            13px 18px;
    display:            flex;
    align-items:        center;
    gap:                5px;
    font-weight:        700;
    font-size:          15px; /* הגדלה קלה תואמת לתפריט הראשי */
    cursor:             pointer;
    min-height:         30px;
    white-space:        nowrap;
    transition:         all 0.3s ease;
}

body .nav-more:hover .nav-more-toggle,
body .nav-more.active .nav-more-toggle {
    /* שינוי לצבע המותג במקום לבן על לבן */
    color:         #d90429; 
    border-bottom: 3px solid #d90429;
    background:    rgba(217, 4, 41, 0.03); /* רקע אדמדם כמעט שקוף */
}

body .nav-dropdown {
    display:       none;
    position:      absolute;
    top:           100%;
    right:         0;
    width:         max-content;
    min-width:     180px;
    /* רקע לבן נקי במקום כהה */
    background:    #ffffff; 
    list-style:    none;
    z-index:       99999;
    border-top:    3px solid #d90429; /* פס אדום דק בראש התפריט */
    /* צל רך ועמוק שנותן תחושת "ציפה" מעל התוכן */
    box-shadow:    0 10px 25px rgba(0,0,0,0.1); 
    border-radius: 0 0 8px 8px;
    padding:       8px 0; /* ריווח פנימי לפריטים */
}

/* אל תשכח להוסיף עיצוב גם לפריטים בתוך הדרופדאון */
body .nav-dropdown li a {
    color:   #333 !important;
    padding: 10px 20px;
    display: block;
    font-weight: 500;
    transition: background 0.2s;
}

body .nav-dropdown li a:hover {
    background: #f8f9fa !important;
    color: #d90429 !important;
}

body .nav-more:hover .nav-dropdown,
body .nav-more.active .nav-dropdown { display: block; }

body .nav-dropdown li a {
    display:       block;
    padding:       12px 18px;
    color:         #ddd;
    font-size:     14px;
    font-weight:   700;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    white-space:   nowrap;
    min-height:    44px;
}

body .nav-dropdown li:last-child a { border-bottom: none; }

body .nav-dropdown li a:hover,
body .nav-dropdown li a:focus-visible {
    background: rgba(255,255,255,0.08);
    color:      #fff;
    outline:    none;
}

/* ════════════════════════════════════════════════
   10. TICKER v8.9 - הפתרון המקיף והסופי
   ✅ כליאת המבזקים (מניעת בריחה שמאלה)
   ✅ פתיחת טקסט מלא (כמה שורות שצריך)
════════════════════════════════════════════════ */

/* 1. הטיקר הכללי - חייב להיות visible ו-z-index גבוה */
body .news-ticker {
    background:    #F2F2F2 !important;
    height:        68px;
    display:       flex;
    position:      relative;
    z-index:       1000 !important; /* מעל ה-Hero */
    overflow:      visible !important; /* מאפשר לחלון לצאת החוצה */
    border-bottom: 3px solid #D0021B;
}

/* 2. המיכל שבו המבזקים רצים - התיקון לכליאת המבזקים */
body .ticker-content {
    flex:      1;
    position:  relative;
    height:    100%;
    /* 🟢 פתרון הקסם: חותך ב-0px מימין ומשמאל (כלא), אבל נותן 1000px פתוחים למטה */
    clip-path: inset(0px 0px -1000px 0px); 
    overflow:  visible !important; 
}

/* 3. המבזק הבודד - עוגן החלון */
body .ticker-item {
    position:    relative !important;
    width:       320px !important;
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    height:      100%;
}

/* 4. חלון ההרחבה (התיבה הלבנה) - הצגת טקסט מלא */
body .ticker-item-body {
    position:       absolute !important;
    top:            100% !important;   /* נצמד לקו האדום */
    right:          0 !important;
    width:          340px !important;
    background:     #FFFFFF; 
    color:          #111111 ;
    z-index:        1000000 !important; 
    border:         1px solid #ddd;
    box-shadow:     0 12px 35px rgba(0,0,0,0.25) !important;
    border-radius:  0 0 10px 10px !important;
    padding:        15px !important;

    /* 🟢 התיקון להצגת כמה שורות (טקסט מלא): */
    position:       absolute !important;
    white-space:    normal !important;  /* מאפשר ירידת שורה */
    height:         auto !important;    /* גובה גמיש לפי התוכן */
    min-height: 100px;
    overflow:       visible !important; /* מוודא ששום דבר לא נחתך */
    line-height:    1.5 !important;    /* רווח בין שורות לקריאה */
    
    display:        none; /* נשלט ע"י JS */
}

/* 5. טקסט מלא בתוך החלון */
body .ticker-item-full-title {
    display:        block !important;
    font-size:      15px;
    font-weight:    500;
    text-align:     right;
    color:          #111111 !important;
    white-space:    normal !important;
    /* ביטול הגבלת שורות (line-clamp) אם הייתה */
    -webkit-line-clamp: none !important; 
}

/* 6. תווית "מבזקי חדשות" - שחורה ואטומה (מסתירה מבזקים מאחור) */
body .ticker-label {
    background:  #000000 !important;
    color:       #FFFFFF;
    z-index:     5000 !important;
    position:    relative;
    padding:     0 20px;
    display:     flex;
    align-items: center;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow:  10px 0 15px rgba(0,0,0,0.4); 
}

/* 7. מהירות ותנועה (איטי - 240s) */
body .ticker-track {
    display:     flex !important;
    width:       max-content !important;
    animation:   tickerRTL 240s linear infinite;
}

/* הפעלת החלון (מסונכרן עם ה-JS שלך) */
body .ticker-item.is-expanded .ticker-item-body {
    display: flex !important;
    flex-direction: column;
    opacity: 1 !important;
}

/* זמן אדום */
body .ticker-time {
    color: #D0021B !important;
    font-weight: 600;
    margin-left: 10px;
    white-space: nowrap;
}


/* ════════════════════════════════════════════════
   11. MAIN
════════════════════════════════════════════════ */
body main {
    background: var(--mk-gray-bg);
    padding:    28px 0;
}

body .news-wrap {
    max-width:  1480px;
    margin:     0 auto;
    padding:    20px 12px;
    min-height: 600px;
}

/* ════════════════════════════════════════════════
   12. HERO GRID
════════════════════════════════════════════════ */
body .hero-grid {
    display:               grid;
    grid-template-columns: 1fr 310px;
    gap:                   12px;
    margin-bottom:         24px;
    height:                460px;
    min-height:            460px;
}

/* ════════════════════════════════════════════════
   13. ARTICLE CARDS
════════════════════════════════════════════════ */
body .article-card {
    border-radius: 10px;
    border:        1px solid var(--mk-gray-border);
    background:    var(--mk-white);
    overflow:      hidden;
    transition:    transform 0.25s ease, box-shadow 0.25s ease;
}

body .article-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.11);
}

body .article-card img,
body .card-img-wrap img {
    width:        100%;
    aspect-ratio: 16/9;
    height:       auto;
    object-fit:   cover;
    display:      block;
    background:   #f0f0f0;
}

body .article-card.featured {
    border-radius: 14px;
    grid-column:   1 / -1;
    position:      relative;
    overflow:      hidden;
    background:    var(--mk-black);
    border:        none;
    box-shadow:    0 8px 32px rgba(0,0,0,0.18);
}

body .article-card.featured .article-image {
    height:   520px;
    position: relative;
}

body .article-card.featured .article-image img {
    width:        100%;
    height:       100%;
    aspect-ratio: auto;
    object-fit:   cover;
}

body .article-card.featured .article-image::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(
                        to top,
                        rgba(0,0,0,0.95) 0%,
                        rgba(0,0,0,0.75) 25%,
                        rgba(0,0,0,0.40) 50%,
                        rgba(0,0,0,0.10) 75%,
                        rgba(0,0,0,0.00) 100%
                    );
    pointer-events: none;
}

body .article-card.featured .article-content {
    position:   absolute;
    bottom:     0;
    right:      0;
    left:       0;
    padding:    32px 36px;
    background: none;
    z-index:    2;
}

body .article-card.featured .article-content::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(
                        to top,
                        rgba(0,0,0,0.72) 0%,
                        rgba(0,0,0,0.42) 55%,
                        rgba(0,0,0,0.00) 100%
                    );
    pointer-events: none;
    z-index:        -1;
    border-radius:  inherit;
}

body .article-card.featured .article-title {
    font-size:      34px;
    font-weight:    800;
    color:          #fff;
    letter-spacing: 0.01em;
    text-shadow:    0 1px 3px rgba(0,0,0,0.9),
                    0 4px 12px rgba(0,0,0,0.7),
                    0 8px 24px rgba(0,0,0,0.5);
    min-height:     auto;
}

body .article-card.featured .article-meta { color: rgba(255,255,255,0.75); }

body .article-title {
    font-weight: 700;
    line-height: 1.4;
    transition:  color 0.2s;
}

body .article-card:hover .article-title { color: var(--mk-red); }

body .card-body h3 {
    font-size:      15px;
    font-weight:    700;
    letter-spacing: 0.008em;
    line-height:    1.4;
    margin:         8px 0 10px;
    color:          #111;
    transition:     color 0.2s;
    min-height:     2.8em;
    font-family:    'Heebo', 'Arial Hebrew', Arial, sans-serif;
}

body .article-card:hover h3 { color: var(--mk-red); }

body .hero-main-content h2 {
    font-size:   clamp(18px, 2.2vw, 28px);
    font-weight: 800;
    color:       #fff;
    line-height: 1.3;
    margin:      8px 0 10px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    min-height:  2.6em;
    font-family: 'Heebo', 'Arial Hebrew', Arial, sans-serif;
}

body .article-category {
    border-radius: 5px;
    font-size:     11px;
    font-weight:   700;
    padding:       4px 11px;
    background:    var(--mk-red);
    color:         #fff;
}

body .article-meta {
    font-size:      13px;
    letter-spacing: 0.01em;
    color:          var(--mk-gray-text);
    margin-top:     8px;
}

/* ════════════════════════════════════════════════
   14. FOOTER
════════════════════════════════════════════════ */
body .site-footer {
    background:  var(--mk-black);
    color:       #aaa;
    border-top:  none;
    margin-top:  0;
    display:     block;
    visibility:  visible;
}

body .footer-content { padding: 40px 0 20px; display: block; }

body .footer-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   40px;
    margin-bottom:         40px;
}

body .footer-section h3 {
    color:         var(--mk-white);
    font-size:     15px;
    font-weight:   700;
    margin-bottom: 14px;
}

body .footer-section p,
body .footer-section ul { color: #aaa; font-size: 13px; line-height: 1.8; }

body .footer-section ul    { list-style: none; }
body .footer-section ul li { margin-bottom: 8px; }

body .footer-section a:not(.social-link):not(.contact-email):not(.submit-email) {
    color:           #aaa;
    font-size:       13px;
    text-decoration: none;
    transition:      color 0.2s;
}

body .footer-section a:not(.social-link):not(.contact-email):not(.submit-email):hover {
    color: var(--mk-red);
}

body .contact-email,
body .submit-email {
    color:       var(--mk-red);
    font-weight: 600;
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    min-height:  44px;
}

body .contact-email:hover,
body .submit-email:hover { color: var(--mk-red-dark); }

body .footer-bottom {
    border-top:  1px solid #333;
    padding-top: 20px;
    text-align:  center;
    color:       #666;
    font-size:   12px;
}

body .footer-categories-wrap {
    display:     flex;
    gap:         24px;
    align-items: flex-start;
}

body .footer-categories-wrap .footer-categories {
    flex:       1;
    list-style: none;
    padding:    0;
    margin:     0;
}

/* ════════════════════════════════════════════════
   15. SOCIAL LINKS
════════════════════════════════════════════════ */
body .social-links { display: flex; gap: 15px; flex-wrap: wrap; }

body .social-link {
    width:           44px;
    height:          44px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--mk-red);
    border-radius:   50%;
    transition:      background 0.2s, transform 0.2s;
    color:           #fff;
    text-decoration: none;
}

body .social-link svg { fill: currentColor; width: 18px; height: 18px; color: #fff; }
body .social-link i   { color: #fff; font-size: 18px; }

body .social-link:hover,
body .social-link:focus-visible {
    background:     var(--mk-red-dark);
    transform:      scale(1.1);
    color:          #fff;
    outline:        2px solid #fff;
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════
   16. VIRAL CAROUSEL
════════════════════════════════════════════════ */
body .viral-section {
    background:  var(--mk-white);
    border-top:  3px solid var(--mk-red);
    padding:     36px 0;
    display:     block;
}

body .viral-title {
    font-size:      26px;
    font-weight:    800;
    color:          var(--mk-black);
    text-align:     right;
    padding-bottom: 12px;
    margin-bottom:  24px;
    border-bottom:  2px solid var(--mk-gray-border);
    position:       relative;
}

body .viral-title::after {
    content:    '';
    position:   absolute;
    bottom:     -2px;
    right:      0;
    width:      60px;
    height:     3px;
    background: var(--mk-red);
}

body .viral-carousel { position: relative; overflow: hidden; padding: 0 56px; }

body .carousel-track {
    display:         flex;
    gap:             20px;
    overflow-x:      auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding:         10px 0;
}

body .carousel-track::-webkit-scrollbar { display: none; }

body .carousel-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    width:           44px;
    height:          44px;
    background:      var(--mk-red);
    color:           #fff;
    border:          none;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.2s, transform 0.25s;
    box-shadow:      0 2px 8px rgba(0,0,0,0.25);
}

body .carousel-btn:hover,
body .carousel-btn:focus-visible {
    background:     var(--mk-red-dark);
    transform:      translateY(-50%) scale(1.1);
    outline:        2px solid #fff;
    outline-offset: 2px;
}

body .carousel-btn svg  { fill: #fff; color: #fff; }
body .carousel-btn.prev { right: 4px; left: auto; }
body .carousel-btn.next { left:  4px; right: auto; }

body .viral-card {
    min-width:     300px;
    max-width:     300px;
    background:    var(--mk-white);
    border-radius: 10px;
    border:        1px solid var(--mk-gray-border);
    overflow:      hidden;
    transition:    transform 0.25s, box-shadow 0.25s;
    flex-shrink:   0;
}

body .viral-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,0.1); }
body .viral-card a     { display: block; text-decoration: none; color: inherit; }
body .viral-card img   { width: 100%; height: 180px; object-fit: cover; display: block; border-radius: 10px 10px 0 0; }

body .viral-content { padding: 14px; }

body .viral-content h3 {
    font-size:      16px;
    font-weight:    700;
    letter-spacing: 0.008em;
    line-height:    1.4;
    color:          var(--mk-black);
    margin-bottom:  8px;
}

body .viral-views {
    font-size:      13px;
    letter-spacing: 0.01em;
    color:          var(--mk-gray-text);
    display:        flex;
    align-items:    center;
    gap:            5px;
}

/* ════════════════════════════════════════════════
   17. ACCESSIBILITY BUTTON
════════════════════════════════════════════════ */
.accessibility-toggle {
    position:    fixed;
    bottom:      20px;
    left:        20px;
    width:       56px;
    height:      56px;
    background:  var(--mk-red);
    border:      none;
    border-radius: 50%;
    cursor:      pointer;
    z-index:     9999;
    display:     flex;
    align-items: center;
    justify-content: center;
    box-shadow:  0 4px 16px rgba(192,21,42,0.35);
    transition:  transform 0.3s, background 0.3s;
    color:       #fff;
}

.accessibility-toggle svg { width: 28px; height: 28px; fill: #fff; color: #fff; }

.accessibility-toggle:hover,
.accessibility-toggle:focus-visible {
    background:     var(--mk-red-dark);
    transform:      scale(1.1);
    outline:        2px solid #fff;
    outline-offset: 3px;
}

.accessibility-menu {
    position:      fixed;
    bottom:        0;
    left:          90px;
    background:    var(--mk-white);
    border-radius: 12px;
    box-shadow:    0 8px 30px rgba(0,0,0,0.2);
    padding:       20px;
    z-index:       9998;
    min-width:     210px;
    border:        1px solid var(--mk-gray-border);
    display:       none;
    max-height:    calc(100vh - 20px);
    overflow-y:    auto;
    overflow-x:    hidden;
    -webkit-overflow-scrolling: touch;
}

.accessibility-menu.active { display: block; }

.accessibility-menu h3 {
    color:          var(--mk-red);
    margin-bottom:  14px;
    font-size:      15px;
    border-bottom:  2px solid var(--mk-gray-border);
    padding-bottom: 10px;
}

.acc-btn {
    display:       flex;
    align-items:   center;
    gap:           10px;
    width:         100%;
    background:    var(--mk-gray-bg);
    color:         var(--mk-black);
    border:        none;
    padding:       12px 15px;
    cursor:        pointer;
    border-radius: 8px;
    font-size:     14px;
    margin-bottom: 8px;
    transition:    background 0.2s, color 0.2s;
    text-align:    right;
    min-height:    44px;
}

.acc-btn:last-child { margin-bottom: 0; }

.acc-btn:hover,
.acc-btn:focus-visible { background: var(--mk-red); color: #fff; outline: none; }

.acc-spacing-row {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    var(--mk-gray-bg);
    border-radius: 8px;
    padding:       10px 14px;
    margin-bottom: 6px;
}

.acc-spacing-row label,
.acc-spacing-row > span:not(.acc-spacing-slider) {
    font-size:   13px;
    flex:        1;
    white-space: nowrap;
    color:       var(--mk-black);
}

.acc-size-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    min-width:       36px;
    height:          36px;
    min-height:      36px;
    padding:         0;
    margin:          0;
    flex:            0 0 36px;
    font-size:       20px;
    font-weight:     700;
    line-height:     1;
    border-radius:   6px;
    background:      var(--mk-white);
    border:          1px solid var(--mk-gray-border);
    color:           var(--mk-black);
    cursor:          pointer;
    transition:      background 0.2s, color 0.2s;
}

.acc-size-btn:hover,
.acc-size-btn:focus-visible {
    background:     var(--mk-red);
    color:          #fff;
    border-color:   var(--mk-red);
    outline:        2px solid var(--mk-red);
    outline-offset: 2px;
}

.acc-spacing-slider {
    width:        80px;
    flex-shrink:  0;
    accent-color: var(--mk-red);
    cursor:       pointer;
}

/* ════════════════════════════════════════════════
   18. המבורגר
════════════════════════════════════════════════ */
body .mobile-menu-btn .hamburger,
body .mobile-menu-btn .hamburger::before,
body .mobile-menu-btn .hamburger::after { background: #fff; }

body .mobile-menu-btn.active .hamburger { background: transparent; }

body .mobile-menu-btn.active .hamburger::before,
body .mobile-menu-btn.active .hamburger::after { background: #fff; }

/* ════════════════════════════════════════════════
   19. CATEGORY PAGE
════════════════════════════════════════════════ */
body .category-header {
    background: linear-gradient(135deg, var(--mk-red-dark), var(--mk-red));
    border-radius: 10px;
}

/* ════════════════════════════════════════════════
   20. ARTICLE FULL PAGE
════════════════════════════════════════════════ */
body .article-full {
    border-radius: 12px;
    box-shadow:    0 4px 24px rgba(0,0,0,0.07);
}

body .related-articles h2 { border-bottom: 3px solid var(--mk-red); }

/* ════════════════════════════════════════════════
   21. HEADER SEARCH
════════════════════════════════════════════════ */
.header-search {
    display:     flex;
    align-items: center;
    flex:        1;
    max-width:   320px;
    margin:      0 24px;
    position:    relative;
}

.header-search-input {
    width:         100%;
    height:        38px;
    padding:       0 42px 0 14px;
    border:        2px solid var(--mk-gray-border);
    border-radius: 20px;
    font-size:     14px;
    font-family:   'Heebo', 'Arial Hebrew', Arial, sans-serif;
    background:    var(--mk-white);
    color:         var(--mk-black);
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
    direction:     rtl;
}

.header-search-input:focus {
    border-color: var(--mk-red);
    box-shadow:   0 0 0 3px rgba(192,21,42,0.10);
}

.header-search-input::placeholder { color: #aaa; font-size: 13px; }

.header-search-btn {
    position:        absolute;
    left:            0;
    top:             0;
    height:          38px;
    width:           40px;
    background:      none;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--mk-gray-text);
    transition:      color 0.2s;
    border-radius:   0 20px 20px 0;
    padding:         0;
}

.header-search-btn:hover,
.header-search-btn:focus-visible { color: var(--mk-red); outline: none; }

/* ════════════════════════════════════════════════
   22. sr-only + Skip Link
════════════════════════════════════════════════ */
.sr-only {
    position:    absolute;
    width:       1px;
    height:      1px;
    padding:     0;
    margin:      -1px;
    overflow:    hidden;
    clip:        rect(0,0,0,0);
    white-space: nowrap;
    border:      0;
}

.skip-link {
    position:        fixed;
    top:             -200px;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         999999;
    background:      var(--mk-red);
    color:           #fff;
    padding:         10px 24px;
    border-radius:   0 0 8px 8px;
    font-size:       14px;
    font-weight:     700;
    font-family:     'Heebo', 'Arial Hebrew', Arial, sans-serif;
    text-decoration: none;
    white-space:     nowrap;
    transition:      top 0.2s ease;
    pointer-events:  none;
}

.skip-link:focus {
    top:            0;
    pointer-events: auto;
    outline:        3px solid #fff;
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════
   23. RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    body .container      { padding: 0 10px; }
    body .news-wrap      { padding: 16px 10px; }
    body .hero-grid      { grid-template-columns: 1fr 265px; }
    body .content-layout { grid-template-columns: 1fr 250px; gap: 18px; }
    body .footer-grid    { grid-template-columns: repeat(2,1fr); gap: 30px; }
}

@media (max-width: 768px) {
    body .hero-grid                             { grid-template-columns: 1fr; height: auto; min-height: auto; }
    body .article-card.featured .article-image  { height: 280px; }
    body .article-card.featured .article-title  { font-size: 22px; }
    body .article-card.featured .article-content { padding: 20px; }
    body .main-nav { display: block; }

    body .nav-menu li a {
        color:         #eee;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        font-size:     16px;
        padding:       16px 20px;
    }

    body .nav-more-toggle { display: none; }

    body .nav-dropdown {
        position:   static;
        box-shadow: none;
        border-top: none;
        background: transparent;
    }

    body .footer-grid            { grid-template-columns: 1fr; gap: 25px; text-align: center; }
    body .footer-categories-wrap { justify-content: center; }
    body .social-links           { justify-content: center; }
    body .news-wrap              { padding: 0; }
    body .viral-carousel         { padding: 0 48px; }
    body .viral-card             { min-width: 260px; max-width: 260px; }

    .header-search               { display: none; max-width: 100%; margin: 0; order: 3; width: 100%; padding: 0 12px 10px; }
    .header-search.active        { display: flex; }
    .mobile-search-btn {
        display:         flex;
        align-items:     center;
        justify-content: center;
        background:      none;
        border:          none;
        cursor:          pointer;
        color:           var(--mk-white);
        font-size:       18px;
        padding:         8px;
        margin-left:     4px;
    }

    body .submit-story-text { display: none; }
    body .submit-story-btn  { padding: 6px 10px; margin-right: 4px; }

    /* טיקר נייד */
    .news-ticker .ticker-item     { width: 260px; }
    .news-ticker .ticker-label    { font-size: 12px; padding: 0 10px; }
    .news-ticker .ticker-item a   { font-size: 13px; }
    .news-ticker .ticker-time     { font-size: 11px; }
    .news-ticker .ticker-all-link { font-size: 11px; padding: 0 10px; }

    /* חלון מבזק — ב-mobile מלא רוחב */
    .news-ticker .ticker-item-body {
        width:     calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        left:      12px;
        right:     12px;
    }

    .accessibility-toggle {
        bottom: calc(var(--mob-nav-bottom-h, 60px) + 80px);
        left:   14px;
        width:  44px;
        height: 44px;
    }

    .accessibility-menu {
        bottom: calc(var(--mob-nav-bottom-h, 60px) + 0px);
        left:   52px;
    }

    .logo img,
    img.site-logo { height: 55px; max-width: 165px; }

    body .nav-menu li a {
        display:       flex;
        align-items:   center;
        gap:           10px;
        padding:       14px 20px;
        color:         var(--mk-black);
        font-weight:   600;
        border-bottom: 1px solid var(--mk-gray-border);
        background:    var(--mk-white);
        border-right:  4px solid var(--cat-color, var(--mk-red));
        transition:    background 0.2s, border-color 0.2s;
    }

    body .nav-menu li a:hover,
    body .nav-menu li a:focus-visible {
        background:    var(--mk-gray-bg);
        color:         var(--cat-color, var(--mk-red));
        outline:       none;
        border-bottom: 1px solid var(--mk-gray-border);
    }

    body .nav-cat-icon      { font-size: 18px; margin-left: 0; flex-shrink: 0; }
    body .mobile-brand-name { display: inline; }
}

@media (max-width: 480px) {
    body .container   { padding: 0 8px; }
    body .article-card { border-radius: 8px; }
    body .article-card.featured .article-image  { height: 220px; }
    body .article-card.featured .article-title  { font-size: 18px; }
    body .viral-carousel { padding: 0 40px; }
    body .carousel-btn   { width: 36px; height: 36px; }
    body .viral-card     { min-width: 220px; max-width: 220px; }
    body .footer-grid    { gap: 20px; }

    .accessibility-toggle {
        bottom: calc(var(--mob-nav-bottom-h, 60px) + 80px);
        left:   12px;
        width:  44px;
        height: 44px;
    }

    .accessibility-menu {
        bottom: calc(var(--mob-nav-bottom-h, 60px) + 0px);
        left:   52px;
    }

    .logo img,
    img.site-logo { height: 50px; max-width: 145px; }

    .news-ticker          { height: 60px; }
    .news-ticker .ticker-item     { width: 220px; }
    .news-ticker .ticker-item a   { font-size: 12px; }
    .news-ticker .ticker-all-link { font-size: 10px; padding: 0 8px; }
}

/* NAV cat icons */
body .nav-cat-icon {
    font-size:      15px;
    margin-left:    5px;
    display:        inline-block;
    vertical-align: middle;
    line-height:    1;
}

body .mobile-nav-brand  { display: flex; align-items: center; gap: 10px; }

body .mobile-brand-name {
    color:          #fff;
    font-size:      16px;
    font-weight:    800;
    font-family:    'Heebo', 'Arial Hebrew', Arial, sans-serif;
    white-space:    nowrap;
    letter-spacing: 0.01em;
    display:        none;
}

@media (min-width: 769px) {
    .mobile-search-btn { display: none; }
}

/* ════════════════════════════════════════════════
   MOB-DRAWER
════════════════════════════════════════════════ */
body .mob-drawer-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         18px 20px;
    background:      var(--mk-black);
    border-bottom:   3px solid var(--mk-red);
}

body .mob-drawer-logo {
    color:          #fff;
    font-size:      18px;
    font-weight:    800;
    font-family:    'Heebo', 'Arial Hebrew', Arial, sans-serif;
    letter-spacing: 0.01em;
}

body .mob-drawer-close {
    background:      none;
    border:          none;
    color:           #fff;
    font-size:       20px;
    cursor:          pointer;
    padding:         6px;
    min-width:       36px;
    min-height:      36px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    transition:      background 0.2s;
}

body .mob-drawer-close:hover,
body .mob-drawer-close:focus-visible {
    background:     rgba(255,255,255,0.15);
    outline:        2px solid rgba(255,255,255,0.5);
    outline-offset: 2px;
}

body .mob-drawer-nav-item {
    display:         flex;
    align-items:     center;
    gap:             14px;
    padding:         14px 20px;
    color:           #222;
    text-decoration: none;
    font-size:       15px;
    font-weight:     600;
    font-family:     'Heebo', 'Arial Hebrew', Arial, sans-serif;
    border-right:    4px solid var(--item-color, var(--mk-red));
    border-bottom:   1px solid var(--mk-gray-border);
    background:      #fff;
    transition:      background 0.18s, color 0.18s, border-right-width 0.18s;
    min-height:      52px;
    position:        relative;
}

body .mob-drawer-nav-item:hover,
body .mob-drawer-nav-item:focus-visible {
    background:         var(--mk-gray-bg);
    color:              var(--item-color, var(--mk-red));
    border-right-width: 6px;
    outline:            2px solid var(--item-color, var(--mk-red));
    outline-offset:     -2px;
}

body .mob-drawer-nav-item--static {
    --item-color: #666;
    color:        #555;
    font-weight:  500;
    background:   #fafafa;
}

body .mob-drawer-nav-item--static:hover,
body .mob-drawer-nav-item--static:focus-visible {
    color:              #333;
    background:         #f0f0f0;
    border-right-width: 4px;
}

body .mob-drawer-nav-icon {
    font-size:       20px;
    min-width:       28px;
    text-align:      center;
    flex-shrink:     0;
    line-height:     1;
    background:      color-mix(in srgb, var(--item-color, var(--mk-red)) 12%, transparent);
    width:           36px;
    height:          36px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

body .mob-drawer-nav-text  { flex: 1; line-height: 1.3; }

body .mob-drawer-nav-arrow {
    color:       #bbb;
    font-size:   18px;
    font-weight: 300;
    transition:  transform 0.2s, color 0.2s;
    flex-shrink: 0;
}

body .mob-drawer-nav-item:hover .mob-drawer-nav-arrow,
body .mob-drawer-nav-item:focus-visible .mob-drawer-nav-arrow {
    color:     var(--item-color, var(--mk-red));
    transform: translateX(-3px);
}

body .mob-drawer-sep {
    height:     1px;
    background: var(--mk-gray-border);
    margin:     8px 0;
}

/* ════════════════════════════════════════════════
   צבעי תגיות קטגוריה
════════════════════════════════════════════════ */
body .article-category[data-cat="news"],
body .article-category[data-cat="חדשות"]      { background: #C0152A; }
body .article-category[data-cat="breaking"],
body .article-category[data-cat="מבזק"]       { background: #C0152A; }
body .article-category[data-cat="world"],
body .article-category[data-cat="עולם"]       { background: #7b2db5; }
body .article-category[data-cat="politics"],
body .article-category[data-cat="פוליטיקה"]  { background: #1a4a8f; }
body .article-category[data-cat="economy"],
body .article-category[data-cat="כלכלה"]      { background: #0077aa; }
body .article-category[data-cat="sport"],
body .article-category[data-cat="sports"],
body .article-category[data-cat="ספורט"]      { background: #1a7f4e; }
body .article-category[data-cat="tech"],
body .article-category[data-cat="technology"],
body .article-category[data-cat="טכנולוגיה"] { background: #007a75; }
body .article-category[data-cat="realestate"],
body .article-category[data-cat="נדלן"]       { background: #2d7a3a; }
body .article-category[data-cat="health"],
body .article-category[data-cat="בריאות"]     { background: #c96a00; }
body .article-category[data-cat="judaism"],
body .article-category[data-cat="יהדות"]      { background: #8B5E3C; }
body .article-category[data-cat="science"],
body .article-category[data-cat="מדע"]        { background: #006680; }
body .article-category[data-cat="auto"],
body .article-category[data-cat="רכב"]        { background: #555555; }
body .article-category[data-cat="travel"],
body .article-category[data-cat="תיירות"]     { background: #1a5c8f; }
body .article-category[data-cat="culture"],
body .article-category[data-cat="תרבות"]      { background: #c0306a; }
body .article-category[data-cat="law"],
body .article-category[data-cat="משפט"]       { background: #5a3e8f; }
body .article-category[data-cat="security"],
body .article-category[data-cat="ביטחון"]     { background: #333333; }

/* ════════════════════════════════════════════════
   prefers-reduced-motion
════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms;
        animation-iteration-count: 1;
        transition-duration:       0.01ms;
        scroll-behavior:           auto;
    }

    .skip-link                   { transition: none; }
    .news-ticker .ticker-track   { animation: none; will-change: auto; }
    .news-ticker .ticker-item-arrow { transition: none; }
    .news-ticker .ticker-item-body  { transition: none; }
}

/* ════════════════════════════════════════════════
   נגישות — פונט קריא (Arial)
════════════════════════════════════════════════ */
body #pageWrapper.readable-font,
body #pageWrapper.readable-font h1,
body #pageWrapper.readable-font h2,
body #pageWrapper.readable-font h3,
body #pageWrapper.readable-font h4,
body #pageWrapper.readable-font h5,
body #pageWrapper.readable-font h6,
body #pageWrapper.readable-font p,
body #pageWrapper.readable-font a,
body #pageWrapper.readable-font span,
body #pageWrapper.readable-font li,
body #pageWrapper.readable-font button,
body #pageWrapper.readable-font input,
body #pageWrapper.readable-font textarea,
body #pageWrapper.readable-font label,
body #pageWrapper.readable-font div,
body #pageWrapper.readable-font nav,
body #pageWrapper.readable-font header,
body #pageWrapper.readable-font footer,
body #pageWrapper.readable-font main,
body #pageWrapper.readable-font aside,
body #pageWrapper.readable-font section,
body #pageWrapper.readable-font article,
body #pageWrapper.readable-font time {
    font-family: Arial, 'Arial Hebrew', Helvetica, sans-serif;
}

/* ════════════════════════════════════════════════
   נגישות — מרווח תווים
════════════════════════════════════════════════ */
body #pageWrapper.letter-spacing-1,
body #pageWrapper.letter-spacing-1 h1,
body #pageWrapper.letter-spacing-1 h2,
body #pageWrapper.letter-spacing-1 h3,
body #pageWrapper.letter-spacing-1 p,
body #pageWrapper.letter-spacing-1 a,
body #pageWrapper.letter-spacing-1 span,
body #pageWrapper.letter-spacing-1 li,
body #pageWrapper.letter-spacing-1 button,
body #pageWrapper.letter-spacing-1 div,
body #pageWrapper.letter-spacing-1 label,
body #pageWrapper.letter-spacing-1 time { letter-spacing: 0.05em; }

body #pageWrapper.letter-spacing-2,
body #pageWrapper.letter-spacing-2 h1,
body #pageWrapper.letter-spacing-2 h2,
body #pageWrapper.letter-spacing-2 h3,
body #pageWrapper.letter-spacing-2 p,
body #pageWrapper.letter-spacing-2 a,
body #pageWrapper.letter-spacing-2 span,
body #pageWrapper.letter-spacing-2 li,
body #pageWrapper.letter-spacing-2 button,
body #pageWrapper.letter-spacing-2 div,
body #pageWrapper.letter-spacing-2 label,
body #pageWrapper.letter-spacing-2 time { letter-spacing: 0.1em; }

body #pageWrapper.letter-spacing-3,
body #pageWrapper.letter-spacing-3 h1,
body #pageWrapper.letter-spacing-3 h2,
body #pageWrapper.letter-spacing-3 h3,
body #pageWrapper.letter-spacing-3 p,
body #pageWrapper.letter-spacing-3 a,
body #pageWrapper.letter-spacing-3 span,
body #pageWrapper.letter-spacing-3 li,
body #pageWrapper.letter-spacing-3 button,
body #pageWrapper.letter-spacing-3 div,
body #pageWrapper.letter-spacing-3 label,
body #pageWrapper.letter-spacing-3 time { letter-spacing: 0.16em; }