/*
Theme Name: NAHAR Theme
Theme URI: https://nahar4iv.vip
Author: NAHAR
Description: Official NAHAR theme — Day 1 foundation build. Semantic HTML, PHP rendering, no JS framework.
Version: 0.1.0
Requires PHP: 8.0
Text Domain: nahar-theme
*/

:root{
  --bg: #14110D;
  --surface: #1D1811;
  --surface-2: #262019;
  --hairline: #2E2820;
  --text: #F5EFE6;
  --text-dim: #B7AC9C;
  --text-faint: #7C7365;
  --dawn: #F0A93E;
  --dawn-soft: rgba(240,169,62,0.16);
  --dawn-line: rgba(240,169,62,0.55);
  --radius: 14px;
  --radius-lg: 20px;
}

*{ box-sizing: border-box; }
body{
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  line-height: 1.6;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 20px; }

header.site{
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
}
.site-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.logo{ font-size:1.4rem; font-weight:800; }
.logo .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--dawn); margin-inline-start:4px; }
nav.main{ display:flex; gap:22px; flex-wrap:wrap; }
nav.main a{ color: var(--text-dim); font-size:0.92rem; }
nav.main a:hover{ color: var(--text); }

section{ padding: 36px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.section-head h2{ font-size:1.4rem; margin:0; }
.eyebrow{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }

.bento{ display:grid; grid-template-columns: repeat(6,1fr); gap:14px; }
.bcard{
  position:relative; background:var(--surface); border:1px solid var(--hairline);
  border-radius: var(--radius); padding:16px; overflow:hidden;
}
.bcard::before{
  content:""; position:absolute; inset-inline-start:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--dawn), transparent 70%); opacity:0.6;
}
.bcard .provider{ font-size:0.72rem; color:var(--text-faint); margin-bottom:8px; }
.bcard p.snippet{ font-size:0.88rem; margin:0 0 10px; }
.bcard .meta{ font-size:0.74rem; color:var(--text-faint); direction:ltr; text-align:start; }
.span-2{ grid-column: span 2; } .span-3{ grid-column: span 3; }
@media (max-width: 900px){ .bento{ grid-template-columns: repeat(2,1fr); } .span-2,.span-3{ grid-column: span 2; } }

.featured-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width: 900px){ .featured-grid{ grid-template-columns: 1fr; } }
.fcard{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; }
.fcard img{ height:160px; width:100%; object-fit:cover; background:var(--surface-2); }
.fcard .body{ padding:18px; }
.fcard .tag{ font-size:0.7rem; color:var(--dawn); text-transform:uppercase; letter-spacing:0.06em; }
.fcard h3{ font-size:1.02rem; margin:6px 0; }
.fcard .excerpt{ font-size:0.85rem; color:var(--text-dim); margin:0; }

footer.site{ border-top:1px solid var(--hairline); padding:24px 0; margin-top:20px; color:var(--text-faint); font-size:0.8rem; }