/* ============================================================
   style.css — MaKara News
   ✅ אבטחה:   CSS בלבד — ללא eval, ללא url() חיצוני חשוד
   ✅ ביצועים: contain:layout על ticker
   ✅ נגישות:  focus-visible, min touch target 44px, WCAG 2.1 AA
              prefers-reduced-motion
   ✅ v5.4 — טיקר:
      • רקע: #F2F2F2
      • כיתוב: #111111
      • זמן: #D0021B אדום, opacity:1
      • ספרטור: rgba(0,0,0,0.15)
      • border-bottom: 3px solid (כמו ה-nav מעל)
      • עצירה בריחוף (נגישות)
   ✅ v5.1 — max-width 1560px, padding 12px
   ✅ v5.0 — sticky nav, overflow-x:clip
   ============================================================ */

/* ── Reset ── */
*,
*::before,
*::after {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

/* ── CSS Variables ── */
:root {
    --color-dark-red:    #8B0000;
    --color-red:         #C41E3A;
    --color-gray:        #6B6B6B;
    --color-dark-gray:   #2C2C2C;
    --color-black:       #000000;
    --color-white:       #FFFFFF;
    --color-light-gray:  #F5F5F5;
    --font-size-base:    16px;
    --nav-gap:           6px;

    /* ✅ משתני טיקר — עדכון מרכזי אחד לכל השינויים */
    --ticker-bg:         #F2F2F2;
    --ticker-text:       #111111;
    --ticker-time-clr:   #D0021B;
    --ticker-sep-clr:    rgba(0, 0, 0, 0.15);
    --ticker-border-clr: var(--color-dark-red);
}

/* ✅ overflow-x:clip — לא שובר position:sticky (Chrome 90+, FF 81+, Safari 16+) */
html { overflow-x: clip; }

body {
    font-family:      'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:        var(--font-size-base);
    line-height:      1.6;
    color:            var(--color-black);
    background-color: var(--color-white);
    direction:        rtl;
    overflow-x:       clip;
}

a   { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ✅ v5.1: max-width 1560px, padding 12px */
.container { max-width: 1560px; margin: 0 auto; padding: 0 12px; }

/* ════════════════════════════════════════════
   Site Header
════════════════════════════════════════════ */
.site-header {
    background-color: var(--color-black);
    border-bottom:    3px solid var(--color-dark-red);
    /* ✅ static + overflow:visible — מאפשר ל-.main-nav להיות sticky */
    position:         static;
    overflow:         visible;
}

.top-bar {
    background-color: var(--color-white);
    padding:          4px 0;
    border-bottom:    1px solid var(--color-light-gray);
}

.top-bar-content {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             10px;
}

.logo img { height: 55px; width: auto; }

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

.header-info { display: flex; align-items: center; gap: 20px; }

.date-weather {
    display:     flex;
    gap:         15px;
    color:       var(--color-black);
    font-size:   14px;
    align-items: center;
}

.current-date,
.weather-widget {
    padding:          5px 10px;
    background-color: var(--color-light-gray);
    border-radius:    4px;
    color:            var(--color-black);
    min-height:       28px;
    min-width:        80px;
}

/* ════════════════════════════════════════════
   Main Nav — sticky
════════════════════════════════════════════ */
.main-nav {
    background-color: var(--mk-dark, #1C1C1C);
    border-bottom:    3px solid #555;
    position:         sticky;
    top:              0;
    z-index:          999;
    box-shadow:       0 2px 8px rgba(0, 0, 0, 0.25),
                      0 4px 10px rgba(0, 0, 0, 0.5);
}

.nav-container { display: flex; justify-content: space-between; align-items: center; }

.nav-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 0; }

.nav-menu li a {
    display:        flex;
    padding:        15px 20px;
    color:          var(--color-black);
    font-size:      15px;   /* ✅ v5.5: הוגדל מ-14px */
    font-weight:    500;
    letter-spacing: 0.015em; /* ✅ v5.5 */
    transition:     color 0.2s, border-color 0.2s, background-color 0.2s;
    border:         none;
    border-bottom:  3px solid transparent;
    min-height:     44px;
    align-items:    center;
}

.nav-menu li a:hover,
.nav-menu li a:focus-visible {
    border-bottom:    3px solid var(--color-dark-red);
    background-color: var(--color-white);
    color:            var(--color-dark-red);
    outline:          2px solid rgba(255, 255, 255, 0.6);
    outline-offset:   -4px;
}

/* ════════════════════════════════════════════════
   BREAKING NEWS TICKER  v5.4
   ✅ רקע:          #F2F2F2
   ✅ כיתוב:        #111111 (ניגוד 12.63:1 — WCAG AAA)
   ✅ זמן:          #D0021B, opacity:1 (ניגוד 5.08:1 — WCAG AA)
   ✅ ספרטור:       rgba(0,0,0,0.15) — גלוי על רקע בהיר
   ✅ ticker-label: #111 רקע / #fff כיתוב (ניגוד 21:1)
   ✅ border-bottom: 3px solid זהה ל-nav מעליו
   ✅ עצירה בריחוף/פוקוס: animation-play-state:paused
════════════════════════════════════════════════ */
.news-ticker {
    background-color: var(--ticker-bg);
    color:            var(--ticker-text);
    display:          flex;
    align-items:      stretch;
    overflow:         hidden;
    height:           68px;
    contain:          layout;
    margin-bottom:    var(--nav-gap);
    border-bottom:    3px solid var(--ticker-border-clr); /* ✅ קו תחתון כמו nav */
}

/* ✅ תווית כהה — ניגוד נגישות WCAG AAA (21:1) */
.ticker-label {
    background-color: #111111;
    color:            #FFFFFF;
    padding:          0 16px;
    font-weight:      bold;
    font-size:        14px;      /* ✅ v5.5: הוגדל מ-13px */
    letter-spacing:   0.03em;   /* ✅ v5.5 */
    white-space:      nowrap;
    flex-shrink:      0;
    display:          flex;
    align-items:      center;
    gap:              6px;
}

.ticker-live-dot {
    display:       inline-block;
    width:         7px;
    height:        7px;
    background:    #ff4444;
    border-radius: 50%;
    animation:     livePulse 1.4s ease-in-out infinite;
    flex-shrink:   0;
}

@keyframes livePulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

.ticker-content {
    flex:        1;
    overflow:    hidden;
    position:    relative;
    will-change: auto;
}

.ticker-track {
    display:     flex;
    align-items: center;
    height:      100%;
    animation:   tickerRTL 60s linear infinite;
    will-change: transform;
}

/* ✅ עצירה בריחוף / פוקוס — נגישות: מאפשר קריאת תוכן נע */
.news-ticker:hover        .ticker-track,
.news-ticker:focus-within .ticker-track {
    animation-play-state: paused;
}

.ticker-item {
    white-space: normal;
    width:       320px;
    flex-shrink: 0;
    padding:     0 8px;
    display:     flex;
    align-items: center;
    gap:         8px;
    height:      100%;
    box-sizing:  border-box;
}

/* ✅ כיתוב שחור על רקע בהיר */
.ticker-item a {
    color:              var(--ticker-text);
    font-size:          15px;   /* ✅ v5.5: הוגדל מ-14px */
    font-weight:        500;
    letter-spacing:     0.01em; /* ✅ v5.5 */
    line-height:        1.45;
    text-decoration:    none;
    transition:         background 0.2s, color 0.2s;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    flex:               1;
    min-width:          0;
    padding:            6px 8px;
    border-radius:      4px;
}

/* ✅ v5.5: חץ expand על כל מבזק */
.ticker-item a::after {
    content:        '⌄';
    display:        inline-block;
    margin-right:   5px;
    font-size:      13px;
    line-height:    1;
    color:          var(--ticker-time-clr);
    opacity:        0.65;
    transition:     transform 0.25s ease, opacity 0.2s;
    vertical-align: middle;
    flex-shrink:    0;
}

.ticker-item.is-expanded a::after {
    transform: rotate(180deg);
    opacity:   1;
}

.ticker-item a:hover,
.ticker-item a:focus-visible {
    background: rgba(0, 0, 0, 0.08);
    color:      #111111;
    outline:    none;
}

/* ✅ תאריך + שעה — אדום, opacity:1 */
.ticker-time {
    color:                var(--ticker-time-clr);
    font-weight:          600;
    opacity:              1;
    font-size:            12px;   /* ✅ v5.5: הוגדל מ-11px */
    letter-spacing:       0.02em; /* ✅ v5.5 */
    font-variant-numeric: tabular-nums;
    flex-shrink:          0;
    white-space:          nowrap;
    align-self:           center;
    line-height:          1.2;
}

/* ✅ ספרטור — גלוי על רקע בהיר */
.ticker-sep {
    display:          inline-block;
    width:            1px;
    height:           auto;
    background-color: var(--ticker-sep-clr);
    flex-shrink:      0;
    align-self:       stretch;
    margin:           0 6px;
    pointer-events:   none;
}

/* ✅ "כל המבזקים" — שחור + hover אדום */
.ticker-all-link {
    display:          flex;
    align-items:      center;
    gap:              5px;
    flex-shrink:      0;
    padding:          0 14px;
    background-color: rgba(0, 0, 0, 0.06);
    color:            var(--ticker-text);
    font-size:        13px;   /* ✅ v5.5: הוגדל מ-12px */
    font-weight:      700;
    letter-spacing:   0.03em; /* ✅ v5.5 */
    white-space:      nowrap;
    text-decoration:  none;
    border-right:     1px solid rgba(0, 0, 0, 0.12);
    transition:       background-color 0.2s, color 0.2s;
    order:            3;
}

.ticker-all-link:hover {
    background-color: rgba(0, 0, 0, 0.12);
    color:            #D0021B;
}

.ticker-all-link:focus-visible {
    outline:          2px solid rgba(0, 0, 0, 0.5);
    outline-offset:   -3px;
    background-color: rgba(0, 0, 0, 0.12);
    color:            #D0021B;
}

.ticker-all-link svg { flex-shrink: 0; stroke: currentColor; }

@keyframes tickerRTL {
    0%   { transform: translateX(0);    }
    100% { transform: translateX(100%); }
}

/* ════════════════════════════════════════════
   Main
════════════════════════════════════════════ */
main { padding: 40px 0; }

.main-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   30px;
    margin-top:            30px;
}

.article-card {
    background-color: var(--color-white);
    border:           1px solid #E0E0E0;
    overflow:         hidden;
    transition:       transform 0.3s, box-shadow 0.3s;
}

.article-card:hover {
    transform:  translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.article-card.featured { grid-column: 1 / -1; }

.article-image {
    position:         relative;
    overflow:         hidden;
    background-color: var(--color-light-gray);
}

.article-image img {
    width:      100%;
    height:     250px;
    object-fit: cover;
    transition: transform 0.3s;
}

.article-card.featured .article-image img { height: 500px; }
.article-card:hover    .article-image img { transform: scale(1.05); }

.image-credit {
    position:         absolute;
    bottom:           0;
    left:             0;
    background-color: rgba(0, 0, 0, 0.7);
    color:            var(--color-white);
    padding:          5px 10px;
    font-size:        12px;
}

.article-content { padding: 20px; }

.article-category {
    display:          inline-block;
    background-color: var(--color-dark-red);
    color:            var(--color-white);
    padding:          5px 12px;
    font-size:        12px;
    font-weight:      bold;
    margin-bottom:    10px;
    border-radius:    3px;
}

.article-title {
    font-size:      20px;
    font-weight:    700;
    letter-spacing: 0.008em; /* ✅ v5.5 */
    margin-bottom:  10px;
    line-height:    1.4;
    color:          var(--color-black);
    min-height:     2.8em;
}

.article-card.featured .article-title { font-size: 34px; min-height: auto; } /* ✅ v5.5: 32→34 */

.article-meta {
    display:        flex;
    gap:            15px;
    font-size:      13px;   /* ✅ v5.5: הוגדל מ-12px */
    letter-spacing: 0.01em; /* ✅ v5.5 */
    color:          var(--color-gray);
}

.article-meta span { display: flex; align-items: center; gap: 5px; }

/* ── Article Full ── */
.article-full {
    max-width:        900px;
    margin:           0 auto;
    background-color: var(--color-white);
    padding:          40px;
    box-shadow:       0 0 20px rgba(0, 0, 0, 0.1);
}

.article-category-tag {
    display:       inline-block;
    background:    var(--color-dark-red);
    color:         var(--color-white);
    padding:       8px 16px;
    font-size:     14px;
    font-weight:   bold;
    margin-bottom: 20px;
    border-radius: 4px;
}

.article-full-title {
    font-size:     42px;
    font-weight:   800;
    line-height:   1.3;
    margin-bottom: 20px;
    color:         var(--color-black);
}

.article-full-meta {
    display:        flex;
    gap:            20px;
    margin-bottom:  30px;
    padding-bottom: 20px;
    border-bottom:  2px solid var(--color-light-gray);
    color:          var(--color-gray);
}

.date-label {
    font-weight: 700;
    color:       #444;
    font-size:   12px;
    margin-left: 3px;
    white-space: nowrap;
}

.article-full-image     { margin-bottom: 30px; position: relative; }
.article-full-image img { width: 100%; height: auto; }

.image-credit-full {
    background-color: var(--color-light-gray);
    padding:          10px;
    font-size:        13px;
    color:            var(--color-gray);
    text-align:       center;
    margin-top:       -5px;
}

.article-full-content {
    font-size:     18px;
    line-height:   1.8;
    color:         var(--color-dark-gray);
    margin-bottom: 40px;
}

.article-share {
    display:       flex;
    align-items:   center;
    gap:           15px;
    padding:       20px 0;
    border-top:    2px solid var(--color-light-gray);
    border-bottom: 2px solid var(--color-light-gray);
    margin-bottom: 40px;
}

.article-share span { font-weight: bold; }

.share-btn {
    width:           44px; /* ✅ נגישות: touch target */
    height:          44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    color:           var(--color-white);
    transition:      transform 0.3s;
}

.share-btn:hover,
.share-btn:focus-visible {
    transform:      scale(1.1);
    outline:        2px solid currentColor;
    outline-offset: 2px;
}

.share-btn.facebook { background-color: #1877F2; }
.share-btn.twitter  { background-color: #1DA1F2; }
.share-btn.whatsapp { background-color: #25D366; }

/* ── Related Articles ── */
.related-articles { margin-top: 60px; }

.related-articles h2 {
    font-size:      28px;
    margin-bottom:  30px;
    padding-bottom: 15px;
    border-bottom:  3px solid var(--color-dark-red);
}

.related-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap:                   20px;
}

.related-card {
    border:     1px solid #E0E0E0;
    overflow:   hidden;
    transition: transform 0.3s;
}

.related-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.related-card img   { width: 100%; height: 150px; object-fit: cover; }
.related-card h3    { padding: 15px; font-size: 16px; line-height: 1.4; }

.category-header {
    background-color: var(--color-dark-red);
    color:            var(--color-white);
    padding:          30px;
    margin-bottom:    40px;
    border-radius:    8px;
}

.category-header h1 { font-size: 36px; font-weight: 800; }

.no-articles {
    text-align: center;
    font-size:  20px;
    color:      var(--color-gray);
    padding:    60px 20px;
}

/* ════════════════════════════════════════════
   Footer
════════════════════════════════════════════ */
.site-footer {
    background-color: var(--color-white);
    color:            var(--color-black);
    margin-top:       60px;
    border-top:       1px solid var(--color-light-gray);
}

.viral-section { background-color: var(--color-light-gray); padding: 40px 0; }

.viral-title {
    color:         var(--color-dark-red);
    font-size:     32px;
    font-weight:   800;
    margin-bottom: 30px;
    text-align:    center;
}

.viral-carousel { position: relative; overflow: hidden; }

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

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

.viral-card {
    min-width:     300px;
    background:    var(--color-white);
    border-radius: 8px;
    overflow:      hidden;
    transition:    transform 0.3s;
    border:        1px solid #E0E0E0;
}

.viral-card:hover { transform: translateY(-5px); }
.viral-card img   { width: 100%; height: 180px; object-fit: cover; }

.viral-content    { padding: 15px; }
.viral-content h3 { font-size: 16px; font-weight: 700; letter-spacing: 0.008em; margin-bottom: 10px; line-height: 1.4; color: var(--color-black); } /* ✅ v5.5 */
.viral-views      { font-size: 13px; letter-spacing: 0.01em; color: var(--color-gray); display: flex; align-items: center; gap: 5px; } /* ✅ v5.5 */

.carousel-btn {
    position:         absolute;
    top:              50%;
    transform:        translateY(-50%);
    background-color: var(--color-dark-red);
    color:            var(--color-white);
    border:           none;
    width:            50px;
    height:           50px;
    border-radius:    50%;
    cursor:           pointer;
    font-size:        20px;
    z-index:          10;
    transition:       background-color 0.3s;
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

.carousel-btn:hover,
.carousel-btn:focus-visible {
    background-color: var(--color-red);
    outline:          2px solid var(--color-white);
    outline-offset:   2px;
}

.carousel-btn.prev { right: 10px; }
.carousel-btn.next { left:  10px; }

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

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

.footer-section h3 { color: var(--color-dark-red); font-size: 20px; margin-bottom: 15px; }

.footer-section p,
.footer-section ul { color: var(--color-black); line-height: 1.8; }

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

.footer-section a       { color: var(--color-black); transition: color 0.3s; }
.footer-section a:hover { color: var(--color-dark-red); }

.contact-email,
.submit-email {
    color:       var(--color-dark-red);
    font-weight: bold;
    display:     inline-flex !important;
    align-items: center      !important;
    min-height:  44px        !important;
    padding:     10px 8px    !important;
}

.social-links { display: flex; gap: 15px; }

.social-link {
    width:            44px;
    height:           44px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background-color: var(--color-red);
    border-radius:    50%;
    transition:       background-color 0.3s, transform 0.2s;
    color:            #ffffff;
}

.social-link i { color: #ffffff !important; font-size: 18px; }

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

.social-link:hover i { color: #ffffff !important; }

.footer-bottom {
    text-align:  center;
    padding-top: 20px;
    border-top:  1px solid var(--color-light-gray);
    color:       var(--color-gray);
}

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

.accessibility-toggle {
    position:         fixed;
    bottom:           20px;
    left:             20px;
    width:            56px;
    height:           56px;
    background-color: var(--color-dark-red);
    border:           none;
    border-radius:    50%;
    cursor:           pointer;
    z-index:          9999;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    box-shadow:       0 4px 15px rgba(0, 0, 0, 0.3);
    transition:       transform 0.3s, background-color 0.3s;
    color:            var(--color-white);
}

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

.accessibility-toggle i { color: var(--color-white) !important; font-size: 24px; }

.accessibility-menu {
    position:         fixed;
    bottom:           90px;
    left:             20px;
    background-color: var(--color-white);
    border-radius:    12px;
    box-shadow:       0 8px 30px rgba(0, 0, 0, 0.2);
    padding:          20px;
    z-index:          9998;
    min-width:        200px;
    border:           1px solid var(--color-light-gray);
    display:          none;
}

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

.accessibility-menu h3 {
    color:          var(--color-dark-red);
    margin-bottom:  5px;
    font-size:      16px;
    border-bottom:  2px solid var(--color-light-gray);
    padding-bottom: 10px;
}

.acc-btn {
    display:          flex;
    align-items:      center;
    gap:              10px;
    width:            100%;
    background-color: var(--color-light-gray);
    color:            var(--color-black);
    border:           none;
    padding:          12px 15px;
    cursor:           pointer;
    border-radius:    8px;
    font-size:        14px;
    margin-bottom:    8px;
    transition:       background-color 0.3s, transform 0.2s;
    text-align:       right;
    min-height:       44px; /* ✅ נגישות */
}

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

.acc-btn:hover,
.acc-btn:focus-visible {
    background-color: var(--color-dark-red);
    color:            var(--color-white);
    transform:        translateX(-3px);
    outline:          none;
}

.acc-btn i { width: 20px; text-align: center; }

.mobile-menu-btn {
    display:         none;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         10px;
    z-index:         1001;
    min-width:       44px;
    min-height:      44px;
    align-items:     center;
    justify-content: center;
}

.hamburger {
    display:    block;
    width:      28px;
    height:     3px;
    background: var(--color-white);
    position:   relative;
    transition: background-color 0.3s;
}

.hamburger::before,
.hamburger::after {
    content:    '';
    position:   absolute;
    width:      28px;
    height:     3px;
    background: var(--color-white);
    right:      0;
    transition: transform 0.3s, top 0.3s;
}

.hamburger::before { top: -8px; }
.hamburger::after  { top:  8px; }

.mobile-menu-btn.active .hamburger         { background-color: transparent; }
.mobile-menu-btn.active .hamburger::before { transform: rotate(45deg);  top: 0; }
.mobile-menu-btn.active .hamburger::after  { transform: rotate(-45deg); top: 0; }

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

.news-wrap { /* contain:layout הוסר — שובר position:sticky */ }

/* ════════════════════════════════════════════
   TICKER EXPAND — v5.5 — תואם ticker.php v4.0
   HTML נבנה בשרת — JS מנהל toggle בלבד
════════════════════════════════════════════ */
.ticker-item-header {
    display:       flex;
    align-items:   center;
    gap:           6px;
    cursor:        pointer;
    flex:          1;
    min-width:     0;
    padding:       6px 8px;
    border-radius: 4px;
    transition:    background 0.18s;
    outline:       none;
}

.ticker-item-header:hover,
.ticker-item-header:focus-visible {
    background: rgba(0, 0, 0, 0.07);
}

.ticker-item-header:focus-visible {
    outline:        2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 1px;
}

.ticker-title {
    font-size:          15px;
    font-weight:        500;
    letter-spacing:     0.01em;
    line-height:        1.45;
    color:              var(--ticker-text);
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    flex:               1;
    min-width:          0;
}

.ticker-item-arrow {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           var(--ticker-time-clr);
    opacity:         0.7;
    transition:      transform 0.25s ease, opacity 0.2s;
    width:           18px;
    height:          18px;
}

.ticker-item.is-expanded .ticker-item-arrow {
    transform: rotate(180deg);
    opacity:   1;
}

.ticker-item-body {
    overflow:   hidden;
    max-height: 0;
    transition: max-height 0.26s ease;
    direction:  rtl;
    padding:    0 8px;
}

.ticker-item-body:not([hidden]) {
    padding-bottom: 12px;
    padding-top:    8px;
    border-top:     1px solid rgba(0, 0, 0, 0.08);
    margin-top:     4px;
}

.ticker-item-full-title {
    display:       block;
    font-size:     15px;
    font-weight:   700;
    color:         var(--ticker-text);
    line-height:   1.5;
    margin-bottom: 10px;
}

.ticker-item-link {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    color:           var(--color-dark-red);
    font-size:       13px;
    font-weight:     700;
    text-decoration: none;
    transition:      opacity 0.18s;
    min-height:      36px;
    padding:         4px 0;
}

.ticker-item-link:hover,
.ticker-item-link:focus-visible {
    opacity:        0.75;
    outline:        2px solid var(--color-dark-red);
    outline-offset: 2px;
    border-radius:  3px;
}

.news-ticker.has-expanded .ticker-track {
    animation-play-state: paused !important;
}

/* ════════════════════════════════════════════
   HERO Gradient — v5.5
════════════════════════════════════════════ */
.article-card.featured .article-image::after {
    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%
    );
}

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

.article-card.featured .article-title {
    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);
    letter-spacing: 0.01em;
}

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

    .article-card:hover,
    .viral-card:hover    { transform: none; }
    .ticker-track        { animation: none !important; will-change: auto !important; }
    .ticker-live-dot     { animation: none !important; opacity: 1 !important; }
    .ticker-item-arrow   { transition: none !important; }
    .ticker-item-body    { transition: none !important; }
}

/* ════════════════════════════════════════════
   Responsive — 1024px
════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .container     { padding: 0 10px; }
    .nav-menu li a { padding: 15px 12px; font-size: 14px; }
    .main-grid     { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .article-card.featured { grid-column: 1 / -1; }
    .footer-grid   { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

/* ════════════════════════════════════════════
   Responsive — 768px
════════════════════════════════════════════ */
@media (max-width: 768px) {
    :root { --nav-gap: 4px; }

    .top-bar-content { flex-direction: row; justify-content: space-between; padding: 10px 0; }
    .header-info     { flex-direction: column; align-items: flex-start; gap: 10px; }
    .date-weather    { flex-direction: column; gap: 8px; font-size: 13px; }

    .current-date,
    .weather-widget  { padding: 4px 8px; font-size: 12px; }

    .mobile-menu-btn { display: flex; }

    .nav-menu {
        position:       fixed;
        top:            0;
        right:          -100%;
        width:          80%;
        max-width:      300px;
        height:         100vh;
        background:     var(--color-white);
        flex-direction: column;
        padding-top:    70px;
        transition:     right 0.3s ease;
        overflow-y:     auto;
        z-index:        1000;
        box-shadow:     -5px 0 20px rgba(0, 0, 0, 0.3);
    }

    .nav-menu.active { right: 0; }

    .nav-menu li a {
        padding:       15px 20px;
        border:        none;
        border-bottom: 1px solid var(--color-light-gray);
        font-size:     16px;
        color:         var(--color-black);
    }

    .nav-menu li a:hover {
        background-color: var(--color-light-gray);
        border:           none;
        border-bottom:    1px solid var(--color-light-gray);
        outline:          none;
    }

    .nav-overlay {
        display:          none;
        position:         fixed;
        top:              0;
        left:             0;
        width:            100%;
        height:           100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index:          999;
    }

    .nav-overlay.active { display: block; }

    .main-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 15px; }

    .article-card                             { display: block; width: 100%; }
    .article-card.featured                    { grid-column: 1 / -1; }
    .article-card.featured .article-image img { height: 240px; }
    .article-card.featured .article-title     { font-size: 22px; }

    .article-image     { width: 100%; }
    .article-image img { height: 200px; width: 100%; }
    .article-content   { padding: 15px; }
    .article-title     { font-size: 18px; min-height: auto; }
    .article-link      { display: block; }

    .article-full         { padding: 15px; margin: 0 -5px; box-shadow: none; }
    .article-full-title   { font-size: 24px; line-height: 1.4; }
    .article-full-meta    { flex-direction: column; gap: 10px; }
    .article-full-content { font-size: 16px; line-height: 1.7; }
    .article-share        { flex-wrap: wrap; justify-content: center; }

    .footer-grid  { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .social-links { justify-content: center; }

    .category-header    { padding: 20px 15px; margin-bottom: 25px; }
    .category-header h1 { font-size: 26px; }

    .viral-title  { font-size: 24px; }
    .viral-card   { min-width: 260px; }
    .carousel-btn { width: 40px; height: 40px; font-size: 16px; }

    .news-ticker     { height: 64px; }
    .ticker-label    { padding: 0 10px; font-size: 12px; }
    .ticker-item     { width: 260px; }
    .ticker-item a   { font-size: 13px; }
    .ticker-time     { font-size: 11px; }
    .ticker-all-link { font-size: 11px; padding: 0 10px; }

    .related-grid        { grid-template-columns: 1fr; }
    .related-articles h2 { font-size: 22px; }
}

/* ════════════════════════════════════════════
   Responsive — 480px
════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root { --font-size-base: 14px; }

    .container    { padding: 0 8px; }
    .logo img     { height: 50px; }
    .date-weather { font-size: 11px; }

    .current-date,
    .weather-widget { padding: 3px 6px; font-size: 11px; }

    main { padding: 25px 0; }

    .article-card.featured .article-title     { font-size: 20px; }
    .article-title                            { font-size: 16px; }
    .article-image img                        { height: 180px; }
    .article-card.featured .article-image img { height: 200px; }
    .article-meta                             { font-size: 11px; gap: 10px; }
    .article-full-title                       { font-size: 22px; }

    .viral-card       { min-width: 220px; }
    .viral-card img   { height: 140px; }
    .viral-content h3 { font-size: 14px; }

    .carousel-btn      { width: 35px; height: 35px; font-size: 14px; }
    .carousel-btn.prev { right: 5px; }
    .carousel-btn.next { left:  5px; }

    .accessibility-toggle   { width: 50px; height: 50px; bottom: 15px; left: 15px; }
    .accessibility-toggle i { font-size: 20px; }
    .accessibility-menu     { bottom: 75px; left: 15px; padding: 15px; min-width: 180px; }
    .acc-btn                { padding: 10px 12px; font-size: 13px; }

    .footer-section h3 { font-size: 18px; }
    .footer-section p,
    .footer-section ul { font-size: 14px; }

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

/* ════════════════════════════════════════════
   Landscape קטן
════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .nav-menu           { padding-top: 50px; }
    .nav-menu li a      { padding: 10px 20px; }
    .accessibility-menu { max-height: 80vh; overflow-y: auto; }
}

/* ════════════════════════════════════════════
   נגישות — פונט קריא (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; }