/* ================================
   THEME TOKENS
==================================*/
:root{
  /* Light palette */
  --bg:        #eef6fb;    /* page background */
  --card:      #ffffff;    /* surfaces/cards */
  --text:      #0b3b66;    /* primary text */
  --muted:     #5b7da3;    /* secondary text */
  --border:    #cbd5e1;    /* lines */
  --accent:    #0ea5e9;    /* links/active */
  --accent-2:  #10b981;    /* hover/cta */
  --shadow:    0 4px 12px rgba(0,0,0,.06);

  --header-pad-y: 10px;
  --header-pad-x: 16px;
  --content-max: 1100px;
  --radius: 12px;
}

/* ================================
   BASE
==================================*/
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Segoe UI", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;
}

/* Utility container */
.container{max-width:var(--content-max); margin:0 auto; width:92%}

/* ================================
   HEADER (fixed)
   - Menu centered
   - Title + Arabic on the right
==================================*/
#site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
#site-header .header-wrap{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* left spacer | center menu | right block */
  align-items:center;
  gap:16px;
  padding:var(--header-pad-y) var(--header-pad-x);
  max-width:var(--content-max); margin:0 auto;
}

/* Centered navigation */
.site-nav{
  justify-self:center;
  display:flex; gap:16px; flex-wrap:wrap;
}
.site-nav a{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  padding:6px 12px;
  border-radius:8px;
}
.site-nav a:hover{ background:#dbeafe }
.site-nav a.active{ background:var(--accent); color:#fff }


.audhu,.basmala{
  direction:rtl; unicode-bidi:isolate-override;
  font-family:"Scheherazade New","Noto Naskh Arabic","Amiri",serif;
  color:var(--text);
  line-height:1.9;
}
.audhu{  font-size:clamp(16px,1.8vw,18px); font-weight:600 }
.basmala{font-size:clamp(17px,2vw,20px);  font-weight:700 }

/* Optional logo (left spacer area if you add later) */
.logo-quran{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none}
.logo-quran .mark{width:28px; height:28px}

/* Push content below the fixed header */
main.site-content{ margin-top: 92px }  /* adjust if you change header height */

/* ================================
   BLOG LIST & CARDS
==================================*/
.blog-container{ width:92%; max-width:var(--content-max); margin:0 auto }
.blog-container h1{
  text-align:center; margin:18px 0 22px; color:var(--text);
  font-size: clamp(22px, 3vw, 30px);
}

.blog-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:22px;
  margin:0 0 22px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.03);
}
.card-title{ margin:0 0 8px }
.card-title a{ color:var(--text); text-decoration:none }
.card-title a:hover{ color:var(--accent) }
.card-excerpt{ color:var(--muted); line-height:1.7; margin:0 0 12px }

.read-more{
  display:inline-block;
  padding:8px 14px;
  border-radius:10px;
  background:var(--text);
  color:#fff; text-decoration:none; font-weight:600;
}
.read-more:hover{ background:var(--accent-2) }

/* ================================
   SINGLE POST
==================================*/
.blog-post.full{
  background:var(--card);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.03);
}
.post-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
}
.post-english, .post-urdu{
  background:#fafafa;
  padding:18px;
  border-radius:10px;
  border:1px solid #eee;
}

/* English (LTR) */
.post-english{
  direction:ltr; text-align:left;
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.75; color:#2c3e50;
}

/* Urdu (RTL, Nastaliq) */
.post-urdu{
  direction:rtl; text-align:right;
  font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  font-size:18px; line-height:2.1; color:#1f2937;
}
.quran-ref{ color:var(--accent-2); font-weight:600 }

/* Excerpts used by list page */
p.english{ line-height:1.7; color:#2c3e50 }
p.urdu{ line-height:1.9; font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif }

/* ================================
   FOOTER
==================================*/
.site-footer{
  margin-top:40px;
  background:#0b3b66;
  color:#fff;
  text-align:center;
  padding:16px 0;
}
.site-footer a{ color:#bfdbfe; text-decoration:none }
.site-footer a:hover{ color:#fff; text-decoration:underline }


/* ================================
   DARK MODE (auto)
==================================*/
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --card:#0f172a;
    --text:#e5eefc;
    --muted:#a6b7d1;
    --border:#1f2a37;
    --accent:#38bdf8;
    --accent-2:#34d399;
    --shadow: 0 6px 18px rgba(0,0,0,.35);
  }
  .post-english, .post-urdu{ background:#0b1220; border-color:#1f2a37 }
  .site-nav a:hover{ background:#0a2438 }
}

/* ================================
   INDEX PAGE STYLES (moved from inline)
==================================*/

/* Theme tokens (only define if not already set) */
:root{
  --bg:        var(--bg, #f7fafb);
  --card:      var(--card, #fff);
  --muted:     var(--muted, #5a6b7a);
  --accent:    var(--accent, #0ea5e9);
  --text:      var(--text, #0f172a);
  --border:    var(--border, #e5e7eb);
}

/* Base text */
body{ font:16px/1.65 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); }

/* Header band (uses your global fixed header; keep sizes modest) */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 16px;
  background:#eaf6ff; border-bottom:1px solid #cbd5e1;
  text-align:center;
}

/* Arabic header verses */
header .audhu,
header .basmala{
  direction: rtl; unicode-bidi: isolate; text-align:center;
  font-family: "Scheherazade New","Amiri","Noto Naskh Arabic",serif;
  line-height: 2.1; margin: 6px 0; color:#0b3b66;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
header .audhu   { font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; }
header .basmala { font-size: clamp(24px, 3vw, 38px);  font-weight: 700; color:#0a3a80; }

/* Page wrapper & spacing under fixed header */
.wrap{ max-width:1100px; margin:0 auto; padding:16px; }
main.wrap{ margin-top:120px; } /* adjust if header height changes */

/* Headings */
h1{ margin:18px 2px; }

/* Search / Filters */
form.search{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px; align-items:end;
  background:#f0f6fb;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}
label{ display:block; font-weight:600; color:#334155; margin-bottom:6px; }
select,input,button{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:#fff; color:var(--text);
}
button{ background:var(--accent); border:none; color:#fff; cursor:pointer; font-weight:700; }
button:hover{ filter:brightness(1.05); }
.hint{ color:#334155; margin:12px 2px; }

/* Results list */
.results{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; }
.meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-weight:700; color:#0f3e5e; font-variant-numeric:tabular-nums; }
.badge{ background:#e0f2fe; border:1px solid #bae6fd; padding:2px 8px; border-radius:999px; font-size:12px; color:#075985; font-weight:600; letter-spacing:.2px; }

/* Quran text blocks */
.ar{ font-size:26px; direction:rtl; text-align:right; line-height:2; margin:6px 0; }

/* Language labels / translations */
.lang{ font-weight:600; color:#475569; margin-top:8px; }
.tr{ margin-top:4px; }
.tr[hidden]{ display:none !important; }

/* Language-specific typography */
.quran:lang(ar){
  font-family:"Scheherazade New","Amiri","Noto Naskh Arabic",serif;
  font-size:28px; line-height:2.15; font-weight:400;
  text-align:right; letter-spacing:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.tr.ur:lang(ur){
  font-family:"Noto Nastaliq Urdu","Mehr Nastaliq","Noto Naskh Arabic",serif;
  font-size:22px; line-height:2.1; font-weight:400; text-align:right;
}
.tr.en:lang(en),
.tr.de:lang(de){
  font-family:"Source Serif 4","Inter",Georgia,serif;
  font-size:18px; line-height:1.8;
}
.tr.de:lang(de){ hyphens:auto; }

/* Optional justification for RTL paragraphs */
.quran:lang(ar), .tr.ur:lang(ur){ text-align:justify; text-justify:inter-word; }

/* Toggle buttons (translation switching, etc.) */
.tog{ display:flex; gap:8px; margin:8px 0; }
.tog button{ background:#eef2f7; color:#0f172a; border:1px solid var(--border); }
.tog button.active{ background:#dbeafe; border-color:#93c5fd; }

/* Back to Top */
#backToTop{
  position: fixed; right:16px; bottom:16px; z-index:1100;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--border);
  background: var(--accent); color:#fff; font-size:20px; font-weight:700;
  box-shadow: 0 6px 20px rgba(2,132,199,.35);
  cursor:pointer; opacity:0; transform:translateY(12px) scale(.95);
  pointer-events:none; transition:opacity .2s, transform .2s, box-shadow .2s;
}
#backToTop:hover{ box-shadow: 0 8px 24px rgba(2,132,199,.45); }
#backToTop.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

/* Logo (if used in header) */
.logo-quran{
  display:flex; align-items:center; gap:10px;
  direction:rtl; flex-direction:row-reverse;
  text-decoration:none; color:#0b3b66;
}
.logo-quran .mark{ width:34px; height:34px; flex:0 0 34px; }
.logo-quran .word{
  font-family:"Reem Kufi","Noto Kufi Arabic",system-ui,sans-serif;
  font-weight:600; letter-spacing:.2px; font-size:clamp(20px,2.6vw,28px); line-height:1.2;
}

/* Top menu (centered) – keep only one copy of these rules */
nav.site-nav{ display:flex; justify-content:center; gap:14px; margin-top:8px; }
nav.site-nav a{
  color:#0b3b66; text-decoration:none; font-weight:700;
  padding:6px 12px; border-radius:8px;
}
nav.site-nav a:hover{ background:#dbeafe; }
nav.site-nav a.active{ background:#0ea5e9; color:#fff; }

/* Footer text (index page) */
footer{ margin:28px 0 40px; color:#475569; font-size:13px; }

/* Dark mode tweaks */
@media (prefers-color-scheme: dark){
  header { background:#0b1220; border-bottom-color:#1f2a37; }
  header .audhu, header .basmala { color:#dbeafe; }
  header .basmala { color:#bfdbfe; }
  nav.site-nav a{ color:#dbeafe; }
  nav.site-nav a:hover{ background:#1e293b; }
}

/* --- Header sizing tweaks --- */
#site-header { background:#eaf6ff; border-bottom:1px solid #cbd5e1; }
#site-header .header-wrap{
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; gap:16px;
  max-width:1100px; margin:0 auto; padding:12px 16px;
}
/* center menu */
.site-nav{ justify-self:center; display:flex; gap:16px; flex-wrap:wrap; }
.site-nav a{
  font-weight:700; padding:6px 12px; border-radius:10px; text-decoration:none;
  color:#0b3b66; background:transparent;
}
.site-nav a:hover{ background:#dbeafe; }
.site-nav a.active{ background:#0ea5e9; color:#fff; }


.audhu{  font-size:clamp(15px,1.6vw,18px); font-weight:600; }
.basmala{font-size:clamp(16px,1.8vw,20px); font-weight:700; color:#0a3a80; }

/* push content below fixed header (adjust if needed) */
main.site-content, main.wrap { margin-top: 92px; }

/* ===== Header: desktop default (right-aligned) ===== */
.header-right{
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 4px;
  min-width: 0; /* avoid RTL wrapping artifacts */
}

/* Title / lines (semantic h1/h2) */
.header-right h1.word{
  font: 700 clamp(18px, 2.2vw, 22px)/1.2 "Reem Kufi","Noto Kufi Arabic",system-ui,sans-serif;
  letter-spacing: .2px;
  color: #0b3b66;
  margin: 0 0 2px 0;
}
.header-right h2.audhu,
.header-right h2.basmala{
  font-family: "Scheherazade New","Noto Naskh Arabic","Amiri",serif;
  line-height: 1.8;
  color: #0b3b66;
  margin: 0;
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 18px);
}
.header-right h2.basmala{
  font-weight: 700;
  color: #0a3a80;
}

/* Keep menu centered */
.site-nav{
  justify-self: center;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Content offset below fixed header (desktop) */
main.site-content, main.wrap{ margin-top: 120px; }

/* ===== Mobile ≤780px: stack & center ===== */
@media (max-width: 780px){
  #site-header .header-wrap{
    display: grid;
    grid-template-columns: 1fr;  /* stack title, then nav */
    row-gap: 8px;
    text-align: center;
  }

  .header-right{
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  .header-right h1.word{
    /* slightly larger on phones */
    font-size: clamp(20px, 5vw, 26px);
    line-height: 1.25;
  }
  .header-right h2.audhu{ font-size: clamp(18px, 4.5vw, 22px); line-height: 1.9; }
  .header-right h2.basmala{ font-size: clamp(19px, 4.8vw, 24px); line-height: 1.9; }

  /* bigger tap targets */
  .site-nav a{ padding: 12px 16px; border-radius: 999px; }

  /* extra offset for taller mobile header */
  main.site-content, main.wrap{ margin-top: 140px; }
}

/* ===== Post layout (single, non-duplicated rule) ===== */
@media (max-width: 900px){
  .post-split{ grid-template-columns: 1fr; }
}
/* Arabic header verses */
header .audhu,
header .basmala{
  direction: rtl;
  unicode-bidi: isolate;
  text-align: center;

  /* Arabic-friendly font stack */
  font-family: "Scheherazade New","Amiri","Noto Naskh Arabic",serif;

  line-height: 2.1;
  margin: 6px 0;
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color:#0b3b66;
}

/* Slightly different emphasis & sizing */
header .audhu   { font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; }
header .basmala { font-size: clamp(24px, 3vw, 38px);  font-weight: 700; color:#0a3a80; }

/* Optional: nicer colors in dark mode */
@media (prefers-color-scheme: dark){
  header { background:#0b1220; border-bottom-color:#1f2a37; }
  header .audhu, header .basmala { color:#dbeafe; }
  header .basmala { color:#bfdbfe; }
}
  
  
/* Back to Top */
#backToTop{
  position: fixed; right:16px; bottom:16px; z-index:1100;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--border);
  background: var(--accent); color:#fff; font-size:20px; font-weight:700;
  box-shadow: 0 6px 20px rgba(2, 132, 199, .35);
  cursor:pointer; opacity:0; transform:translateY(12px) scale(.95);
  pointer-events:none; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
#backToTop:hover{ box-shadow: 0 8px 24px rgba(2, 132, 199, .45); }
#backToTop.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  #backToTop{ transition:none; }
}

/* Al-Qur'an logo */
.logo-quran{
  display:flex; align-items:center; gap:10px;
  direction:rtl; flex-direction:row-reverse; /* icon on the right, Arabic flow */
  text-decoration:none; color:#0b3b66;
}
.logo-quran .mark{ width:34px; height:34px; flex:0 0 34px; }
.logo-quran .word{
  font-family:"Reem Kufi","Noto Kufi Arabic",system-ui,sans-serif;
  font-weight:600; letter-spacing:.2px;
  font-size:clamp(20px,2.6vw,28px); line-height:1.2;
}
@media (prefers-color-scheme:dark){
  .logo-quran{ color:#dbeafe; }
}

.container {
  display: flex;
  align-items: center;       /* Vertical center */
  justify-content: flex-end; /* Align to right */
  height: 100px;             /* Just for demo */
  border: 1px solid #ccc;    /* Demo border */
}  

/* Title styles (your classes) */
.word{
  font:700 clamp(18px,2.6vw,28px)/1.2 "Reem Kufi","Noto Kufi Arabic",system-ui,sans-serif;
  color:#0b3b66; margin:0 0 2px;
}
.audhu,.basmala{
  font-family:"Scheherazade New","Amiri","Noto Naskh Arabic",serif;
  margin:0; line-height:1.9; color:#0b3b66;
}
.audhu{  font-size:clamp(16px,2.2vw,24px); font-weight:600; }
.basmala{font-size:clamp(17px,2.4vw,26px); font-weight:700; color:#0a3a80; }

/* Menu (pills) */
nav.site-nav{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
nav.site-nav a{
  font-weight:700; padding:8px 14px; border-radius:999px;
  text-decoration:none; color:#0b3b66; background:#fff; border:1px solid #93c5fd;
}
nav.site-nav a:hover{ background:#e6f1ff; }
nav.site-nav a.active{ background:#0ea5e9; border-color:#0ea5e9; color:#fff; }

/* 👉 Push page content below the fixed header (prevents “cuts”) */
main.wrap{ margin-top: 148px; }           /* desktop/tablet */
@media (max-width: 680px){
  main.wrap{ margin-top: 160px; }         /* phones */
}
@media (max-width: 420px){
  main.wrap{ margin-top: 168px; }         /* very small phones */
}
/* Make "Read More" always visible */
.blog-post a.read-more{
  display:inline-block;
  padding:8px 14px;
  border-radius:10px;
  background:#0ea5e9;           /* visible bg */
  border:1px solid #0ea5e9;
  color:#fff !important;         /* beat global link colors */
  text-decoration:none;
  font-weight:700;
  line-height:1;
}

.blog-post a.read-more:visited{
  color:#fff !important;
}

.blog-post a.read-more:hover{
  background:#0c94d6;           /* darker on hover */
  border-color:#0c94d6;
}

.blog-post a.read-more:focus-visible{
  outline:3px solid #93c5fd;
  outline-offset:2px;
}

/* Fixed header band */
#site-header{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background:#eaf6ff; border-bottom:1px solid #cbd5e1;
}

/* Inside header: stack (title block, then menu) */
#site-header .wrap{
  width:min(1100px,96%); margin:0 auto;
  padding:14px 12px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
}