/* ============================================================
   makara-upgrade.css — שדרוג עיצובי ל-MaKara News
   הוסף אחרי style.css: <link rel="stylesheet" href="makara-upgrade.css">
   ============================================================ */

/* ── 1. Google Font (Heebo — עברי מודרני) ── */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;900&display=swap');

/* ── 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:  #666;
  --mk-white:      #FFFFFF;

  /* צבע לכל קטגוריה */
  --cat-sport:     #1a7f4e;
  --cat-politics:  #1a4a8f;
  --cat-world:     #7b2db5;
  --cat-health:    #c96a00;
  --cat-economy:   #0077aa;
  --cat-news:      #C0152A;
  --cat-culture:   #c0306a;
  --cat-tech:      #007a75;
  --cat-judaism:   #8B5E3C;
  --cat-realestate:#2d7a3a;
  --cat-tourism:   #0066cc;
  --cat-auto:      #444;
  --cat-science:   #5a3ea0;
}

/* ── 3. גופן גלובלי ── */
body {
  font-family: 'Heebo', 'Segoe UI', Tahoma, sans-serif !important;
  background-color: var(--mk-gray-bg) !important;
}

/* ── 4. TOP BAR — פס עליון לבן ── */
.site-header .top-bar,
div.top-bar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--mk-gray-border) !important;
  padding: 7px 0 !important;
}

.top-bar-content {
  justify-content: space-between !important;
}

.top-bar .current-date,
.top-bar .weather-widget {
  background-color: var(--mk-gray-bg) !important;
  color: var(--mk-black) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* ── 5. HEADER — לוגו + גבול אדום תחתון ── */
.site-header {
  background-color: var(--mk-white) !important;
  border-bottom: 3px solid var(--mk-red) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* ── 6. NAV — כהה עם hover אדום ── */
.main-nav {
  background-color: var(--mk-dark) !important;
  border-bottom: none !important;
}

.nav-menu li a {
  color: #ddd !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 13px 18px !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s, border-color 0.2s, background 0.2s !important;
}

.nav-menu li a:hover {
  color: #fff !important;
  background-color: rgba(255,255,255,0.06) !important;
  border: none !important;
  border-bottom: 3px solid var(--mk-red) !important;
}

/* ── 7. TICKER — פס מבזקים ── */
.news-ticker {
  background-color: var(--mk-red) !important;
  height: 38px !important;
}

.ticker-label {
  background-color: var(--mk-black) !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  padding: 0 18px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.ticker-item a {
  color: rgba(255,255,255,0.92) !important;
  font-size: 13px !important;
}

/* ── 8. MAIN BACKGROUND ── */
main {
  background-color: var(--mk-gray-bg) !important;
  padding: 28px 0 !important;
}

/* ── 9. ARTICLE CARDS — כרטיסים מעוגלים עם hover ── */
.article-card {
  border-radius: 10px !important;
  border: 1px solid var(--mk-gray-border) !important;
  background-color: var(--mk-white) !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

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

/* תמונות כרטיסים */
.article-image img {
  height: 210px !important;
  transition: transform 0.4s ease !important;
}

.article-card:hover .article-image img {
  transform: scale(1.05) !important;
}

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

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

.article-card.featured .article-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s ease !important;
}

.article-card.featured:hover .article-image img {
  transform: scale(1.04) !important;
}

.article-card.featured .article-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.45) 45%,
    rgba(0,0,0,0.05) 100%
  ) !important;
  pointer-events: none !important;
}

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

.article-card.featured .article-category {
  margin-bottom: 12px !important;
  font-size: 12px !important;
}

.article-card.featured .article-title {
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  margin-bottom: 12px !important;
}

.article-card.featured:hover .article-title {
  color: #ffffff !important;
}

.article-card.featured .article-meta {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  margin-top: 0 !important;
}

.article-card.featured .article-meta i {
  color: rgba(255,255,255,0.55) !important;
}

/* כותרת כרטיס — hover אדום ── */
.article-title {
  font-weight: 700 !important;
  line-height: 1.4 !important;
  transition: color 0.2s !important;
}

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

/* ── 10. CATEGORY TAGS — תגיות צבעוניות לפי קטגוריה ── */
.article-category {
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 4px 11px !important;
  background-color: var(--mk-red) !important; /* ברירת מחדל */
}

/* זיהוי קטגוריה לפי טקסט — CSS attribute trick */
.article-category[data-category="sport"],
.article-category:-moz-any(:contains("ספורט")) { background-color: var(--cat-sport) !important; }

/* CSS :has() / custom attribute — אם יש data-category ב-HTML */
[data-category="sport"]    .article-category,
.article-card[data-category="sport"] .article-category    { background-color: var(--cat-sport) !important; }
[data-category="politics"] .article-category,
.article-card[data-category="politics"] .article-category { background-color: var(--cat-politics) !important; }
[data-category="world-news"] .article-category,
.article-card[data-category="world-news"] .article-category { background-color: var(--cat-world) !important; }
[data-category="health"]   .article-category,
.article-card[data-category="health"] .article-category   { background-color: var(--cat-health) !important; }
[data-category="economy"]  .article-category,
.article-card[data-category="economy"] .article-category  { background-color: var(--cat-economy) !important; }
[data-category="technology"] .article-category,
.article-card[data-category="technology"] .article-category { background-color: var(--cat-tech) !important; }
[data-category="culture"]  .article-category,
.article-card[data-category="culture"] .article-category  { background-color: var(--cat-culture) !important; }
[data-category="judaism"]  .article-category,
.article-card[data-category="judaism"] .article-category  { background-color: var(--cat-judaism) !important; }
[data-category="real-estate"] .article-category,
.article-card[data-category="real-estate"] .article-category { background-color: var(--cat-realestate) !important; }
[data-category="tourism"]  .article-category,
.article-card[data-category="tourism"] .article-category  { background-color: var(--cat-tourism) !important; }
[data-category="automotive"] .article-category,
.article-card[data-category="automotive"] .article-category { background-color: var(--cat-auto) !important; }
[data-category="science-nature"] .article-category,
.article-card[data-category="science-nature"] .article-category { background-color: var(--cat-science) !important; }

/* ── 11. ARTICLE META (תאריך + צפיות) ── */
.article-meta {
  font-size: 12px !important;
  color: var(--mk-gray-text) !important;
  margin-top: 8px !important;
}

/* ── 12. IMAGE CREDIT — קרדיט תמונה ── */
.image-credit {
  font-size: 11px !important;
  background-color: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(2px) !important;
  padding: 4px 10px !important;
}

/* ── 13. MAIN GRID — עמודות קבועות כדי ש-hero יתפרש על כולן ── */
.main-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 20px !important;
}

@media (max-width: 1024px) {
  .main-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 14. VIRAL SECTION ── */
.viral-section {
  background-color: var(--mk-white) !important;
  border-top: 3px solid var(--mk-red) !important;
  padding: 36px 0 !important;
}

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

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

.viral-card {
  border-radius: 10px !important;
  border: 1px solid var(--mk-gray-border) !important;
  box-shadow: none !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}

.viral-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.1) !important;
}

.viral-card img {
  border-radius: 10px 10px 0 0 !important;
}

.carousel-btn {
  background-color: var(--mk-red) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

.carousel-btn:hover {
  background-color: var(--mk-red-dark) !important;
}

/* ── 15. FOOTER ── */
.site-footer {
  background-color: var(--mk-black) !important;
  color: #aaa !important;
  border-top: none !important;
  margin-top: 0 !important;
}

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

.footer-section p,
.footer-section ul,
.footer-section a {
  color: #aaa !important;
  font-size: 13px !important;
}

.footer-section a:hover {
  color: var(--mk-red) !important;
}

.contact-email,
.submit-email {
  color: var(--mk-red) !important;
}

.footer-bottom {
  border-top: 1px solid #333 !important;
  color: #666 !important;
  font-size: 12px !important;
}

/* ── 16. CATEGORY PAGE HEADER ── */
.category-header {
  background: linear-gradient(135deg, var(--mk-red-dark), var(--mk-red)) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(192,21,42,0.25) !important;
}

/* ── 17. ARTICLE FULL PAGE ── */
.article-full {
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
}

.article-full-title {
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

.article-category-tag {
  border-radius: 5px !important;
  font-size: 12px !important;
}

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

.related-card {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* ── 18. ACCESSIBILITY BUTTON ── */
.accessibility-toggle {
  background-color: var(--mk-red) !important;
  box-shadow: 0 4px 16px rgba(192,21,42,0.35) !important;
}

.accessibility-toggle:hover {
  background-color: var(--mk-red-dark) !important;
}

.accessibility-menu h3 {
  color: var(--mk-red) !important;
}

.acc-btn:hover {
  background-color: var(--mk-red) !important;
}

/* ── 19. SOCIAL LINKS ── */
.social-link {
  background-color: #333 !important;
  transition: background-color 0.2s, transform 0.2s !important;
}

.social-link:hover {
  background-color: var(--mk-red) !important;
  transform: scale(1.1) !important;
}

/* ── 20. MOBILE ADJUSTMENTS ── */
@media (max-width: 768px) {
  .nav-menu {
    background-color: var(--mk-dark) !important;
  }

  .nav-menu li a {
    color: #eee !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .nav-menu li a:hover {
    background-color: rgba(255,255,255,0.07) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* hero במובייל */
  .article-card.featured {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .article-card.featured .article-image {
    height: 280px !important;
  }

  .article-card.featured .article-title {
    font-size: 22px !important;
  }

  .article-card.featured .article-content {
    padding: 20px !important;
  }
}

@media (max-width: 480px) {
  .article-card {
    border-radius: 8px !important;
  }

  .article-card.featured .article-image {
    height: 220px !important;
  }

  .article-card.featured .article-title {
    font-size: 18px !important;
  }
}

/* ── תיקון: hero content ללא רקע לבן ── */
.article-card.featured > a {
  display: block !important;
  position: relative !important;
}

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

/* ── תגיות קטגוריה צבעוניות לפי data-category ── */
.article-category[data-category="sport"]         { background-color: #1a7f4e !important; }
.article-category[data-category="politics"]      { background-color: #1a4a8f !important; }
.article-category[data-category="world-news"]    { background-color: #7b2db5 !important; }
.article-category[data-category="health"]        { background-color: #c96a00 !important; }
.article-category[data-category="economy"]       { background-color: #0077aa !important; }
.article-category[data-category="news"]          { background-color: #C0152A !important; }
.article-category[data-category="culture"]       { background-color: #c0306a !important; }
.article-category[data-category="technology"]    { background-color: #007a75 !important; }
.article-category[data-category="judaism"]       { background-color: #8B5E3C !important; }
.article-category[data-category="real-estate"]   { background-color: #2d7a3a !important; }
.article-category[data-category="tourism"]       { background-color: #0066cc !important; }
.article-category[data-category="automotive"]    { background-color: #555555 !important; }
.article-category[data-category="science-nature"]{ background-color: #5a3ea0 !important; }