/* Somar (Baianat) – self-hosted variable font, weights 300–800 (Arabic + Latin subset). */
@font-face{font-family:'Somar';src:url('../fonts/somar-var.woff2') format('woff2-variations'),url('../fonts/somar-var.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
/* DETAfour design system. body.df-ui = every redesigned page; body.df-home = homepage; body.df-site = inner pages (site.css).
   Style: classic newspaper layout (rules, column dividers) with a modern news/markets frame
   (top bar + ticker, numbered most-read). Font: Somar. */
.df-ui{--ink:#0b0b0c;--navy:#031575;--yellow:#f4f51a;--red:#d71920;--text:#16171a;--muted:#5d6068;--line:#e4e4e1;--rule:#0b0b0c;--surface:#f5f5f2;--bg:#fff;--w:1280px;
  --f-head:'Somar','Segoe UI',Tahoma,sans-serif;--f-ui:'Somar','Segoe UI',Tahoma,sans-serif;
  margin:0;background:var(--bg);color:var(--text);font-family:var(--f-ui);line-height:1.7;-webkit-font-smoothing:antialiased}
.df-home *,.df-home *::before,.df-home *::after{box-sizing:border-box}
.df-home a{color:inherit;text-decoration:none}
.df-home img{display:block;max-width:100%;height:auto}
.df-home h1,.df-home h2,.df-home h3,.df-home p,.df-home ul,.df-home ol{margin:0;padding:0}
.df-home h2,.df-home h3{color:inherit;letter-spacing:0;text-transform:none}
.df-home{font-size:16px;text-align:right}
.df-home ul,.df-home ol{list-style:none}
/* Inner pages: same resets, limited to DETAfour components so Jannah content keeps its own spacing. */
.df-site :is(.df-header,.df-navbar,.df-topics-bar,.df-footer,.df-search,.df-story,.df-sec-head,.df-ad,.df-arch-head,.df-pager) :is(h1,h2,h3,p,ul,ol){margin:0;padding:0}
.df-site :is(.df-header,.df-navbar,.df-footer,.df-story,.df-arch-head) ul{list-style:none}
.df-site :is(.df-header,.df-navbar,.df-topics-bar,.df-footer,.df-search,.df-story,.df-sec-head,.df-arch-head,.df-pager) a{color:inherit;text-decoration:none}
.df-site :is(.df-header,.df-footer,.df-story) img{display:block;max-width:100%;height:auto}
.df-site :is(.df-header,.df-navbar,.df-topics-bar,.df-footer,.df-search) *{box-sizing:border-box}
.df-site{font-size:16px}
.df-wrap{max-width:var(--w);margin-inline:auto;padding-inline:clamp(16px,3vw,32px)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.df-ui :focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.df-skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--ink);color:#fff!important;padding:8px 16px;z-index:100}
.df-skip:focus{top:8px}

/* ---------- Header ---------- */
.df-header{background:#fff}
/* Top bar: date + latest-news ticker */
.df-topbar{background:var(--surface);color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}
.df-topbar .df-wrap{display:flex;align-items:center;gap:24px;min-height:40px}
.df-date{white-space:nowrap;color:var(--muted)}
.df-ticker{flex:1;min-width:0;display:flex;align-items:center;gap:16px}
.df-ticker-label{display:inline-flex;align-items:center;gap:8px;color:var(--red);font-weight:700;white-space:nowrap;padding-inline-start:20px;border-inline-start:1px solid var(--line)}
.df-ticker-label i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(215,25,32,.3);animation:df-pulse 2s infinite}
.df-ticker-view{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(to left,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.df-ticker-track{display:flex;width:max-content;gap:0;margin:0;padding:0;list-style:none}
.df-ticker-track.is-running{animation:df-ticker var(--df-ticker-dur,60s) linear infinite}
.df-ticker:hover .df-ticker-track,.df-ticker:focus-within .df-ticker-track{animation-play-state:paused}
.df-ticker-track li{display:flex;gap:10px;white-space:nowrap;padding-inline-end:40px}
.df-ticker-track time{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.df-ui .df-ticker-track a,.df-ui .df-ticker-track a:visited{color:var(--text)!important;background:none!important;padding:0;font-size:13px;font-weight:400}
.df-ui .df-ticker-track a:hover{color:var(--navy)!important;text-decoration:underline}
@keyframes df-ticker{from{transform:translateX(0)}to{transform:translateX(50%)}}
[dir=ltr] .df-ticker-track.is-running,.df-ticker-track.is-running:dir(ltr){animation-direction:reverse}
@keyframes df-pulse{50%{box-shadow:0 0 0 6px rgba(215,25,32,0)}}

/* Masthead: centered logo between double rules */
.df-masthead{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding-block:18px 14px}
.df-masthead .df-logo{grid-column:2;justify-self:center}
.df-masthead .df-search-btn{grid-column:3}
.df-logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-ui);font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.5px;line-height:1.2;direction:ltr}
.df-logo .df-logo-text{font-weight:700}
.df-logo .df-logo-text span{font-weight:300}
.df-logo img{max-height:60px;width:auto;height:auto}
.df-logo img.df-logo-mark{width:46px;height:46px;max-height:none;border-radius:6px}
.df-logo-light{color:#fff}

/* Nav bar (sticky) */
.df-navbar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.04);position:sticky;top:0;z-index:50}
.admin-bar .df-navbar{top:32px}
@media (max-width:782px){.admin-bar .df-navbar{top:0;position:relative}}
.df-nav ul{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.df-nav li{position:relative}
.df-nav a{display:block;padding:12px 14px;font-weight:600;font-size:15.5px;border-bottom:3px solid transparent;margin-bottom:-3px}
.df-nav .menu-item-has-children>a::after{content:"";display:inline-block;margin-inline-start:6px;border:4px solid transparent;border-top-color:currentColor;vertical-align:-2px}
.df-nav .sub-menu{display:none;position:absolute;inset-inline-start:0;top:100%;min-width:220px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--ink);box-shadow:0 14px 32px rgba(0,0,0,.1);flex-direction:column;gap:0;z-index:60}
.df-nav li:hover>.sub-menu,.df-nav li:focus-within>.sub-menu{display:flex}
.df-search-btn,.df-menu-btn{background:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:50%;position:relative;color:var(--ink)}
.df-search-btn:hover,.df-menu-btn:hover{background:var(--surface)}
.df-search-btn i{position:absolute;inset:11px 12px 13px 11px;border:2px solid currentColor;border-radius:50%;width:15px;height:15px}
.df-search-btn i::after{content:"";position:absolute;width:2px;height:8px;background:currentColor;inset-inline-start:-3px;top:12px;transform:rotate(45deg)}
.df-menu-btn{visibility:hidden}
.df-menu-btn i,.df-menu-btn i::before,.df-menu-btn i::after{position:absolute;inset-inline-start:11px;width:22px;height:2px;background:currentColor;content:""}
.df-menu-btn i{top:21px}.df-menu-btn i::before{top:-7px;inset-inline-start:0}.df-menu-btn i::after{top:7px;inset-inline-start:0}

/* Topics row */
.df-topics-bar{border-bottom:1px solid var(--line)}
.df-topics{display:flex;gap:6px 22px;flex-wrap:wrap;align-items:center;padding-block:10px;font-size:14px;color:var(--muted)}
.df-topics strong{color:var(--ink);font-weight:700;padding-inline-end:14px;border-inline-end:2px solid var(--yellow)}
.df-ui .df-topics a,.df-ui .df-topics a:visited{color:var(--muted)!important;background:none!important;padding:0;font-size:14px}
.df-ui .df-topics a:hover{color:var(--ink)!important;text-decoration:underline}

/* Search dialog */
.df-search{border:0;padding:0;width:min(640px,92vw);margin:12vh auto auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.df-search::backdrop{background:rgba(3,21,117,.45)}
.df-search form{display:flex;gap:8px;padding:16px}
.df-search input{flex:1;padding:12px 16px;border:1px solid var(--line);font:inherit;font-size:18px}
.df-search button{padding:0 20px;background:var(--navy);color:#fff;border:0;font:inherit;font-weight:600;cursor:pointer}
.df-search .df-search-close{background:var(--surface);color:var(--text);font-size:24px}

/* ---------- Story base ---------- */
.df-story{display:flex;flex-direction:column;gap:12px;min-width:0}
.df-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.df-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .3s}
.df-story:hover .df-thumb img{transform:scale(1.03)}
.df-thumb-fallback{display:block;width:100%;height:100%;background:linear-gradient(135deg,#e7e7e3,#f5f5f2)}
.df-body{display:flex;flex-direction:column;gap:6px}
.df-cat,.df-kicker{font-size:12.5px;font-weight:700;color:var(--navy);letter-spacing:.2px}
.df-title{font-family:var(--f-head);font-size:21px;font-weight:700;line-height:1.6;color:var(--ink)}
.df-excerpt{font-size:15.5px;line-height:1.9;color:var(--muted);font-weight:400}
.df-meta{display:flex;gap:10px;font-size:12.5px;color:var(--muted)}
.df-meta span+time::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;vertical-align:middle;margin-inline-end:10px}
.df-time{font-size:13px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.df-all{font-size:13.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.df-all::after{content:" ←"}
.df-all:hover{text-decoration:underline}

/* Section heading: accent bar + title */
.df-sec{padding-block:44px 8px}
.df-sec-head{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:26px;position:relative}
.df-sec-head::after{content:"";position:absolute;bottom:-1px;inset-inline-start:0;width:72px;height:3px;background:var(--navy)}
.df-sec-head h2{font-family:var(--f-head);font-size:28px;font-weight:700;color:var(--ink);line-height:1.5}
.df-sec-head h2{display:flex;align-items:center;gap:10px}
.df-sec-head h2::before{content:"";width:5px;height:26px;background:var(--yellow)}

/* ---------- A. Lead ---------- */
.df-lead{display:grid;grid-template-columns:1.85fr 1fr .95fr;gap:0;padding-block:32px 40px}
.df-lead>*{padding-inline:28px}
.df-lead>*:first-child{padding-inline-start:0}
.df-lead>*:last-child{padding-inline-end:0}
.df-lead>*+*{border-inline-start:1px solid var(--line)}
.df-story--lead .df-thumb{aspect-ratio:16/9}
.df-story--lead .df-title{font-size:clamp(28px,3.1vw,42px);line-height:1.45}
.df-story--lead .df-excerpt{font-size:17.5px;color:#3d3f45}
.df-lead-support{display:flex;flex-direction:column;gap:22px}
.df-lead-support .df-story+.df-story{border-top:1px solid var(--line);padding-top:22px}
.df-story--support .df-title{font-size:20px}
.df-latest{display:flex;flex-direction:column;gap:0}
.df-latest h2{font-family:var(--f-ui);font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;border-bottom:3px solid var(--navy);padding-block:0 8px;margin-bottom:4px}
.df-latest h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);animation:df-pulse 2s infinite;box-shadow:0 0 0 3px rgba(215,25,32,.25)}
.df-story--latest{flex-direction:column;gap:2px;padding-block:13px;border-bottom:1px solid var(--line);position:relative;padding-inline-start:16px}
.df-story--latest::before{content:"";position:absolute;inset-inline-start:0;top:20px;width:7px;height:7px;border-radius:50%;border:2px solid var(--line);background:#fff}
.df-story--latest .df-title{font-family:var(--f-ui);font-size:15px;font-weight:600;line-height:1.65}
.df-latest .df-all{margin-top:14px}

/* ---------- A2. Most read ---------- */
.df-popular{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:22px 24px;margin-bottom:8px;display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:start}
.df-popular h2{font-family:var(--f-head);font-size:24px;font-weight:700;color:var(--ink);line-height:1.4}
.df-popular ol{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:pop}
.df-popular li{counter-increment:pop;display:flex;gap:12px;padding-inline:18px;border-inline-start:1px solid var(--line)}
.df-popular li::before{content:counter(pop);font-family:var(--f-head);font-size:40px;font-weight:700;line-height:1;color:var(--navy);min-width:24px}
.df-ui .df-popular a,.df-ui .df-popular a:visited{font-family:var(--f-head);font-size:16px;font-weight:600;line-height:1.65;color:var(--ink)!important;background:none!important;padding:0}
.df-ui .df-popular a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Grids (classic column rules) ---------- */
.df-grid-2,.df-grid-3,.df-grid-4{display:grid;gap:0}
.df-grid-2{grid-template-columns:repeat(2,1fr)}
.df-grid-3{grid-template-columns:repeat(3,1fr)}
.df-grid-4{grid-template-columns:repeat(4,1fr)}
:is(.df-grid-2,.df-grid-3,.df-grid-4)>*{padding-inline:22px}
:is(.df-grid-2,.df-grid-3,.df-grid-4)>*+*{border-inline-start:1px solid var(--line)}
:is(.df-grid-2,.df-grid-3,.df-grid-4)>*:first-child{padding-inline-start:0}
:is(.df-grid-2,.df-grid-3,.df-grid-4)>*:last-child{padding-inline-end:0}
.df-story--compact .df-title{font-size:17.5px}

/* C. Reading */
.df-reading{background:var(--surface);padding:32px clamp(16px,3vw,40px);margin-block:40px 0;display:grid;gap:12px;border-inline-start:4px solid var(--yellow)}
.df-story--reading{flex-direction:row;gap:40px;align-items:center}
.df-story--reading .df-body{flex:1;order:0}
.df-story--reading .df-thumb{flex:0 0 38%;order:1}
.df-story--reading .df-title{font-size:30px}

/* D/E split */
.df-split{display:grid;grid-template-columns:1.25fr 1fr;gap:0}
.df-split>.df-split-main{padding-inline-end:32px}
.df-split>.df-split-side{padding-inline-start:32px;border-inline-start:1px solid var(--line)}
.df-split-side{display:flex;flex-direction:column;gap:20px}
.df-story--feature .df-title{font-size:30px;line-height:1.5}
.df-story--feature .df-excerpt{font-size:16.5px}
.df-story--row{flex-direction:row;gap:18px;align-items:flex-start}
.df-story--row .df-thumb{flex:0 0 34%;aspect-ratio:4/3}
.df-split-side .df-story+.df-story{border-top:1px solid var(--line);padding-top:20px}
.df-story--row .df-title{font-size:18px}

/* ---------- G. Crypto: dark full-bleed ---------- */
.df-crypto{background:var(--surface);margin-top:48px;padding-block:44px 52px}
.df-crypto .df-sec-head,.df-crypto .df-split>.df-split-side{border-color:#dcdcd7}
.df-story--type .df-title{font-size:clamp(26px,3vw,40px);line-height:1.55}
.df-story--type .df-excerpt{font-size:17.5px}
.df-split-side.df-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.df-split-side.df-two .df-story+.df-story{border:0;padding:0}

/* H. Opinion */
.df-after{padding-bottom:24px}
.df-op{display:flex;flex-direction:column;gap:12px}
.df-op-author{display:flex;gap:12px;align-items:center}
.df-op-author .df-cat{display:block}
.df-avatar{border-radius:50%;width:56px;height:56px;object-fit:cover}
.df-story--opinion .df-title{font-style:normal}

/* I. Video */
.df-story--video .df-thumb{position:relative}
.df-story--video .df-thumb::after{content:"";position:absolute;inset:50% auto auto 50%;translate:-50% -50%;width:52px;height:52px;border-radius:50%;background:rgba(11,11,12,.8);box-shadow:0 0 0 2px var(--yellow)}
.df-story--video .df-thumb::before{content:"";position:absolute;inset:50% auto auto 50%;translate:-35% -50%;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;z-index:1;rotate:180deg}

/* ---------- Newsletter + footer ---------- */
.df-newsletter{background:var(--surface);padding-block:40px;margin-top:48px}
.df-newsletter .df-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.df-newsletter h2{font-family:var(--f-head);font-size:26px;color:var(--ink);font-weight:700}
.df-newsletter p{color:var(--muted)}
.df-nl-form input[type=email],.df-nl-form input[type=text]{width:100%;padding:12px 16px;border:1px solid var(--line);font:inherit}
.df-nl-form button,.df-nl-form input[type=submit]{background:var(--ink);color:#fff;border:0;padding:12px 28px;font:inherit;font-weight:700;cursor:pointer}
.df-footer{background:var(--navy);color:#d5d9f0;margin-top:56px;border-top:4px solid var(--yellow)}
.df-newsletter+.df-footer{margin-top:0}
.df-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-block:56px 40px}
.df-fcol h2{color:#fff;font-size:15px;font-weight:700;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.15)}
.df-fcol li{margin-bottom:8px}
.df-fbrand p{margin-block:16px;font-size:15px;max-width:42ch;color:#c3c8e6}
.df-social{display:flex;gap:16px}
.df-copy{border-top:1px solid rgba(255,255,255,.15);padding-block:20px;font-size:13.5px;color:#b3b9de}
.df-fbrand .df-logo img{max-height:64px}
.df-fbrand .df-logo img.df-logo-mark{box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .df-popular{grid-template-columns:1fr;gap:14px}
}
@media (max-width:1024px){
  .df-lead{grid-template-columns:1.6fr 1fr}
  .df-lead>.df-latest{grid-column:1/-1;border:0;padding:24px 0 0}
  .df-latest{display:grid;grid-template-columns:repeat(2,1fr);column-gap:28px}
  .df-latest h2,.df-latest .df-all{grid-column:1/-1}
  .df-popular ol{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .df-popular li:nth-child(4){border-inline-start:0}
  .df-grid-4{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .df-grid-4>*:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .df-grid-4>*:nth-child(even){padding-inline-end:0}
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  .df-topbar .df-date{display:none}
  .df-ticker-label{border:0;padding:0}
  .df-menu-btn{visibility:visible}
  .df-masthead{padding-block:10px}
  .df-logo{font-size:28px}
  .df-logo img{max-height:44px}
  .df-logo img.df-logo-mark{width:38px;height:38px}
  .df-navbar{position:relative;border-bottom-width:3px}
  .df-nav{display:none}
  .df-nav.is-open{display:block}
  .df-nav ul{flex-direction:column;gap:0}
  .df-nav a{border-bottom:1px solid var(--line);border-inline-start:3px solid transparent;margin:0}
  .df-nav .current-menu-item>a{border-inline-start-color:var(--yellow);border-bottom-color:var(--line)}
  .df-nav .sub-menu{display:flex;position:static;min-width:0;border:0;box-shadow:none;background:var(--surface)}
  .df-nav .sub-menu a{padding-inline-start:32px}
  .df-nav .menu-item-has-children>a::after{display:none}
  .df-topics{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .df-lead,.df-split,.df-grid-3,.df-grid-2,.df-newsletter .df-wrap{grid-template-columns:1fr}
  .df-lead{gap:0;padding-top:20px}
  .df-lead>*,.df-split>*{padding-inline:0!important;border-inline-start:0!important}
  .df-lead>*+*{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
  .df-lead>.df-latest{display:flex;border-top:0}
  .df-split>.df-split-side{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}
  :is(.df-grid-2,.df-grid-3)>*{padding-inline:0;border-inline-start:0!important}
  :is(.df-grid-2,.df-grid-3)>*+*{border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
  .df-story--lead .df-title{font-size:28px}
  .df-story--feature .df-title{font-size:24px}
  .df-popular ol{grid-template-columns:1fr;row-gap:0}
  .df-popular li{border:0;border-bottom:1px solid var(--line);padding:12px 0}
  .df-popular li:last-child{border-bottom:0}
  .df-popular li::before{font-size:30px}
  .df-story--reading{flex-direction:column;align-items:stretch}
  .df-story--reading .df-thumb{flex:none;order:0}
  .df-split-side.df-two{grid-template-columns:1fr}
  .df-grid-4{gap:16px 0}
  .df-footer-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:480px){
  .df-grid-4{grid-template-columns:1fr}
  .df-grid-4>*{padding-inline:0!important;border-inline-start:0!important}
  .df-story--row .df-thumb{flex-basis:38%}
}
@media (prefers-reduced-motion:reduce){
  .df-ui *{transition:none!important;scroll-behavior:auto!important}
  .df-ticker-track.is-running{animation:none}
  .df-ticker-view{overflow-x:auto}
  .df-ticker-label i,.df-latest h2::before{animation:none}
}

/* Neutralise the site's global custom CSS ("article a", "nav ul li a", ".menu .current-menu-item a", …)
   on DETAfour components only. Article content links are styled in site.css. */
.df-ui article.df-story a,.df-ui article.df-story a:hover,.df-ui article.df-story a:visited,.df-ui article.df-story a:focus{
  font-size:inherit;font-weight:inherit;color:inherit;background:none;background-image:none;padding:0;border-radius:0;box-shadow:none;transform:none;display:inline;position:static;transition:color .15s}
.df-ui article.df-story a::before,.df-ui article.df-story a::after{content:none}
.df-ui article.df-story a.df-thumb{display:block;border-radius:0}
.df-ui article.df-story a.df-cat,.df-ui article.df-story a.df-cat:visited{font-size:12.5px;font-weight:700;color:var(--navy)}
.df-ui article.df-story a.df-cat:hover{text-decoration:underline}
.df-ui article.df-story .df-title a:hover{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.df-ui :is(.df-header,.df-footer) nav ul{justify-content:flex-start}
.df-ui .df-navbar nav ul.df-menu{justify-content:center}
.df-ui .df-navbar nav ul li a,.df-ui .df-navbar nav ul li a:hover,.df-ui .df-navbar nav ul li a:visited{color:var(--ink)!important;background:none!important;border-radius:0;transition:border-color .15s;white-space:nowrap}
.df-ui .df-nav ul li a{padding:12px 14px;font-size:15.5px;font-weight:600}
.df-ui .df-nav ul li a:hover{border-bottom-color:var(--ink)}
.df-ui .df-nav ul li.current-menu-item>a,.df-ui .df-nav ul li.current_page_item>a,.df-ui .df-nav ul li.current-menu-ancestor>a{background:none!important;color:var(--ink)!important;border-bottom-color:var(--yellow);box-shadow:inset 0 -3px 0 var(--yellow)}
.df-ui .df-nav .sub-menu li a{font-size:14.5px;font-weight:500;padding:10px 16px;border-bottom:1px solid var(--line);margin:0}
.df-ui .df-nav ul.sub-menu{display:none!important;background:#fff;padding:0;border-radius:0}
.df-ui .df-nav li:hover>ul.sub-menu,.df-ui .df-nav li:focus-within>ul.sub-menu{display:flex!important}
.df-ui .df-nav ul.df-menu{display:flex!important;gap:2px}
.df-ui .df-fcol ul{display:block!important;gap:0}
.df-ui .df-fcol ul li a,.df-ui .df-fcol ul li a:visited{color:#d5d9f0!important;background:none!important;border-radius:0;padding:0;font-size:14.5px;font-weight:400;display:inline;transition:none}
.df-ui .df-fcol ul li a:hover{color:#fff!important;background:none!important;text-decoration:underline}
/* Jannah's hidden page-builder h1 (masthead) */
.df-ui .df-masthead .h1-off{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
.df-ui .df-social a{color:#d5d9f0!important}
@media (max-width:768px){
  .df-ui .df-nav ul.df-menu{display:flex!important;flex-direction:column;gap:0}
  .df-ui .df-nav ul.sub-menu{display:flex!important;position:static}
  .df-ui .df-nav ul li a{padding:12px 16px;white-space:normal;box-shadow:none}
  .df-ui .df-nav .sub-menu li a{padding-inline-start:32px;white-space:normal}
}

/* Jannah ad placements */
.df-ad{padding-block:16px;text-align:center;border-bottom:1px solid var(--line)}
.df-ad-above-footer{border-bottom:0;border-top:1px solid var(--line);margin-top:24px}
.df-ad .stream-item,.df-ad .stream-item-top-wrapper{float:none;width:auto;max-width:100%;margin:0 auto;padding:0}
.df-ad .stream-item-top{float:none;display:inline-block;max-width:100%}
.df-ad img{display:inline-block;max-width:100%;height:auto}
.df-ad .stream-title{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}

/* Typography lock: the Fonts Plugin and old custom CSS force Alexandria/Poppins with !important on
   body, h1–h6, li, .entry-content, #content … — reassert the DETAfour pairing on DETAfour components only. */
.df-ui :is(.df-header,.df-navbar,.df-topics-bar,.df-footer,.df-newsletter,.df-search,.df-wrap,.df-crypto),
.df-ui :is(.df-header,.df-navbar,.df-topics-bar,.df-footer,.df-newsletter,.df-search,.df-wrap,.df-crypto) *:not([class*="icon"]):not(.fa):not([class*="fa-"]):not([class*="dashicons"]){font-family:var(--f-ui)!important}
body.df-ui :is(.df-title,.df-title a,.df-sec-head h2,.df-popular h2,.df-popular a,.df-newsletter h2,.df-popular li),
body.df-ui :is(.df-title,.df-sec-head h2,.df-popular li)::before{font-family:var(--f-head)!important}
.df-ui .df-thumb,.df-ui .df-thumb img,.df-ui .df-story img{border-radius:0!important}
/* Phones: Jannah's 728px banner must shrink with the screen. */
.df-ad .stream-item-top,.df-ad .stream-item-top a{display:block;max-width:100%}
.df-ui{overflow-x:clip}
/* No opinion/video blocks: the dark crypto band runs straight into the footer. */
.df-after:not(:has(section)){display:none}
.df-crypto+.df-after:not(:has(section))+.df-footer{margin-top:0}

/* ---------- Denser homepage (v3): more categories and stories ---------- */
/* A1. More top stories under the lead */
.df-more{border-top:1px solid var(--line);padding-block:28px 8px}
.df-more .df-title,.df-sec-more .df-title{font-size:16.5px}
/* Headline-only list */
.df-list{display:flex;flex-direction:column}
.df-story--list{padding-block:12px;border-top:1px solid var(--line);position:relative;padding-inline-start:16px}
.df-story--list::before{content:"";position:absolute;inset-inline-start:0;top:24px;width:6px;height:6px;background:var(--yellow);box-shadow:0 0 0 1px var(--ink)}
.df-story--list .df-title{font-size:16.5px;line-height:1.7}
.df-story--list .df-meta{display:none}
/* B. Morocco mosaic: feature | 2×2 grid | headline list */
.df-mosaic{display:grid;grid-template-columns:1.5fr 1.5fr 1fr;gap:0}
.df-mosaic>*{padding-inline:24px}
.df-mosaic>*:first-child{padding-inline-start:0}
.df-mosaic>*:last-child{padding-inline-end:0}
.df-mosaic>*+*{border-inline-start:1px solid var(--line)}
.df-mosaic-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;align-content:start}
.df-mosaic-grid .df-title{font-size:16px}
.df-mosaic-list .df-story--list:first-child{border-top:0;padding-top:0}
.df-mosaic-list .df-story--list:first-child::before{top:12px}
/* E. Stock exchanges side by side */
.df-twin{display:grid;grid-template-columns:1fr 1fr;gap:0}
.df-twin-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.df-twin-col:first-child{padding-inline-end:32px}
.df-twin-col+.df-twin-col{padding-inline-start:32px;border-inline-start:1px solid var(--line)}
.df-story--rowlg .df-thumb{flex-basis:46%}
.df-story--rowlg .df-title{font-size:21px}
.df-twin-rows{display:flex;flex-direction:column;gap:16px}
.df-twin-rows .df-story{border-top:1px solid var(--line);padding-top:16px}
.df-twin-rows .df-story--row .df-thumb{flex-basis:26%}
.df-twin-rows .df-title{font-size:16.5px}
/* F. World: extra row */
.df-sec-more{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
/* G. Category columns */
.df-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.df-col{padding-inline:22px;min-width:0}
.df-col:first-child{padding-inline-start:0}
.df-col:last-child{padding-inline-end:0}
.df-col+.df-col{border-inline-start:1px solid var(--line)}
.df-col .df-sec-head{margin-bottom:18px}
.df-col .df-sec-head h2{font-size:21px}
.df-col .df-sec-head h2::before{height:20px}
.df-col .df-all{font-size:12.5px}
.df-story--colhead{margin-bottom:6px}
.df-story--colhead .df-title{font-size:18px}
/* Footer: longer category list in two columns */
.df-footer-grid{grid-template-columns:1.4fr 1.4fr 1fr 1fr}
.df-ui .df-fcol:nth-child(2) ul{display:grid!important;grid-template-columns:1fr 1fr;column-gap:20px}

@media (max-width:1100px){
  .df-mosaic{grid-template-columns:1.3fr 1fr}
  .df-mosaic-list{grid-column:1/-1;border:0!important;padding:24px 0 0!important;margin-top:24px;border-top:1px solid var(--line)!important}
  .df-mosaic-list .df-list{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .df-mosaic-list .df-story--list:nth-child(2){border-top:0;padding-top:0}
  .df-mosaic-list .df-story--list:nth-child(2)::before{top:12px}
  .df-cols{grid-template-columns:1fr 1fr;row-gap:36px}
  .df-col:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .df-col:nth-child(even){padding-inline-end:0}
}
@media (max-width:768px){
  .df-mosaic,.df-twin,.df-cols{grid-template-columns:1fr}
  .df-mosaic>*,.df-twin-col,.df-col{padding-inline:0!important;border-inline-start:0!important}
  .df-mosaic>*+*,.df-twin-col+.df-twin-col,.df-col+.df-col{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}
  .df-mosaic-list{margin-top:24px}
  .df-mosaic-list .df-list{grid-template-columns:1fr}
  .df-mosaic-list .df-story--list:nth-child(2){border-top:1px solid var(--line);padding-top:12px}
  .df-mosaic-list .df-story--list:nth-child(2)::before{top:24px}
  .df-story--rowlg{flex-direction:column}
  .df-story--rowlg .df-thumb{flex-basis:auto;width:100%}
  .df-footer-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .df-mosaic-grid{grid-template-columns:1fr 1fr;gap:18px 14px}
  .df-mosaic-grid .df-title{font-size:15px}
}

/* ---------- Front (first part of the homepage): text-first classic ---------- */
.df-front{display:grid;grid-template-columns:.95fr 2.1fr 1fr;gap:0;padding-block:28px 36px}
.df-front>*{padding-inline:28px;min-width:0}
.df-front>*:first-child{padding-inline-start:0}
.df-front>*:last-child{padding-inline-end:0}
.df-front>*+*{border-inline-start:1px solid var(--line)}
/* Lead: kicker, headline, photo, summary, meta (body flattened so the photo sits under the headline) */
.df-story--front{gap:0}
.df-story--front .df-body{display:contents}
.df-story--front .df-cat{order:1;margin-bottom:8px}
.df-story--front .df-title{order:2;font-size:clamp(30px,3.2vw,46px);line-height:1.4;text-align:center;margin-bottom:18px}
.df-story--front .df-thumb{order:3;aspect-ratio:16/9}
.df-story--front .df-excerpt{order:4;font-size:18px;line-height:1.95;color:#34363c;margin-top:16px}
.df-story--front .df-meta{order:5;margin-top:10px}
.df-ui article.df-story--front a.df-cat{align-self:center}
.df-front-under{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:24px;padding-top:22px;border-top:3px double var(--line)}
.df-front-under>*{padding-inline:20px}
.df-front-under>*:first-child{padding-inline-start:0}
.df-front-under>*:last-child{padding-inline-end:0;border-inline-start:1px solid var(--line)}
.df-story--text .df-title{font-size:19px;line-height:1.6}
.df-story--text .df-excerpt{font-size:15px;line-height:1.85}
.df-front-side{display:flex;flex-direction:column}
.df-story--sidetext{padding-block:16px;border-top:1px solid var(--line)}
.df-story--sidetext:first-child{border-top:0;padding-top:0}
.df-story--sidetext .df-title{font-size:18px}
.df-story--sidetext .df-meta{display:none}
@media (max-width:1100px){
  .df-front{grid-template-columns:1.9fr 1fr}
  .df-front-latest{grid-column:1/-1;order:3;border-inline-start:0!important;padding:24px 0 0!important;margin-top:24px;border-top:1px solid var(--line)}
  .df-front-center{padding-inline-start:0}
  .df-front .df-latest{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .df-front .df-latest h2,.df-front .df-latest .df-all{grid-column:1/-1}
}
@media (max-width:768px){
  .df-front{grid-template-columns:1fr;padding-top:18px}
  .df-front>*{padding-inline:0!important;border-inline-start:0!important}
  .df-front-center{order:1}
  .df-front-side{order:2;border-top:1px solid var(--line);margin-top:22px;padding-top:18px}
  .df-front-latest{order:3}
  .df-front .df-latest{display:flex}
  .df-story--front .df-title{font-size:28px;text-align:start}
  .df-ui article.df-story--front a.df-cat{align-self:flex-start}
  .df-story--front .df-excerpt{font-size:16.5px}
  .df-front-under{grid-template-columns:1fr}
  .df-front-under>*{padding-inline:0!important;border-inline-start:0!important}
  .df-front-under>*+*{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
}

/* ===== Extras: header tools, follow links, markets strip, breaking bar, newsletter form, back-to-top ===== */
.df-masthead{grid-template-columns:96px 1fr 96px}
.df-mast-tools{grid-column:3;display:flex;justify-content:flex-end;align-items:center}
.df-masthead .df-search-btn{grid-column:auto}
.df-theme-btn{background:none;border:0;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;color:var(--ink);border-radius:50%}
.df-theme-btn:hover{background:var(--surface)}
.df-theme-btn .sun{display:none}
[data-theme="dark"] .df-theme-btn .sun{display:inline}
[data-theme="dark"] .df-theme-btn .moon{display:none}

.df-follow{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.df-follow a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:13px;color:var(--muted)!important;text-decoration:none}
.df-follow a:hover{background:var(--navy);color:#fff!important}
.df-follow--top{margin-inline-start:12px}
.df-follow--foot{margin-top:18px}
.df-follow--foot a{width:36px;height:36px;font-size:15px;background:rgba(255,255,255,.1);color:#fff!important}
.df-follow--foot a:hover{background:var(--yellow);color:var(--navy)!important}

.df-markets{background:var(--surface);border-bottom:1px solid var(--line);font-size:13.5px}
.df-markets .df-wrap{display:flex;align-items:center;gap:16px;min-height:40px}
.df-markets-label{flex:none;font-weight:800;color:var(--navy);padding-inline-end:14px;border-inline-end:2px solid var(--yellow);line-height:1.2}
.df-markets-list{display:flex;gap:26px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap;flex:1;min-width:0}
.df-markets-list::-webkit-scrollbar{display:none}
.df-markets-list li{display:flex;align-items:baseline;gap:7px}
.df-markets-list .n{color:var(--muted);font-weight:500}
.df-markets-list .p{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.df-markets-list .c{font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}
.df-markets-list .is-up .c{color:#0f7b3f}
.df-markets-list .is-down .c{color:var(--red)}
.df-markets-list .is-flat .c{color:var(--muted)}
.df-markets-list .is-up .c::before{content:"▲ ";font-size:9px}
.df-markets-list .is-down .c::before{content:"▼ ";font-size:9px}

.df-breaking{background:var(--red);color:#fff}
.df-breaking .df-wrap{display:flex;align-items:center;gap:14px;min-height:44px}
.df-breaking strong{flex:none;background:#fff;color:var(--red);font-weight:800;font-size:13px;padding:3px 12px;border-radius:2px;animation:df-pulse 1.6s ease-in-out infinite}
.df-ui .df-breaking a{color:#fff!important;font-weight:700;font-size:16px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-ui .df-breaking a:hover{text-decoration:underline}
@keyframes df-pulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.df-breaking strong{animation:none}}

.df-nl-own{display:grid;grid-template-columns:1fr auto;gap:8px;position:relative}
.df-nl-own .df-hp{position:absolute!important;top:0;inset-inline-start:0;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.df-nl-own input[type=email]{width:100%;padding:13px 16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;border-radius:0}
.df-nl-own input[type=email]:focus{outline:2px solid var(--navy);outline-offset:-1px}
.df-nl-own button{background:var(--navy);color:#fff;border:0;padding:0 30px;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.df-nl-own button:hover{background:var(--ink)}
.df-nl-own .df-nl-note,.df-nl-own .df-nl-msg{grid-column:1/-1;margin:2px 0 0;font-size:13px;color:var(--muted)}
.df-nl-own .df-nl-note a{color:inherit;text-decoration:underline}
.df-nl-own .df-nl-msg{font-size:14.5px;font-weight:700;color:#0f7b3f}
.df-nl-own .df-nl-msg.is-err{color:var(--red)}

.df-totop{position:fixed;bottom:22px;left:22px;z-index:60;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff!important;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.18);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s}
.df-totop.is-on{opacity:1;transform:none}
.df-totop:hover{background:var(--ink)}
.df-totop[hidden]{display:none}
@media (max-width:768px){
  .df-masthead{grid-template-columns:88px 1fr 88px}
  .df-follow--top{display:none}
  .df-markets{font-size:12.5px}
  .df-markets .df-wrap{gap:10px}
  .df-markets-label{padding-inline-end:10px}
  .df-markets-list{gap:18px}
  .df-breaking a{font-size:14.5px}
  .df-nl-own{grid-template-columns:1fr}
  .df-nl-own button{padding:13px}
  .df-totop{bottom:16px;left:16px;width:42px;height:42px}
}

/* ===== Dark mode (html[data-theme=dark], toggled in the header, saved per browser) ===== */
html[data-theme="dark"]{color-scheme:dark;background:#121316}
html[data-theme="dark"] .df-ui{--ink:#f0eee8;--text:#dddbd4;--muted:#a2a29c;--line:#2c2e34;--rule:#f0eee8;--surface:#1b1d22;--bg:#121316;--navy:#2f4be0}
html[data-theme="dark"] .df-ui :is(.df-header,.df-navbar,.df-nav .sub-menu,.df-nav ul.sub-menu){background:#16171b!important}
html[data-theme="dark"] .df-ui :is(.df-cat,.df-kicker,.df-markets-label){color:#9db0ff!important}
html[data-theme="dark"] .df-ui :is(.df-story--lead .df-excerpt,.df-story--front .df-excerpt){color:#c4c3bd}
html[data-theme="dark"] .df-ui .df-story--latest::before{background:var(--bg)}
html[data-theme="dark"] .df-ui .df-thumb-fallback{background:linear-gradient(135deg,#24262c,#1b1d22)}
html[data-theme="dark"] .df-ui .df-footer{background:#0d1340}
html[data-theme="dark"] .df-ui .df-markets-list .is-up .c{color:#3ccf7d}
html[data-theme="dark"] .df-ui .df-markets-list .is-down .c{color:#ff6b6b}
html[data-theme="dark"] .df-ui .df-logo-text{color:var(--ink)}
html[data-theme="dark"] .df-ui img{filter:brightness(.92)}
html[data-theme="dark"] .df-ui .df-logo img,html[data-theme="dark"] .df-ui .df-avatar{filter:none}

/* logo: navy on light header, white version in dark mode */
.df-logo img.df-logo-night{display:none}
html[data-theme="dark"] .df-logo img.df-logo-day{display:none}
html[data-theme="dark"] .df-logo img.df-logo-night{display:block}
.df-logo img,.df-logo img:hover{box-shadow:none!important;border-radius:0!important;transform:none!important}
