/*
Theme Name: Al-Mijhar Al-Arabi
Theme URI: https://www.almijharalarabi.com
Author: Al-Mijhar Al-Arabi
Description: Thème sur-mesure pour المجهر العربي — portail d'actualité généraliste. Style "portail digital" : une en mosaïque (bento), bande de tendances, sections par rubrique en défilement horizontal. Conçu pour le RTL arabe.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: al-mijhar
Tags: news, magazine, rtl, arabic
*/

/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */
:root{
  --amj-orange:   #ff4906;
  --amj-orange-2: #ff7a3d;
  --amj-ink:      #1a1a1a;
  --amj-ink-2:    #2b2b2b;
  --amj-paper:    #fafafa;
  --amj-card:     #ffffff;
  --amj-line:     #ececec;
  --amj-text:     #232323;
  --amj-text-soft:#7a7a7a;

  --amj-font-head: 'Changa', 'Arial Black', sans-serif;
  --amj-font-body: 'Almarai', 'Inter', sans-serif;

  --amj-radius: 10px;
  --amj-shadow: 0 8px 26px rgba(0,0,0,.08);
}

.cat-politique     { --cat-color: #b23a2e; }
.cat-technologie   { --cat-color: #1f6f8b; }
.cat-societe       { --cat-color: #6b4f9e; }
.cat-culture       { --cat-color: #a8763e; }
.cat-sante         { --cat-color: #2f8f5b; }
.cat-sport         { --cat-color: #3d5a80; }
.cat-sciences      { --cat-color: #3d5a80; }
.cat-faits-divers  { --cat-color: #444444; }
.cat-defaut        { --cat-color: var(--amj-orange); }

/* =========================================================
   1. BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--amj-paper); color:var(--amj-text);
  font-family:var(--amj-font-body); font-size:16px; line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--amj-font-head); font-weight:800; line-height:1.2; margin:0 0 .5em; color:var(--amj-ink); }
.container{ max-width:1260px; margin:0 auto; padding:0 20px; }

/* =========================================================
   2. TOPBAR + HEADER
   ========================================================= */
.amj-topbar{ background:var(--amj-ink); color:rgba(255,255,255,.6); font-size:12.5px; }
.amj-topbar .container{ display:flex; justify-content:space-between; align-items:center; height:32px; }
.amj-topbar a{ color:rgba(255,255,255,.6); }
.amj-topbar a:hover{ color:var(--amj-orange-2); }
.amj-social{ display:flex; gap:12px; }

.amj-header{ background:var(--amj-ink-2); }
.amj-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.amj-header .site-title{ font-family:var(--amj-font-head); font-size:28px; font-weight:800; color:#fff; margin:0; }
.amj-header .site-title span{ color:var(--amj-orange); }
.amj-header .site-logo img{ max-height:52px; }

.amj-nav ul{ list-style:none; display:flex; gap:2px; margin:0; padding:0; }
.amj-nav a{
  display:block; padding:10px 14px; color:#fff; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.02em; border-radius:6px;
}
.amj-nav a:hover, .amj-nav .current a{ background:var(--amj-orange); }
.amj-menu-toggle{ display:none; background:none; border:none; color:#fff; font-size:22px; }

/* =========================================================
   3. TRENDING STRIP
   ========================================================= */
.amj-trending{ background:var(--amj-card); border-bottom:1px solid var(--amj-line); padding:16px 0; }
.amj-trending .container{ display:flex; align-items:center; gap:18px; }
.amj-trending .label{ flex:0 0 auto; font-weight:800; font-size:13px; color:var(--amj-orange); text-transform:uppercase; white-space:nowrap; }
.amj-trending-scroll{ display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; }
.amj-trending-scroll::-webkit-scrollbar{ display:none; }
.amj-trend-item{ display:flex; align-items:center; gap:10px; flex:0 0 auto; max-width:230px; }
.amj-trend-item .num{ font-family:var(--amj-font-head); font-size:26px; color:var(--amj-line); -webkit-text-stroke:1px var(--amj-orange); color:transparent; }
.amj-trend-item h5{ font-size:13.5px; font-weight:700; margin:0; color:var(--amj-text); }

/* =========================================================
   4. HERO BENTO
   ========================================================= */
.amj-hero{ padding:28px 0; }
.amj-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,210px); gap:16px; }
.amj-bento .main{ grid-column:span 2; grid-row:span 2; }
.amj-bento .small{ grid-column:span 2; grid-row:span 1; }

.amj-bento-card{
  position:relative; border-radius:var(--amj-radius); overflow:hidden; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; box-shadow:var(--amj-shadow);
}
.amj-bento-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%); }
.amj-bento-card .body{ position:relative; z-index:1; padding:20px; color:#fff; }
.amj-bento-card .tag{ display:inline-block; background:var(--cat-color, var(--amj-orange)); color:#fff; font-size:11px; font-weight:800; text-transform:uppercase; padding:3px 10px; border-radius:20px; margin-bottom:8px; }
.amj-bento-card.main h2{ color:#fff; font-size:26px; margin:0; }
.amj-bento-card.small h3{ color:#fff; font-size:16px; margin:0; }

/* =========================================================
   5. SECTION STRIPS (par rubrique, défilement horizontal)
   ========================================================= */
.amj-section{ padding:20px 0; }
.amj-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.amj-section-head h2{ font-size:20px; display:flex; align-items:center; gap:10px; }
.amj-section-head h2::before{ content:""; width:8px; height:22px; background:var(--cat-color, var(--amj-orange)); border-radius:2px; display:inline-block; }
.amj-section-head a{ font-size:13px; font-weight:700; color:var(--amj-orange); }

.amj-strip{ display:flex; gap:18px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.amj-strip-card{ flex:0 0 260px; background:var(--amj-card); border-radius:var(--amj-radius); overflow:hidden; box-shadow:var(--amj-shadow); }
.amj-strip-card .thumb{ aspect-ratio:4/3; }
.amj-strip-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.amj-strip-card .body{ padding:12px 14px 16px; }
.amj-strip-card .tag{ display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase; color:var(--cat-color, var(--amj-orange)); margin-bottom:6px; }
.amj-strip-card h3{ font-size:15px; margin:0 0 6px; font-weight:700; }
.amj-strip-card .meta{ font-size:12px; color:var(--amj-text-soft); }

/* Grid fallback (archives, recherche) */
.amj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.amj-card{ background:var(--amj-card); border-radius:var(--amj-radius); overflow:hidden; box-shadow:var(--amj-shadow); }
.amj-card .thumb{ aspect-ratio:4/3; }
.amj-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.amj-card .body{ padding:14px 16px 18px; }
.amj-card .tag{ display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; color:#fff; background:var(--cat-color, var(--amj-orange)); padding:3px 10px; border-radius:20px; margin-bottom:8px; }
.amj-card h3{ font-size:16px; margin:0 0 6px; }
.amj-card .meta{ font-size:12.5px; color:var(--amj-text-soft); }
.amj-card .excerpt{ font-size:14px; color:var(--amj-text-soft); margin-top:6px; }

.amj-pagination{ display:flex; gap:8px; justify-content:center; margin-top:32px; }
.amj-pagination a, .amj-pagination span{ padding:8px 14px; border-radius:20px; background:var(--amj-card); border:1px solid var(--amj-line); font-weight:700; font-size:14px; }
.amj-pagination .current{ background:var(--amj-orange); color:#fff; border-color:var(--amj-orange); }

/* =========================================================
   6. SINGLE ARTICLE
   ========================================================= */
.amj-article{ max-width:800px; margin:0 auto; padding:34px 0 56px; }
.amj-article .tag{ display:inline-block; background:var(--cat-color, var(--amj-orange)); color:#fff; font-size:12px; font-weight:800; text-transform:uppercase; padding:5px 14px; border-radius:20px; margin-bottom:16px; }
.amj-article h1{ font-size:32px; margin-bottom:12px; }
.amj-article .meta{ color:var(--amj-text-soft); font-size:14px; margin-bottom:22px; padding-bottom:18px; border-bottom:2px solid var(--amj-line); }
.amj-article .featured-img{ border-radius:var(--amj-radius); overflow:hidden; margin-bottom:26px; box-shadow:var(--amj-shadow); }
.amj-article .entry-content{ font-size:18px; line-height:1.9; }
.amj-article .entry-content p{ margin:0 0 1.3em; }
.amj-article .entry-content p:first-of-type::first-letter{
  font-family:var(--amj-font-head); font-size:64px; float:right; line-height:.8; margin:6px 0 0 10px; color:var(--amj-orange);
}
.amj-article .entry-content h2{ font-size:24px; margin-top:1.6em; }
.amj-share{ display:flex; gap:10px; margin:30px 0; }
.amj-share a{ padding:9px 18px; border-radius:24px; background:var(--amj-ink); color:#fff; font-weight:700; font-size:13px; }
.amj-share a:hover{ background:var(--amj-orange); }

.amj-widget{ background:var(--amj-card); border:1px solid var(--amj-line); border-radius:var(--amj-radius); padding:18px; margin:24px 0; }
.amj-widget h4{ font-size:14px; text-transform:uppercase; border-bottom:2px solid var(--amj-orange); padding-bottom:8px; margin-bottom:14px; }
.amj-ad-slot{ background:#f0f0f0; border:1px dashed #ccc; text-align:center; padding:30px 10px; color:var(--amj-text-soft); font-size:13px; border-radius:var(--amj-radius); margin:24px 0; }
.amj-ad-label{ display:block; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--amj-text-soft); margin-bottom:8px; }
.amj-ad-text{ margin:0 0 14px; font-size:13px; }
.amj-ad-btn{ display:inline-block; background:var(--amj-orange); color:#fff; padding:10px 22px; border-radius:6px; font-size:13px; font-weight:700; text-decoration:none; }
.amj-ad-btn:hover{ opacity:.9; }

/* =========================================================
   7. FOOTER
   ========================================================= */
.amj-footer{ background:var(--amj-ink); color:rgba(255,255,255,.75); margin-top:30px; }
.amj-footer .container{ padding:44px 20px 20px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; }
.amj-footer h4{ color:#fff; font-size:14px; text-transform:uppercase; margin-bottom:14px; }
.amj-footer ul{ list-style:none; margin:0; padding:0; }
.amj-footer li{ margin-bottom:8px; }
.amj-footer a:hover{ color:var(--amj-orange-2); }
.amj-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:16px; font-size:13px; color:rgba(255,255,255,.55); }
.amj-footer .nmg-badge{ margin-top:14px; display:flex; align-items:center; gap:8px; }
.amj-footer .nmg-label{ font-size:11px; letter-spacing:.03em; opacity:.55; white-space:nowrap; }
.amj-footer .nmg-badge img{ height:20px; width:auto; display:block; opacity:.85; transition:opacity .2s ease; }
.amj-footer .nmg-badge img:hover{ opacity:1; }

/* =========================================================
   8. RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .amj-bento{ grid-template-columns:repeat(2,1fr); grid-template-rows:220px repeat(2,160px); }
  .amj-bento .main{ grid-column:span 2; grid-row:span 1; }
  .amj-bento .small{ grid-column:span 1; grid-row:span 1; }
  .amj-grid{ grid-template-columns:1fr 1fr; }
  .amj-footer .container{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .amj-nav{ display:none; }
  .amj-nav.open{ display:block; position:absolute; inset-inline:0; top:108px; background:var(--amj-ink-2); z-index:20; }
  .amj-nav.open ul{ flex-direction:column; padding:10px; }
  .amj-menu-toggle{ display:block; }
  .amj-grid{ grid-template-columns:1fr; }
  .amj-footer .container{ grid-template-columns:1fr; }
}