@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@600;700;800;900&display=swap');
/* ==========================================================================
   cnewsnn.com — «سی‌ان‌ان فارسی» design layer  (namespace re-skin over eu-)
   Identity: URGENT red / black / white breaking-news tabloid.
   Loaded AFTER euronews.css → redefines tokens, overrides identity bits.
   Completely distinct from the other 14 newsrooms.
   ========================================================================== */
:root, html:not([data-theme=dark]), html[data-theme=dark]{
  --eu-navy:#0a0a0a; --eu-navy-2:#1a1a1a;
  --eu-blue:#cc0000; --eu-blue-d:#0a0a0a; --eu-blue-l:#fdeaea;
  --eu-yellow:#cc0000; --eu-red:#cc0000; --eu-green:#0a7a3c;
  --brand:#cc0000; --brand-dark:#a10000; --brand-2:#0a0a0a;
  --ink:#0a0a0a; --text:#1c1c1c; --muted:#6a6a6a; --faint:#9a9a9a;
  --bg:#ffffff; --bg-2:#f3f3f4; --bg-3:#e9e9ea; --card:#ffffff;
  --border:#e0e0e2; --border-2:#eececd; --radius:0; --radius-sm:0; --shadow:none;
  --font-lat:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
body{font-size:15.5px;background:var(--bg-2)}
::selection{background:#cc0000;color:#fff}

/* ---- utility bar: black with red date pill ---- */
.eu-util{background:#0a0a0a;color:#c7c7c7;border-bottom:3px solid #cc0000}
.eu-util b,.eu-clock{color:#fff}
.eu-lang a{color:#c7c7c7;border-radius:0}
.eu-lang a.on{color:#fff;background:#cc0000}
.eu-lang a.on:hover{color:#fff}

/* ---- masthead: white, original block wordmark (logo image hidden) ---- */
.eu-mast{background:#fff;border-bottom:3px solid #0a0a0a}
.eu-mast-in{height:104px;gap:18px}
.eu-logo img{display:none}
.eu-logo{gap:0}
.eu-lockup{border-inline-start:0;padding-inline-start:0;flex-direction:row;align-items:center;gap:12px}
.eu-lockup b{position:relative;font-family:'Anton',var(--font-lat);font-weight:400;letter-spacing:.5px;
  font-size:0;color:transparent;display:flex;align-items:center;gap:0}
/* build the wordmark: red CNN block + Persian label */
.eu-lockup b::before{content:"CNN";font-family:'Anton',sans-serif;font-size:30px;letter-spacing:1px;
  color:#fff;background:#cc0000;padding:6px 12px 4px;line-height:1;display:inline-block;transform:skewX(-6deg)}
.eu-lockup b::after{content:"فارسی";font-size:25px;font-weight:900;color:#0a0a0a;margin-inline-start:12px;font-family:'Vazirmatn',sans-serif;white-space:nowrap}
.eu-lockup i{display:none}

/* search: sharp, red submit */
.eu-search{border:2px solid #0a0a0a}
.eu-search button{background:#cc0000}
.eu-btn-live{background:#cc0000;color:#fff;border-radius:0;font-weight:900}
.eu-btn-live i{background:#fff}
.eu-icon-btn{border-radius:0;border:2px solid #0a0a0a;color:#0a0a0a}
.eu-icon-btn:hover{background:#cc0000;border-color:#cc0000;color:#fff}

/* ---- primary nav: solid black bar, red active underline, condensed ---- */
.eu-nav{background:#0a0a0a}
.eu-nav a{color:#e6e6e6;font-weight:800;font-size:14.5px;text-transform:none;border-bottom:4px solid transparent}
.eu-nav a:hover{background:#cc0000;color:#fff}
.eu-nav a.on{color:#fff;border-bottom-color:#cc0000;background:rgba(204,0,0,.14)}
.eu-nav .eu-nav-sep{background:rgba(255,255,255,.18)}

/* ---- breaking ticker: heavy red label, pulsing dot ---- */
.eu-tick{border-bottom:1px solid var(--border)}
.eu-tick-lbl{background:#cc0000;font-size:13px;letter-spacing:1px}
.eu-tick-lbl::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff;margin-inline-end:9px;animation:cnnpulse 1s infinite}
@keyframes cnnpulse{0%,100%{opacity:1}50%{opacity:.25}}
.eu-tick-track a::before{color:#cc0000}
.eu-tick-track a:hover{color:#cc0000}

/* ---- hero: red kicker, black gradient, bold ---- */
.eu-hero{margin-top:22px}
.eu-kick{background:#cc0000;color:#fff;font-weight:900;padding:4px 10px;font-size:12px;letter-spacing:.5px}
.eu-lead-body h1{font-weight:900;font-size:40px;line-height:1.2}
.eu-hs.on{background:var(--eu-blue-l);border-inline-start-color:#cc0000}
.eu-hs.on .eu-hs-n{color:#cc0000}
.eu-hs-t .c{color:#cc0000}
.eu-hs-head b{color:#0a0a0a}
.eu-hs-head .lat{color:#cc0000}

/* most-read numbers: big red ordinals */
.eu-num b{color:#cc0000;opacity:.9;font-family:'Anton',sans-serif;font-weight:400}
.eu-num:hover{background:var(--eu-blue-l)}
.eu-num span{font-weight:800}

/* section heads: black rule, red accent, uppercase latin */
.eu-sec-h{border-top:3px solid #0a0a0a}
.eu-sec-h h2{font-weight:900}
.eu-sec-h h2 em{color:#cc0000}
.eu-sec-h .lat{color:#cc0000;font-weight:800}
.eu-sec-h a{color:#cc0000}
.eu-sec-h a:hover{color:#0a0a0a}

/* cards: sharp, red category tag, bold headline */
.eu-card-cat{background:#cc0000;color:#fff;font-weight:800}
.eu-card h3{font-weight:800}
.eu-card:hover h3{color:#cc0000}
.eu-fi h3{font-weight:800}
.eu-fi:hover h3{color:#cc0000}
.eu-fi .c,.eu-card .c{color:#cc0000}

/* category tiles + promo in red/black */
.eu-cat span i{color:#cc0000}
.eu-promo{background:#0a0a0a;color:#fff}
.eu-promo h3{color:#fff}
.eu-promo-links a{background:#cc0000;color:#fff;border-radius:0;border:0}
.eu-promo-links a:hover{background:#fff;color:#0a0a0a}

/* footer accents */
.eu-footer a:hover{color:#cc0000}

/* ---- mobile ---- */
@media (max-width:640px){
  .eu-lockup b::before{font-size:24px;padding:5px 9px 3px}
  .eu-lockup b::after{font-size:19px;margin-inline-start:9px}
  .eu-mast-in{height:64px}
  .eu-lead-body h1{font-size:24px}
}