/* ═══════════════════════════════════════════════════════
   BASSMATI — Design System
   Progressive Enhancement: CSS-only base + JS enhancements
   RTL-first, mobile-first responsive
   ═══════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Design Tokens (Light) ── */
:root{
  --font-display:'Amiri',serif;
  --font-body:'Noto Naskh Arabic',serif;
  --font-ui:'Noto Naskh Arabic',sans-serif;
  --max-w:1100px;
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.3s;

  --bg:#FEFCF8;--bg2:#F6F1E8;--bg3:#EDE6D8;
  --card:#FFFFFF;
  --gold:#96751A;--gold-soft:rgba(150,117,26,.08);
  --ink:#1E1A14;--ink2:#4A4035;--ink3:#8A7D6B;--ink4:#B5AA96;
  --border:rgba(150,117,26,.1);--border2:rgba(150,117,26,.2);
  --shadow-a:rgba(30,26,20,.04);--shadow-b:rgba(30,26,20,.08);
  --on-gold:#FFF;
  --overlay:rgba(254,252,248,.97);
}

/* ── Auto Dark (system preference) ── */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#141210;--bg2:#1E1B16;--bg3:#28241E;
    --card:#1E1B16;
    --gold:#D4A843;--gold-soft:rgba(212,168,67,.08);
    --ink:#EDE5D4;--ink2:#C4B89E;--ink3:#7A7060;--ink4:#504840;
    --border:rgba(212,168,67,.08);--border2:rgba(212,168,67,.15);
    --shadow-a:rgba(0,0,0,.15);--shadow-b:rgba(0,0,0,.25);
    --on-gold:#141210;
    --overlay:rgba(20,18,16,.97);
  }
}

/* ── JS-driven theme overrides (HTTP only) ── */
[data-theme="light"]{
  --bg:#FEFCF8;--bg2:#F6F1E8;--bg3:#EDE6D8;
  --card:#FFFFFF;
  --gold:#96751A;--gold-soft:rgba(150,117,26,.08);
  --ink:#1E1A14;--ink2:#4A4035;--ink3:#8A7D6B;--ink4:#B5AA96;
  --border:rgba(150,117,26,.1);--border2:rgba(150,117,26,.2);
  --shadow-a:rgba(30,26,20,.04);--shadow-b:rgba(30,26,20,.08);
  --on-gold:#FFF;
  --overlay:rgba(254,252,248,.97);
}
[data-theme="dark"]{
  --bg:#141210;--bg2:#1E1B16;--bg3:#28241E;
  --card:#1E1B16;
  --gold:#D4A843;--gold-soft:rgba(212,168,67,.08);
  --ink:#EDE5D4;--ink2:#C4B89E;--ink3:#7A7060;--ink4:#504840;
  --border:rgba(212,168,67,.08);--border2:rgba(212,168,67,.15);
  --shadow-a:rgba(0,0,0,.15);--shadow-b:rgba(0,0,0,.25);
  --on-gold:#141210;
  --overlay:rgba(20,18,16,.97);
}

/* ── Base ── */
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--ink);
  line-height:1.85;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* CSS-only state toggles (hidden checkboxes) */
#drawer-toggle,#search-toggle{display:none}

/* ═══ HEADER ═══ */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--overlay);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--max-w);margin:0 auto;
  padding:.85rem 2rem;
  display:flex;align-items:center;gap:.75rem;
}
.site-name{
  font-family:var(--font-display);font-size:1.75rem;font-weight:700;
  color:var(--gold);line-height:1;
}
.header-end{
  display:flex;align-items:center;gap:.4rem;
  margin-inline-start:auto;
}
.icon-label{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  cursor:pointer;color:var(--ink3);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
  font-size:1.2rem;
}
.icon-label:hover,.icon-label:active{color:var(--gold);background:var(--gold-soft)}

/* Theme toggle — hidden by default, shown by JS */
.theme-pills{
  display:none;
  background:var(--bg2);
  border:1px solid var(--border);border-radius:999px;padding:3px;
}
.theme-pills.enabled{display:flex}
.theme-pill{
  -webkit-appearance:none;appearance:none;
  background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:var(--ink3);transition:all var(--dur) var(--ease);
}
.theme-pill:active{transform:scale(.9)}
.theme-pill.on{background:var(--gold);color:var(--on-gold);box-shadow:0 1px 4px var(--shadow-b)}

/* ═══ DRAWER — CSS-only base ═══ */
.drawer-bg{
  position:fixed;inset:0;z-index:149;
  background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.drawer-panel{
  position:fixed;top:0;right:0;z-index:150;
  width:280px;max-width:80vw;height:100%;
  background:var(--card);
  box-shadow:-4px 0 30px var(--shadow-b);
  padding:1.5rem;
  padding-top:max(1.5rem,env(safe-area-inset-top));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:.25rem;
  transform:translateX(100%);
  transition:transform var(--dur) var(--ease);
}
#drawer-toggle:checked ~ .drawer-bg{opacity:1;pointer-events:auto}
#drawer-toggle:checked ~ .drawer-panel{transform:translateX(0)}

.drawer-close-label{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;align-self:flex-start;
  font-size:1.5rem;color:var(--ink3);cursor:pointer;
  -webkit-tap-highlight-color:transparent;margin-bottom:.5rem;
}
.drawer-link{
  display:block;padding:.75rem;
  font-family:var(--font-ui);font-size:1rem;font-weight:500;
  color:var(--ink2);border-radius:8px;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.drawer-link:active,.drawer-link.active{color:var(--gold);background:var(--gold-soft)}
.drawer-sep{height:1px;background:var(--border);margin:.75rem 0}

/* ═══ SEARCH — CSS-only base ═══ */
.search-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.5);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:12vh;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
#search-toggle:checked ~ .search-overlay{opacity:1;pointer-events:auto}

.search-box-inner{
  width:90%;max-width:600px;background:var(--card);
  border-radius:16px;padding:1.5rem;box-shadow:0 20px 60px var(--shadow-b);
  transform:translateY(-20px);transition:transform var(--dur) var(--ease);
}
#search-toggle:checked ~ .search-overlay .search-box-inner{transform:translateY(0)}

.search-close-row{display:flex;justify-content:flex-end;margin-bottom:.5rem}
.search-close-label{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  font-size:1.2rem;color:var(--ink3);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.search-close-label:active{background:var(--gold-soft)}

.search-input{
  width:100%;border:none;background:transparent;
  font-family:var(--font-body);font-size:1.15rem;
  color:var(--ink);outline:none;padding:.5rem 0;
  border-bottom:2px solid var(--border2);
}
.search-input::placeholder{color:var(--ink4)}
.search-input:focus{border-bottom-color:var(--gold)}
.search-hint{font-size:.78rem;color:var(--ink4);margin-top:.75rem}

/* ═══ CATEGORY NAV ═══ */
.cat-nav{
  max-width:var(--max-w);margin:0 auto;padding:1rem 2rem;
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cat-nav::-webkit-scrollbar{display:none}
.cat-pill{
  padding:.45rem 1.1rem;border-radius:999px;
  font-family:var(--font-ui);font-size:.85rem;font-weight:500;
  color:var(--ink3);background:var(--bg2);border:1px solid transparent;
  white-space:nowrap;cursor:pointer;transition:all var(--dur) var(--ease);flex-shrink:0;
}
.cat-pill:hover{color:var(--gold);border-color:var(--border2)}
.cat-pill.active{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.cat-pill.outlined{border:1px solid var(--border2)}

/* ═══ HERO ═══ */
.hero{max-width:var(--max-w);margin:1rem auto 0;padding:0 2rem}
.hero-card{
  display:grid;grid-template-columns:1.1fr 1fr;border-radius:20px;overflow:hidden;
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 4px 20px var(--shadow-a);transition:box-shadow var(--dur) var(--ease);
}
.hero-card:hover{box-shadow:0 8px 40px var(--shadow-b)}
.hero-img{
  position:relative;overflow:hidden;min-height:380px;
  background:linear-gradient(135deg,#8B6914,#4A3608);
  display:flex;align-items:center;justify-content:center;
}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img .hero-placeholder{
  font-family:var(--font-display);font-size:4rem;color:rgba(255,255,255,.3);
}
@media(prefers-color-scheme:dark){.hero-img{background:linear-gradient(135deg,#3A3020,#1E1810)}}
[data-theme="dark"] .hero-img{background:linear-gradient(135deg,#3A3020,#1E1810)}
.hero-body{padding:2.5rem;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.hero-cat{font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--gold);font-family:var(--font-ui)}
.hero-body h1{font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1.4;color:var(--ink)}
.hero-body .excerpt{font-size:1rem;color:var(--ink2);line-height:1.85;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hero-meta{display:flex;align-items:center;gap:.75rem;font-size:.82rem;color:var(--ink3);flex-wrap:wrap}
.hero-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink4)}
.read-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:.88rem;font-weight:600;color:var(--gold);margin-top:auto}

/* ═══ SECTIONS & CARDS ═══ */
.section{max-width:var(--max-w);margin:0 auto;padding:3rem 2rem 0}
.section-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.75rem}
.section-head h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--ink)}
.section-head .see-all{margin-inline-start:auto;font-size:.82rem;font-weight:500;color:var(--gold);white-space:nowrap}

.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.card{
  background:var(--card);border-radius:14px;border:1px solid var(--border);overflow:hidden;
  transition:all var(--dur) var(--ease);box-shadow:0 2px 8px var(--shadow-a);display:flex;flex-direction:column;
}
.card:hover{box-shadow:0 8px 30px var(--shadow-b);border-color:var(--border2);transform:translateY(-3px)}
.card-img{
  aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,var(--bg3),var(--bg2));
  display:flex;align-items:center;justify-content:center;
}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img .card-placeholder{font-size:2.5rem;color:var(--ink4)}
.card-content{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-content .cat-label{font-size:.72rem;font-weight:600;color:var(--gold);letter-spacing:.04em}
.card-content h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;line-height:1.55;color:var(--ink)}
.card-content .snippet{font-size:.88rem;color:var(--ink2);line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-content .meta{font-size:.75rem;color:var(--ink3);margin-top:auto;padding-top:.5rem}

/* Wide card (asymmetric layout) */
.grid-2w{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem}
.card-wide{
  background:var(--card);border-radius:14px;border:1px solid var(--border);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
  transition:all var(--dur) var(--ease);box-shadow:0 2px 8px var(--shadow-a);
}
.card-wide:hover{box-shadow:0 8px 30px var(--shadow-b);transform:translateY(-2px)}
.card-wide .card-img{aspect-ratio:auto;min-height:220px}
.card-wide .card-content{padding:1.5rem;justify-content:center}

/* Compact card (thumbnail + title) */
.compact-stack{display:flex;flex-direction:column;gap:1rem}
.compact-item{
  display:flex;gap:1rem;align-items:center;padding:1rem;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  transition:all var(--dur) var(--ease);
}
.compact-item:hover{border-color:var(--border2);box-shadow:0 4px 12px var(--shadow-a)}
.compact-item .thumb{
  width:72px;height:72px;border-radius:10px;overflow:hidden;flex-shrink:0;
  background:var(--bg3);display:flex;align-items:center;justify-content:center;
}
.compact-item .thumb img{width:100%;height:100%;object-fit:cover}
.compact-item .thumb .thumb-placeholder{font-size:1.5rem;color:var(--ink4)}
.compact-item h4{font-family:var(--font-display);font-size:1rem;font-weight:700;line-height:1.5;color:var(--ink)}
.compact-item .date{font-size:.78rem;color:var(--ink3)}

/* ═══ EXPLORE ═══ */
.explore{max-width:var(--max-w);margin:3.5rem auto 0;padding:0 2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.explore-block{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem}
.explore-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:1rem}
.tags-wrap{display:flex;flex-wrap:wrap;gap:.45rem}
.tag{
  padding:.3rem .8rem;border-radius:999px;font-size:.82rem;
  color:var(--ink2);background:var(--bg2);border:1px solid var(--border);
  transition:all var(--dur) var(--ease);cursor:pointer;
}
.tag:hover,.tag:active{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
.tag .tc{font-size:.7rem;color:var(--ink4);margin-inline-start:.15rem}
.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.archive-link{
  display:flex;justify-content:space-between;padding:.45rem .75rem;border-radius:8px;
  font-size:.85rem;color:var(--ink2);transition:all var(--dur) var(--ease);
}
.archive-link:hover,.archive-link:active{background:var(--gold-soft);color:var(--gold)}
.archive-link .ac{color:var(--ink4);font-size:.78rem}

/* ═══ ARTICLE PAGE ═══ */
.article-page{max-width:760px;margin:0 auto;padding:2rem}
.article-page .article-cat{font-size:.82rem;font-weight:600;color:var(--gold);margin-bottom:.5rem}
.article-page h1{font-family:var(--font-display);font-size:2.2rem;font-weight:700;line-height:1.4;margin-bottom:.5rem}
.article-page .article-subtitle{font-size:1.1rem;color:var(--ink2);line-height:1.7;margin-bottom:1rem}
.article-page .article-meta{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:var(--ink3);flex-wrap:wrap;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.article-page .article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink4)}
.article-page .article-hero-img{border-radius:16px;overflow:hidden;margin-bottom:2rem}
.article-page .article-hero-img img{width:100%;display:block}
.article-content{font-size:1.05rem;line-height:2;color:var(--ink)}
.article-content p{margin-bottom:1.25rem}
.article-content h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin:2rem 0 1rem}
.article-content h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin:1.5rem 0 .75rem}
.article-content blockquote{border-right:3px solid var(--gold);padding-right:1rem;margin:1.5rem 0;color:var(--ink2);font-style:italic}
.article-content a{color:var(--gold);text-decoration:underline}
.article-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}

/* ═══ PAGINATION ═══ */
.pagination{
  max-width:var(--max-w);margin:2.5rem auto;padding:0 2rem;
  display:flex;justify-content:center;gap:.5rem;
}
.page-link{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 .75rem;border-radius:10px;
  font-size:.88rem;color:var(--ink3);background:var(--card);
  border:1px solid var(--border);transition:all var(--dur) var(--ease);
}
.page-link:hover{border-color:var(--gold);color:var(--gold)}
.page-link.active{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.page-link.disabled{opacity:.4;pointer-events:none}

/* ═══ EMPTY STATE ═══ */
.empty-state{
  text-align:center;padding:4rem 2rem;color:var(--ink3);
  font-family:var(--font-ui);font-size:1rem;
}
.empty-state .emoji{font-size:3rem;margin-bottom:1rem}

/* ═══ FOOTER ═══ */
.footer{margin-top:4rem;border-top:1px solid var(--border);background:var(--bg2)}
.footer-inner{
  max-width:var(--max-w);margin:0 auto;padding:2.5rem 2rem;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;align-items:start;
}
.footer-brand .fname{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--gold)}
.footer-brand p{font-size:.85rem;color:var(--ink3);margin-top:.5rem;max-width:280px;line-height:1.7}
.footer-col h4{font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:.75rem}
.footer-col a{display:block;font-size:.85rem;color:var(--ink3);padding:.25rem 0;transition:color var(--dur) var(--ease)}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{text-align:center;padding:1rem 2rem;font-size:.78rem;color:var(--ink4);border-top:1px solid var(--border)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .hero-card{grid-template-columns:1fr}
  .hero-img{min-height:240px}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2w{grid-template-columns:1fr}
  .card-wide{grid-template-columns:1fr}
  .card-wide .card-img{min-height:200px}
  .explore{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-brand p{margin:.5rem auto 0}
}

.menu-label{display:none}

@media(max-width:600px){
  .header-inner{padding:.75rem 1rem}
  .site-name{font-size:1.4rem}
  .cat-nav{display:none}
  .menu-label{display:flex}
  .hero{padding:0 1rem;margin-top:.75rem}
  .hero-body{padding:1.5rem}
  .hero-body h1{font-size:1.5rem}
  .hero-img{min-height:200px}
  .section{padding:2rem 1rem 0}
  .section-head h2{font-size:1.3rem}
  .grid-3{grid-template-columns:1fr}
  .explore{padding:0 1rem;margin-top:2.5rem;gap:1.25rem}
  .archive-grid{grid-template-columns:1fr}
  .footer-inner{padding:2rem 1rem;gap:1.5rem}
  .article-page{padding:1.5rem 1rem}
  .article-page h1{font-size:1.7rem}
}