/* ============================================================
   نيوز فيد — Homepage redesign layer (desktop-first).
   Scoped entirely under `body.nf-redesign` so other pages are
   untouched. Loaded LAST so it refines the existing components
   (which already consume the CSS variables below) without
   rewriting their markup or breaking any JS hooks.
   Reversible: remove the `nf-redesign` body class or this <link>.
   ============================================================ */

/* ---- 1. Refined design tokens (LIGHT only — dark mode keeps its
   existing tokens so the theme toggle stays correct) ---- */
html[data-theme="light"] body.nf-redesign {
  --bg:#F5F2EC;
  --bg-2:#FBF9F4;
  --bg-3:#EFEAE0;
  --surface:#FFFFFF;
  --surface-2:#FBF9F4;
  --border:#E7E1D4;
  --border-2:#D7CEBC;
  --radius:14px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(60,40,20,.05);
  --shadow-md:0 10px 28px -16px rgba(60,40,20,.18);
  --shadow-lg:0 22px 48px -24px rgba(60,40,20,.28);
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] body.nf-redesign {
    --bg:#F5F2EC; --bg-2:#FBF9F4; --bg-3:#EFEAE0;
    --surface:#FFFFFF; --surface-2:#FBF9F4;
    --border:#E7E1D4; --border-2:#D7CEBC;
    --radius:14px; --radius-lg:18px;
    --shadow-sm:0 1px 2px rgba(60,40,20,.05);
    --shadow-md:0 10px 28px -16px rgba(60,40,20,.18);
    --shadow-lg:0 22px 48px -24px rgba(60,40,20,.28);
  }
}

/* ---- 2. Section headers: cleaner accent bar + heavier title ---- */
.nf-redesign .section-title { font-weight:800; letter-spacing:-.2px; }
.nf-redesign .section-title .line { border-radius:3px; }

/* ---- 3. Hero feature: re-tinted from navy to a deep olive that
   matches the brand identity, and re-shaped to 1 main + 2 side
   cards (1+2, matches Figma) instead of the original 1+6. ---- */
.nf-redesign .nf-feature-main {
  background:#1f2a1c;
  border-radius:var(--radius-lg);
  box-shadow:0 18px 44px -20px rgba(45,69,32,.5);
}
.nf-redesign .nf-feature-main-link::after {
  background:linear-gradient(180deg,
    rgba(22,30,18,0) 36%,
    rgba(22,30,18,.78) 72%,
    rgba(24,33,20,.95) 100%);
}
.nf-redesign .nf-feature-main-meta { color:#cdd9c2; }
/* 2-column grid: main on the visual-left, 2 stacked cards on the
   visual-right (DOM order: side first → renders right in RTL). */
@media (min-width:1025px) {
  .nf-redesign .nf-feature-wrap {
    grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    align-items:stretch;
  }
  .nf-redesign .nf-feature-side {
    grid-template-rows:1fr 1fr;
    grid-template-columns:none;
  }
}
/* Side cards in the new 1+2 hero are taller, so the inner thumb
   can breathe more than the cramped 110px square. */
.nf-redesign .nf-feature-side .nf-side-card-img {
  flex:0 0 140px; width:140px; height:140px; max-height:140px;
}
.nf-redesign .nf-feature-side .nf-side-card-title { font-size:16px; }

/* ---- 4. Cards: a touch more rounding + softer lift (borders are
   already softened via the token above) ---- */
.nf-redesign .bn-card,
.nf-redesign .ps-card,
.nf-redesign .nf-side-card { border-radius:14px; }
.nf-redesign .bn-card:hover,
.nf-redesign .ps-card:hover { box-shadow:var(--shadow-md); }

/* ============================================================
   5. SOCIAL FEED — show up to 12 items per platform inside a
   fixed-height, vertically scrollable container (per request).
   Each panel is already a 2-col grid; we cap its height and let
   the rest scroll, with a slim brand-tinted scrollbar.
   ============================================================ */
.nf-redesign .feed-panel {
  max-height:580px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 2px 4px 10px;        /* RTL: room for the left scrollbar */
  scrollbar-width:thin;
  scrollbar-color:var(--border-2) transparent;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.nf-redesign .feed-panel::-webkit-scrollbar { width:8px; }
.nf-redesign .feed-panel::-webkit-scrollbar-track { background:transparent; }
.nf-redesign .feed-panel::-webkit-scrollbar-thumb {
  background:var(--border-2); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box;
}
.nf-redesign .feed-panel::-webkit-scrollbar-thumb:hover { background:var(--muted-2); }
/* soft fade hint at the bottom so it reads as "scroll for more" */
.nf-redesign .feed-panel { -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent); }
@media (max-width:1100px) { .nf-redesign .feed-panel { max-height:none; -webkit-mask-image:none; mask-image:none; } }

/* ============================================================
   6. EVOLVING STORIES — vertical accordion of "files" (the
   adopted Figma option). One file open at a time; click a header
   to expand its description + article links + cover thumbnail.
   ============================================================ */
.nf-redesign .ev-acc {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  margin-bottom:32px;
}
.nf-redesign .ev-item + .ev-item { border-top:1px solid var(--border); }
.nf-redesign .ev-head {
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px;
  background:none; border:0; cursor:pointer;
  font-family:inherit; text-align:right; color:var(--text);
  transition:background .2s ease;
}
.nf-redesign .ev-head:hover { background:var(--bg-2); }
.nf-redesign .ev-item.open .ev-head { background:#F3F5EC; }
[data-theme="dark"] .nf-redesign .ev-item.open .ev-head { background:rgba(123,160,90,.10); }
.nf-redesign .ev-head-right { display:flex; align-items:center; gap:13px; min-width:0; }
.nf-redesign .ev-diamond {
  width:14px; height:14px; border-radius:3px;
  transform:rotate(45deg); flex-shrink:0;
  box-shadow:0 2px 6px -1px rgba(0,0,0,.25);
}
.nf-redesign .ev-name {
  font-size:16.5px; font-weight:800; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nf-redesign .ev-item.open .ev-name { color:var(--accent-2); }
.nf-redesign .ev-head-left { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nf-redesign .ev-count {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--muted);
  background:var(--bg-3); padding:5px 11px; border-radius:999px;
}
.nf-redesign .ev-count b { color:var(--text-2); font-weight:800; }
.nf-redesign .ev-cdot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.nf-redesign .ev-chev {
  font-size:13px; color:var(--muted); line-height:1;
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-3);
  transition:transform .3s ease, background .2s, color .2s;
}
.nf-redesign .ev-item.open .ev-chev { transform:rotate(180deg); background:var(--accent); color:#fff; }

.nf-redesign .ev-panel { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.nf-redesign .ev-item.open .ev-panel { max-height:680px; }
.nf-redesign .ev-panel-inner {
  display:flex; gap:20px; align-items:stretch;
  padding:4px 20px 22px;
}
.nf-redesign .ev-thumb {
  flex:0 0 260px; min-height:178px; border-radius:12px;
  background-size:cover; background-position:center;
  background-color:var(--bg-3);
  position:relative; overflow:hidden;
}
.nf-redesign .ev-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.8) 100%);
}
.nf-redesign .ev-thumb-name {
  position:absolute; right:14px; bottom:13px; z-index:2;
  color:#fff; font-weight:800; font-size:16px;
  text-shadow:0 2px 7px rgba(0,0,0,.55);
}
.nf-redesign .ev-live {
  position:absolute; top:11px; right:11px; z-index:3;
  background:var(--red); color:#fff; padding:4px 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; display:flex; align-items:center; gap:5px;
  box-shadow:0 2px 8px rgba(206,17,38,.4);
}
.nf-redesign .ev-live .dot { width:6px; height:6px; border-radius:50%; background:#fff; }
.nf-redesign .ev-content { flex:1; min-width:0; display:flex; flex-direction:column; }
.nf-redesign .ev-readlabel { font-size:13px; font-weight:800; color:var(--gold); margin-bottom:11px; }
.nf-redesign .ev-links { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:11px; }
.nf-redesign .ev-links a {
  display:flex; gap:10px; align-items:flex-start;
  color:var(--text-2); font-size:14.5px; font-weight:600; line-height:1.55;
  text-decoration:none; transition:color .15s;
}
.nf-redesign .ev-links a:hover { color:var(--accent-2); }
.nf-redesign .ev-links a:hover .t { text-decoration:underline; text-underline-offset:3px; }
.nf-redesign .ev-links .b { width:6px; height:6px; border-radius:50%; margin-top:8px; flex-shrink:0; }
/* "X مصادر" badge on accordion list items: signals the user that the
   same story landed across multiple outlets, so they know this single
   entry stands for the deduplicated cluster, not a one-off post. */
.nf-redesign .ev-links .ev-sources {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:800; color:#6B4F0B;
  background:linear-gradient(135deg,#F5EBCE,#E2C264);
  border:1px solid #E2C264;
  padding:2px 8px; border-radius:999px; margin-right:auto;
  white-space:nowrap; flex-shrink:0;
}
.nf-redesign .ev-foot { margin-top:auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.nf-redesign .ev-followbtn {
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-weight:800; font-size:13.5px;
  padding:10px 18px; border-radius:999px; text-decoration:none;
  box-shadow:0 8px 18px -8px rgba(61,90,40,.55);
  transition:transform .15s, box-shadow .15s;
}
.nf-redesign .ev-followbtn:hover { transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(61,90,40,.65); }
.nf-redesign .ev-updated { font-size:12px; color:var(--muted); }
@media (max-width:700px) {
  .nf-redesign .ev-panel-inner { flex-direction:column; }
  .nf-redesign .ev-thumb { flex-basis:auto; width:100%; min-height:150px; }
  .nf-redesign .ev-item.open .ev-panel { max-height:900px; }
}

/* ============================================================
   7. TWO-COLUMN LAYOUT + SIDEBAR (full Figma parity)
   Hides the sections that aren't part of the Figma layout
   (reversible — delete a selector to bring one back) and turns
   the main area into content + sticky sidebar.
   ============================================================ */
.nf-redesign .wr-banner,
.nf-redesign #reels,
.nf-redesign .mr2-section,
.nf-redesign .ct-section { display:none !important; }
/* Section pills bar was merged into the main site-nav so the page
   has a single navigation strip (was two stacked rows). Hide the
   homepage's .sections-nav entirely; the new Home / Digest /
   Platforms / Latest / Palestine entries now live as nav-summary,
   nav-platforms, nav-latest, nav-palestine inside site-nav. */
.nf-redesign .sections-nav { display:none !important; }
/* Make sure the merged items are visible (some are hidden by the
   "trim nav to 8" rule below). */
.nf-redesign .site-nav .nav-summary,
.nf-redesign .site-nav .nav-platforms,
.nf-redesign .site-nav .nav-latest { display:inline-flex !important; }

/* Main column: turn into a flex column so we can reorder sections
   without touching the HTML. Figma asks for the Platforms feed to
   sit right after آخر الأخبار, i.e. above palestine in the column. */
.nf-redesign .main-col { display:flex; flex-direction:column; }
.nf-redesign .main-col .feed-tabs-wrap { order:-2; }
.nf-redesign .main-col #palestine,
.nf-redesign .main-col #palestine + .nf-ps-grid { order:-1; }

/* Weather widget: button-style city tabs (were <span>) + the new
   "view forecast" link below the temperature. */
.nf-redesign .nfr-weather-cities button.nfr-city {
  background:rgba(255,255,255,.14); color:#fff;
  border:0; font-family:inherit; cursor:pointer;
  font-size:11.5px; font-weight:600; padding:5px 11px;
  border-radius:999px;
}
.nf-redesign .nfr-weather-cities button.nfr-city.active {
  background:#fff; color:#234017; font-weight:800;
}
.nf-redesign .nfr-weather-more {
  display:block; margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:12px; font-weight:700;
  text-decoration:none; opacity:.85;
}
.nf-redesign .nfr-weather-more:hover { opacity:1; }

/* Sources toggle: make sure the toggle is keyboard- and pointer-
   actionable inside the source row. */
.nf-redesign .nfr-toggle { cursor:pointer; }

/* Breaking news: small refresh button + "updated" pill. The pill
   tells the user when the section last refreshed (filled in by JS
   on each successful refresh). */
.nf-redesign .bn-actions { display:flex; align-items:center; gap:10px; }
.nf-redesign .bn-refresh {
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:5px 12px; font-family:inherit;
  font-size:12px; font-weight:700; color:var(--text-2); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.nf-redesign .bn-refresh:hover { background:var(--red); color:#fff; border-color:var(--red); }
.nf-redesign .bn-refresh:disabled { opacity:.55; cursor:wait; }
.nf-redesign .bn-updated {
  font-size:11.5px; font-weight:600; color:var(--muted);
  margin-right:8px; font-variant-numeric:tabular-nums;
}

@media (min-width:1025px) {
  .nf-redesign .main-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 344px;
    gap:28px; align-items:start;
  }
  .nf-redesign .main-col { min-width:0; }
  .nf-redesign .nfr-aside { position:sticky; top:88px; }
}
.nf-redesign .nfr-aside { display:flex; flex-direction:column; gap:20px; }
@media (max-width:1024px) { .nf-redesign .nfr-aside { margin-top:24px; } }

/* widget shell */
.nf-redesign .nfr-w { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.nf-redesign .nfr-w-head { display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--bg-2); border-bottom:1px solid var(--border); }
.nf-redesign .nfr-w-head h3 { font-size:15px; font-weight:800; color:var(--text); margin:0; flex:1; }
.nf-redesign .nfr-bar { width:5px; height:20px; border-radius:3px; flex-shrink:0; }
.nf-redesign .nfr-w-tag { font-size:11px; font-weight:700; color:var(--muted); background:var(--surface-2); padding:4px 10px; border-radius:999px; }
.nf-redesign .nfr-w-tag.live { display:inline-flex; align-items:center; gap:5px; color:#A40D1F; }
.nf-redesign .nfr-w-tag.live .d { width:6px; height:6px; border-radius:50%; background:var(--red); }
.nf-redesign .nfr-w-body { padding:6px 14px 10px; }

/* most read */
.nf-redesign .nfr-read { display:flex; align-items:center; gap:13px; padding:11px 4px; border-bottom:1px solid var(--bg-3); text-decoration:none; }
.nf-redesign .nfr-read:last-child { border-bottom:0; }
.nf-redesign .nfr-read-rank { font-size:26px; font-weight:900; width:28px; text-align:center; flex-shrink:0; font-variant-numeric:tabular-nums; }
.nf-redesign .nfr-read-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.nf-redesign .nfr-read-title { font-size:14px; font-weight:700; color:var(--text); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nf-redesign .nfr-read:hover .nfr-read-title { color:var(--accent-2); }
.nf-redesign .nfr-read-meta { font-size:11.5px; color:var(--muted); }

/* weather */
.nf-redesign .nfr-weather { background:linear-gradient(135deg,#5B7F3B,#234017); border-radius:var(--radius-lg); padding:18px; color:#fff; cursor:pointer; box-shadow:0 16px 36px -18px rgba(35,64,23,.6); }
.nf-redesign .nfr-weather-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.nf-redesign .nfr-weather-head h3 { font-size:15px; font-weight:800; margin:0; flex:1; color:#fff; }
.nf-redesign .nfr-w-tag.light { background:rgba(255,255,255,.16); color:#fff; }
.nf-redesign .nfr-weather-cities { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.nf-redesign .nfr-city { font-size:11.5px; font-weight:600; color:#fff; background:rgba(255,255,255,.14); padding:5px 11px; border-radius:999px; }
.nf-redesign .nfr-city.active { background:#fff; color:#234017; font-weight:800; }
.nf-redesign .nfr-weather-main { display:flex; align-items:center; justify-content:space-between; }
.nf-redesign .nfr-weather-temp { font-size:48px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.nf-redesign .nfr-weather-sun { font-size:40px; line-height:1; }
.nf-redesign .nfr-weather-desc { font-size:12.5px; opacity:.85; margin-top:8px; }

/* sources */
.nf-redesign .nfr-src { display:flex; align-items:center; gap:11px; padding:10px 4px; border-bottom:1px solid var(--bg-3); text-decoration:none; }
.nf-redesign .nfr-src:last-child { border-bottom:0; }
.nf-redesign .nfr-src-logo { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; flex-shrink:0; overflow:hidden; position:relative; }
.nf-redesign .nfr-src-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.nf-redesign .nfr-src-logo .nfr-src-letter { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.nf-redesign .nfr-src-name { flex:1; font-size:14px; font-weight:700; color:var(--text); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nf-redesign .nfr-toggle { width:40px; height:22px; border-radius:999px; background:#D9CFBD; position:relative; flex-shrink:0; transition:background .2s; }
.nf-redesign .nfr-toggle.on { background:var(--accent); }
.nf-redesign .nfr-knob { position:absolute; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; right:21px; transition:right .2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.nf-redesign .nfr-toggle.on .nfr-knob { right:3px; }

/* trends */
.nf-redesign .nfr-tags { display:flex; flex-wrap:wrap; gap:8px; padding-top:12px; padding-bottom:12px; }
.nf-redesign .nfr-tag { font-size:12.5px; font-weight:700; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); padding:7px 12px; border-radius:999px; text-decoration:none; }
.nf-redesign .nfr-tag:hover { border-color:var(--accent); color:var(--accent-2); }
.nf-redesign .nfr-tag.hot { background:#F8F0DD; border-color:#E7D4A0; color:#8A5F08; }

/* newsletter */
.nf-redesign .nfr-news { background:linear-gradient(135deg,#3D5A28,#1f3417); border-radius:var(--radius-lg); padding:22px; color:#fff; box-shadow:0 16px 36px -18px rgba(31,52,23,.55); }
.nf-redesign .nfr-news-eyebrow { font-size:12px; font-weight:700; color:#E9D9A8; margin-bottom:8px; }
.nf-redesign .nfr-news-title { font-size:18px; font-weight:800; line-height:1.4; margin:0 0 8px; }
.nf-redesign .nfr-news-desc { font-size:13px; line-height:1.7; opacity:.85; margin:0 0 14px; }
.nf-redesign .nfr-news-form { display:flex; gap:8px; }
.nf-redesign .nfr-news-form input { flex:1; min-width:0; border:0; border-radius:10px; padding:11px 13px; font-family:inherit; font-size:13px; background:rgba(255,255,255,.95); color:#2C2416; }
.nf-redesign .nfr-news-form button { border:0; border-radius:10px; padding:11px 18px; font-family:inherit; font-weight:800; font-size:13px; color:#fff; cursor:pointer; background:linear-gradient(135deg,#B8860B,#C99A2E); white-space:nowrap; }
.nf-redesign .nfr-news-msg { font-size:12px; margin-top:8px; min-height:14px; color:#E9D9A8; }

/* ============================================================
   8. TOP UTILITY BAR + STATS + FOOTER TIDY (final Figma parity)
   ============================================================ */
/* slim dark-olive utility bar above the sticky header */
.nf-redesign .nfr-topbar { background:#1E1F18; color:#DCE7CF; }
.nf-redesign .nfr-topbar-in { max-width:1500px; margin:0 auto; padding:8px 24px; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; }
.nf-redesign .nfr-tb-right { display:flex; align-items:center; gap:10px; }
.nf-redesign .nfr-tb-live { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#CFE8C2; }
.nf-redesign .nfr-tb-live .d { width:7px; height:7px; border-radius:50%; background:#7ED957; animation:nfrPulse 1.8s infinite; }
@keyframes nfrPulse { 0%{box-shadow:0 0 0 0 rgba(126,217,87,.5);} 70%{box-shadow:0 0 0 6px rgba(126,217,87,0);} 100%{box-shadow:0 0 0 0 rgba(126,217,87,0);} }
.nf-redesign .nfr-tb-dot { opacity:.4; }
.nf-redesign .nfr-tb-date { color:#BFCBAE; font-variant-numeric:tabular-nums; }
.nf-redesign .nfr-tb-left { display:flex; align-items:center; gap:18px; }
.nf-redesign .nfr-tb-left a { color:#BFCBAE; font-weight:600; text-decoration:none; }
.nf-redesign .nfr-tb-left a:hover { color:#fff; }
.nf-redesign .nfr-tb-weather { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.nf-redesign .nfr-tb-weather span { font-variant-numeric:tabular-nums; }
@media (max-width:700px) { .nf-redesign .nfr-tb-left { display:none; } .nf-redesign .nfr-topbar-in { padding:7px 14px; } }

/* stats strip → rounded pill chips */
.nf-redesign .stat-chip { background:var(--surface); border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow-sm); }

/* newsletter now lives in the sidebar — drop the duplicate footer band */
.nf-redesign .newsletter-band { display:none !important; }

/* ============================================================
   9. PALESTINE NEWS — Figma calls for 2 cards under the hero
   (instead of the dense grid we used before). The PHP still
   pulls up to 4 so dedup has headroom; we just show 2.
   ============================================================ */
@media (min-width:1025px) {
  .nf-redesign .palestine-grid {
    grid-template-columns:repeat(2, 1fr) !important;
  }
  .nf-redesign .palestine-grid > .ps-card:nth-child(n+3) { display:none; }
}

/* ============================================================
   10. STATS STRIP — Figma uses 4 chips with a refined palette
   (sources count, today's stories, update cadence, trending
   topics). Slightly larger pills with stronger contrast.
   ============================================================ */
.nf-redesign .stat-chip { padding:7px 14px; font-size:13px; }
.nf-redesign .stat-chip b { font-weight:800; color:var(--text); }
.nf-redesign .stat-chip em { color:var(--muted); font-style:normal; }

/* ============================================================
   11. آخر الأخبار — Figma 3×2 grid of vertical cards: large
   image on top, gray excerpt, bold title, category pill, then
   source dot + timestamp footer. Self-contained markup lives
   in includes/components/home_latest_card.php.
   ============================================================ */
.nf-redesign .nf-latest-section { max-width:1400px; margin:36px auto 0; padding:0 20px; scroll-margin-top:90px; }
.nf-redesign .nf-latest-section .section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.nf-redesign .nf-latest-section .section-title { font-size:20px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:10px; }
.nf-redesign .nf-latest-section .section-title .line { width:4px; height:22px; border-radius:2px; background:var(--accent); }
.nf-redesign .nf-latest-section .see-all { font-size:13px; color:var(--muted); text-decoration:none; font-weight:700; padding:6px 10px; border-radius:8px; }
.nf-redesign .nf-latest-section .see-all:hover { background:var(--bg-3); color:var(--text); }

.nf-redesign .nf-latest-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media (max-width:1100px) { .nf-redesign .nf-latest-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px)  { .nf-redesign .nf-latest-grid { grid-template-columns:1fr; gap:14px; } }

.nf-redesign .nf-latest-card {
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nf-redesign .nf-latest-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.nf-redesign .nf-latest-card-img { width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); }
.nf-redesign .nf-latest-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.nf-redesign .nf-latest-card:hover .nf-latest-card-img img { transform:scale(1.03); }
.nf-redesign .nf-latest-card-body { padding:16px 16px 14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.nf-redesign .nf-latest-card-excerpt { font-size:12.5px; color:var(--muted); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nf-redesign .nf-latest-card-title { font-size:16px; font-weight:800; line-height:1.55; color:var(--text); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nf-redesign .nf-latest-card:hover .nf-latest-card-title { color:var(--accent-2); }
.nf-redesign .nf-latest-card-badges { display:flex; flex-wrap:wrap; gap:6px; }
.nf-redesign .nf-latest-card-badges:empty { display:none; }
.nf-redesign .nf-latest-card-badges .cluster-badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; cursor:pointer; }
.nf-redesign .nf-latest-card-meta { display:flex; }
.nf-redesign .nf-latest-card-cat {
  display:inline-block; font-size:12px; font-weight:700;
  color:var(--accent-2); background:#E8EFDD;
  padding:4px 12px; border-radius:999px;
}
[data-theme="dark"] .nf-redesign .nf-latest-card-cat { background:rgba(123,160,90,.15); color:#A6C098; }
.nf-redesign .nf-latest-card-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; border-top:1px solid var(--bg-3);
  font-size:12px; color:var(--muted); margin-top:auto;
}
.nf-redesign .nf-latest-card-source { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--text-2); }
.nf-redesign .nf-latest-card-source .src-dot { width:8px; height:8px; border-radius:50%; }
.nf-redesign .nf-latest-card-time { font-variant-numeric:tabular-nums; }

/* ============================================================
   12. أحدث الأخبار الفلسطينية — Figma layout: 2 horizontal
   cards in a single row, image on the right, content on the
   left, category pill at the top. Replaces the old hero +
   grid layout entirely. Old .ps-hero is hidden via CSS.
   ============================================================ */
.nf-redesign .ps-hero,
.nf-redesign .palestine-grid { display:none !important; }

.nf-redesign .nf-ps-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
  margin-bottom:28px;
}
@media (max-width:760px) { .nf-redesign .nf-ps-grid { grid-template-columns:1fr; gap:14px; } }
.nf-redesign .nf-ps-card {
  display:flex; flex-direction:row-reverse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
  min-height:130px;
}
.nf-redesign .nf-ps-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.nf-redesign .nf-ps-card-img { flex:0 0 140px; width:140px; overflow:hidden; background:var(--bg-3); }
.nf-redesign .nf-ps-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.nf-redesign .nf-ps-card-body { flex:1; min-width:0; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.nf-redesign .nf-ps-card-cat { display:inline-block; font-size:12px; font-weight:800; color:var(--accent-3); align-self:flex-start; }
.nf-redesign .nf-ps-card-title { font-size:15.5px; font-weight:800; line-height:1.55; color:var(--text); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nf-redesign .nf-ps-card:hover .nf-ps-card-title { color:var(--accent-2); }
.nf-redesign .nf-ps-card-badges { display:flex; flex-wrap:wrap; gap:6px; }
.nf-redesign .nf-ps-card-badges:empty { display:none; }
.nf-redesign .nf-ps-card-badges .cluster-badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; cursor:pointer; }
.nf-redesign .nf-ps-card-foot {
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:var(--muted); margin-top:auto;
}
.nf-redesign .nf-ps-card-source { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--text-2); }
.nf-redesign .nf-ps-card-source .src-dot { width:8px; height:8px; border-radius:50%; }
.nf-redesign .nf-ps-card-time::before { content:"·"; margin-left:8px; opacity:.6; }

/* ============================================================
   13. MAIN NAV — Figma trims the nav to 8 essentials. Hide the
   secondary links so the visual hierarchy matches the design.
   Visible: الرئيسية، فلسطين، سياسة، اقتصاد، رياضة، تكنولوجيا،
   ثقافة، قصص متطوّرة.
   ============================================================ */
.nf-redesign .site-nav .nav-link.breaking,
.nf-redesign .site-nav a[href="/weekly"],
.nf-redesign .site-nav a[href="/map"],
.nf-redesign .site-nav a[href="/podcast"],
.nf-redesign .site-nav a[href="timelines"],
.nf-redesign .site-nav a[href="category/media"],
.nf-redesign .site-nav a[href="category/reports"],
.nf-redesign .site-nav a[href="telegram.php"],
.nf-redesign .site-nav a[href="reels.php"] { display:none !important; }
/* Make sure Palestine + Tech are visible (newly added links). */
.nf-redesign .site-nav .nav-palestine,
.nf-redesign .site-nav .nav-tech { display:inline-flex !important; }

/* ============================================================
   14. HEADER — Figma keeps the logo on the right and actions
   on the left (the default RTL order), but trims the action
   bar to the essentials by moving weather/currency/sources/
   theme into the top utility bar. Cleaner header strip + more
   room for the search box.
   ============================================================ */
.nf-redesign .site-header-inner .icon-btn-wide,
.nf-redesign .site-header-inner .header-actions > .icon-btn[title="أسعار العملات"],
.nf-redesign .site-header-inner .header-actions > .icon-btn[title="المصادر النشطة"],
.nf-redesign .site-header-inner .header-actions > .icon-btn[title="تبديل الثيم"] {
  display:none !important;
}

/* ============================================================
   15. FOOTER — the redesign tokens remapped --header-bg to a
   light cream, but the footer was authored against the old
   dark token. Pin its colors to a dedicated olive-black so the
   white text is readable again.
   ============================================================ */
.nf-redesign footer {
  background:#1E1F18;
  color:rgba(221,213,199,.78);
}
.nf-redesign footer .footer-inner { border-bottom-color:rgba(255,255,255,.08); }
.nf-redesign footer .footer-logo,
.nf-redesign footer .footer-col-title { color:#fff; }
.nf-redesign footer .footer-desc,
.nf-redesign footer .footer-col a,
.nf-redesign footer .footer-copy { color:rgba(221,213,199,.78); }
.nf-redesign footer .footer-col a:hover { color:#fff; }
.nf-redesign footer .footer-social a {
  background:rgba(255,255,255,.08); color:#fff;
}
.nf-redesign footer .footer-social a:hover { background:rgba(255,255,255,.18); }