/* ===== Magazine Pro RTL — Core Styles ===== */
:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #6b7280; /* gray-500 */
  --border: #f1f1f3;
  --brand: #0a7ea4; /* primary brand (change easily) */
  --brand-contrast: #ffffff;
  --radius: 12px;
  --container: clamp(960px, 86vw, 1180px);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0d10;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --border: #1f2937;
    --brand: #22a6c7;
    --brand-contrast: #0b0d10;
  }
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font: 400 1rem/1.8 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans Arabic, Cairo, sans-serif;}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(12px,2vw,20px)}

/* Header */
.site-header{position:sticky;top:0;background:color-mix(in oklab, var(--bg), transparent 6%);backdrop-filter:saturate(1.2) blur(6px);z-index:100;border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.site-title{font-weight:800;text-decoration:none;color:var(--text);font-size:clamp(1.1rem,2.5vw,1.4rem)}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.menu a{color:var(--text);text-decoration:none;font-weight:600}
.menu a:hover{color:var(--brand)}

/* Hero */
.hero{margin-block:clamp(12px,2vw,24px)}
.hero-grid{display:grid;gap:16px;grid-template-columns: 1fr;}
@media (min-width: 900px){
  .hero-grid{grid-template-columns: 2fr 1fr; grid-template-rows: auto auto;}
  .hero-item-1{grid-row:1/span 2}
}
.hero-link{display:block;color:inherit;text-decoration:none;border-radius:var(--radius);overflow:hidden;position:relative}
.hero-thumb{aspect-ratio:16/9;background:#eef0f2}
.hero-meta{position:absolute;inset:auto 0 0 0;padding:16px;background:linear-gradient( to top, rgba(0,0,0,.55), rgba(0,0,0,0) );color:#fff}
.hero-title{margin:4px 0 0;font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:800}
.chip{display:inline-block;background:color-mix(in oklab, var(--brand), #000 3%);color:var(--brand-contrast);padding:.15rem .5rem;border-radius:999px;font-size:.8rem}

/* Grid loop */
.loop-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-block:clamp(12px,3vw,28px)}
@media (min-width:740px){.loop-grid{grid-template-columns:repeat(3, 1fr)}}
.card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.card-link{text-decoration:none;color:inherit;display:block}
.card-thumb{aspect-ratio:16/9;background:#eef0f2}
.card-body{padding:12px 14px}
.card-title{margin:6px 0 8px;font-size:clamp(1rem,2vw,1.1rem);font-weight:800}
.card .date{color:var(--muted);font-size:.9rem}

/* Article */
.article-header{max-width:min(78ch, 100%);margin-inline:auto;padding-top:16px}
.article-title{font-size:clamp(1.6rem, 3vw, 2.2rem);line-height:1.25;margin:8px 0 6px}
.article-meta{display:flex;gap:12px;color:var(--muted);font-size:.95rem}
.article-cover{margin:12px 0 16px}
.article-content{max-width:min(78ch,100%);margin-inline:auto}
.article-content p{margin:0 0 1.1em}
.related .section-title, .section-title{font-weight:900;font-size:clamp(1.1rem,2.2vw,1.4rem);}

/* Archive */
.archive-header{margin:12px 0 4px;border-bottom:1px solid var(--border)}
.archive-title{margin:0 0 8px}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:8px 0 16px}
@media (min-width:740px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
.cat-card{border:1px solid var(--border);border-radius:12px;padding:16px;text-decoration:none;color:inherit;display:flex;align-items:center;justify-content:space-between}
.cat-card:hover{border-color:color-mix(in oklab, var(--brand), #000 10%)}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:24px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}

/* Accessibility helpers */
.screen-reader-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.screen-reader-text:focus{position:static;width:auto;height:auto}